Faces are disappearing when placed under other transparent objects

Questions
1

Hi!

I have some issues with transparency in my scene. I have a set of meshes that all have to be transparent. If the camera is facing the meshes in a certain direction, the faces of the meshes that are further away from the camera (behind the closest mesh) will suddenly stop rendering. See screenshots:
(Partially) correct rendering:

image
image862×762 41.6 KB

Disappearing faces:
non-transparent
non-transparent1072×531 66.3 KB

I sadly can’t duplicate my code in playground due to company policy regarding the model I’m using, but I tried to replicate the issue as best as I can with simple boxes here: https://playground.babylonjs.com/#KHQENE#69

If you try to pan around a bit you can see that some faces disappear behind boxes that is supposed to be transparent. Any thoughts on how I can solve this?

Here’s a snippet of how I import and set up the materials for the model in my scene:

 const loadCompartmentsScene = async (scene: Scene) => {
    scene.setRenderingOrder(0, undefined, RenderingGroup.backToFrontSortCompare, 
      RenderingGroup.backToFrontSortCompare);
    await SceneLoader.ImportMeshAsync("", "", tankplan6mar22, scene, undefined, ".gltf")
    .then((s) => {
      s.meshes.forEach( mesh => {
        
        if(mesh.material) {
          mesh.material.transparencyMode = 2;
          mesh.material.backFaceCulling = false;
          mesh.material.alphaMode = 2;
          mesh.material.needDepthPrePass = true;
          mesh.material.forceDepthWrite = true;
          mesh.material.separateCullingPass = true;
        }
        mesh.receiveShadows = false;
       })
      
    });
  }
2

Unfortunately, the sorting is at the mesh level not the triangle level so in your case there will always be some weird edge cases.

You could try using https://playground.babylonjs.com/#KHQENE#70 https://playground.babylonjs.com/#KHQENE#70 despite limiting some other effects or post processes.

3

@sebavan thanks for the reply! It appears that by setting scene.useOrderIndependentTransparency = true I am getting closer to good transparency, but there is still some faces that are not acting truly transparent. There is a yellow mesh behind the green meshes that is circled with red in this picture, and as you can see it completely hides the mesh. The green meshes (and the yellow) are completely transparent from the other angle. It does not help to change rendering order.

image
image1022×803 55.9 KB

4

I’m afraid to say this solution is not satisfying as of just now. I however encourage improvements for this (but I won’t use it until then).

I am like you. I have a complex scene with lots of transparency/alpha blending and despite from (I believe) strictly following the rules stated in the doc (no intersection between meshes, backFaceCulling, etc…) I still experience issues (which I will likely post in this forum shortly).
The only way aside of OIT I found is to set the alphaIndex. But then, on a very complex design with lots of levels of transparency and a camera that can look at them from all angles, it’s a nightmare (not to say impossible to set up).
As for your crude PG example, it would work like this I suppose:

But honestly, I have no faen clue how I can make this work in my scene…
The story continues… :thinking:

Edit: Just checking back, even this does not work. When passing the camera over two edges with alpha, you can see the alpha changing :worried: So far, I did not manage to get an understandable and sustainable answer for this issue (but may be it’s just my small brain… or may be there is something to be improved around this?)

5

@CraigFeldspar might have more insights.

6

Maybe you need more passes in the depth peeling process used for OIT :

        scene.useOrderIndependentTransparency = true;
        scene.depthPeelingRenderer.passCount = 15; // might be too big, try to find the right value by trial and error
1 Like
7

Sadly this made no visual changes to my scene, no matter what passCount value I set. Is there any other flags that is mandatory to set for depthPeelingRenderer to go into effect?

8

Not really unfortunately :confused: