余姚网站建设服务互联网推广销售
现在让我们将 IndexBuffer 与 VertexBuffer 一起使用。演示示例
1.准备索引数据
我们用 Uint16Array 类型来准备索引数据。我们将矩形的4个点放到 VertexBuffer 中，然后根据三角形绘制顺序，组织成 0–1–2 和 0–2–3 的结构。
const quadIndexArray = new Uint16Array([0, 1, 2, 0, 2, 3]);
2.创建IndexBuffer
接下来，我们使用 WebGPU API 创建一个 IndexBuffer。使用逻辑设备g_device的createBuffer()方法。
const indicesBuffer = g_device.createBuffer({size: quadIndexArray.byteLength,usage: GPUBufferUsage.INDEX,mappedAtCreation: true,});
3.将顶点索引数据设置为从GPUBuffer映射的Uint16Array
new Uint16Array(indicesBuffer.getMappedRange()).set(quadIndexArray);indicesBuffer.unmap();
接下来将 Uint16Array 的顶点数据设置为 IndexBuffer 。使用 GPUBuffer 的getMappedRange方法创建一个新的 Uint16Array 类型变量， 并将quadIndexArray数据进行设置填充。设置完成后，使用unmap()方法取消内存映射。（这几步其实跟上一篇文章基本一致）
4.将IndexBuffer设置为RenderPipeline
使用setIndexBuffer()方法将 IndexBuffer 设置为 RenderPipeline。
此外，使用drawIndexed()作为绘图函数来替代之前的draw()。
const commandEncoder = g_device.createCommandEncoder();const renderPassEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);renderPassEncoder.setPipeline(pipeline);renderPassEncoder.setVertexBuffer(0, verticesBuffer);renderPassEncoder.setIndexBuffer(indicesBuffer, 'uint16'); // 设置IndexBufferrenderPassEncoder.drawIndexed(quadIndexArray.length); // 使用drawIndexed函数renderPassEncoder.end();g_device.queue.submit([commandEncoder.finish()]);
总结
绘制结果没有明显变化，但对 IndexBuffer 的支持已完成，而且我们还不需要更改着色器代码。