Display different scenes sharing resources on multiple canvases

Unfortunately you can not (yet) share resources across canvases. A couple of options

1. Render the different viewports in different parts of the same canvas.

   Example: http://webglsamples.org/multiple-views/multiple-views.html

2. Make a canvas that covers the entire window, use place holder elements to figure out where to draw, use getClientBoundingRect to set the viewport & scissor settings to draw scenes in each element

   Example: Is it possible to enable unbounded number of renderers in THREE.js?

3. Render the scene to an offscreen canvas then draw it into a visible canvases.

   <canvas id="c1"></canvas><canvas id="c2"></canvas><script>var webglCanvas = document.createElement("canvas");var canvas1 = document.getElementById("c1");var ctx1 = canvas1.getContext("2d");var canvas2 = document.getElementById("c1");var ctx2 = canvas1.getContext("2d");

   ... draw scene into webglCanvas from one view...

   // copy scene to canvas1ctx1.drawImage(webglCanvas, 0, 0);

   ... draw scene into webglCanvas from another view...

   // copy scene to canvas2ctx2.drawImage(webglCanvas, 0, 0);

   Here's a live example (note: It's slow on Windows in Chrome26, FF20, Hopefully that will be fixed in future browsers)

4. Use OffscreenCanvas, transferToImageBitmap etc... (note: this feature has not shipped in any browser as of 2018/1/8 but it's available behind a flag on Firefox)

const one = document.getElementById("one").getContext("bitmaprenderer"); const two = document.getElementById("two").getContext("bitmaprenderer");const offscreen = new OffscreenCanvas(256, 256);constr gl = offscreen.getContext('webgl');// ... some drawing for the first canvas using the gl context ...gl.clearColor(1,0,0,1);gl.clear(gl.COLOR_BUFFER_BIT);// Commit rendering to the first canvaslet bitmapOne = offscreen.transferToImageBitmap();one.transferImageBitmap(bitmapOne);// ... some more drawing for the second canvas using the gl context ...gl.clearColor(0,1,0,1);gl.clear(gl.COLOR_BUFFER_BIT);// Commit rendering to the second canvas let bitmapTwo = offscreen.transferToImageBitmap();two.transferImageBitmap(bitmapTwo);

<canvas id="one"></canvas><canvas id="two"></canvas>