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

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

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

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.


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

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

1 Like

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

I just added depthTest: true. No change.

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

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


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?

I changes near and far to 0.1 and 3000.

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.

Problem solved.

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

You’re welcome :slight_smile: