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
Hey, where that logarithmicBuffer should be apply?
renderer.logarithmicDepthBuffer = true