为什么在遮盖了Alpha的情况下，WebGL画布在第二帧上会变成白色? [英] Why does WebGL canvas turn white on the second frame when alpha is masked?

问题描述

请参见此线程详细信息.

总结，考虑到以下情况:

To summarize, given the following circumstances:

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);

...和标准渲染循环:

...and a standard render loop:

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

...然后我想知道理论上应该是什么预期输出.

...then I would like to know what the expected output should theoretically be.

实际上，我看到第一帧呈现好像没有颜色遮罩，而第二(及后续)帧呈现整个画布不透明的白色.

In actuality, I'm seeing that the first frame renders as if there were no color mask, and the second (and subsequent) frames render the entire canvas opaque white.

请注意，将Alpha级别设置为什么都没有关系:即使渲染的Alpha值非常低，第二帧也总是立即完全变为白色(包括未渲染到的区域).

Note that it doesn't matter what the alpha level is set to: the second frame is always immediately, completely white (including areas that were not rendered to), even if the rendered alpha values are extremely low.

问题:以上操作在第一帧，第二帧和后续帧上的预期结果是什么?另外，是我正在经历预期的结果，还是由于GL驱动程序或WebGL实施中的某些错误?最后，如果这是预期的结果，为什么呢?视频卡上实际发生什么才能产生此结果?

The Question: what is the expected result of the above operations on the first, second, and subsequent frames? Also, is what I am experiencing the expected result, or due to some bug in the GL driver or WebGL implementation? And finally, if it is the expected result, why? What is actually happening on the video card to produce this result?

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

System details: Chrome / Firefox (both) on a MacBook Pro / GeForce 320M / Snow Leopard.

推荐答案

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

WebGL automatically clears the drawing buffer on each frame unless you tell it not to

尝试

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

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

That's potentially slower than letting it clear though since it might have to make a copy of the drawing buffer each frame to preserve it so it has a copy to composite with the rest of the page while you draw new stuff into it. So, it's probably better to call gl.clear inside your render loop. Of course if the effect you were going for was to continually blend stuff into the drawing buffer then you either need to tell it to be preserved like the example above or you need to draw into a texture or renderbuffer using a framebuffer and then render that to the drawing buffer.

这篇关于为什么在遮盖了Alpha的情况下，WebGL画布在第二帧上会变成白色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！