Flickering using custom shader appears like z-fighting windows but not on macOS

Questions
, ,
1

Hi all,

I am trying to make a custom fragment shader that colours a mesh according to a pre-defined custom vertex attribute.

The results are fine on MacOS, however when viewed on windows the mesh appears as though it has a z-fighting issue, I have checked the geometry and there are no overlapping faces.

const meshVertIds = [0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,]


    const array = new Float32Array(meshVertIds)
    const attribute = new BufferAttribute(array, 1)
    bufferGeometry.addAttribute("uvAtt", attribute)

fragment shader >>

    precision mediump  float;

    uniform float uTime;
    uniform float uActiveEl;
    uniform float uMouseX;
    uniform float uMix;

    in vec2 vUv;
    in vec3 pos;
    in float vuvAtt;
    out vec4 fragColor;

    void main()
    {
      
      vec4 colourA= vec4(1., 0., 0., 1.);
      vec4 colourB= vec4(1., 1., 0., 1.);

      if(vuvAtt==uActiveEl){
        fragColor=vec4(colourA.rgb, 1.);
      }
      else if (vuvAtt!=uActiveEl)  {
        fragColor=vec4(colourB.rgb, 1.);
    }
  
}

Windows (GTX 3060):

image
image552×689 44.2 KB

Ipad:

Ipad
Ipad3000×4000 366 KB

note(1) I have tried varying scales and clipping plane variations.
note(2) strangly when the active ID is “0” the mesh displays fine, but any other IDs causes flickering:

image
image695×813 8.84 KB

any help would be appreciated, thanks!

threejs version 0.137.5

3

Could be because you are testing if two floating point values equal each other
if(vuvAtt==uActiveEl)
“z-fighting” you are looking at might be noise/errors in representation of vuvAtt and uActiveEl, like 2.000003 vs 1.999995.

Try to make them int or compare them with a margin error, like so:
if(abs(vuvAtt - uActiveEl) < 0.5)

4

Yep works, thanks!