区块链技术博客
www.b2bchain.cn

WebGPU 补充篇之 VertexBuffer求职学习资料

本文介绍了WebGPU 补充篇之 VertexBuffer求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

系列博客目录传送门:https://xiaozhuanlan.com/topic/9587342601

  • VertexBuffer 的创建


VertexBuffer 的创建

VertexBuffer 的本体就是一个 GPUBuffer,主要就是指定其 usage,以及在创建 ShaderModule 时配置好 VertexAttribute。

顶点属性,所谓的 VertexAttribute,在 VertexBuffer 中的排列是顶点顺序优先。比如在某个 VertexBuffer 中,一个顶点拥有 f32 二维坐标属性、f32 RGBA颜色属性,那么它大概长这样:

顺次排列 ↓ 顶点1(24 bytes)          坐标x 坐标y          R分量 G分量 B分量 A分量 ↓ 顶点2(24 bytes)      坐标x 坐标y           R分量 G分量 B分量 A分量 ↓  ...

上代码:

“` js
const vbodata = new Float32Array([
// 坐标 xy // 颜色 RGBA
-0.5, 0.0, 1.0, 0.0, 0.0, 1.0, // ← 顶点 1
0.0, 0.5, 0.0, 1.0, 0.0, 1.0, // ← 顶点 2
0.5, 0.0, 0.0, 0.0, 1.0, 1.0 // ← 顶点 3
])
const vbo = device.createBuffer({
size: vbodata.byteLength,
usage: GPUBufferUsage.VERTEX,
mappedAtCreation: true // 创建时立刻映射,让 CPU 端能读写数据
})

// 实例化一个新的 Float32Array,并获取 GPUBuffer 的映射范围,传入上面的数据,这样 ArrayBuffer 就有值了
new Float32Array(vbo.getMappedRange()).set(vbodata)
vbo.unmap() // 一定要解除映射,GPU 才能读写

// …

const vsShaderModule = device.createShaderModule({
code: vsSource,
entryPoint: ‘main’,
buffers: [
{
shaderLocation: 0,
offset: 0,
format: ‘float32x2’
}, {
shaderLocation: 1,
offset: 2 * vbodata.BYTES_PER_ELEMENT,
format: ‘float32x4’
}
]

系列博客目录传送门:https://xiaozhuanlan.com/topic/9587342601

  • VertexBuffer 的创建


VertexBuffer 的创建

VertexBuffer 的本体就是一个 GPUBuffer,主要就是指定其 usage,以及在创建 ShaderModule 时配置好 VertexAttribute。

顶点属性,所谓的 VertexAttribute,在 VertexBuffer 中的排列是顶点顺序优先。比如在某个 VertexBuffer 中,一个顶点拥有 f32 二维坐标属性、f32 RGBA颜色属性,那么它大概长这样:

顺次排列 ↓ 顶点1(24 bytes)          坐标x 坐标y          R分量 G分量 B分量 A分量 ↓ 顶点2(24 bytes)      坐标x 坐标y           R分量 G分量 B分量 A分量 ↓  ...

上代码:

“` js
const vbodata = new Float32Array([
// 坐标 xy // 颜色 RGBA
-0.5, 0.0, 1.0, 0.0, 0.0, 1.0, // ← 顶点 1
0.0, 0.5, 0.0, 1.0, 0.0, 1.0, // ← 顶点 2
0.5, 0.0, 0.0, 0.0, 1.0, 1.0 // ← 顶点 3
])
const vbo = device.createBuffer({
size: vbodata.byteLength,
usage: GPUBufferUsage.VERTEX,
mappedAtCreation: true // 创建时立刻映射,让 CPU 端能读写数据
})

// 实例化一个新的 Float32Array,并获取 GPUBuffer 的映射范围,传入上面的数据,这样 ArrayBuffer 就有值了
new Float32Array(vbo.getMappedRange()).set(vbodata)
vbo.unmap() // 一定要解除映射,GPU 才能读写

// …

const vsShaderModule = device.createShaderModule({
code: vsSource,
entryPoint: ‘main’,
buffers: [
{
shaderLocation: 0,
offset: 0,
format: ‘float32x2’
}, {
shaderLocation: 1,
offset: 2 * vbodata.BYTES_PER_ELEMENT,
format: ‘float32x4’
}
]

系列博客目录传送门:https://xiaozhuanlan.com/topic/9587342601

  • VertexBuffer 的创建


VertexBuffer 的创建

VertexBuffer 的本体就是一个 GPUBuffer,主要就是指定其 usage,以及在创建 ShaderModule 时配置好 VertexAttribute。

顶点属性,所谓的 VertexAttribute,在 VertexBuffer 中的排列是顶点顺序优先。比如在某个 VertexBuffer 中,一个顶点拥有 f32 二维坐标属性、f32 RGBA颜色属性,那么它大概长这样:

顺次排列 ↓ 顶点1(24 bytes)          坐标x 坐标y          R分量 G分量 B分量 A分量 ↓ 顶点2(24 bytes)      坐标x 坐标y           R分量 G分量 B分量 A分量 ↓  ...

上代码:

“` js
const vbodata = new Float32Array([
// 坐标 xy // 颜色 RGBA
-0.5, 0.0, 1.0, 0.0, 0.0, 1.0, // ← 顶点 1
0.0, 0.5, 0.0, 1.0, 0.0, 1.0, // ← 顶点 2
0.5, 0.0, 0.0, 0.0, 1.0, 1.0 // ← 顶点 3
])
const vbo = device.createBuffer({
size: vbodata.byteLength,
usage: GPUBufferUsage.VERTEX,
mappedAtCreation: true // 创建时立刻映射,让 CPU 端能读写数据
})

// 实例化一个新的 Float32Array,并获取 GPUBuffer 的映射范围,传入上面的数据,这样 ArrayBuffer 就有值了
new Float32Array(vbo.getMappedRange()).set(vbodata)
vbo.unmap() // 一定要解除映射,GPU 才能读写

// …

const vsShaderModule = device.createShaderModule({
code: vsSource,
entryPoint: ‘main’,
buffers: [
{
shaderLocation: 0,
offset: 0,
format: ‘float32x2’
}, {
shaderLocation: 1,
offset: 2 * vbodata.BYTES_PER_ELEMENT,
format: ‘float32x4’
}
]

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » WebGPU 补充篇之 VertexBuffer求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们