是否可以在同一页面上有两个 WebGL 上下文? [英] Is it possible to have two WebGL contexts on the same page?

问题描述

我正在尝试并排使用两个画布来绘制相同的 WebGL 场景.是否可以?到目前为止，我还不是很幸运.

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.

思路如下:

1. 我加载我的几何体
2. 我设置了两个 gl 上下文，每个画布一个
3. 我在传递我的几何图形的第一个上下文上调用 drawElements
4. 我在传递我的几何图形的第二个上下文中调用 drawElements

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

结果:只有第一次调用成功.第二个上下文正确执行 gl.clear 但没有显示几何图形.

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

我错过了什么?这是规范限制吗?还是 Firefox 和 Safari 的实现有限制?

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

谢谢，

推荐答案

是的，您可以在一个页面上拥有多个 WebGL 上下文，但每个上下文必须管理自己的资源.您不能在一个上下文中创建缓冲区或纹理，然后在另一个上下文中使用它们，因此如果要渲染相同的场景，则使用这种方法需要两次加载所有资源.

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.

这当然是可行的，但它会占用大量内存(如您所想).更好的解决方案是创建一个宽度为所需宽度 2 倍的上下文，并使用 gl.viewport 和 gl.scissor 为场景的每个视图渲染一半.

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.

或者，制作一个完整的视口大小的画布，并使用剪刀/视口设置来匹配其他 html 元素.请参阅此问答:我们如何在 webgl 中的两个画布中显示相同的对象?

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?

这篇关于是否可以在同一页面上有两个 WebGL 上下文?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！