threejs: rendering multiple scenes in a single webgl renderer

Question

I am trying to include multiple scene into a single webgl renderer as per code below:

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

I am facing issue where in the last scene object that is passed to the renderer is being painted and the previous one is not. I confirmed it by swapping the above two lines of code. I am newbie to threejs and would like to know if the above can be achieved? and also if you can guide me towards supporting examples (if any).

Thanks!

Solution

The minimal solution you can find here: https://jsfiddle.net/mmalex/sqg0d8vx/

var animate = function() {
    requestAnimationFrame(animate);

    renderer.autoClear = true;

    //render scene1
    renderer.render(scene1, camera);

    //prevent canvas from being erased with next .render call
    renderer.autoClear = false;

    //just render scene2 on top of scene1
    renderer.render(scene2, camera);
};

Comments

[WestLangley]

See stackoverflow.com/questions/12666570/…

[Dustin Silk]

Arg, what was your solution!?

[trusktr]

The objects from both scenes still intersect. How do you make scene2 render on top of scene1 (so it is like two layers)?

[Jmschrack]

insert "renderer.clearDepth();" right before you render the second scene jsfiddle.net/7g3dkuwq