# Problem with WebGLMultisampleRenderTarget and depthBuffer

**URL:** <https://discourse.threejs.org/t/problem-with-webglmultisamplerendertarget-and-depthbuffer/16305>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [June 17, 2020, 10:43am UTC](https://discourse.threejs.org/t/problem-with-webglmultisamplerendertarget-and-depthbuffer/16305 "2020-06-17T10:43:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincent\_mgdesign](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vincent_mgdesign/32/11744_2.png) [@vincent\_mgdesign](https://discourse.threejs.org/u/vincent_mgdesign)\
**Post date:** [June 17, 2020, 10:43am UTC](https://discourse.threejs.org/t/problem-with-webglmultisamplerendertarget-and-depthbuffer/16305/1 "2020-06-17T10:43:12Z")

</div>

For a project, I use several rendering pass, each of which requires access to the depthBuffer, for custom fog, specific object display, etc.

It works fine with WebGLRenderTarget, but I lose the depthBuffer with WebGLMultisampleRenderTarget after the first pass.

Here’s an example:  
Three: r117.1  
Demo: [https://codepen.io/Vincent\_mgd/pen/PoZbGaQ?editors=0010](https://codepen.io/Vincent_mgd/pen/PoZbGaQ?editors=0010)

A first pass display the depthBuffer of the renderPass in red. (line 177)  
Then a second pass read the depthBuffer of the red pass, and display it in green. (line 183)

If you replace line 161 with 160, the first pass in red work, but the second pass doesn’t work anymore on chrome (93) and Firefox (77)

Did I forget something?

Thank you if you can help me.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 17, 2020, 1:58pm UTC](https://discourse.threejs.org/t/problem-with-webglmultisamplerendertarget-and-depthbuffer/16305/2 "2020-06-17T13:58:10Z")

</div>

When using `WebGLMultisampleRenderTarget` and `DepthTexture`, the type of the depth texture must be `THREE.UnsignedIntType` or `THREE.FloatType`. The default `THREE.UnsignedShortType` does not work. There is actually Chromium bug report for this issue:

[https://bugs.chromium.org/p/chromium/issues/detail?id=1062887](https://bugs.chromium.org/p/chromium/issues/detail?id=1062887)

So doing this:

```auto
renderTarget.depthTexture.type = THREE.UnsignedIntType;

```

removes the WebGL errors in the browser console and the first pass renders now (red cubes). However, your second pass still does not work. The entire screen becomes green. Not sure yet why this happens.

---

<div class="post-metadata">

**Author:** ![vincent\_mgdesign](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vincent_mgdesign/32/11744_2.png) [@vincent\_mgdesign](https://discourse.threejs.org/u/vincent_mgdesign)\
**Post date:** [June 17, 2020, 3:23pm UTC](https://discourse.threejs.org/t/problem-with-webglmultisamplerendertarget-and-depthbuffer/16305/3 "2020-06-17T15:23:02Z")

</div>

Thank you.

I found a workaround by creating a new renderTarget in the Pass() to render the depth, with use of THREE.MeshDepthMaterial() and scene.overrideMaterial. (Seen in Three samples)  
It work with WebGLMultisampleRenderTarget, but it’s not optimal.