WebGPU 中消失的 FBO 和 RBO
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.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0)
// 设置 rbo 为 深度模板附件(需要 WebGL2 或 WEBGL_depth_texture)
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, depthStencilRbo)
实际上,在需要进行 MRT 时,gl.COLOR_ATTACHMENT0
、gl.COLOR_ATTACHMENT1
... 这些属性只是一个数字,可以通过计算属性进行颜色附件的位置索引,也可以直接使用明确的数字代替:
console.log(gl.COLOR_ATTACHMENT0) // 36064
console.log(gl.COLOR_ATTACHMENT1) // 36065
let i = 1
console.log(gl[`COLOR_ATTACHMENT${i}`]) // 36065
1.2 颜色附件与深度模板附件的真正载体
颜色附件与深度模板附件是需要明确指定数据载体的。WebGL 若改将绘图结果绘制到非 canvas 的 FBO,那么就需要明确指定具体画在哪。
如 1.1 小节的示例代码所示,每个附件都可以选择如下二者之一作为真正的数据载体容器:
- 渲染缓冲对象(
WebGLRenderbuffer
) - 纹理对象(
WebGLTexture
)
有前辈在博客中指出,渲染缓冲对象会比纹理对象稍好,但是要具体问题具体分析。
实际上,在大多数现代 GPU 以及显卡驱动程序上,这些性能差异没那么重要。
简单的说,如果离屏绘制的结果不需要再进行下一个绘制中作为纹理贴图使用,用 RBO 就可以,因为只有纹理对象能向着色器传递。
关于 RBO 和纹理作为两类附件的区别的资料就没那么多了,而且这篇主要是比对 WebGL 和 WebGPU 二者的不同,就不再展开了。
1.3 FBO/RBO/WebGLTexture 相关方法收集
gl.framebufferTexture2D(gl.FRAMEBUFFER, <attachment_type>, <texture_type>, <texture>, <mip_level>)
:将 WebGLTexture 关联到 FBO 的某个附件上gl.framebufferRenderbuffer(gl.FRAMEBUFFER, <attachment_type>, gl.RENDERBUFFER, <rbo>)
:将 RBO 关联到 FBO 的某个附件上gl.bindFramebuffer(gl.FRAMEBUFFER, <fbo | null>)
:设置帧缓冲对象为当前渲染目标gl.bindRenderbuffer(gl.RENDERBUFFER, <rbo>)
:绑定<rbo>
为当前的 RBOgl.renderbufferStorage(gl.RENDERBUFFER, <rbo_format>, width, height)
:设置当前绑定的 RBO 的数据格式以及长宽
下面是三个创建的方法:
gl.createFramebuffer()
gl.createRenderbuffer()
gl.createTexture()
顺带回顾一下纹理的参数设置、纹理绑定与数据传递函数:
gl.texParameteri()
:设置当前绑定的纹理对象的参数gl.bindTexture()
:绑定纹理对象为当前作用纹理gl.texImage2D()
:向当前绑定的纹理对象传递数据,最后一个参数即数据
2 WebGPU 中的对等概念
WebGPU 已经没有 WebGLFramebuffer
和 WebGLRenderbuffer
这种类似的 API 了,也就是说,你找不到 WebGPUFramebuffer
和 WebGPURenderbuffer
这俩类。
但是,gl.drawArray
的对等操作还是有的,那就是渲染通道编码器(令其为 renderPassEncoder)发出的 renderPassEncoder.draw
动作。
2.1 渲染通道编码器(GPURenderPassEncoder)承担 FBO 的职能
WebGPU 的绘制目标在哪呢?由于 WebGPU 与 canvas 元素不是强关联的,所以必须显式指定绘制到哪里去。
通过学习可编程通道以及指令编码等概念,了解到 WebGPU 是通过一些指令缓冲来向 GPU 传递“我将要干啥”的信息的,而指令缓冲(Command Buffer)则由指令编码器(也即 GPUCommandEncoder
)完成创建。指令缓冲由若干个 Pass
(通道)构成,绘制相关的通道,叫做渲染通道。
渲染通道则是由渲染通道编码器来设置的,一个渲染通道就设定了这个通道的绘制结果要置于何处(这个描述就类比了 WebGL 要绘制到哪儿)。具体到代码中,其实就是创建 renderPassEncoder 时,传递的 GPURenderPassDescriptor
参数对象里的 colorAttachments 属性:
const renderPassEncoder = commandEncoder.beginRenderPass({
// 是一个数组,可以设置多个颜色附件
colorAttachments: [
{
view: textureView,
loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
storeOp: 'store',
}
]
})
注意到,colorAttachments[0].view 是一个 textureView,也即 GPUTextureView
,换言之,意味着这个渲染通道要绘制到某个纹理对象上。
通常情况下,如果你不需要离屏绘制或者使用 msaa,那么应该是画到 canvas 上的,从 canvas 中获取其配置好的纹理对象如下操作:
const context = canvas.getContext('webgpu')
context.configure({
gpuDevice,
format: presentationFormat, // 此参数可以使用画布的客户端长宽 × 设备像素缩放比例得到,是一个两个元素的数组
size: presentationSize, // 此参数可以调用 context.getPreferredFormat(gpuAdapter) 获取
})
const textureView = context.getCurrentTexture().createView()
上述代码片段完成了渲染通道与屏幕 canvas 的关联,即把 canvas 视作一块 GPUTexture
,使用其 GPUTextureView
与渲染通道的关联。
其实,更严谨的说法是 渲染通道 承担了 FBO 的部分职能(因为渲染通道还有发出其它动作的职能,例如设置管线等),因为没有 GPURenderPass 这个 API,所以只能委屈 GPURenderPassEncoder 代替一下了。
2.2 多目标渲染
为了进行多目标渲染,也即片元着色器要输出多个结果的情况(代码中表现为返回一个结构体),就意味着要多个颜色附件来承载渲染的输出。
此时,要配置渲染管线的片元着色阶段(fragment)的 targets 属性。
相关的从创建纹理、创建管线、指令编码例子代码如下所示,用到两个纹理对象来充当颜色附件的容器:
// 一、创建渲染目标纹理 1 和 2,以及其对应的纹理视图对象
const renderTargetTexture1 = device.createTexture({
size: [/* 略 */],
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
format: 'rgba32float',
})
const renderTargetTexture2 = device.createTexture({
size: [/* 略 */],
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
format: 'bgra8unorm',
})
const renderTargetTextureView1 = renderTargetTexture1.createView()
const renderTargetTextureView2 = renderTargetTexture2.createView()
// 二,创建管线,配置片元着色阶段的多个对应目标的纹素输出格式
const pipeline = device.createRenderPipeline({
fragment: {
targets: [
{
format: 'rgba32float'
},
{
format: 'bgra8unorm'
}
]
// ... 其它属性省略
},
// ... 其它阶段省略
})
const renderPassEncoder = commandEncoder.beginRenderPass({
colorAttachments: [
{
view: renderTargetTextureView1,
// ... 其它参数
},
{
view: renderTargetTextureView2,
// ... 其它参数
}
]
})
这样,两个颜色附件分别用上了两个纹理视图对象作为渲染目标,而且在管线对象的片元着色阶段也明确指定了两个 target 的格式。
于是,你可以在片元着色器代码中指定输出结构:
struct FragmentStageOutput {
@location(0) something: vec4<f32>;
@location(1) another: vec4<f32>;
}
@stage(fragment)
fn main(/* 省略输入 */) -> FragmentStageOutput {
var output: FragmentStageOutput;
// 随便写俩数字,没什么意义
output.something = vec4<f32>(0.156);
output.another = vec4<f32>(0.67);
return output;
}
这样,位于 location 0 的 something 这个 f32 型四维向量就写入了 renderTargetTexture1 的一个纹素,而位于 location 1 的 another 这个 f32 型四维向量则写入了 renderTargetTexture2 的一个纹素。
尽管,在 pipeline 的片元阶段中 target 指定的 format 略有不一样,即 renderTargetTexture2 指定为 'bgra8unorm'
,而着色器代码中结构体的 1 号 location 数据类型是 vec4<f32>
,WebGPU 会帮你把 f32 这个 [0.0f, 1.0f]
范围内的输出映射到 [0, 255]
这个 8bit 整数区间上的。
事实上,如果没有多输出(也即多目标渲染),WebGPU 中大部分片元着色器的返回类型就是一个单一的
vec4<f32>
,而最常见的 canvas 最佳纹理格式是bgra8unorm
,总归要发生[0.0f, 1.0f]
通过放大 255 倍再取整到[0, 255]
这个映射过程的。
2.3 深度附件与模板附件
GPURenderPassDescriptor
还支持传入 depthStencilAttachment,作为深度模板附件,代码举例如下:
const renderPassDescriptor = {
// 颜色附件设置略
depthStencilAttachment: {
view: depthTexture.createView(),
depthLoadValue: 1.0,
depthStoreOp: 'store',
stencilLoadValue: 0,
stencilStoreOp: 'store',
}
}
与单个颜色附件类似,也需要一个纹理对象的视图对象为 view,需要特别注意的是,作为深度或模板附件,一定要设置与深度、模板有关的纹理格式。
若对深度、模板的纹理格式在额外的设备功能(Device feature)中,在请求设备对象时一定要加上对应的 feature 来请求,例如有 "depth24unorm-stencil8"
这个功能才能用 "depth24unorm-stencil8"
这种纹理格式。
深度模板的计算,还需要注意渲染管线中深度模板阶段参数对象的配置,例如:
const renderPipeline = device.createRenderPipeline({
// ...
depthStencil: {
depthWriteEnabled: true,
depthCompare: 'less',
format: 'depth24plus',
}
})
2.4 非 canvas 的纹理对象作为两种附件的注意点
除了深度模板附件里提及的纹理格式、请求设备的 feature 之外,还需要注意非 canvas 的纹理若作为某种附件,那它的 usage 一定包含 RENDER_ATTACHMENT
这一项。
const depthTexture = device.createTexture({
size: presentationSize,
format: 'depth24plus',
usage: GPUTextureUsage.RENDER_ATTACHMENT,
})
const renderColorTexture = device.createTexture({
size: presentationSize,
format: presentationFormat,
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
})
3 读取数据
3.1 从 FBO 中读像素值
从 FBO 读像素值,实际上就是读颜色附件的颜色数据到 TypedArray 中,想读取当前 fbo(或 canvas 的帧缓冲)的结果,只需调用 gl.readPixels
方法即可。
//#region 创建 fbo 并将其设为渲染目标容器
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
//#endregion
//#region 创建离屏绘制的容器:纹理对象,并绑定它成为当前要处理的纹理对象
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// -- 若不需要作为纹理再次被着色器采样,其实这里可以用 RBO 代替
//#endregion
//#region 绑定纹理对象到 0 号颜色附件
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
//#endregion
// ... gl.drawArrays 进行渲染
//#region 读取到 TypedArray
const pixels = new Uint8Array(imageWidth * imageHeight * 4);
gl.readPixels(0, 0, imageWiebdth, imageHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
//#endregion
gl.readPixels()
方法是把当前绑定的 FBO 及当前绑定的颜色附件的像素值读取到 TypedArray 中,无论载体是 WebGLRenderbuffer 还是 WebGLTexture.
唯一需要注意的是,如果你在写引擎,那么读像素的操作得在绘制指令(一般指 gl.drawArrays
或 gl.drawElements
)发出后的代码中编写,否则可能会读不到值。
3.2 WebGPU 读 GPUTexture 中的数据
在 WebGPU 中将渲染目标,也即纹理中访问像素是比较简单的,使用到指令编码器的 copyTextureToBuffer 方法,将纹理对象的数据读取到 GPUBuffer,然后通过解映射、读范围的方式获取 ArrayBuffer.
//#region 创建颜色附件关联的纹理对象
const colorAttachment0Texture = device.createTexture({ /* ... */ })
//#endregion
//#region 创建用于保存纹理数据的缓冲对象
const readPixelsResultBuffer = device.createBuffer({
usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
size: 4 * textureWidth * textureHeight,
})
//#endregion
//#region 图像拷贝操作,将 GPUTexture 拷贝到 GPUBuffer
const encoder = device.createCommandEncoder()
encoder.copyTextureToBuffer(
{ texture: colorAttachment0Texture },
{ buffer: readPixelsResultBuffer },
[textureWidth, textureHeight],
)
device.queue.submit([encoder.finish()])
//#endregion
//#region 读像素
await readPixelsResultBuffer.mapAsync()
const pixels = new Uint8Array(readPixelsResultBuffer.getMappedRange())
//#endregion
要额外注意,如果要拷贝到 GPUBuffer 并且要交给 CPU 端(也就是 JavaScript)来读取,那这块 GPUBuffer 的 usage 一定要有 COPY_DST
和 MAP_READ
这两项;而且,这个纹理对象的 usage 也必须要有 COPY_SRC
这一项(作为颜色附件的关联纹理,它还得有 RENDER_ATTACHMENT
这一个 usage)。
4 总结
从 WebGL(也即 OpenGL ES 体系)到 WebGPU,离屏绘制技术、多目标渲染技术都有了接口和用法上的升级。
首先是取消了 RBO 这个概念,一律使用 Texture 作为绘制目标。
其次,更替了 FBO 的职权至 RenderPass,由 GPURenderPassEncoder
负责承载原来 FBO 的两类附件。
因为取消了 RBO 概念,所以 RTT(RenderToTexture)
和 RTR(RenderToRenderbuffer)
就不再存在了,但是离屏绘制技术依旧是存在的,你在 WebGPU 中可以使用多个 RenderPass 完成多个绘制成果,Texture 作为绘制载体可以自由地经过资源绑定组穿梭在不同的 RenderPass 的某个 RenderPipeline 中。
关于如何从 GPU 的纹理中读取像素(颜色值),第 3 节也有粗浅的讨论,这部分大多数用途是 GPU Picking;而关于 FBO 这个遗留概念,现在即 RenderPass 离屏渲染,最常见的还是做效果。
WebGPU 中消失的 FBO 和 RBO的更多相关文章
- WebGPU 中消失的 VAO
1 VAO 是 OpenGL 技术中提出来的 参考: 外链 其中有一段文字记录了 VAO 是什么: A Vertex Array Object (VAO) is an object which con ...
- 用户文件夹在Finder中消失的问题
这个问题最早有人报告说.在升级了10.9.3的机器上.用户文件夹(/Users)会在Finder中消失.可是非常多人没有这个问题.经过多人的重复查证,最后锁定在iTunes 11.2更新上.假设用户打 ...
- Leetcode 448.找到所有数组中消失的数字
找到所有数组中消失的数字 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现 ...
- Java实现 LeetCode 448 找到所有数组中消失的数字
448. 找到所有数组中消失的数字 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间 ...
- WebGPU 中的缓冲映射机制
1. 什么是缓冲映射 就不给定义了,直接简单的说,映射(Mapping)后的某块显存,就能被 CPU 访问. 三大图形 API(D3D12.Vulkan.Metal)的 Buffer(指显存)映射后, ...
- LeetCode------找到所有数组中消失的数字(6)【数组】
来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/find-all-numbers-disappeared-in-an-array 1.题目 找到 ...
- [Machine Learning] 深度学习中消失的梯度
好久没有更新blog了,最近抽时间看了Nielsen的<Neural Networks and Deep Learning>感觉小有收获,分享给大家. 了解深度学习的同学可能知道,目前深度 ...
- [Deep Learning] 深度学习中消失的梯度
好久没有更新blog了,最近抽时间看了Nielsen的<Neural Networks and Deep Learning>感觉小有收获,分享给大家. 了解深度学习的同学可能知道,目前深度 ...
- 力扣(LeetCode)448. 找到所有数组中消失的数字
给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不使 ...
随机推荐
- 初识python: xml 操作
导入模块: import xml.etree.ElementTree as ET 创建xml文件: new_xml = ET.Element("namelist") # 创建根节点 ...
- Pytest_钩子方法setup、teardown、setup_class、teardown_class(8)
pytest提供了以下 4 种钩子方法: 方法 说明 setup 在每一个测试用例执行之前,会执行此方法.一般用于每个用例相同的初始化工作. teardown 在每一个测试用例执行之后,会执行此方法. ...
- MapReduce和Hive学习文档链接学习顺序
1.<CentOS6.5下安装Hadoop-2.7.3(图解教程)> https://www.toutiao.com/i6627365258090512909/ 2.<CentOS6 ...
- Keil MDK STM32系列(四) 基于抽象外设库HAL的STM32F401开发
Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...
- 【Java】Eclipse常用快捷键
Eclipse常用快捷键 * 1.补全代码的声明:alt + / * 2.快速修复: ctrl + 1 * 3.批量导包:ctrl + shift + o * 4.使用单行注释:ctrl + / * ...
- Android函数抽取壳的实现
0x0 前言 函数抽取壳这个词不知道从哪起源的,但我理解的函数抽取壳是那种将dex文件中的函数代码给nop,然后在运行时再把字节码给填回dex的这么一种壳. 函数抽取前: 函数抽取后: 很早之前就想写 ...
- Linux中的一些基本命令
文章目录 ls cd Linux的目录 文件的权限 1.用户,组,权限 2.文件的权限 文件的基本操作 增:创建文件 删:删除文件 改:修改文件 查:查看 vi/vim 是一个编辑工具,主要用来编辑文 ...
- Python向mysql数据库插入数据
一.向表tcolor中插入数据的主要流程如下: import datetimeimport pymysql.cursorsconnection = pymysql.connect(host='loca ...
- 【记录一个问题】在goland中的_test.go文件中,点右键点run,无法执行测试用例
比较奇怪的是: 在命令行下,用 test -v alloc_test.go -test.run TestAlloc_utilJoinCPUAndGpu alloc.go 可以执行测试用例 比较奇怪的是 ...
- 多种语言tcp编程
再次强调,最好socket编程 c#的tcpclient等封装无法对接android的socket服务器 c#的tcpclient等封装可对接java的socket服务器 python socket服 ...