Two meshes distrubing each other when they almost coincide

Using the three.js editor https://threejs.org/editor/

  • create a cube and scale to 100*1*100
  • create another cube and scale to 50*1*50, set position y to 0.1
    So it should looks like this

But when I rotate & scale the scene, something weird happened



image
Could someone explains this?
I assume it’s related to precision limitation?

Yes, that happens because of the limited precision in the depth buffer. If you move the camera further away, the problem gets even more obvious.

1 Like

As @Mugen87 pointed out it is an precision issue of the depth buffer also called z-fighting. By using a logarithmic depth buffer (you can enable in the render options) this issue will be reduced drastically.

2 Likes

@Fyrestar thanks for providing the solution