hasVertexAlpha causes problems when _unIndexed is used directly

Hi there,

In this playground I am creating an unindexed mesh by setting _unIndexed = true for the same reasons as written in this post.

Somehow, I am seeing the turquoise box even though it is behind the blue one.
image

I am not sure if it is a bug or if I am missing something.

Thanks for any help!

Hello and welcome!!

We added support for direct unindexed with:

customMesh.isUnIndexed = true;

That being said, this is not why you see through the box. This is because the mesh is flagged with vertex alpha making it transparent:
https://www.babylonjs-playground.com/#VKBJN#401

Hi Deltakosh,

thanks a lot for your fast reply.

Good to know that there is isUnIndexed.

I’d like to have one of the cube 100% visible and the other one e.g. 50% but still having only one custom mesh. How would I achieve that?
Somehow, I would have expected that if a mesh hasVertexAlpha but with the max alpha value of 1 would be visually the same as a mesh which hasVertexAlpha=false. Am I wrong?

E.g. in this playground (left in the image) we see the turquoise cube in front of the blue one (for me unexpected), but if we rotate the camera 180° like in this playground (right in the image) we see the turquoise cube in front of the blue (expected).


I feel that it behaves differently depending the view angel.

What am I misunderstanding?
Thanks for your help, much appreciated!

Indeed. When a mesh is flagged as transparent, it does not write to the depth buffer when rendering, leading to potential artifacts, depending on your scene and meshes. See Transparency and How Meshes Are Rendered - Babylon.js Documentation for more details.

In your case, the blue cube is rendered first because it is defined first in the vertex data. So, when it is in front of the turquoise cube as in fig 1, the display is wrong because the turquoise cube being rendered second, it overwrites the blue cube (remember that the depth buffer is not written for transparent objects).

You could try to use facet data sorting (see bottom of previous document), but it only works with indexed meshes…

Not a problem we’ve got you covered.

As @Evgeni_Popov mentioned you are not writing in the depth buffer but you can force it:

https://www.babylonjs-playground.com/#VKBJN#404 (check line line #15)

Thank you @Evgeni_Popov & @Deltakosh for the explanation about not writing into the depth buffer when having an as transparent flagged mesh.

@Deltakosh it looks like that forcing to write into the depth buffer solves the problem only if the alpha value is 1.

I applied your suggestion and added:

var stdMaterial = new BABYLON.StandardMaterial();
stdMaterial.forceDepthWrite = true;
customMesh.material = stdMaterial;

But I feel that in this playground it looks incorrect. Maybe I am still missing something :orangutan:.

Rendering transparent objects has no real global solution (in WebGL anyway), as you can see you can correct some problems with some specific settings but not correct others (or introduce new ones).

There are other methods to deal with transparency like OIT (Order Independent Transparency), but it does not work in all cases either and is heavier on GPU side.

In your case, maybe an indexed mesh + facet sorting could make it work.

I second that :wink:

Thank you both for your help, much appreciated :muscle:!

I will have a look at facetdata - facet-depth-sort.

1 Like