Dom-to-image different render material

[erickim]

Hi, everyone.
I’m using dom-to-image library for texture processing. but I got a problem.
It is that letters become transparent.

First Image, Draw a texture in PC World.

Second, Covert div to img using “dom-to-image”.

And, I copied the code what making the texture.
material’s opacity blend mode : alpha.

Ui.prototype.prepareRendering = function() {
    var bubble = this.target.findByName('Bubble');
    this.material = bubble.render.meshInstances[0].material.clone();
    this.material.emissiveMap = new pc.Color(1,1,1,1);
    this.texture = new pc.Texture(this.app.graphicsDevice, {
        format: pc.PIXELFORMAT_RGB8,
        autoMipmap: true
    });

    this.texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
    this.texture.magFilter = pc.FILTER_LINEAR;
    this.texture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    this.texture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
    this.material.emissiveMap = this.texture;
    this.material.opacityMap = this.texture;
    bubble.render.meshInstances[0].material = this.material;
    this.material.update();
};

So, I don’t know anything about texture processing. But I guess opacitymap is problem. aren’t you?
then, What should I do to solve this problem? Tell me something please.

[Leonidas]

Hi @erickim,

That’s interesting, it seems the dom renderer is masking the text to the alpha channel for some reason.

Are you able to share a sample project to take a look at?

[erickim]

Thank you @Leonidas .
The project in the post is a team project and cannot be shared.
Instead, I tried to organize the project as similar as possible.
Here link.
https://playcanvas.com/project/1041469/overview/bubble

[Leonidas]

So it seems the problem was that you were rendering a non transparent PNG (just RGB, no alpha). So at the end the material was reading the black color for transparency (that included the text).

To fix this, update your rendering code to this:

1. Changed the texture pixel format
2. Changed the material opacity channel used to A (alpha).

Ui.prototype.prepareRendering = function () {
    var bubble = this.bubble;
    this.material = bubble.render.meshInstances[0].material.clone();
    this.material.emissiveMap = new pc.Color(1, 1, 1, 1);
    this.texture = new pc.Texture(this.app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: true
    });

    this.texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
    this.texture.magFilter = pc.FILTER_LINEAR;
    this.texture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    this.texture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
    this.material.emissiveMap = this.texture;
    this.material.opacityMap = this.texture;
    this.material.opacityMapChannel = 'a';
    bubble.render.meshInstances[0].material = this.material;
    this.material.update();
};

[erickim]

WOW, Aweseome!
It works just as well as I wanted. Thank you @Leonidas