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.