WebGL清除每个setInterval之间

Question

按顺序调用gl.drawArrays时，它会在画布上绘制前一个图形的顶部。但是，当我把它放在setInterval()里面时，它会在重绘之前清除画布。

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

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

每次绘制一个新矩形时擦除画布的代码：

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

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

我正在制作一个涉及实时操作大图像的游戏（如果有任何区别，可以使用phaser.js库进行游戏循环）。我希望能够只重绘图像所需的部分，而不是每个动画周期重绘整个图像。

为什么webgl画布清晰如此？我能保持清除吗？

Answer 1

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

警告：上次我检查为firefox打开它会导致它显着减慢。