7

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
ThanosSar
  • 532
  • 6
  • 20
  • can you post an image that displays the problem? Do both your renderers have `setClearColor( 0x000000, 0 );` – gaitat Mar 25 '15 at 22:52
  • @gaitat : Both renderers have setClearColor( 0x000000, 0) . The image is nothing interesting, I just can't see anything from the 1st scene, I see only the 2nd scene. It is like the 2nd renderer overwrites the canvas. – ThanosSar Mar 25 '15 at 23:15
  • See http://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs/12666937#12666937 – WestLangley Mar 25 '15 at 23:33
  • if you want to do picture in picture why do you want just only one canvas. define a second one at a location on top of the first one. There will be no interaction between them anyway. On the background canvas you draw without transparency and on the top canvas you draw with transparency. – gaitat Mar 25 '15 at 23:34
  • @WestLangley : this seems to be my answer. I will study it and report if it is. – ThanosSar Mar 25 '15 at 23:35
  • @gaitat : are you sure that this is possible? because I tried and still the front canvas was hiding the back, even though it was 'transparent'. if WestLangley's link is not the answer I will retry it, though. – ThanosSar Mar 25 '15 at 23:38
  • @WestLangley : to save time trying it, can you tell me if I am able to draw partly the second scene in the canvas using the renderer.setViewport instruction with this method you sent me? – ThanosSar Mar 25 '15 at 23:41
  • @WestLangley : I tried it myself, it worked. Thanks! – ThanosSar Mar 25 '15 at 23:52

2 Answers2

13

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • yes that's right. not to mention that it is possible of course to use a different camera for the second rendering. – ThanosSar Mar 26 '15 at 10:09
  • 2
    @WestLangley once again you save my ass, you are great man. My debt of gratitude is already reaching the cosmos. Thank you !!! – atom Aug 30 '17 at 11:10
3

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.

shrekshao
  • 388
  • 4
  • 12
  • When I do this, it just draws the last scene, and everything else black. How do I prevent it from drawing everything black in the scissor dropped-fragment area? – trusktr Oct 18 '17 at 15:50
  • @trusktr Hmm.. Try disable autoClear of the renderer. Can be helpful if you put the link to your code. – shrekshao Oct 18 '17 at 19:11