Using WebGLRenderer with logarithmicDepthBufferset option set to true together with ShaderMaterial

Questions
1

I already asked this question on stackoverflow but unfortunately didn’t get an answer solving my problem.

Link to stackoverflow question: https://stackoverflow.com/questions/53391303/using-webglrenderer-with-logarithmicdepthbufferset-option-set-to-true-together-w

Copy of the stackoverflow question:
I use the following ShaderMaterial for my objects in scene. The code below is working. However, if I set the WebGLRenderer option logarithmicDepthBuffer to true, the Material defined below is not displayed correctly.

new THREE.ShaderMaterial({
    uniforms: {
      color1: {
        value: new THREE.Color('#3a0000')
      },
      color2: {
        value: new THREE.Color('#ffa9b0')
      }
    },
    vertexShader: `
    varying vec3 vNormal;
    void main(void){
      vNormal      = normalMatrix * normalize(normal);
      gl_Position  = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }`,

    fragmentShader: `
    uniform vec3 color1;
    uniform vec3 color2;
    varying vec3 vNormal;
    void main(void){
      vec3 view_nv  = normalize(vNormal);
      vec3 nv_color = view_nv * 0.5 + 0.5;
      vec3 c = mix(color1, color2, nv_color.r);
      gl_FragColor  = vec4(c, 1.0);
    }`,
    side: THREE.DoubleSide,
  });

After looking for a solution to this problem, I found the following [SO answer][1]. Summarizing, the solution is to add 4 pieces of code to vertexShader and fragmentShader.

Where exactly do I have to integrate the provided code snippets, i.e. Vertex shader body and Fragment shader body?

I tried various “positions” but I always got WebGL errors.

THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Must have a compiled vertex shader attached. ERROR: 0:63: 'EPSILON' : undeclared identifier

playground: https://codepen.io/anon/pen/gQoaye

If you add the option of logarithmicDepthBuffer to the constructor, you will see that the ShaderMaterial won’t work anymore.

var renderer = new THREE.WebGLRenderer( { logarithmicDepthBuffer: true } );
2

Have a look at this demo: https://jsfiddle.net/f2Lommf5/16068/

It’s not necessary to copy code, instead you can inject shader code via #include statements. You have to include logdepthbuf_pars_vertex, logdepthbuf_vertex in the vertex shader and logdepthbuf_pars_fragment and logdepthbuf_fragment in the fragment shader.

The position of the includes is very important so you might check out the shader code of these chunks.

1 Like