1 VAO 是 OpenGL 技术中提出来的

参考:

外链

其中有一段文字记录了 VAO 是什么:

A Vertex Array Object (VAO) is an object which contains one or more Vertex Buffer Objects and is designed to store the information for a complete rendered object. In our example this is a diamond consisting of four vertices as well as a color for each vertex.

VAO 记录的是多个(一组) VBO 的 gl.bindBuffer 和 gl.vertexAttribPointer (WebGL API)的状态,省去切换另一组 VBO 时再次设置绑定关系和读取规则的成本。

里面也描述了 VBO 是什么:一个 VBO 可以是 position,也可以是 uv,甚至可以是 indices;当然,在 WebGL 中,你可以用 1 个 VBO 来存储 position + uv + normal,但是不能和 indices 混用(和 type 有关)。

2 WebGPU 天生就能先保存状态

WebGPU 不需要 VAO 了,源于 WebGPU 的机制,并不是过程式,所以不需要借助 VAO 保存绑定一组 VBO 并读取它的状态。

2.1 WebGL 与 WebGPU 相关 API 对比

当 device.createShaderModule 时,就有 buffers 属性描述着色器需要什么类型的数据,类似 gl.vertexAttribPointer 的作用;

而 gl.bindBuffer 的操作则由 renderPass.setVertexBuffer 完成;

关于数据的传递,gl.bufferData 的任务就由 device.createBuffer 时通过映射、解映射的机制将 TypedArray 传递进 GPUBuffer 来替代

2.2 谁替代了 VAO?

那么谁能在渲染时告诉着色器,我有多组 VBO 要切换呢?

准确的说,VBO 这个概念已经被 GPUBuffer + GPUShaderModule 替代了,由后者两个对象共同分担,GPUBuffer 专注于 cpu~gpu 的数据传递,GPUShaderModule 不仅仅是着色器代码本身,还承担着 GPUBuffer[type=vertex] 的数据如何读取的职能(替代了 gl.vertexAttribPointer 的职能)。

VAO 的职能则转至 GPURenderPipeline 完成,其 GPURenderPipelineDescriptor.GPUVertexState.buffers 属性是 GPUVertexBufferLayout[] 类型的,这每一个 GPUVertexBufferLayout 对象就类似于 VAO 的职能。

2.3 代码举例

下列只有一个 GPUVertexBufferLayout:

const renderPipeline = device.createRenderPipeline({
/* ... */
vertex: {
module: device.createShaderModule({
code: ` /* wgsl vertex shader code */ `,
}),
entryPoint: 'vertex_main',
buffers: [
{
arrayStride: 4 * 5, // 一个顶点数据占 20 bytes
attributes: [
{
// for Position VertexAttribute
shaderLocation: 0,
offset: 0,
format: "float32x3" // 其中顶点的坐标属性占 12 字节,三个 float32 数字
},
{
// for UV0 VertexAttribute
shaderLocation: 1,
offset: 3 * 4,
format: "float32x2" // 顶点的纹理坐标占 8 字节,两个 float32 数字
}
]
}
]
}
})

下面有两个 GPUVertexBufferLayout:

const renderPipeline = device.createRenderPipeline({
vertex: {
module: spriteShaderModule,
entryPoint: 'vert_main',
buffers: [
{
arrayStride: 4 * 4,
stepMode: 'instance',
attributes: [
{
// instance position
shaderLocation: 0,
offset: 0,
format: 'float32x2',
},
{
// instance velocity
shaderLocation: 1,
offset: 2 * 4,
format: 'float32x2',
},
],
},
{
arrayStride: 2 * 4,
stepMode: 'vertex',
attributes: [
{
// vertex positions
shaderLocation: 2,
offset: 0,
format: 'float32x2',
},
],
},
],
},
/* ... */
});

通过 renderPassEncoder.setVertexBuffer 就能切换 VBO 了:

renderPassEncoder.setVertexBuffer(0, bf0);
renderPassEncoder.setVertexBuffer(1, bf1);

