opengl-es - 当 Alpha 被屏蔽时，为什么 WebGL Canvas 在第二帧上会变成白色？

Question

请参阅this thread了解详情。

总结一下，考虑到以下情况:

gl = canvas.getContext('experimental-webgl');
gl.clearColor(0, 0, 0, 1);
gl.colorMask(1, 1, 1, 0);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);

...和标准渲染循环:

function doRender() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  // render stuff, and request another frame
  requestAnimationFrame(doRender);
}

...那么我想知道理论上的预期输出应该是多少。

实际上，我看到第一帧渲染就像没有颜色 mask ，第二个(及后续)帧渲染整个 Canvas 不透明白色>.

请注意，Alpha 级别设置为多少并不重要:第二帧总是立即、完全白色(包括未渲染的区域)，即使渲染的 Alpha 值极低。

问题:上述操作对第一帧、第二帧和后续帧的预期结果是什么？另外，我遇​​到的结果是预期的结果，还是由于 GL 驱动程序或 WebGL 实现中的一些错误？最后，如果这是预期的结果，为什么？显卡上到底发生了什么来产生这个结果？

系统详细信息:MacBook Pro/GeForce 320M/Snow Leopard 上的 Chrome/Firefox(两者)。

Answer 1

WebGL 会自动清除每一帧上的绘图缓冲区，除非您告诉它不要这样做

尝试

gl = canvas.getContext('experimental-webgl', {
   preserveDrawingBuffer: true
});

这可能比让它清除要慢，因为它可能必须在每个帧中复制绘图缓冲区来保留它，这样当您在其中绘制新内容时，它就有一个副本可以与页面的其余部分合成。因此，最好在渲染循环中调用 gl.clear 。当然，如果您想要的效果是不断地将内容混合到绘图缓冲区中，那么您要么需要像上面的示例一样告诉它要保留，要么需要使用帧缓冲区绘制到纹理或渲染缓冲区中，然后将其渲染到绘图缓冲区。