# ShaderMaterial renders behind MeshStandardShader

**URL:** <https://discourse.threejs.org/t/shadermaterial-renders-behind-meshstandardshader/41890>\
**Category:** Questions\
**Tags:** materials, shaders, geometry\
**Created:** [August 25, 2022, 6:35pm UTC](https://discourse.threejs.org/t/shadermaterial-renders-behind-meshstandardshader/41890 "2022-08-25T18:35:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sotrh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sotrh/32/18276_2.png) [@sotrh](https://discourse.threejs.org/u/sotrh)\
**Post date:** [August 25, 2022, 6:35pm UTC](https://discourse.threejs.org/t/shadermaterial-renders-behind-meshstandardshader/41890/1 "2022-08-25T18:35:07Z")

</div>

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:

```javascript
     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.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 26, 2022, 9:10am UTC](https://discourse.threejs.org/t/shadermaterial-renders-behind-meshstandardshader/41890/2 "2022-08-26T09:10:52Z")

</div>

Could you try reproducing the issue on codepen (you can use [this](https://codepen.io/mjurczyk/pen/OJvybJj) 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.