2

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/

gman
  • 100,619
  • 31
  • 269
  • 393
zya
  • 830
  • 11
  • 25

2 Answers2

1

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.

Community
  • 1
  • 1
gman
  • 100,619
  • 31
  • 269
  • 393
0

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 WebGL - Multiple Renderers. 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 );
Suma
  • 33,181
  • 16
  • 123
  • 191