【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变量来确定每个片元的颜色值,这些值会被自动写入颜色缓冲区。

相关推荐
qiyue772 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人6 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD8 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟9 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire9 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH10 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_10 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
断竿散人11 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
肖魏眸13 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶13 分钟前
VUE带你乘风破浪~
前端·vue.js