Using ShaderMaterial to write trivial shader causes rendering z-buffer weirdness

Questions
1

I using ShaderMaterial to write custom shaders. Here is code to visualize the s-t (u-v) texture coordinates on a geometry:

vertex:
varying vec2 vST;
void main() {
vST = uv;
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
}

fragment:
varying vec2 vST;
void main() {
gl_FragColor.rgb = vec3(vST.s, vST.t, 0);
gl_FragColor.a = 1.0;
}

Here is how I configure the ShaderMaterial
const showSTMaterialConfig =
{
uniforms: {},
vertexShader: document.getElementById( ‘show_st_vert’ ).textContent,
fragmentShader: document.getElementById( ‘show_st_frag’ ).textContent,
};

showSTMaterial = new THREE.ShaderMaterial(showSTMaterialConfig);

Below is a frame. The spheres use the showST shader and the grey cylinders are use standard
flat shading.

When I rotate/zoom/pan the rendering is VERY choppy. With lots of z-buffer chatter as it can’t
seem to figure out depth values. When I use ShaderMaterial without any parameters it renders
fine with the default red color.

Can someone help me understand what is going on here? Thanks.

13%20AM

2

Have you tried setting depthTest: true in your shader material?

You would set up your shader material like this:

new THREE.ShaderMaterial({
    uniforms: {
      //Uniforms go here
    },
   //Any other stuff goes here

  //What I think is missing
    depthTest: true
  });
3

But depthTest is set to true by default in the base class Material.

1 Like
4

Any chance to provide a link to the working code example? or jsfiddle, or codepen etc.

5

I just added depthTest: true. No change.

6

Here is a gist with the relevant code. See lines 73 - 81:

7

This is the shader (glsl) source in script tags in the html file:

18%20AM

8

Is your scene really so big that you use 100 000 for the far plane of the camera? What if you use 10000 or even 1000?

9

I changes near and far to 0.1 and 3000.

10

Here is video of the noticable “z fighting”. Ugh. Ugly.
Again, just to be clear. All I am doing is drawing the s-t (u-v) values. I have not set any uniforms. This is a super simple shader. If I remove any configuration to the ShaderMaterial. It looks fine. No z fighting.

11

Problem solved.

It turned out to be my near/far settings. Reducing the extent solved the problem. Thanks for the suggestion prisoner849.

12

You’re welcome :slight_smile: