Weird artifact with ShaderMaterials

Questions
,
1

I am using ShaderMaterial in a couple of components and I get a visual strange artifact when rotating the camera using OrbitControls

As you can see in the video, sometimes it appears the full texture, including the parts the shadergraph is setting the opacity or alpha to 0.

Any ideas?

Thanks!

const material = new THREE.ShaderMaterial({
      uniforms: {
        color: { value: new THREE.Color(0xffffff) }, // Button color
        radius: { value: 1 }, // The radius of the corners, in normalized coordinates (0.0 to 0.5)
        aspect: { value: window.innerWidth / window.innerHeight }, // Aspect ratio of the button
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform vec3 color;
        uniform float borderRadius;
        uniform float aspect;
        varying vec2 vUv;
    
        void main() {
          vec2 p = vUv * 2.0 - 1.0; // Transform vUv to range -1 to 1
          float radius = 1.0;
          float dist = length(max(abs(p) - vec2(1.0 - radius), 0.0));
          float alpha = smoothstep(radius, radius - 0.01, dist);
          
          gl_FragColor = vec4(color * alpha, alpha);
        }
      `,
      transparent: true,
    });

2

renderOrder?

1 Like
3

That’s exactly the solution!

Thanks!

1 Like