Material Backfaceculling causes issues with opacity

Hi there,

So I almost spent as much time setting up the repo as trying to solve the issue (almost entire day)
And unfortunately I can’t seem to get it to work in the online playground: https://playground.babylonjs.com/#SYQW69#364

Somehow the appended GLB doesn’t want to take my material.

So I included 2 screenshots of the issue as well. Please not that the playground example is more or less identical to my offline example.

backfaceculling = true

backfaceculling = false

So as you can see the backfaceculling = false creates these facet issues on the model.

Is there anyway to solve this?

Thanks in advance.

Your problem comes from the fact your object is tagged as transparent, as you assign an opacity texture.

In that case, there’s no depth buffer check and faces are displayed in the order they appear in the mesh, leading to visual artifacts.

You can check this forum regarding this issue, there were a number of posts about this in the last months / years.

You can also have a look at Transparency and How Meshes Are Rendered - Babylon.js Documentation.

You can try to use the separateCullingPass to improve the rendering:

https://playground.babylonjs.com/#SYQW69#367

You will still have rendering artifacts, depending on the camera position, however.

You can also try to use facet data sorting (see Use Facet Data - Babylon.js Documentation):

https://playground.babylonjs.com/#SYQW69#368

You should normally call updateFacetData in scene.onBeforeRenderObservable so that the sorting is done each frame in case the camera moves / rotates but for some reason it does not work, so I have commented it. Maybe someone will know why only the first call to updateFacetData works…