Can multiple WebGLRenderers render the same scene?

Question

Is it possible to use two instances of WebGLRenderer, using two Canvass to render the same scene?

var renderer = new THREE.WebGLRenderer({
    canvas: canvas1
});
renderer.setSize(100,100);
var renderer2 = new THREE.WebGLRenderer({
    canvas: canvas2
});
renderer2.setSize(100,100);
var mesh = new THREE.Mesh(
    new THREE.BoxGeometry(100,100,100)
);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera();
camera.position.z = 500;
scene.add(mesh);

function draw(){ 
    //try commenting the first render out
    //it will allow the other renderer to draw
    renderer.render(scene,camera); 
    renderer2.render(scene,camera);
    requestAnimationFrame(draw);
}
draw();

In this fiddle, when I do as above, I can only render on one canvas at a given time. http://jsfiddle.net/ehsanziya/sbdogbLw/1/

Answer 1

Yes, you can have multiple renderers rendering the same scene, provided they each have their own canvas (cf. Multiple WebGLRenderer on a single canvas). An example showing this is Multisampled Renderbuffers. In the example the same scene is rendered with and without antialiasing.

The code used to create the renderers looks like this:

renderer1 = new THREE.WebGLRenderer( { antialias: true } );
renderer1.setPixelRatio( window.devicePixelRatio );
renderer1.setSize( window.innerWidth, window.innerHeight / 2 );
document.body.appendChild( renderer1.domElement );

renderer2 = new THREE.WebGLRenderer();
renderer2.setPixelRatio( window.devicePixelRatio );
renderer2.setSize( window.innerWidth, window.innerHeight / 2 );
document.body.appendChild( renderer2.domElement );

The rendering itself is similarly straightforward:

renderer1.render( scene, camera );
renderer2.render( scene, camera );

Answer 2

No but you can do a solution using viewports like this or viewport and scissor settings like this.

Note I didn't post the code to the first one because it's an uncommon solution. I didn't post the code to the second one because it's already on stack overflow.