Jagged and flickering intersection

I have a plane for ground and a plane for water, and at the part where they interest it’s really jarring and not nice looking. It’s much more noticeable when the camera is moving and zoomed out quite a bit.


Any ideas what’s causing this?

It’s called z-index fighting, keep really small gap between both planes, like 0.0001 of gap or something

mm, I don’t think changing the geometry itself is an option for me because it’s generated from some predefined data and I don’t want to deviate from it.

I found this javascript - How to give Three.js objects a z-index without setting their z-coordinate? - Stack Overflow and have tried messing with the depthTest and renderOrder properties but still no luck, unfortunately

Fixed it! Adding logarithmicDepthBuffer: true to the renderer’s config solves it perfectly