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.