Javascript 多次调用DrawArray以保持渲染缓冲区

我正在尝试使用WebGL制作像赢得纸牌一样的动画。我编写了以下代码来绘制多张卡片

const canvas = document.createElement('canvas');
canvas.width = canvas.height = 400;
document.body.appendChild(canvas);

const gl = canvas.getContext('webgl');
const program = gl.createProgram();
const shaderSources = {
    VERTEX_SHADER: `
    precision highp float;
    attribute vec2 aCoord;
    uniform float uOffset;
    void main(void) {
        gl_Position = vec4(aCoord + vec2(uOffset, 0.0), 0.0, 1.0);
    }
    `,
    FRAGMENT_SHADER: `
    precision highp float;
    void main(void) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
    `
}
for (let i in shaderSources) {
    const shader = gl.createShader(gl[i]);
    gl.shaderSource(shader, shaderSources[i]);
    gl.compileShader(shader);
    gl.attachShader(program, shader);
}
gl.linkProgram(program);
gl.useProgram(program);

const aCoordLocation = gl.getAttribLocation(program, 'aCoord');
const aCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, aCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -0.75, -0.25, -0.25, -0.25, -0.25, 0.25,
    -0.75, -0.25, -0.75, 0.25, -0.25, 0.25
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(aCoordLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, aCoordBuffer);
gl.vertexAttribPointer(aCoordLocation, 2, gl.FLOAT, false, 0, 0);

在那之后，当我运行下面的代码时，两个红色的正方形如预期的那样被绘制出来

gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);

gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 1);
gl.drawArrays(gl.TRIANGLES, 0, 6);

但是，如果一个图形由于动画而延迟，则只渲染一个正方形（第一个正方形消失）

---

当使用时差多次执行drawArray时，是否有办法离开渲染缓冲区？

在

WebGLContextAttributes字典中设置
PreservedDrawingBuffer:true
，作为第二个参数传递给
getContext

请参见
WebGLContextAttributes字典中的设置
preserveDrawingBuffer:true
，作为第二个参数传递给
getContext

看

gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);

setTimeout(() => {
    gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 1);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
});