WebGPU 中消失的 FBO 和 RBO

Python微信订餐小程序课程视频

https://edu.youkuaiyun.com/course/detail/36074

Python实战量化交易理财系统

https://edu.youkuaiyun.com/course/detail/35475
目录* 1 WebGL 中的 FBO 与 RBO
+ 1.1 帧缓冲对象（FramebufferObject）
+ 1.2 颜色附件与深度模板附件的真正载体
+ 1.3 FBO/RBO/WebGLTexture 相关方法收集

• 2 WebGPU 中的对等概念
  • 2.1 渲染通道编码器（GPURenderPassEncoder）承担 FBO 的职能
  • 2.2 多目标渲染
  • 2.3 深度附件与模板附件
  • 2.4 非 canvas 的纹理对象作为两种附件的注意点
• 3 读取数据
  • 3.1 从 FBO 中读像素值
  • 3.2 WebGPU 读 GPUTexture 中的数据
• 4 总结

---

OpenGL 体系给图形开发留下了不少的技术积累，其中就有不少的“Buffer”，耳熟能详的就有顶点缓冲对象（VertexbufferObject，VBO），帧缓冲对象（FramebufferObject，FBO）等。

切换到以三大现代图形开发技术体系为基础的 WebGPU 之后，这些经典的缓冲对象就在 API 中“消失了”。其实，它们的职能被更科学地分散到新的 API 去了。

本篇讲一讲 FBO 与 RBO，这两个通常用于离屏渲染逻辑中，以及到了 WebGPU 后为什么没有这两个 API 了（用什么作为了替代）。

1 WebGL 中的 FBO 与 RBO

WebGL 其实更多的角色是一个绘图 API，所以在 gl.drawArrays 函数发出时，必须确定将数据资源画到哪里去。

WebGL 允许 drawArrays 到两个地方中的任意一个：canvas 或 FramebufferObject. 很多资料都有介绍，canvas 有一个默认的帧缓冲，若不显式指定自己创建的帧缓冲对象（或者指定为 null）那就默认绘制到 canvas 的帧缓冲上。

换句话说，只要使用 gl.bindFramebuffer() 函数指定一个自己创建的帧缓冲对象，那么就不会绘制到 canvas 上。

本篇讨论的是 HTMLCanvasElement，不涉及 OffscreenCanvas

1.1 帧缓冲对象（FramebufferObject）

FBO 创建起来简单，它大多数时候就是一个负责点名的头儿，出汗水的都是小弟，也即它下辖的两类附件：

• 颜色附件（在 WebGL1 中有 1 个，在 WebGL 2 可以有16个）
• 深度模板附件（可以只用深度，也可以只用模板，也可以两个一起使用）

关于 MRT 技术（MultiRenderTarget），也就是允许输出到多个颜色附件的技术，WebGL 1.0 使用 gl.getExtension('WEBGL_draw_buffers') 获取扩展来使用；而 WebGL 2.0 原生就支持，所以颜色附件的数量上有所区别。

而这两大类附件则通过如下 API 进行设置：

|  | // 设置 texture 为 0 号颜色附件 |
|  | gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR\_ATTACHMENT0, gl.TEXTURE\_2D, color0Texture, 0) |
|  | // 设置 rbo 为 0 号颜色附件 |
|  | gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR\_ATTACHMENT0, gl.RENDERBUFFER, color0Rbo) |
|  |  |
|  | // 设置 texture 为 仅深度附件 |
|  | gl.framebufferTexture2D(gl.FRAME