Multiple renderer vs multiple canvas

webgl-renderer
canvas

#1

Hi there. anyone can explain the difference between using multiple renderer and multiple canvas ?

To render an animation simultaneously with two difference cameras on two canvas, I can use only one renderer and
use drawImage() to two canvas just like the example(https://threejs.org/examples/#webgl_multiple_canvases_grid) does. And, I can also use two renderer bound to two canvas to achieve the same thing.
So my question is what’s the difference between these two methods on performance? memory/cpu costing? When should I use multiple renderer and when should I use the other? there advantages and disadvantages ?


#2

In general, there is always a 1:1 relationship between an instance of WebGLRenderer and its drawing surface, a HTML5 Canvas element. The internal WebGLRenderingContext of WebGLRenderer is used for all basic WebGL API calls and directly connected to a canvas.

That’s also the case in the mentioned example (https://threejs.org/examples/#webgl_multiple_canvases_grid). The trick is to copy/transfer the image data of the renderer’s internal canvas element to the canvas elements of the website. The necessary API call for this operation is listed below:

In most cases, there is no reason to create multiple instances of WebGLRenderer. One instance should be sufficient, even if you are going to render multiple scenes with different cameras. Just keep in mind that you have to perform the mentioned copy operation from the example if you want to display the render results on multiple canvas elements.