The polygon offset is not correct when viewed from the front

Hi,

I use the polygon offset to resolve z-fighting.
However, the polygon offset is not correct when viewed from the front.

Is there a solution to this problem?

The camera uses orthographic projection.

const chip = RotationalMesh.from(outline, cellSize, threshold, BLADE_COLOR, hasValues);

const material = chip.material as THREE.MeshLambertMaterial;
material.polygonOffset = true;
material.depthTest = true;
material.polygonOffsetFactor = -1;
material.polygonOffsetUnits = 1;


Unfortunately, I think that is kinda how polygonOffset works. It adds an artificial z-offset on the object.

I think the best you can hope for is making it small enough that it just barely hides the zfighting problem.

You have to adjust these 2 values… so that the offset is small enough at near depths, and larger at the far depth.

https://threejs.org/docs/#api/en/materials/Material.polygonOffsetFactor

https://threejs.org/docs/#api/en/materials/Material.polygonOffsetUnits

Another couple things to check:

make sure you camera.near and camera.far aren’t super far apart. This can make you lose depth buffer precision…

so near = 0.001 and far = 10000 will give you Lots of z-fighting…

but near = .1 and far = 100 will give you Much less z-fighting <-------

Then you will only need a smaller polygonOffset/Factor to fix the zfighting, and the offsetting issue will be less.

Another option, that has some other tradeoffs but is fast and easy to test, Is to use logarithmicDepthBuffer = true in your renderer init.

https://threejs.org/docs/#api/en/renderers/WebGLRenderer.logarithmicDepthBuffer

This can eliminate/reduce z-fighting but may interfere with some other rendering techniques that aren’t aware of it.

Here’s a demo showing how regular vs logdepth works/looks: three.js webgl - cameras - logarithmic depth buffer

Hi, for z-fightings adding logarithmicDepthBuffer: true to the renderer’s config solves most of my cases, hope it works for you.