# How to render two scenes using effectcomposer

**URL:** <https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161>\
**Category:** Questions\
**Tags:** effectcomposer\
**Created:** [August 23, 2021, 3:18am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161 "2021-08-23T03:18:31Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 23, 2021, 3:18am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/1 "2021-08-23T03:18:31Z")

</div>

hello everyone！  
I want to use the effectcomposer to render two scenes, just like using the webgl renderer to achieve the same function, like this

```javascript
renderer.render(scene, camera)
renderer.autoClear = false;
renderer.render(scene2, camera);
renderer.autoClear = true;

```

What should I do?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 23, 2021, 8:57am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/2 "2021-08-23T08:57:30Z")

</div>

> [@Qiumeng12](#):
>
> `renderer.autoClear = false;`

`autoClear` is a flag that you normally set just _once_ after creating the renderer. Why are you using it in this way?

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 23, 2021, 9:03am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/3 "2021-08-23T09:03:43Z")

</div>

> [@Qiumeng12](#):
>
> renderer.autoClear

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/9/d948d09d089fa31b2670cfb9142976d3b120c628.png)  
It is used when rendering two scenes in the editor source code. If I want to render two scenes, what should be the correct method

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 23, 2021, 9:07am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/4 "2021-08-23T09:07:02Z")

</div>

Set it just once and use this pattern:

```javascript
const renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;

function animate() {

    requestAnimationFrame( animate );

    renderer.clear(); // manual clear

    renderer.render(scene, camera);
    renderer.render(scene2, camera);

```

In context of post processing you normally don’t need two render calls. Have you considered to use two instances of `RenderPass`?

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 23, 2021, 9:12am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/5 "2021-08-23T09:12:08Z")

</div>

If one scene needs to use post and the other scene does not need to use post, how should we render two scenes at the same time. 🤔It doesn’t work

```javascript
const renderScene = new RenderPass(scene, camera);

      const bloomPass = new UnrealBloomPass(
        new THREE.Vector2(dom.offsetWidth, dom.offsetHeight),
        1.5,
        0.4,
        0.85
      );

composer = new EffectComposer(renderer);
composer.addPass(renderScene);
composer.addPass(bloomPass);
renderer.autoClear = false;
function animate() {

    requestAnimationFrame( animate );

    renderer.clear(); 

    composer.render();
    renderer.render(scene2, camera);
}

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 23, 2021, 9:39am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/6 "2021-08-23T09:39:45Z")

</div>

@Qiumeng12  
Are you looking for something like selective bloom? [three.js examples](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom_selective)

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 23, 2021, 9:47am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/7 "2021-08-23T09:47:50Z")

</div>

I saw this demo, but all object3d in it are in one scene. I need two scenes to distinguish. Is there any other solution besides this demo?One scene stores my objects and the other stores helpers.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/b/5b99f4464999d6196047688cd790a3dca9ec79fa.jpeg)

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [August 23, 2021, 10:40am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/8 "2021-08-23T10:40:26Z")

</div>

I think the use of layers might be what you’re really after? Instead of rendering two scenes, add two groups or object3d instances to your scene where one contains your meshes and the other your helpers. Using layers you can simply turn a layer on or off depending on what you want to render.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 23, 2021, 10:42am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/9 "2021-08-23T10:42:48Z")

</div>

Use renderer\_1 and renderer\_2

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 24, 2021, 12:46am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/10 "2021-08-24T00:46:33Z")

</div>

If the scene where I store objects needs post-processing, can the use of that group help me solve the problem? 🤔

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 24, 2021, 12:47am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/11 "2021-08-24T00:47:29Z")

</div>

I don’t quite understand what you mean. Can you be more detailed?

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [August 24, 2021, 6:18am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/12 "2021-08-24T06:18:10Z")

</div>

Sure, you don’t need 2 renderers. Just render the first layer first and store that result in a render target. Then you switch the layers and render the second one and do your post processing. Then as a final post processing pass, you simply blend the final results of both layers together

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 24, 2021, 6:44am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/13 "2021-08-24T06:44:36Z")

</div>

OK, I try to use this method to achieve it. I really feel your patient reply. 😆

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 24, 2021, 9:53am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/14 "2021-08-24T09:53:37Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/5/757674f744d793ed914b3fcccfc36aca69e1d1e0.jpeg)

```javascript
    const renderScene = new RenderPass(scene, camera);
    const renderScene2 = new RenderPass(scene2, camera);

    const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
    bloomPass.threshold = params.bloomThreshold;
    bloomPass.strength = params.bloomStrength;
    bloomPass.radius = params.bloomRadius;

    const pixelRatio = renderer.getPixelRatio();

    const fxaaPass = new ShaderPass(FXAAShader);
    fxaaPass.material.uniforms['resolution'].value.x = 1 / (window.innerWidth * pixelRatio);
    fxaaPass.material.uniforms['resolution'].value.y = 1 / (window.innerHeight * pixelRatio);

    const bloomComposer = new EffectComposer(renderer);
    bloomComposer.renderToScreen = false;
    bloomComposer.addPass(renderScene);
    bloomComposer.addPass(bloomPass);

    const bloomComposer2 = new EffectComposer(renderer);
    bloomComposer2.renderToScreen = false;
    bloomComposer2.addPass(renderScene2);
    bloomComposer2.addPass(fxaaPass);

    const finalPass = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: null },
          bloomTexture: { value: bloomComposer.renderTarget2.texture }
        },
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,
        defines: {}
      }), "baseTexture"
    );
    finalPass.needsSwap = true;

    const finalPass2 = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: null },
          bloomTexture: { value: bloomComposer2.renderTarget2.texture }
        },
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,
        defines: {}
      }), "baseTexture"
    );
    finalPass2.needsSwap = true;

    const finalComposer = new EffectComposer(renderer);
    finalComposer.addPass(renderScene)
    finalComposer.addPass(finalPass);
    finalComposer.addPass(finalPass2);
    finalComposer.addPass(fxaaPass);

