Draw 2 scenes in the same canvas - three.js

Question

I want to have 2 scenes with a camera added to each and I want them to be painted in the same canvas (but not to divide this canvas). I curently use 2 renderers that paint in the same canvas element, but my problem is that the second renderer overwrites the first so I only see one of the 2 scenes. I tried alpha: true for the renderer and the setClearColor( 0x000000, 0 );but still no the desired result.

I want to achieve a picture in picture effect, but I want the "inside picture" to be transparent (only to paint the objects, not the background).

Is that possible with three.js ?

thanks

Answer 1

If you have two scenes, and you want to create a picture-in-picture effect, you can use the following pattern. First set autoClear:

renderer.autoClear = false; // important!

Then in your render loop, use a pattern like this one:

renderer.clear();
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
renderer.render( scene, camera );

renderer.clearDepth(); // important! clear the depth buffer
renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );
renderer.render( scene2, camera );

three.js r.71