# \[SOLVED\] How to invert MeshDepthMaterial to be black-nearest?

**URL:** <https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [November 18, 2018, 11:49pm UTC](https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991 "2018-11-18T23:49:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [November 18, 2018, 11:49pm UTC](https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991/1 "2018-11-18T23:49:01Z")

</div>

Hi all,

my question is rather simple but I cannot seem to find an answer - maybe too obvious.

How do I make my depth plane black-nearest?

```
function plane(){
  var material_plane = new THREE.MeshDepthMaterial();
  var geometry_plane = new THREE.PlaneGeometry(10000,10000);
  var mesh_plane = new THREE.Mesh(geometry_plane, material_plane);
  mesh_plane.rotation.x = -90 * Math.PI/180;
  mesh_plane.position.y = -50;
  scene.add(mesh_plane)
}

```

Thanks!

---

<div class="post-metadata">

**Author:** ![MateuszWis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mateuszwis/32/38322_2.png) [@MateuszWis](https://discourse.threejs.org/u/MateuszWis)\
**Post date:** [November 19, 2018, 11:43am UTC](https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991/2 "2018-11-19T11:43:57Z")

</div>

I believe you have to change depthMaterial fragment shader  
here is the original fragment shader code:

> <https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/depth_frag.glsl>

You can change parts of it with material.onBeforeCompile() method  
here is an example of that method:  
[https://threejs.org/examples/?q=material#webgl\_materials\_modified](https://threejs.org/examples/?q=material#webgl_materials_modified)

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [November 19, 2018, 11:49am UTC](https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991/3 "2018-11-19T11:49:18Z")

</div>

Thanks for your reply. I was hoping for a simpler solution, will give it a shot though.

---

<div class="post-metadata">

**Author:** ![MateuszWis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mateuszwis/32/38322_2.png) [@MateuszWis](https://discourse.threejs.org/u/MateuszWis)\
**Post date:** [November 19, 2018, 11:52am UTC](https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991/4 "2018-11-19T11:52:09Z")

</div>

Try this code:

```
material_plane.onBeforeCompile = function ( shader ) {
  shader.fragmentShader = shader.fragmentShader.replace(
     'vec4 diffuseColor = vec4( 1.0 );',
     'vec4 diffuseColor = vec4( 0.0 );'
  );
};

```

if that didn’t work you can also try this code:

```
material_plane.onBeforeCompile = function (shader) {
  shader.fragmentShader = shader.fragmentShader.replace(
    'gl_FragColor = vec4( vec3( 1.0 - gl_FragCoord.z ), opacity );',
    'gl_FragColor = vec4( vec3( gl_FragCoord.z ), opacity );'
  ).replace(
    'gl_FragColor = packDepthToRGBA( gl_FragCoord.z );',
    'gl_FragColor = packDepthToRGBA( 1.0 - gl_FragCoord.z );'
  );
};
```

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [November 19, 2018, 12:07pm UTC](https://discourse.threejs.org/t/solved-how-to-invert-meshdepthmaterial-to-be-black-nearest/4991/5 "2018-11-19T12:07:27Z")

</div>

Fantastic, the second example works! Thanks!