CODEWITHSUNDEEP
canvasthree.jstransparencyrenderer
ThanosSar
ThanosSar

Reputation: 542

Draw 2 scenes in the same canvas - three.js

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

Upvotes: 7

Views: 8658

Answers (2)

shrekshao
shrekshao

Reputation: 518

I think a better solution would be to use scissor test. Basically the scissor test will discard any fragments outside the scissor window.

The clear method can become nasty when you use clear color, stencil values etc. 

for ( ... ) {
    // init left, bottom, etc. with viewport info 

    renderer.setViewport( left, bottom, width, height );
    renderer.setScissor( left, bottom, width, height );
    renderer.setScissorTest( true );

    renderer.render(scene[i], camera[i]);
}

Here's a three.js example on multi view ports: link. It's rendering the same scene, but the idea is pretty similiar. It is using scissor test.

Upvotes: 3

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 14

Related Questions