Question

我正在尝试使用两个画布并排绘制相同的WebGL场景。可能吗？到目前为止，我还不幸运。

这个想法如下：

我加载了几何
我设置了两个gl上下文，每个画布一个
我在传递几何体的第一个上下文中调用drawElements
我在通过我的几何体的第二个上下文中调用drawElements

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

我错过了什么？这是一个规范约束？或Firefox和Safari实现的限制？

谢谢，

Answer 1

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

这肯定是可行的，但它会非常耗费内存（正如您可能想象的那样）。更好的解决方案是创建一个宽度是所需宽度的2倍的上下文，并使用gl.viewport和gl.scissor为场景的每个视图渲染一半。

或者，制作一个完整的视口大小画布，并使用剪刀/视口设置来匹配其他html元素。请参阅此问答：How can we have display of same objects in two canvas in webgl?

Answer 2

那应该抛出一个错误。正如Toji所说，两个WebGLContext无法共享资源。但是，有一个提议。 Check here。我怀疑我们很快就会在WebGL中看到类似的内容。

Answer 3

我在单个页面上使用多个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>

您可以找到一个有效的例子here。

正如之前的答案（Toji和Chris Broadfoot）解释的那样，您需要记住，您无法在WebGL上下文之间共享资源。

编辑：code现在可以在github上找到。

是否可以在同一页面上有两个WebGL上下文？

3 个答案: