Is it possible to have two WebGL contexts on the same page?

Question

I am trying to draw the same WebGL scene using two canvases side-by-side. Is it possible? So far I haven't been lucky.

The idea goes as follows:

1. I load my geometry
2. I set up two gl context, one per canvas
3. I call drawElements on the first context passing my geometry
4. I call drawElements on the second context passing my geometry

Results: Only the first invocation is successful. The second context executes gl.clear correctly but no geometry is displayed.

What am I missing? is this a spec constrain? or a limitation in the Firefox and Safari's implementations?

Thanks,

Answer 1

Yes, you can have more than one WebGL context on a page, but each context must manage it's own resources. You cannot create buffers or textures on one context and then use them on the other, so to use this approach if you wanted to render the same scene you would need to load all your resources twice.

That's certainly doable, but it will be very memory intensive (as you might imagine). A better solution would be to create a context that is 2x the width you need and use gl.viewport and gl.scissor to render to half of it for each view of the scene.

Or, make a full viewport size canvas and use the scissor/viewport settings to match other html elements. See this Q&A: How can we have display of same objects in two canvas in webgl?