Display different scenes sharing resources on multiple canvases

Question

I\'m using three.js to create an interactive web application, and I\'ve run into a little stumbling block:

I have a number of canvases contained in draggable divs on

Answer 1

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 canvas1
   ctx1.drawImage(webglCanvas, 0, 0);
   

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

   // copy scene to canvas2
   ctx2.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 canvas
let 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>