# Rendering multiple scenes with RenderPass

**URL:** <https://discourse.threejs.org/t/rendering-multiple-scenes-with-renderpass/24648>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [March 22, 2021, 7:36pm UTC](https://discourse.threejs.org/t/rendering-multiple-scenes-with-renderpass/24648 "2021-03-22T19:36:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rocket5tim](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rocket5tim/32/15580_2.png) [@rocket5tim](https://discourse.threejs.org/u/rocket5tim)\
**Post date:** [March 22, 2021, 7:36pm UTC](https://discourse.threejs.org/t/rendering-multiple-scenes-with-renderpass/24648/1 "2021-03-22T19:36:30Z")

</div>

Hello, I’m trying to figure out if it’s possible to render 2 scenes using postprocessing so that the objects in one scene are drawn in front of the objects in the other scene while also maintaining per-scene postprocessing.

I’m able to render 2 scenes using the normal render pipeline, here’s an example where you can see that the grey box is always drawn in font of the blue box. [fiddle, normal rendering](https://jsfiddle.net/rocket5tim/zonj392y/24/)

But when I attempt this same setup using postprocessing, I run into issues. Here’s an example where I’m combining the 2 scenes plus BokehPass (DoF) which results in drawing issues. And if I remove the BokehPass then only the foreground scene will draw: [fiddle, postprocess rendering](https://jsfiddle.net/rocket5tim/de1bzom0/33/)

Ultimately what I’m trying to do is have the DoF postprocessing affect _only_ the background scene objects and _not_ the objects in the foreground scene. If this is even possible? I found [this post](https://stackoverflow.com/questions/40548144/multiple-scenes-rendering-using-three-renderpass) which suggests to me that it _is_ possible but I can’t seem to assemble the right bits to make it work.

It could be that I just have a fundamental misunderstanding about how scene layering works. I’ve looked into layers and multiple cameras etc but I _think_ using 2 Scenes and RenderPass’ is the right approach.

---

<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:** [March 22, 2021, 10:02pm UTC](https://discourse.threejs.org/t/rendering-multiple-scenes-with-renderpass/24648/2 "2021-03-22T22:02:54Z")

</div>

i don’t have a plain three example but just watch line 21 and 45 and ignore the rest: [r3f hud - CodeSandbox](https://codesandbox.io/s/stoic-liskov-mo0xrqrj79?file=/src/index.js:1409-1509)

```javascript
gl.autoClear = true
gl.render(scene, camera)

gl.autoClear = false
gl.clearDepth()
gl.render(hudScene, hudCamera)

```

---

<div class="post-metadata">

**Author:** ![rocket5tim](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rocket5tim/32/15580_2.png) [@rocket5tim](https://discourse.threejs.org/u/rocket5tim)\
**Post date:** [March 23, 2021, 6:31pm UTC](https://discourse.threejs.org/t/rendering-multiple-scenes-with-renderpass/24648/3 "2021-03-23T18:31:06Z")

</div>

Thanks, that was exactly the set of clues I was looking for!

The mistake I made is that I was adding the foregroundScene and the backgroundScene to the EffectComposer along with the Bokeh.

Basically I just had to remove the foregroundScene from the composer and change the renderers to update like so:

```
function updateRender() {
  composer.render(0.1);
  renderer.clearDepth();
  renderer.render(fgScene, camera);
}

```

Here’s the updated [fiddle](https://jsfiddle.net/rocket5tim/de1bzom0/46/).