Transparency and Z order with shader

Questions
1

Hi all

I’m trying to display semi transparent objects and to influence the depth (z position) of these objects through the vertex shader.

Here is the Playground : https://www.babylonjs-playground.com/#JY6FFW#16

Setup :
There are 5 scenes (three on top, two on bottom), each one representing the same objects but with different orders. The red rectangle is fully opaque, the green one is semi-transparent. On top scenes, “hasVertexAlpha” propertie of rectangles is set to true. On bottom scenes, it is set to false.

To summarize :
The depth (z coords) specified inside the vertex shader has the expected behavior when “hasVertexAlpha” is set to false, but has no effect at all when “hasVertexAlpha” is set to true.
Problem is, if I disable “hasVertexAlpha”, the semi-transparent rectangle blends with white color instead of fade with the red rectangle and the blue background.

Brett

2

HasVertexAlpha forces the mesh to go into the transparent queue which in turn means the mesh will NOT write to depth buffer.

You can still force the mesh to do it with mesh.forceDepthWrite = true

3

Note that @Deltakosh meant material.forceDepthWrite = true.

Also, the two green rectangles at the bottom have not the right color because they are not flagged as transparents because hasVertexAlpha=false (so alpha blending is disabled) but you still set the alpha component of the vertex color to 0.6 for the green mesh. So, the system will blend it with a default white color instead of the clear color (I don’t know where this white color comes from and if it is possible to change it, but in any case if alpha blending is disabled in your material you should not set alpha values different from 1 as it is probably undefined behaviour to set alpha < 1 when blending is disabled).

4

Thank you both of you. I suspected that the write to depth buffer was disabled at some point, but I wasn’t sure.