opacityMap interfere with rendering of other entities

Help & Support
1

I have a problem where entities with an opacityMap change the rendering of entities behind,

the problem is visible when I change the pitch of my camera angle to be greater than 30, and goes away when the pitch is closer to 0

The entity that is behind, have opacity on its material, so maybe the alpha is added ?

Camera angle below 30

379×531 76 KB

Camera angle above 30

The OpacityMap

The opacityMap is just a canvas, drawn with opacity 0 on the areas I want to mask out,
below is a code snippet of the creation of the material:

        // 1. hide the entire thing
        var canvasMask = Utils.createCanvasWithColor(1024, 1024, "rgba(0, 0, 0, 0)");
        
        // 2. show the text, with padding.
        var ctx = canvasMask.getContext("2d");
            ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
            ctx.fillRect(x-padding, y-padding, objText.width+(padding*2), objText.height+(padding*2));

        
        var texture = Utils.createCanvasTexture(this.app, canvas);
        var mask    = Utils.createCanvasTexture(this.app, canvasMask);


        var material = entity.model.material.clone();
        material.diffuseMap         = texture;
        material.emissiveMap        = texture;
        material.opacityMap         = mask;
        material.blendType          = pc.BLEND_NORMAL;
        material.opacityMapChannel  = "a";
        return material;


// Utils create Canvas texture:
 createCanvasTexture: function(app, canvas){
    
         var texture = new pc.Texture(app.graphicsDevice, {
            format: pc.PIXELFORMAT_R8_G8_B8_A8,
            autoMipmap: true
        });

        texture.setSource(canvas);

         texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
         texture.magFilter = pc.FILTER_LINEAR;
         texture.addressU  = pc.ADDRESS_CLAMP_TO_EDGE;
         texture.addressV  = pc.ADDRESS_CLAMP_TO_EDGE;
        return texture;
    },
2

Try disabling depthWrite on the transparent materials.

3

Thanks for the response

I tryed setting depthWrite:false on the opaque material behind with no change, but when I applied it to the Masked out entity (text labels) I hade some success:

DepthWrite false

depthmap-onmask.PNG372×570 123 KB

So I guess the reason they are opauque now is because they are within the mesh at this viewing angle

4

Transparent objects (anything with non-opaque blending) are sorted back-to-front based on their centers and are drawn after the opaque geometry in such order. This isn’t unique to PlayCanvas, but the way most game engines work. All objects with depthTest are also clipped against what was already drawn with depthWrite.

In your case, if the order of transparent objects suddenly changes, you can try splitting the transparent geometry into smaller pieces, so they can be properly sorted. Just think about which mesh center is closer to the camera at which angle. But don’t do too many pieces, otherwise CPU will choke.

2 Likes
5

Cool, thanks for the explanation, there is a lot of stuff to learn coming from traditional 2d stuff :slight_smile: