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

相关推荐
CCF_NOI.1 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9495 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_5 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路7 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔8 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang8 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔8 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任8 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas