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 启用此功能会导致它显着变慢。