[Public WebGL] using the same context with multiple canvases

Florian Bösch [email protected]
Wed Mar 25 00:46:15 PDT 2015

Just yesterday I ran into that problem again (for a PBR material manager)
where I'd like to show previews of materials as rendered on a sphere.

Since the main canvas is supersampled and fxaa'ed It'd be expensive to
update via readback, so that one is rendered from the context as usual. The
previews are also ssaed, but the thumbnails are only 100x100 pixels, so
each time a user touches any control (slider, color picker etc.) they're
rendered off-screen to an fbo and readback to be put into the thumbnails 2D

I could probably substitute the thumbnails "off-line" canvas 2D with a
second GL canvas for the duration of modification of that material. And
while that may work well, it's not a solution to usecases that require more
than 1-2 canvases to be updated simultaneously (and neither is the readback
and copy in solution).

I run into that sort of problem every couple of months. It's quite annoying.

On Mon, Mar 23, 2015 at 9:29 PM, Aleksandar Rodic <[email protected]>

> The workaround I came up with was a canvas wrapper which migrates the real
> canvas and its GL context at render time. The canvases which are not
> rendering show static stand-in canvas with a copy of the image which was
> last rendered.
> This approach works great if you only update one canvas at a time. Rendering
> to multiple canvases simultaneously causes expensive canvas migrations
> (copying image data).
> Aki
> On Mon, Mar 23, 2015 at 11:04 AM Mitchell Williams <[email protected]>
> wrote:
>> If I understand the issue, it sure would be nice if this worked.
>> I tried to render the scene from a camera to another window (such as when
>> 3DS Max can view a scene in perspective view, and that scene contains a
>> camera which we can see the scene from the camera's view in another window).
>> As an alternative, I rendered the scene as a texture map, but all
>> contained within a single canvas.
>> This would be nice to render a scene to multiple canvases.
>> Mitch
>> On Mon, Mar 23, 2015 at 12:06 AM, Florian Bösch <[email protected]> wrote:
>>> The topic of how to draw to multiple canvases from a single context
>>> (from either the JS main thread or a worker) has not yet been resolved
>>> (correct me if I'm wrong).
>>> A possible resolution seems to be the canvas.setContext method. However,
>>> this seems to to be under specified, as just having a WebGL context is not
>>> sufficient, you also need a drawing buffer which carries attributes such as
>>> stencil, depth, bit-depth, MSAA, etc., and the WebGL 2 specification
>>> doesn't seem to contain anything about how to create either a WebGL 2
>>> context or a drawing buffer on its own (It just specifies that a getContext
>>> call needs to do both).
>>> Regardless of specification status or respective completeness, no
>>> implementation of setContext is available, let alone anything to create
>>> WebGL contexts and drawing buffers on their own to be used.
>>> I'll posit that this isn't an acceptable situation. I'll reiterate that
>>> quite frequently applications that do provide any kind of UI (like
>>> sketchfab, verold, goo, fabric) need to put WebGL driven content into many
>>> places inside that UI that isn't a single viewport. That content might find
>>> itself CSS transformed, composited, scrolled in/out of view, inside an
>>> overflow: scroll container, sandwiched between html elements etc. And that
>>> content might need to be updated at each animation frame.
>>> I'm frankly mystified why a topic we've been talking about for well over
>>> 3 years and have been promised specifications/solutions for, that is widely
>>> recognized as an important issue to solve, is nearly unspecified and
>>> completely unsolved.
>> --
>> Mitch Williams
>> Check out my book "*WebGL Hotshot*" available at:
>> https://www.packtpub.com/web-development/webgl-hotshot
>> 310-809-4836 (outside line)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://khronos.org/pipermail/public_webgl_khronos.org/attachments/20150325/ac1a06b1/attachment.html>

More information about the public_webgl mailing list