Re: [w3ctag/design-reviews] Review OffscreenCanvas, including ImageBitmapRenderingContext (#141)

I'm not sure if this belongs here but I don't know where else to post it sooo...

I'm hoping OffscreenCanvas allows one WebGL context to be used to efficiently update multiple canvases and it's not clear to me how that is solved in the current proposal or if it's even supposed to.

MDN lists code like this as the way to draw to multiple canvases

```
var one = document.getElementById("one").getContext("bitmaprenderer"); 
var two = document.getElementById("two").getContext("bitmaprenderer");

var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext('webgl');

// ... some drawing for the first canvas using the gl context ...

// Commit rendering to the first canvas
var bitmapOne = offscreen.transferToImageBitmap();
one.transferImageBitmap(bitmapOne);

// ... some more drawing for the second canvas using the gl context ...

// Commit rendering to the second canvas 
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferImageBitmap(bitmapTwo);
```

But that seems likely to be super inefficient unless I'm missing something. 

In order to be able to draw to multiple canvases following the MDN style API you end up needing to set the size your rendering to on each switch. In other world you'd have to do this

```
offscreen.width = widthOfOne;       // EXPENSIVE
offscreen.height = heightOfOne;    // EXPENSIVE
renderSceneForOne();
var bitmapOne = offscreen.transferToImageBitmap();
one.transferImageBitmap(bitmapOne);

offscreen.width = widthOfTwo;       // EXPENSIVE
offscreen.height = heightOfTwo;    // EXPENSIVE
renderSceneForTwo();
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferImageBitmap(bitmapTwo);
```

Those are expensive because you're reallocating the backbuffer once per bitmap per frame.

It seems like what you really want is each `bitmaprenderer` to keep 2 drawing buffers (like WebGL canvas does) and then attach the offscreen context to the drawingBuffer of any bitmaprenderer. That way there is no allocation. Each bitmap renderer has it's 2 buffers, the buffer being composited and the buffer being drawn to and you just need a way to attach context to that bitmaprenderer's drawingbuffer. (which internally is effectively just a call to `gl.bindFramebuffer`

Am I missing something? It seems like the current API isn't really designed to be used efficiently with multiple canvases.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/141#issuecomment-385271699