Z order issue when using custom meshes

Questions
1

I don’t get why my little sign does not show above the ground tile.
image
I am using 2 custom meshes with 2 triangles each under certain angles the ordering is fine.
image
But when I rotate the camera sometime the floor hides the sign.
I have checked my numbers many time and I can’t find what is wrong.
Does anyone know how to fix this type of issues.
Is there a way to display the z order of individual pixels or some tools to help me debug this problem?

Anyone wanting to help
You can see the problem on my dev server is here:
https://friends-tau.vercel.app/#l255
clicking the button “Babylon Scene Explorer” on the third tab will make the Babylon explorer appear

image
image895×333 7.71 KB

1 Like
2

Possibly a transparency issue? Transparent Rendering | Babylon.js Documentation

3

What happens when you tell the material to do a depth prepass?

4

Ohh I took a look, its because you are just using planes and have them all on the same zDepth.

That is just zFighting, use zOffset per material or make sure the things that are ontop of the ground tiles to be a a few y units larger.

Everything is a plane sitting on y0, the depth pass has no clue what to do as there is no difference in everything’s depth value

2 Likes
5

Well spotted. This is what it is.

I am learning.

Both meshes have the same y = 0 and z =0. But then within the mesh there are vertices with their own coordinates forming a couple of triangles.

Each pixel of the vertical plane have z = 0.5.
The pixels on the horizontal plane goes z = 0 to 1.

The distance to the camera is widely different isn’t it?
How come are they fighting?

Do I have a zbuffer to turn on?

6

Replying to my own question.
The z-order was wrong.
I changed the script to rotate the camera and nothing was were I expected it.
I have fixed it here:
https://playground.babylonjs.com/#3PEGT0
I am going to change my main game now.

If anyone follow this thread in the future I corrected my game fine.

In my game I was using these two lines
material.diffuseTexture.hasAlpha = true;
material.useAlphaFromDiffuseTexture = true;
It turns out the first line was correct but the second line was messing up my display.
I replaced the second line by
material.useAlphaFromDiffuseTexture = false;
and it all works correctly now.

2 Likes