Why does WebGL canvas turn white on the second frame when alpha is masked?

问题

Please see this thread for details.

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.

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.

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?

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

回答1:

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

try

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

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.

来源：https://stackoverflow.com/questions/11546642/why-does-webgl-canvas-turn-white-on-the-second-frame-when-alpha-is-masked

标签

opengl-es

WebGL