# MultisampleRenderTarget not working with depthTexture in Firefox

**URL:** <https://discourse.threejs.org/t/multisamplerendertarget-not-working-with-depthtexture-in-firefox/19306>\
**Category:** Questions\
**Tags:** browser-support\
**Created:** [October 1, 2020, 6:46am UTC](https://discourse.threejs.org/t/multisamplerendertarget-not-working-with-depthtexture-in-firefox/19306 "2020-10-01T06:46:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [October 1, 2020, 6:46am UTC](https://discourse.threejs.org/t/multisamplerendertarget-not-working-with-depthtexture-in-firefox/19306/1 "2020-10-01T06:46:35Z")

</div>

I need to render a scene to a `WebGLMultisampleRenderTarget` with a depthTexture to do some DOF, SSAO, and other post-processing effects. So I create the depthTexture, and assign it to the RenderTarget as follows:

```javascript
var depthTex = new THREE.DepthTexture(w, h);

var renderTarget = new THREE.WebGLMultisampleRenderTarget(w, h, {
	format: THREE.RGBFormat,
	depthTexture: depthTex,
	depthBuffer: true
});

```

This works wonderfully in Chrome and the new MS Edge, but it breaks in Firefox. You can see the GIF below, it uses the exact same code [as the examples demo](https://threejs.org/examples/#webgl2_multisampled_renderbuffers), except I’m adding a depthTexture. When the depthTexture is present, the right side of the screen goes black:

 ![firefoxBug](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/df35a207d8b0fb0e7b22db649c03300661a6666c.gif)

Is this a Three.js bug, or a Firefox bug? [FFox has supported MultisampleRenderTargets since version 51](https://caniuse.com/mdn-api_webgl2renderingcontext_renderbufferstoragemultisample), so I’m not sure why this is happening. I’ve added a live demo below, you can see the Firefox bug goes away when you remove `depthTexture` in line 82.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/marquizzo/8n0js3bh/)**

---

<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:** [October 1, 2020, 8:30am UTC](https://discourse.threejs.org/t/multisamplerendertarget-not-working-with-depthtexture-in-firefox/19306/2 "2020-10-01T08:30:36Z")

</div>

You probably hit:

> <https://github.com/mrdoob/three.js/issues/18876>
>
> code
> var depthTexture = new THREE.DepthTexture();
> var parameters = {
> format: THREE.RGBFormat,
> stencilBuffer: false,
> depthBuffer: true,
> depthTexture: depthTexture
> };
> var size = renderer.getDrawingBufferSize( new THREE.Vector2()...

Try to change the depth texture’s type to `THREE.UnsignedIntType` or `THREE.FloatType`.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [October 3, 2020, 6:01am UTC](https://discourse.threejs.org/t/multisamplerendertarget-not-working-with-depthtexture-in-firefox/19306/3 "2020-10-03T06:01:06Z")

</div>

Thanks! Works like a charm. My solution was:

```javascript
if (navigator.userAgent.indexOf("Firefox") >= 0) {
	depthTex.type = THREE.UnsignedIntType;
}

```

So is this technically a Firefox bug? Do you think I should [bring this up to Mozilla](https://bugzilla.mozilla.org/home)?

---

<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:** [October 3, 2020, 3:19pm UTC](https://discourse.threejs.org/t/multisamplerendertarget-not-working-with-depthtexture-in-firefox/19306/4 "2020-10-03T15:19:34Z")

</div>

I would say it’s a good idea to report this to Mozilla.