MultisampleRenderTarget not working with depthTexture in Firefox

Questions
1

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:

firefoxBug
firefoxBug854×455 136 KB

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.

2

You probably hit:

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

2 Likes
3

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?

4

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