[Public WebGL] using the same context with multiple canvases

Gregg Tavares (社用) [email protected]
Tue Dec 18 23:36:47 PST 2012


Let me try to be clearer with a more concrete proposal.

Canvas and CanvasProxy is great. You pass a CanvasProxy to a worker.
You now have some object with some loose connection to the canvas in the
page.

This is what i think I would be a good and consistent api

CanvasProxy has the same API as Canvas (minus the HTMLElement parts)

that includes

   getContext
   toDataURL

and being able to pass one to CanvasRenderingContext::drawImage,
WebGLRenderingContext::teximage2D etc...

For the simple case that works just like the current API. You pass a
CanvasProxy to the worker and the call getContext on it (with optional
creation parameters just like getContext today)

For multiple canvases with 1 context you use the Drawingbuffer method (pick
name) both in and out of workers.

main page JS example

   var canvas1 = document.createElement("canvas1");
   var canvas2 = document.createElement("canvas2");

   var db1 = new Drawingbuffer({..params..};
   var db2 = new Drawingbuffer({..params..};

   canvas1.setDrawingbuffer(db1);
   canvas2.setDrawingbuffer(db2);

   var gl = new WebGLRenderingContext();
   gl.bindDrawingbuffer(db1);
   gl.drawXXX();
   g.bindDrawingbuffer(db2);
   gl.drawXXX();

worker example with Canvases from main page

   var proxy1 = .... // some CanvasProxy passed from the page
   var proxy2 = .... // some CanvasProxy passed from the page

   var db1 = new Drawingbuffer({..params..};
   var db2 = new Drawingbuffer({..params..};

   proxy1.setDrawingbuffer(db1);
   proxy2.setDrawingbuffer(db2);

   var gl = new WebGLRenderingContext();
   gl.bindDrawingbuffer(db1);
   gl.drawXXX();
   g.bindDrawingbuffer(db2);
   gl.drawXXX();

some worker with no canvaes

   var db1 = new Drawingbuffer({..params..};
   var db2 = new Drawingbuffer({..params..};

   var gl = new WebGLRenderingContext();
   gl.bindDrawingbuffer(db1);
   gl.drawXXX();
   g.bindDrawingbuffer(db2);
   gl.drawXXX();

Ideally these would all work with canvas2d as well.
There are examples of libraries that can switch renderers
Three.js <https://github.com/mrdoob/three.js/> comes to mind. There are
also examples of libraries
that emulate canvas 2d on WebGL to get extra benefits
(like being able to apply special effects)
webgl-2d.js<https://github.com/corbanbrook/webgl-2d>.
It just
seems like it would be really nice if they could treat all this
stuff the same regardless of 2d or WebGL context.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://khronos.org/pipermail/public_webgl_khronos.org/attachments/20121219/8a23b04c/attachment.html>


More information about the public_webgl mailing list