Jagged lines where objects intersect. What are they?

Questions
1

What is this phenomenon called?

I’m trying to find a way to fix it but I’m not sure what to call it in my searches :sweat_smile:

The floor plane has hills (so it’s not flat) and the objects on it show these harsh lines where they meet the plane. I assume each jagged edge is a crude, squared-off connection between each floor vertex? It looks like that just needs to be interpolated or something. I found info on Clipping Planes, but they seem to always be flat planes.

Any insight would be much appreciated!

2

I’m not sure if you mean the “aliased edges” of your objects. If so, then what you need is something called “anti-aliasing”. And there are several types of anti-aliasing. The most used on Threejs are “FXAA”, “SMA” and “MSAA” each one with his own technique and impact on performance.

And also. be sure you have “antialias” set to true in your WebGLRender

this.vars.renderer = new THREE.WebGLRenderer( { 
  antialias: true, // <-------------------------------------- this
  canvas: this.vars._ELEMENT 
});

You could also try increasing the resolution, but this has a bigger impact on performance.

1 Like
3

Hey- thanks for the response!

I don’t believe anti-alias is what I’m talking about. These are very harsh “staircase” looking lines that only appear where 2 mesh’s intersect. If you notice the screenshot, you can see these are very pronounced lines spanning many pixels.

They appear to be connecting the mesh vertices in a “stepping” pattern as opposed to a smooth line along the intersecting mesh.

4

To clarify- the rock in the screenshot is on a relatively smooth ground terrain (but not a flat plane like the clipping plane examples), but instead of a smooth line where they intersect, the intersection looks like a chainsaw pattern with 4 dramatic “steps”.