three.js: What is more efficient to layer and resolve z-fighting: using polygonOffsetFactor or transparency with depthWrite disabled?

Question

I'm working on a diagramming software using THREE.js. Some of the drawn rectangles are on the same plane, so there's z-fighting, especially, but not limited to, when I move the camera.

I have found two solutions that work for me.

First:

polygonOffset: true,
polygonOffsetUnits: 1,
polygonOffsetFactor: -rectCount

where rectCount is the total number of rectangles drawn (so each next has smaller polygonOffsetFactor, hence is drawn 'on top' of the previous ones).

Second:

transparent: true,
depthWrite: false

with renderOrder = rectCount.

I know that opaque and transparent objects are sorted separately by THREE, so if I use the second approach, I also have to set

transparent: true
opacity: 1

to all other objects that I want to draw on top of the aforementioned rectangles.

The second solution feels cleaner and, TBH, more effective (whereas playing with polygonOffsetFactor occasionally still had z-fighting), but I'm afraid that enabling transparency (even with opacity set to 1) for many objects in the scene will have adverse effects on the rendering efficienty. Let's say I'd like this to be lightweight enough to also run on mobile devices.

I don't know the internals of THREE, but I'm hoping opacity is first checked before any transparency magic is considered.

Question: can I safely use

transparent: true,
opacity: 1

on many objects and it will not badly influence the rendering/CPU/GPU cycles? Or using polygonOffsetFactor is considered more effective for that kind of use case? Thanks!

Answer 1

Depth write false is more reliable for all distances. If you end up needing more depth sorting accuracy for other reasons, look into setting logarithmicDepthBuffer:true in the renderer constructor.