[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] using the same context with multiple canvases

On Tue, 13 Nov 2012, Gregg Tavares (社~T) wrote:
> On Tue, Nov 13, 2012 at 8:35 AM, Ian Hickson <ian@hixie.ch> wrote:
> > On Sun, 11 Nov 2012, Brandon Jones wrote:
> > > On Nov 11, 2012 10:47 PM, "Ian Hickson" <ian@hixie.ch> wrote:
> > > >
> > > > When would you want one canvas done one way and another a 
> > > > different way, for the same rendering context?
> > >
> > > There's several reasonable explanations for having differing 
> > > properties per-canvas. Consider Gregg's example of a Maya like tool: 
> > > it would be sensible to request an antialiased canvas for the main 
> > > editing view, but for performance reasons request a non-antialiased 
> > > canvas for a texture preview widget.
> >
> > The viewport dimensions are on the context currently, right? Why not 
> > put these on the context as well, and just have the author update them 
> > when they switch canvas?
> There's some clarification needed here about what you are referring to 
> when you say "viewport". In WebGL there is a function. gl.viewport that 
> specifies the affine transformation of x and y from normalized device 
> coordinates to window coordinates and happens to clip vertices (but not 
> pixels).
> The system can not set that automatically because it doesn't know what 
> the user is using it for. The user could have set it explicitly to 
> various values including for rendering to framebuffer objects. Except 
> for initialization the browser can't know when it's appropriate to set. 
> Only the app knows.

Sorry if my terminology was wrong.

There is an output rectangle with dimensions w x h.

There is a WebGL... I don't know, scene graph, which uses some coordinates 
or other.

There has to be some mapping from the coordinate system used in the WebGL, 
to the dimensions of the canvas.

Where is that mapping set?

> > On Mon, 12 Nov 2012, Gregg Tavares (社ç~T¨) wrote:
> > >
> > > How about
> > >
> > >    db = new DrawingBuffer(creatationAttrubites);
> > >
> > > for gl
> > >
> > >    gl.bindDrawingBuffer(db);
> > >
> > > for canvas 2d???
> > >
> > >    ctx.setDrawingBuffer(db);
> >
> > Why have two different APIs?
> We already have 2 apis that don't share a single function name or 
> signature. Each one should do what feels natural for its api.

I prefer to look at it as one API, the Web Platform, which happens to 
support both 2D and 3D graphics.

As a general rule, I don't think it makes sense to have arbitrary 
differences between parts of this platform.

But in any case, I don't think this DrawingBuffer primitive needs to be 
explicit, so the point here is moot.

> > > > Today, when does a WebGLRenderingContext "commit" or "draw" to the 
> > > > currently assigned canvas? Is it just when the event loop spins, 
> > > > or is there an explicit "paint a frame now" method?
> > >
> > > It's currently supposed to be when the current event exits IMO but 
> > > the spec is ambiguous saying something about when it's compositied 
> > > which means it's browser specific if other events come by before 
> > > compositing happens.
> >
> > So you if drawImage() a GL canvas half-way through a script, it draws 
> > the previous image state (as it stood the last time the event loop 
> > span), not the mid-way state like the 2D canvas?
> In the drawImage case you get the latest results including the latest 
> draw commands.

Oh! Then it's exactly like 2D, no?

> The part that's undefined is this
> requestAnimationFrame(renderRectangle);
> setTimeout(renderCircle, 1);
> Whether you see a circle, a rectangle, or a circle and a rectangle is 
> undefined

Sure but that has nothing to do with WebGL or even canvas in general, 
right? That's just a matter of it not being defined which of those two 
callbacks will be invoked first. You could show the same problem using 

> > I'm not a fan of a DrawingBuffer object because it's yet more 
> > indirection, and we have a pile of indirection here already with all 
> > the cross-worker canvas stuff. I could see having the contexts 
> > implicitly have their own drawing buffer while they aren't bound to a 
> > canvas, and having these buffers be reset (along with state, in the 2D 
> > world, though not in GL) when you bind/unbind, but I don't see why 
> > we'd want to explicitly have an object for this.
> We need canvas contents separate from contexts for all the reasons 
> explained in previous posts.

The previous posts explained why a single WebGL context needs to be able 
to paint its state in different configurations on different canvases, as 
well as needing a way to generate off-screen images.

That seems quite compatible with having a drawing buffer per canvas, plus 
a drawing buffer for contexts that aren't assigned to a canvas.

> > If GL doesn't need in-between state (i.e. if drawImage() for GL always 
> > draws the last committed image, not the current state), and if we're 
> > ok with using this model for 2D as well when in a worker, I think the 
> > simplest solution is:
> >
> > - have two ways to get a context: via getContext(), and via a 
> > constructor
> >
> > - the getContext() method is the current method, it's always fixed to 
> > the same canvas it was created from, and can't be moved; drawImage() 
> > in the 2D world gets the current state
> >
> > - the constructor gives you back a context with its own implicit 
> > backing store; you can set its dimensions dynamically using 
> > constructor arguments and can change the dimensions later on the 
> > context itself; this object can be bound to a canvas (or CanvasProxy 
> > for workers) later
> >
> > - when you bind a context to a canvas, it blows away its bitmap (and 
> > state, for 2D, though not for GL), and drawing commands start going to 
> > the canvas. The bitmap is now just the canvas bitmap; drawImage() and, 
> > in 2D, getImageData(), take the last committed image; you can commit 
> > the drawing commands to that bitmap using commit() or spinning the 
> > event loop
> Why should 2D be different than GL?

For consistency with what happens today. GL doesn't blow away state, 2D 
does. Changing this just because the contexts are bound differently would 
just mean that different codepaths get radically different results even 
though they end up doing the same thing.

> Again, this is not a solution for us. If we want to make apps like those 
> linked to above we can't have canvases having their contents blown away 
> when we move the context between them and it makes no sense for us to 
> have a backstore specific to a context.

This seems to directly contradict what you've described before. I'm 

If you have a context that describes the user's 3D designs, and you want 
to draw it once from above in one box, once from the side in another, 
and once without AA at an angle in a third, then what I'm describing seems 
perfect: you create your model in the context, then you bind to canvas 1, 
set your angle and dimensions, paint, bind to canvas 2, repeat, bind to 
canvas 3, repeat. Then when you want to do the next frame, you just do 
that cycle again, and the graphics get nicely replaced.

Where's the problem?

> There's also the problem that blowing away the canvas backstore each 
> time you move the context and having to reset the size of the context's 
> backstore to match the size of the canvas you just attached to means 
> reallocating a very heavy object every time you change canvases.

This kind of thing can be trivially optimised. You don't even really need 
to create the context's backing store until someone does anything with it. 
For the canvases, you never need to recreate the bitmaps, you just use the 
canvas bitmaps that were created with the canvas.

> Yet another reason to keep the storage separate from the context.

Keeping them separate is what would result in more (unnecessary) bitmaps, 
as far as I can tell.

> [no implicit commits for the new contexts]

Sounds good.

Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'