How to avoid intersections with a plane above a plane?

Questions
1

Hello I would like to have a main “ground” plane and other “road” planes above this main plane. When I use orbit control, I see confusion between the planes when the “road” objects are well above “ground” on the Y axis.

Here the minimal code to reproduce the problem :

How to solve this ?

Thanks for your help.

2

If two planes have a distance of zero, use material polygonOffset to counter z-fighting.

1 Like
3

Hi, It’s not the case : “If two planes have a distance of zero”

But how do you do this ?
“use material polygonOffset to counter z-fighting.”

4

I agree with @rrrr_rrrr in that this seems to be a z-fighting issue. However, the ground plane is positioned at

o.ground.position.y = -.7

while the road(s) are positioned at

o.road.dummy[i].position.set(0, .05, i * 20)

so they both do not have the exact same elevation (y).

It looks like you are exhausting the resolution of the z-buffer. If you change the camera’s parameters like this:

camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 500);

the problem goes away.

5

Can you make a JSFiddle (https://jsfiddle.net/) illustrating the problem with two plane only.

6

mesh.renderOrder=-1;

7

I tested with your solutions one by one. To solve this, you have to use a combination of parameters:

In fact, you have to set the camera far to 1 and use a material that uses the polygonOffset…

Here is the codepen summarizing it all:

And here is what helped me get on the right track:

8

Actually that’s not true at all. See the camera setting and position of the planes in this attachment. Z-Fighting.html (5.0 KB)

It’s all about creating an offset between the planes ( GPU or CPU )

1 Like