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…