ShaderMaterial renders behind MeshStandardShader

Questions
, ,
1

I have a custom grid in my scene composed of THREE.Line objects for the x axis and z axis, as well as
THREE.LineSegments for the grid squares. I use a custom shader for the lines to make them look nicer. The problem is that when I have an object in the scene it will always render in front of the grid.

I have the following vertex and fragment shaders:

     const vertexShader = `
      // #include <common>
      // #include <logdepthbuf_pars_vertex>
      varying vec3 vUv;

      void main()
      {
        vUv = position;
        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewPosition;
        // #include <logdepthbuf_vertex>
      }
 `;

const fragmentShader = `
      uniform vec3 color;
      uniform vec3 blendColor;
      uniform vec3 cameraPos;
      varying vec3 vUv;

      void main()
      {
        vec2 projection = vec2(vUv.x, vUv.z);
        vec2 camProjection = vec2(cameraPos.x, cameraPos.z);
        float dist = distance(projection, camProjection);
        float radius = max(abs(cameraPos.y * 20.0), 50.0 * ${one_str});
        float blendFactor = min(dist / radius, 1.0);
        vec3 blended = color + (blendColor - color) * blendFactor;
        gl_FragColor = vec4(blended, 1.0);
      }
`;

I tried adding depthTest: true and depthWrite: true to the object passed to THREE.ShaderMaterial, but they didn’t seem to have any effect. I’ve also tried using #logdepthbug_vertex, but that doesn’t seem to help either.

Any insight would be appreciated.

2

Could you try reproducing the issue on codepen (you can use this as a boilerplate, already has a ShaderMaterial there)?

Depth and render order should be solved by Three - you can try adding boxes around the ShaderMaterial-box in that codepen above for example.