Overlapping meshes

Hi everyone,

Is there a property like forground or background so the crash in the image will not happen?
image
I want to have the green rows on the forground and the red blocks on the background(invisible) when they collide eachother
https://playground.babylonjs.com/#0TM95Q

Hello! The problem you’re encountering is a very very common problem in computer graphics called Z-Fighting. It is caused by the inherent limitations in number representation on computers. You can read a bit more about it here:

Z-fighting - Wikipedia
Z-Fighting - Interactive 3D Graphics - YouTube
Z-Fighting - Interactive 3D Graphics - YouTube

To understand Z-Fighting it also helps understanding how a 3D graphics system represents the distance of objects to the viewer, this is done by a structure called the Z-Buffer:
Z-buffering - Wikipedia

A high level view of this is that, every object in a 3D scene has its distance to the viewer stored in the Z-Buffer, which looks like this:
https://upload.wikimedia.org/wikipedia/commons/4/4e/Z_buffer.svg

You can see in the image that the closer objects appear “darker”, because they have a smaller distance to the viewer, and this results in a darker color (imagine distance as the brightness of the color here). But when two objects occupy the same position, or very close positions, like in the case of the green rows and red blocks, their registered distances are virtually the same to the computer, and it isn’t quite sure what to do, resulting in this “mixing effect”.

There are many different solutions to Z-Fighting, which depend on the user’s necessities, but for your case, a simple and effective solution would be just moving the red blocks a tiny bit so that they go “inside” the green rows. That’s what I did on this playground:

Mesh overlap | Babylon.js Playground (babylonjs.com)

The exact values you will need to move to vary based on the size of the scene and how much overlap there is, so it’s something you usually play with until you achieve a satisfactory result.

I hope this answers your question, but if you need any more explanations I’ll be happy to assist!

1 Like

You can also play with the material zOffset property to not change the position but ensure they would render in the order you prefer :slight_smile:

3 Likes

Totally forgot about zOffset, thanks Seb! xD

3 Likes