WebGPU学习（3）---使用IndexBuffer（索引缓冲区）

现在让我们将 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');  // 设置IndexBuffer
  renderPassEncoder.drawIndexed(quadIndexArray.length); // 使用drawIndexed函数
  renderPassEncoder.end();
  g_device.queue.submit([commandEncoder.finish()]);

总结

绘制结果没有明显变化，但对 IndexBuffer 的支持已完成，而且我们还不需要更改着色器代码。