我不明白为什么我在 requestanimationframe 循环内丢失了 readpixel 值?
var pixels = new Uint8Array(12*12*4);
gl.clearColor(0.5, 0.8, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.readPixels(0, 0, 12, 12, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels[0]); //OK 128 !
anim();
function anim() {
var pixels2 = new Uint8Array(12*12*4);
gl.readPixels(0, 0, 12, 12, gl.RGBA, gl.UNSIGNED_BYTE, pixels2);
console.log(pixels2[0]); // STRANGE : 0 ????
requestAnimationFrame(anim);
}
显然,如果我添加
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
在 anim() {...} 中,值为 128。但是如果没有 gl.clear,为什么会有黑色的clear?
最佳答案
因为默认情况下,WebGL 在每次复合操作后都会清除绘图缓冲区。请参阅https://stackoverflow.com/a/26790802/128511
如果您不希望 WebGL 清除绘图缓冲区,则需要将 preserveDrawingBuffer: true
传递给 getContext
const gl = document.querySelector('canvas')
.getContext('webgl', {preserveDrawingBuffer: true});
var pixels = new Uint8Array(12*12*4);
gl.clearColor(0.5, 0.8, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.readPixels(0, 0, 12, 12, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels[0]); //OK 128 !
anim();
function anim() {
var pixels2 = new Uint8Array(12*12*4);
gl.readPixels(0, 0, 12, 12, gl.RGBA, gl.UNSIGNED_BYTE, pixels2);
console.log(pixels2[0]); // STRANGE : 0 ????
requestAnimationFrame(anim);
}
<canvas></canvas>
关于javascript - requestAnimationFrame 、 readpixel 和隐式清除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54947518/