I expect Z-figthing

Questions
1

Hello everybody, I am positioning 2 animated objects of different colors but same animations in the same position. I want to obtain z-fighting artifacts but apparently three.js is too good and it renders correctly only one object (the second one added to the scene).

I have tried to change both materials:

            node.material.depthTest= true,
            node.material.polygonOffset= true,
            node.material.polygonOffsetFactor = 1;
            node.material.polygonOffsetUnits = 1;

I have tried to change the renderer parameters, forcing float precision issues:

const renderer = new THREE.WebGLRenderer({
    precision: 'lowp',  // Low precision
    depth: true,
    canvas: canvas,
    logarithmicDepthBuffer:false, // I have also tried to set it to true
  });

And of course I have tried to change the values of the near and far clip in the hope to create artifacts

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.01,
    100000
);

But nothing worked.

Any ideas about how to trig a consistent z-fight artifact? I know how weird this request may sound :melting_face:

I would like to avoid to slightly move one of the two meshes.

2

Set the near and far planes of your camera frustum very far apart, like 0.01 and 10’000’000.

3

Thanks @vielzutun.ch for your reply. I have tried but it does not work :frowning:

4

Maybe you have to touch the vertices so that the numerical fluctuations of floating point arithmetic become significant for WebGL, but still insignificant for the human eye.

The type of vertex modification is necessary, depends on the faces of your object.

Here is a short demo:

https://codepen.io/boytchev/full/MWNoGNr

image

1 Like
5

If the vertices are identical l, and you’re using the same material type/vertex shader, you will Not get z fighting, by design, and all that is holy im 3d rasterization.

Touch one of the vertices, change one of the materials, chang the vertex order of operations, change the va precision of one material, all increase your chances.

1 Like
6

Well, I clearly remember at least two occasions where I needed to fiddle with poylgon offset to fix a z-fighting issue, but it has been years ago. I have also tried to change material type, but it did not worked. Three.js was showing the last mesh added without any z-figthing, even with a huge camera frustum. @PavelBoytchev, I wanted to avoid to change the position of the object (I did a test at the very beginning moving the second object along one axes, but it did not look good). Changing slightly the rotations gives me an effect more close to the “original” artifacts. I’ll adopt your solution. Thanks!

1 Like
7

I feel like you might be missing that:
If you draw the same triangle twice… with the identical shader, you will not get z fighting, full stop. The math will work out exactly.
It’s only when the triangles vertices are slightly different from each other, or they are transformed with a different operation (which sometimes happens when using different material types/shaders), will the results diverge enough to cause z-fighting, and even then, it’s not guaranteed to always occur from all directions.

1 Like
8

Yes it is clear what you are saying @manthrax, thanks. I remember that I was having z-fighting issue with two object in the exact same position. Then they might have used different materials, or something else, I do not remember the exact constellation, it has been a while.

1 Like