Alpha Blended Mesh Own Faces Are Disappearing/Culled When Viewed Through Itself

Questions
1

Hello, I am currently have an issue with the fluid/water mesh in my voxel engine.

I have tired pretty much everything I can outline on this page:

Here is what the issue looks like:

image
image
image

When the chunk mesh overlaps with its neighbor it looks fine but when it overlaps with itself it is culling the faces behind creating a kind of grid like pattern.

I am using a custom ShaderMaterial for the mesh and this is how I create it:

  const shaderMaterial = new BABYLON.ShaderMaterial("fluid", scene, "fluid", {
   attributes: [
    "position",
    "normal",
    "cuv3",
    "colors",
    "rgbLightColors",
    "sunLightColors",
   ],
   uniforms: [
    "world",
    "view",
    "viewProjection",
    "worldView",
    "worldMatrix",
    "worldViewProjection",
    "vFogInfos",
    "vFogColor",
    "sunLightLevel",
    "baseLevel",
    "projection",
    "arrayTex",
    "doSun",
    "doRGB",
    "doColor",
    "time",
    ...animData.uniforms,
   ],
   needAlphaBlending: true,
   needAlphaTesting: false,
  });
  shaderMaterial.needDepthPrePass = true;
  shaderMaterial.separateCullingPass = true;
  shaderMaterial.backFaceCulling = false;

And this is the simply fragment shader:

 vec4 rgb =  texture(arrayTex, vec3(vUV.x,vUV.y,animIndex)) ;
  if (rgb.w < 0.5) { 
     discard;
   }
  rgb = getColor(rgb);
  vec4 mixLight = getLight(rgb);
  vec3 finalColor = doFog(mixLight);
  gl_FragColor = vec4(finalColor.rgb , rgb.w );

I have tired pretty much everything I could think of and have been searching the internet for a while for answers.

Does anybody know what is going on and how I could fix it?

2

I guess you tried with backFaceCulling? I am also experiencing issues (not with shaders, still similar). I thought I had it all correct with no transparent mesh intersecting and following all instructions from the above link. I might soon be calling out for help on this one myself.

3

Hello,
Yes I have tried with backFaceCulling on and off. I even tried manually adding the back faces.
As the mesh you are seeing is a custom built mesh.

So maybe it is a common issue?

But I have not found anyone having the same problem as this.
Hopefully someone knows what is going on.

4

Haha. So did I. Just no luck there. I really thought at one point I got a complete understanding of this but it looks like this is still not it. I’m sorry you have to experience the same.

1 Like
5

Yep sure has been frustrating lol. At least good to know I am not the only one though.

I have read the documentation on alpha rendering like 20 times and just tried everything.

I usually come to the form as a last resort and with this I am defiantly at my wits end here.

I will keep checking on the post through out the day. Hopefully someone has an answer.

1 Like
6

I am going to see if I can put together a play ground to show off the issue.
Here is my first attempt just using the Standard Material:

And it looks all good here.
So, maybe it just an issue with the Shader Material or my Fragment Shader?
I will work on a making a playground of that next when I have a bit more time.

7

So, I found out if I turn off needDepthPrePass and just keep separateCullingPass it looks all right.
But at certain angles other meshes appear on top of the mesh.
Maybe I should start a new post about this?

Looks fine here:
image
Mesh appears on top of other one when looking from the bottom up.
image

8

It’s hard to tell without a repro in the Playground, but transparent meshes are sorted according to their center position, so depending on the camera position/rotation, one mesh could be drawn before the other or the other way around.

9

Hello,
Thanks for the reply.
I was able to kind of the solve the problem above by setting forceDepthWrite to true for the one mesh.
I had to turn off alpha blending for the other solid mesh.
And now it seems to be working all right.
But I guess I will keep trying other things to get them all working.

  shaderMaterial.separateCullingPass = true;
  shaderMaterial.backFaceCulling = false;
  shaderMaterial.forceDepthWrite = true;
10

Okay, so I will mark this as the solution in case anyone was wondering.
My problem was that I confused about Alpha Blending vs Alpha Testing.
Alpha Testing you can use on meshes that have textures with an alpha. So, if you have some leaves you can not show the background at all.
Now, for Alpha Blending you use this if you texture is transparent. Like in the case of the liquid.
When using the Alpha Blending you can use these settings:

  shaderMaterial.separateCullingPass = true;
  shaderMaterial.backFaceCulling = false;
  shaderMaterial.forceDepthWrite = true;

And that should fix a lot of problems.

Now for the other meshes that are not the liquid I can use the Alpha Test mode and make sure to set hasAlpha on the texture and discard the alpha pixels in the fragment shader.

Now to get two alpha blended textures working together that I am still not sure about.

Thanks everyone for the help.

Here is the link to the engine if anyone wanted to check it out:
Divine Voxel Engine

Working on Alpha 1.0 right now. Once I fix up some more stuff I will share it with everyone and you can do whatever you want with it!

1 Like
11

Thanks for all the above attempts, debrief and explanations. :smiley: Bookmarked it for reference.
Though the problem for me likely kind of remains, since I have a high number of alpha blended meshes in my scene. Anyways, I will try my best at implementing from your above findings and from what I already know… Next, 'will likely return to this forum and cry for help :sob: :wink:
Meanwhile, have an amazing WE :sunglasses:

1 Like