WebGPU 中消失的 VAO的更多相关文章

  1. WebGPU 中消失的 FBO 和 RBO

    目录 1 WebGL 中的 FBO 与 RBO 1.1 帧缓冲对象(FramebufferObject) 1.2 颜色附件与深度模板附件的真正载体 1.3 FBO/RBO/WebGLTexture 相 ...

  2. 用户文件夹在Finder中消失的问题

    这个问题最早有人报告说.在升级了10.9.3的机器上.用户文件夹(/Users)会在Finder中消失.可是非常多人没有这个问题.经过多人的重复查证,最后锁定在iTunes 11.2更新上.假设用户打 ...

  3. Leetcode 448.找到所有数组中消失的数字

    找到所有数组中消失的数字 给定一个范围在  1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现 ...

  4. Java实现 LeetCode 448 找到所有数组中消失的数字

    448. 找到所有数组中消失的数字 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间 ...

  5. WebGPU 中的缓冲映射机制

    1. 什么是缓冲映射 就不给定义了,直接简单的说,映射(Mapping)后的某块显存,就能被 CPU 访问. 三大图形 API(D3D12.Vulkan.Metal)的 Buffer(指显存)映射后, ...

  6. LeetCode------找到所有数组中消失的数字(6)【数组】

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/find-all-numbers-disappeared-in-an-array 1.题目 找到 ...

  7. [Machine Learning] 深度学习中消失的梯度

    好久没有更新blog了,最近抽时间看了Nielsen的<Neural Networks and Deep Learning>感觉小有收获,分享给大家. 了解深度学习的同学可能知道,目前深度 ...

  8. [Deep Learning] 深度学习中消失的梯度

    好久没有更新blog了,最近抽时间看了Nielsen的<Neural Networks and Deep Learning>感觉小有收获,分享给大家. 了解深度学习的同学可能知道,目前深度 ...

  9. 力扣(LeetCode)448. 找到所有数组中消失的数字

    给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不使 ...

随机推荐

  1. 如何把myeclipse的工程导入到svn服务器上

    如何把myeclipse的工程导入到svn服务器上,按照如下步骤便可

  2. springboot发送邮件(含附件)

    引入maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  3. 安装MingW64_配置C/C++开发环境_Windows10

    下载安装 mingw-w64托管在sourceforge,下载地址: https://sourceforge.net/projects/mingw-w64/ 安装过程中... 除了下图的界面,其他选择 ...

  4. vue-组件化编程

    1.传统编写方式和组件编写方式的区别 组件方式编写可以很方便的复用和封装某些功能模块/组件的命名最好语义化,方便维护和阅读 编写时,我们可以将某些共用的功能或者样式部分抽象,得到对应的组件,按需要引入 ...

  5. c++使用map保存成员函数地址

    note 本基于c++11介绍一种使用map保存成员函数地址 可避免使用 if 和 switch 配置灵活 方便, 代码维护效率高 结果: 范例开始 头文件包含 #include <iostre ...

  6. 【LeetCode】LCP 07. 传递信息

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 日期 题目地址:https://leetcod ...

  7. 【LeetCode】923. 3Sum With Multiplicity 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/3sum-wit ...

  8. Docker 与 K8S学习笔记(七)—— 容器的网络

    本节我们来看看Docker网络,我们这里主要讨论单机docker上的网络.当docker安装后,会自动在服务器中创建三种网络:none.host和bridge,接下来我们分别了解下这三种网络: $ s ...

  9. BeanUtils属性转换工具

    commons 包的 BeanUtils 进行属性拷贝性能较差:Spring 的 BeanUtils 性能相对较好. public class A { private String name; pri ...

  10. sping练习,在Eclipse搭建的Spring开发环境中,使用工厂方式创建Bean对象,将创建的Bean对象输出到控制台。

    相关 知识 >>> 相关 练习 >>> 实现要求: 在Eclipse搭建的Spring开发环境中,使用工厂方式创建Bean对象,将创建的Bean对象输出到控制台.要 ...