【WebGL】颜色缓冲区是什么时候被重置的？

如果对WebGL感兴趣，可以点击easy-webgl关注

颜色缓冲区

在 WebGL 渲染管线的最终阶段，经过顶点处理、图元装配、光栅化以及片元处理后，每个片元的颜色值会被写入颜色缓冲区。这些颜色值决定了屏幕上每个像素最终显示的颜色，最终呈现出完整的 3D 场景画面。

如上图，webgl 系统中的绘制操作实际上是在颜色缓冲区中进行绘制的，绘制结束后系统将缓冲区中的内容显示在屏幕上，然后颜色缓冲区就会被重置，其中的内容会丢失。那颜色缓冲区在什么时候会被重置？

Demo1：同步多次调用drawArrays

在下面的代码中，我们先后两次调用gl.drawArrays分别在(0.5, 0.0, 0.0)和(0.3, 0.0, 0.0)处绘制两个红色的点。

js 复制代码

const canvas = document.getElementById('webgl')
const gl = canvas.getContext('webgl')

const vertexShaderSource = `
    attribute vec4 a_Position;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = 10.0;
    }
`;

const fragmentShaderSource = `
    precision mediump float;
    void main(){
        gl_FragColor = vec4(1,0,0,1.0);
    }
`;

const program = initShaders(gl, vertexShaderSource, fragmentShaderSource);
gl.useProgram(program);
const a_Position = gl.getAttribLocation(program, "a_Position");
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);
gl.drawArrays(gl.POINTS, 0, 1);

gl.vertexAttrib3f(a_Position, 0.3, 0.0, 0.0);
gl.drawArrays(gl.POINTS, 0, 1);

这里，我们同步调用 drawArrays，页面显示如下：

Demo2：先同步后宏任务调用drawArrays

在下面的代码中，我们先后调用两次drawArrays方法绘制两个点，然后在定时器中再调用一次绘制一个点。

js 复制代码

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);
gl.drawArrays(gl.POINTS, 0, 1);

gl.vertexAttrib3f(a_Position, 0.3, 0.0, 0.0);
gl.drawArrays(gl.POINTS, 0, 1);

setTimeout(() => {
  gl.vertexAttrib3f(a_Position, 0.0, 0.5, 0.0);
  gl.drawArrays(gl.POINTS, 0, 1);
}, 0);

刷新页面，可以看到先显示绘制黑色的背景，黑色背景有两个红色的点。然后立马绘制白色背景，上面只有一个点，黑色背景一闪而过，页面最终的状态如下：

Demo3：微任务

在下面的代码中，我们先后调用两次drawArrays方法绘制两个点，然后在Promise中再调用一次绘制一个点。

js 复制代码

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);
gl.drawArrays(gl.POINTS, 0, 1);

gl.vertexAttrib3f(a_Position, 0.3, 0.0, 0.0);
gl.drawArrays(gl.POINTS, 0, 1);

Promise.resolve().then((res) => {
  gl.vertexAttrib3f(a_Position, 0.1, 0.0, 0.0);
  gl.drawArrays(gl.POINTS, 0, 1);
});

刷新页面，可以看到三个点是同时绘制出来的，页面最终效果如下：

小结

从上面的示例中，我们可以得出结论，颜色缓冲区大概是在微任务之后，宏任务之前被清空的

如何手动清除颜色缓冲区？

如果需要手动清除颜色缓冲区，可以使用gl.clearColor()函数设置清除颜色，再调用gl.clear(gl.COLOR_BUFFER_BIT)函数，就能将颜色缓冲区的内容全部替换为指定颜色，一般在每次渲染新的一帧画面之前会执行这个操作，以避免之前帧的残留信息影响当前帧的显示。在片元着色器中，通过设置gl_FragColor变量来确定每个片元的颜色值，这些值会被自动写入颜色缓冲区。