WebGL 在每个 setInterval 之间清除

Question

当 gl.drawArrays 被顺序调用时，它会覆盖 canvas 上先前图形的顶部。但是，当我将它放在 setInterval() 中时，它会在重绘之前清除 canvas。

在彼此之上绘制矩形的代码：

for(var i =0; i < 10; i++) {
    setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
    gl.drawArrays(gl.TRIANGLES, 0, 6); 
}

每次绘制新矩形时擦除 canvas 的代码：

interval = setInterval(() => {
    setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
    gl.drawArrays(gl.TRIANGLES, 0, 6); 
}, 500);

这是包含上述代码的完整 fiddle。

我正在制作一个涉及实时处理大图像的游戏（如果有任何不同，请将 phaser.js 库用于游戏循环）。我希望能够只重绘图像的所需部分，而不是在每个动画周期重绘整个图像。

为什么 webgl canvas 会这样清除？我可以防止它被清除吗？

Answer 1

将第 51 行更改为 var gl = getWebGLContext(document.getElementById("canvas"), {preserveDrawingBuffer: true}); fiddle。

警告：上次我检查过为 firefox 打开它会导致它的运行速度大大降低。

WebGL Clears Between Each setInterval