Multiple render passes using pmndrs/postprocessing library

Hi there!

I’d like to create a render pipeline using multiple render and effect passes. My use case is a complex game engine which is stacking effects like SSAO and DOF - that is working quite well though. I would like to introduce a second render pass to render transparent objects like smoke and clouds after rendering all solid objects inlcuding a SSAO postprocessing pass.

My problem is: the second render pass is not working as intended (probably because of a wrong setup).

Here is the jsfiddle:

There are 3 spheres two of them in the first render pass and a third one in the second render pass. I would like to use the depth buffer of the first render pass to continue rendering the third sphere after applying the brigthness pass (just an example effect pass).

How can i do that?

First render pass and effect pass:

Second render pass:

My goal ist to get the third sphere rendered on top of the first image (respect all depth informations).

One step closer: if i use the effect pass after the second render pass - the spheres gets combined.


I can use a dummy second effect pass to get the desired result. But there is a problem with the depth buffer - as soon as i use the first brightness effect pass - the depth buffer is gone or messed up for the second render pass.


Any ideas?

Here’s the r3f discord… you can try asking here?: Poimandres

postpro is a vanilla threejs library replacing the old effect composer in three/examples. it has nothing whatsoever to do with r3f. imo this is the perfect place to ask.

unfortunately i know too little about effect passes to answer.

1 Like

It was unanswered for 4 days so I thought op might have better luck asking u folks.

Still not sure whats wrong with the depth buffer. Anybody an idea?

Set renderer.autoClearDepth = false

when you start your stuff…

and renderer.autoClearDepth = true when you are done?

By default, the renderer clears the depth buffer with each .render call. Maybe that’s whats happening?

Sorry for answering late. How can i disable the autoClearDepth inside the composer? During the rendering i only call composer.render().

There was a discussion at the postprocessing repo about the exact same problem:

There is a work around and the problem will be adressed in the next version of the library (v7).