# Multiple render passes using pmndrs/postprocessing library

**URL:** <https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387>\
**Category:** Questions\
**Tags:** render-pass\
**Created:** [October 25, 2023, 10:26am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387 "2023-10-25T10:26:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quis/32/29922_2.png) [@Quis](https://discourse.threejs.org/u/Quis)\
**Post date:** [October 25, 2023, 10:26am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/1 "2023-10-25T10:26:20Z")

</div>

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:

> **[Three.js Postprocessing Multiple RenderPasses - JSFiddle - Code Playground](https://jsfiddle.net/QuisIsHere/cqy9u0Lx/49/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

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:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/6/a6f9b23198605df17f889940426eb1edabc365f5.png)

Second render pass:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/6/260c7f952b194f7f74eba14e278b6550b743ed89.png)

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

---

<div class="post-metadata">

**Author:** ![Quis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quis/32/29922_2.png) [@Quis](https://discourse.threejs.org/u/Quis)\
**Post date:** [October 25, 2023, 11:12am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/2 "2023-10-25T11:12:22Z")

</div>

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

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/e/fe746e1ce45aff3dba87d8484173196166691f54.png)

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.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/7/67a053748b2952a580250a6436217f7ad9d73430.png)

> **[Three.js Postprocessing Multiple RenderPasses - JSFiddle - Code Playground](https://jsfiddle.net/QuisIsHere/cqy9u0Lx/72/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Any ideas?

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [October 28, 2023, 8:54am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/3 "2023-10-28T08:54:46Z")

</div>

Here’s the r3f discord… you can try asking here?: [Poimandres](https://discord.gg/poimandres)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 29, 2023, 7:50pm UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/4 "2023-10-29T19:50:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [October 29, 2023, 10:19pm UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/5 "2023-10-29T22:19:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Quis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quis/32/29922_2.png) [@Quis](https://discourse.threejs.org/u/Quis)\
**Post date:** [November 1, 2023, 1:29pm UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/6 "2023-11-01T13:29:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [November 5, 2023, 4:29am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/7 "2023-11-05T04:29:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Quis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quis/32/29922_2.png) [@Quis](https://discourse.threejs.org/u/Quis)\
**Post date:** [February 9, 2024, 11:24am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/8 "2024-02-09T11:24:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Quis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/quis/32/29922_2.png) [@Quis](https://discourse.threejs.org/u/Quis)\
**Post date:** [February 9, 2024, 11:45am UTC](https://discourse.threejs.org/t/multiple-render-passes-using-pmndrs-postprocessing-library/57387/9 "2024-02-09T11:45:09Z")

</div>

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

> **[Same depth buffer for multiple render passes · pmndrs/postprocessing ·...](https://github.com/pmndrs/postprocessing/discussions/564)**
>
> 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...

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