MultisampleRenderTarget not working with depthTexture in Firefox

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:

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, except I’m adding a depthTexture. When the depthTexture is present, the right side of the screen goes black:

Is this a Three.js bug, or a Firefox bug? FFox has supported MultisampleRenderTargets since version 51, 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.

You probably hit:

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

2 Likes

Thanks! Works like a charm. My solution was:

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?

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