```

I’m not sure if my approach is reasonable, but it does help me render things in two scenes. What do you think? @Mugen87 @prisoner849 @Harold

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 25, 2021, 2:44am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/15 "2021-08-25T02:44:27Z")

</div>

```javascript
const renderScene = new RenderPass(scene, camera);

let target = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
renderer.clear()
renderer.setRenderTarget(target);
renderer.render(scene2, camera);
renderer.setRenderTarget(null)

bloomComposer.render()//This is the scene that needs post-processing for rendering

const finalPass = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: null },
          bloomTexture: { value: bloomComposer.renderTarget2.texture }
        },
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,
        defines: {}
      }), "baseTexture"
    );
    finalPass.needsSwap = true;
const finalPass2 = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: null },
          bloomTexture: { value: target.texture }
        },
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,
        defines: {}
      }), "baseTexture2"
    );
    finalPass2.needsSwap = true;

const finalComposer = new EffectComposer(renderer);
finalComposer.addPass(renderScene)
finalComposer.addPass(finalPass);
finalComposer.addPass(finalPass2);

finalComposer.render()

```

What I want to know is whether you want to add finalpass and finalpass2 to effectcomposer by mixing the rendering results of two scenes.

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 25, 2021, 2:52am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/16 "2021-08-25T02:52:31Z")

</div>

> [@Harold](#):
>
> Then as a final post processing pass, you simply blend the final results of both layers together

How do I mix the final results of two layers? 😭

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [August 25, 2021, 9:40am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/17 "2021-08-25T09:40:45Z")

</div>

You could use the blend shader for that and use the result of one pass as input. You should be able to find some examples that do the same thing. I know the SSAO pass does this, just to point you in the right direction.

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 25, 2021, 9:49am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/18 "2021-08-25T09:49:04Z")

</div>

I can find too few cases about this 😭

---

<div class="post-metadata">

**Author:** ![Oreo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oreo/32/39183_2.png) [@Oreo](https://discourse.threejs.org/u/Oreo)\
**Post date:** [August 19, 2023, 5:53am UTC](https://discourse.threejs.org/t/how-to-render-two-scenes-using-effectcomposer/29161/19 "2023-08-19T05:53:17Z")

</div>

Hello, I have the same problem as you. Have you solved it?