Same depth buffer for multiple render passes

[yfunk]

I'm trying to render part of my scene, apply post-processing effects to it, and then render the rest of the scene without any effects.

This works fine as long as I clear the depth buffer before the second render pass, but I don't want to render the objects on top of everything else. I want the second pass to honor the depth information from the first pass to render the full scene with matching depth. However, simply not clearing the depth buffer between the passes results in weird artifacts (simplified demo)

I did some investigating into the issue and narrowed it down to a pass that requires a buffer swap (like the EffectPass in the demo) being used in between the two render passes. If the two render passes are consecutive, or the passes in between don't require a buffer swap, everything works as expected. I'm not sure what exact part of the swap causes this, but it definitively messes with the depth buffer in some way.

Is there any way to preserve the depth information between two render passes and achieve what I'm trying to?

[yfunk]

I was able to get this working by adding a SwapPass, that simply renders the inputBuffer to the outputBuffer and then swap them, after the EffectPass.

IIRC, there was an issue about a quirk with EffectComposer where the buffer swap wouldn't actually swap the depth buffers of the two internal render targets. If this is the case, I assume my hacky solution results in the inputBuffer for the second RenderPass being the one with the correct depth information and therefore rendering as expected.

[QuisMagni]

Hey - i've exact the same problem. Could you provide more details of your solution? Where is your SwapPass taking place - my guess would be after the first RenderPass?

Could you provide a codesandbox devbox for better understanding of your hacky solution?

[QuisMagni]

Here is my setup with the same problem as your description: https://jsfiddle.net/QuisIsHere/cqy9u0Lx/72/

[yfunk]

The SwapPass has to be after the first EffectPass. This ensures the second RenderPass renders to the same internal WebGLRenderTarget as the first one and thereby uses the same depth information.

Your pipeline should look something like this:

• renderPass1 (renders to renderTarget1, no needsSwap so next pass will also use renderTarget1)
• effectPass1 (renders to renderTarget1, has needsSwap so next pass will use renderTarget2)
• swapPass (renders to renderTarget2, has needsSwap so next pass will use renderTarget1)
• renderPass2 (renders to renderTarget1, same as renderPass1)

Here's an updated version of my original demo.

[QuisMagni]

Awesome! Thank you!

[vanruesc]

This is one of the pipeline issues in postprocessing v6 (#225) which will be fixed in v7. This use case (GeometryPass > EffectPass > GeometryPass) should already work in the v7 alpha release, but I haven't tested that yet.