榆林建设局网站建站平台加盟
在本文中，我们使用 VertexBuffer 绘制一个矩形。示例地址
1.准备顶点数据
首先，我们准备好顶点数据。定义顶点数据有多种方法，这次我们将在 TypeScript 代码中将其定义为 Float32Array 类型的数据。
const quadVertexSize = 4 * 8; // 一个顶点的字节大小.
const quadPositionOffset = 4 * 0; // 矩形顶点位置属性的字节偏移量.
const quadColorOffset = 4 * 4; // 矩形顶点颜色属性的字节偏移量.
const quadVertexCount = 6; // 矩形中的顶点数.const quadVertexArray = new Float32Array([// float4 position, float4 color-1, 1, 0, 1, 0, 1, 0, 1,-1, -1, 0, 1, 0, 0, 0, 1,1, -1, 0, 1, 1, 0, 0, 1,-1, 1, 0, 1, 0, 1, 0, 1,1, -1, 0, 1, 1, 0, 0, 1,1, 1, 0, 1, 1, 1, 0, 1,
]);
2.创建VertexBuffer
接下来，使用 WebGPU API 创建一个 VertexBuffer。使用逻辑设备g_device的createBuffer()方法。
// 利用矩形数据创建顶点缓冲区.const verticesBuffer = g_device.createBuffer({size: quadVertexArray.byteLength,usage: GPUBufferUsage.VERTEX,mappedAtCreation: true,});
3.将顶点数据填充到VertexBuffer
我们需要使用 GPUBuffer 的getMappedRange方法创建一个新的 Float32Array 类型变量， 并将quadVertexArray的顶点数据进行设置填充。设置完成后，使用unmap()方法取消内存映射。
new Float32Array(verticesBuffer.getMappedRange()).set(quadVertexArray);verticesBuffer.unmap();
4.在RenderPipeline中设置顶点属性
接下来，在 RenderPipeline 中设置顶点属性。
// 创建一个渲染管线const pipeline = g_device.createRenderPipeline({layout: 'auto',vertex: {module: g_device.createShaderModule({code: vertWGSL,}),entryPoint: 'main',buffers: [ {// 指定数组元素之间的字节距离。arrayStride: quadVertexSize,// 指定顶点缓冲区的属性。attributes: [{// positionshaderLocation: 0, // @location(0) in vertex shaderoffset: quadPositionOffset,format: 'float32x4',},{// colorshaderLocation: 1, // @location(1) in vertex shaderoffset: quadColorOffset,format: 'float32x4',},],},],},fragment: {module: g_device.createShaderModule({code: fragWGSL,}),entryPoint: 'main',targets: [{format: presentationFormat,},],},primitive: {topology: 'triangle-list',},});
在上面的 RenderPipeline 代码中，与上一篇文章不同的部分是vertex.buffers。
arrayStride 指定顶点缓冲区中顶点之间的字节距离（以字节为单位）。
attributes.offset 指定从顶点缓冲区中的顶点开始到相应顶点属性的字节距离（以字节为单位）。
attributes.format 指定顶点属性的格式。
对于 attributes.shaderLocation，指定由顶点着色器的@location()属性指定的值。
5.用setVertexBuffer设置GPUBuffer
接下来，使用renderPassEncoder的setVertexBuffer()方法设置 VertexBuffer。
const commandEncoder = g_device.createCommandEncoder();const renderPassEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);renderPassEncoder.setPipeline(pipeline);renderPassEncoder.setVertexBuffer(0, verticesBuffer); // 设置顶点缓冲区renderPassEncoder.draw(quadVertexCount, 1, 0, 0);renderPassEncoder.end();g_device.queue.submit([commandEncoder.finish()]);
6. 在顶点着色器中使用顶点属性
使用 VertexBuffer 还需要更改顶点着色器的内容。
// 定义输出的结构体
struct VertexOutput {@builtin(position) Position : vec4<f32>,@location(0) fragColor : vec4<f32>,
}@vertex
fn main(// 顶点属性声明@location(0) position: vec4<f32>,@location(1) color: vec4<f32>
) -> VertexOutput {var output : VertexOutput;output.Position = position;output.fragColor = color;return output;
}
我们先来看一下每个输入顶点属性的声明。
在输入顶点属性变量前加上@location()属性，编号写在括号中，但此编号必须与 RenderPipeline 的 vertex.buffers.attributes.shaderLocation 中指定的编号匹配。
另外，对于顶点数据的输出，定义了一个结构体用于输出。
Position是该结构体的第一个成员变量，位置坐标对于顶点着色器而言比其他顶点属性更为重要，它被特殊对待并且有一个名为@builtin(position)的属性，它相当于GLSL的gl_Position。
对于其他顶点属性（此处是fragColor），使用@location()属性指定顶点属性的编号，这个编号应与片段着色器中的属性编号相匹配。
现在让我们看一下片段着色器。
@fragment
fn main(@location(0) fragColor: vec4<f32>,
) -> @location(0) vec4<f32> {return fragColor;
}
作为从顶点着色器里传过来的变量fragColor，此处@location()属性中的编号必须与顶点着色器输出结构中fragColor的@location()属性中的编号相匹配。
总结
通过上面的编码修改，现在我们可以使用 VertexBuffer 绘制矩形了。