Problem with WebGLMultisampleRenderTarget and depthBuffer

Questions
1

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

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.

2

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

So doing this:

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.

3

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.