[SOLVED] Problem with transparent textures (planes are not sorted correctly)

Two planes that use a material with a texture that has translucency pixels. If the planes are close together, the back plane doesn’t render where the front plane overlaps it with its transparent pixels. It all depends on the distance between the planes and camera angle. Is there any solution? I need to keep the planes close together (something between 0.01 - 0.1 on Z axis)

If I enable Alpha To Coverage, that will solve the problem. But this solution will only work in WebGL 2.

Please see the pictures which explain the problem.

Hi,
You can play around with the alpha test to fix this issue on Webgl 1.0, I get the correct rendering order with a value of 0.044

https://playcanvas.com/editor/scene/1331789

Hi, thanks. Yes, the alphaTest property can sometimes solve the problem, but in many cases (different camera angle, glow around the opaque pixels) does not or it leads to very sharp edges. The problem seems to be how the engine sorts meshes.

The engine does a distance to camera check with the AABB so it has trouble with long deep planes on top of each other. There’s not a an easy solution here beyond putting them on different layers

1 Like

Thanks. I’ve managed to fix the problem. I placed the planes to a new layer with manual sort mode and I use mesh.drawOrder property. This fixed my problem.

1 Like