是否可能在同一页面上有两个WebGL上下文？
我试图用两张并排的画布来绘制相同的WebGL场景。可能吗？到目前为止我还不走运 其思路如下：是否可能在同一页面上有两个WebGL上下文？,webgl,Webgl,我试图用两张并排的画布来绘制相同的WebGL场景。可能吗？到目前为止我还不走运 其思路如下： 我加载几何图形 我设置了两个glcontext，每个画布一个 我在传递几何体的第一个上下文中调用drawerelements 我在传递几何体的第二个上下文中调用drawerelements 结果: 只有第一次调用成功。第二个上下文正确执行gl。清除，但不显示任何几何图形 我错过了什么？这是规范约束吗？还是Firefox和Safari实现中的限制 谢谢，是的，一个页面上可以有多个WebGL上下文，但每个上
gldrawerelementsdrawerelementsgl。清除，但不显示任何几何图形
我错过了什么？这是规范约束吗？还是Firefox和Safari实现中的限制
谢谢，是的，一个页面上可以有多个WebGL上下文，但每个上下文必须管理自己的资源。不能在一个上下文上创建缓冲区或纹理，然后在另一个上下文上使用它们，因此如果要渲染同一场景，则需要两次加载所有资源
这当然是可行的，但它会占用大量内存（正如您可能想象的那样）。更好的解决方案是创建一个2倍于所需宽度的上下文，并使用gl.viewport和gl.scissor为场景的每个视图渲染一半的上下文
或者，制作一个全视口大小的画布，并使用剪刀/视口设置来匹配其他html元素。请参阅本应引发错误的问答：。正如Toji所说，两个WebGLContext
s不能共享资源。然而，对此有一个建议。我想我们很快就会在WebGL中看到类似的内容。我在一个页面上使用多个WebGL上下文，方法是将同一类分配给应呈现WebGL内容的画布，并在画布内部html中放置特定的内容：
function specific(what) {
switch (what) {
case 'front':
//do something
break;
case 'side':
//do something else
break;
}
}
function webGLStart() {
var canvasArray = document.getElementsByClassName("webGLcanvas");
for (var index = 0; index < canvasArray.length; ++index) {
initWebGlContext();
specific(canvasArray[index].innerHTML);
}
}
</script>
</head>
<body onload="webGLStart();">
<canvas class="webGLcanvas">front</canvas>
<canvas class="webGLcanvas">side</canvas>
</body>
特定功能（什么）{
开关（什么）{
“正面”案例：
//做点什么
打破
案例“侧面”：
//做点别的
打破
}
}
函数webGLStart（）{
var canvasArray=document.getElementsByClassName（“webGLcanvas”）；
对于（变量索引=0；索引
你可以找到一个有效的例子
正如前面的答案（Toji和Chris Broadfoot）所解释的，您需要记住不能在WebGL上下文之间共享资源
编辑：现在可在github上使用。Ooh！美好的我不知道这是在桌面上。这里的扩展建议：仅供参考，该建议已被放弃。我知道在我写它的时候，我也实现了它，在这样做的过程中，我意识到这是一个错误的解决方案。新的解决方案是OffscreenCanvas
，尽管它还没有发布，但yetI也想到了viewport选项。但我喜欢把事情复杂化，看看能做些什么。哈哈。谢谢。我想我应该留下这个解决方案的链接：特别是，还有