Material Backfaceculling causes issues with opacity

Questions
1

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

image
image1603×1751 178 KB

backfaceculling = false

image
image1763×1764 392 KB

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

Is there anyway to solve this?

Thanks in advance.

2

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…

3

You should normally call updateFacetDatainscene.onBeforeRenderObservableso 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 toupdateFacetData works…

You can solve this problem by transferring the camera position

Example:

I have a problem when applying this method to a character with animation. This method practically does not work. To solve this problem, I tried to use mesh.computeBonesUsingShaders. But in combining these two approaches, the light breaks.
A little later I will try to find a suitable model to make an example of this