javascript - Display different scenes sharing resources on multiple canvases -

i'm using three.js create interactive web application, , i've run little stumbling block:

i have number of canvases contained in draggable divs on page. in each canvas hope display unlit 3d object different material applied (each material using custom shaders). of materials work off same texture (one might blue-tinted, 1 might desaturated, etc.).

the number of canvases on page can vary, expect number commonly reach/exceed 20 canvases, , such sharing resources (particularly large textures) beneficial.

up until have been using multiple renderers, cameras , scenes has worked fine until started trying use same texture in multiple scenes.

most of materials share uniforms , attributes avoid having duplicate information, , of materials stay in sync 1 (e.g. when of materials change on time should change in same way).

i wondering if there way able share textures between scenes/renderers/canvases? when try following error:

webgl: invalid_operation: bindtexture: object not context  

in research trying find solution problem came across suggestion solved creating multiple viewports, not know how display different viewports on different canvases.

tl/dr; 

can either:

• show same scene across different canvases?
• use same uniforms (including texture uniform) across different scenes, renderers and/or canvases?

thanks in advance!

griffork

unfortunately can not (yet) share resources across canvases. couple of options

1. render different viewports in different parts of same canvas.

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

2. make canvas covers entire window, use place holder elements figure out draw, use getclientboundingrect set viewport & scissor settings draw scenes in each element

   example: is possible enable unbounded number of renderers in three.js?

3. render scene offscreen canvas draw 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 webglcanvas 1 view...

   // copy scene canvas1 ctx1.drawimage(webglcanvas, 0, 0); 

   ... draw scene webglcanvas view...

   // copy scene canvas2 ctx2.drawimage(webglcanvas, 0, 0); 

   here's live example (note: it's slow on windows in chrome26, ff20, fixed in future browsers)