javascript - WebGL:gl.copyTexImage2D 竞争条件

Question

我继承了一些 WebGL 代码，这些代码显示了由竞争条件引起的渲染伪像的迹象。该问题只发生在某些硬件上(Nvidia 专用，但不在 Intel 集成显卡上)并且似乎与 gl.copyTexImage2D 有关。

有问题的代码结构如下:

<draw things>             // render to frame buffer
gl.copyTexImage2D(...);   // copy frame buffer to texture
<draw more things>        // render to frame buffer
<bind texture to uniform> // start using texture
<draw overlays>           // render to frame buffer using data from the texture

不幸的是，绘制的叠加层显示了伪像，表明从帧缓冲区复制的纹理中的数据不正确。同样，这在某些硬件上工作得很好，但在不同的硬件上却失败了。

我可以通过在 gl 之后添加对 gl.flush() (或 gl.finish() 的调用)来解决这个问题.copyTexImage2D(...)。虽然这解决了我的问题，但我仍然想知道我是在查看 WebGL 实现中的错误，还是在我的代码中查看错误。

有什么想法吗？非常感谢!

Answer 1

就 OpenGL 而言(我对 WebGL 的细节不太确定)glCopyTexImage 插入了一个同步点，因此那里不应该不存在竞争条件。但是出于性能原因，无论如何我都没有 glCopyTexImage 。相反，我会准备第二个 FBO 和渲染目标，执行 glBlitFrameBuffer，切换到第二个帧缓冲区并继续在那里渲染。这通常会给您更好的批处理，也很可能会避免您遇到的问题。

当然，您不会使用纹理作为源来渲染到已被选为目标的帧缓冲区。你呢？