Issue with custom shapes rendering

Bugs
1

Hello Babylon community,

I run into an issue with rendering custom shapes, some faces in the back are drawn in front of the faces which are closer from the camera.
I can fix this issue by adding a material and set the property “needDepthPrePass” to true but this cause some serious drop down on FPS side.
Or by set the mesh property “hasVertexAlpha” to false with does not affect the FPS but in my case I need to set it to true.

Here we can see the issue:
2020-02-14_issue_2
2020-02-14_issue

Here we can see a proper rendering with “hasVertexAlpha” set to false:
2020-02-14_render

And here you can find a playground that reproduce the issue
https://playground.babylonjs.com/#NXRT8H

PS: to see the rendering as I expect, set:

  • “mat1.needDepthPrePass = false;” to true (line 21)
  • or “shapeInScene.hasVertexAlpha = true” to false (line 57)
2

That’s the same problem than here: Have only certain meshes visibile through transparency?

Why not using a material without alpha for the pieces that don’t need transparency?

https://playground.babylonjs.com/#NXRT8H#1

Alternatively, instead of enduring the penalty for needDepthPrePass = true you can simply set mat1.forceDepthWrite = true:

https://playground.babylonjs.com/#NXRT8H#2

3

Yes, thank you for the fast and good answer and sorry for the duplicate.
Set the property forceDepthWrite to true has solved my problem.
But I have an other issue, a bit of context first:
For this project I need to add transparency either on a part of the shape or on its entirety, that’s why I set the color this way:
shapeInScene.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors, true);
And a shape can have an other shape inside and in this situation I got an overlapping (I believe that’s the name, I’m not sure)
Not easy to explain but when I have a shape with transparency (alpha >0 && <1) with an invible shape inside (alpha=0) I have this issue.
Picture of my problem:
2020-02-14_overlapping

In blue the shape supposed to be totally transparent like above:
2020-02-14_overlapping_2

So when the blue shape is not fully invisible (alpha > 0) I can understand that the engine doesn’t really know which one to draw first because the shapes have the same position and size but when alpha is set to 0 it seems that the engine still try to draw it right? But it shouldn’t do that?

playground