当当网站建设目标,wordpress图片文字排版,网站建设倒计时模板,外贸网站违反谷歌规则现在让我们将 IndexBuffer 与 VertexBuffer 一起使用。演示示例 1.准备索引数据
我们用 Uint16Array 类型来准备索引数据。我们将矩形的4个点放到 VertexBuffer 中#xff0c;然后根据三角形绘制顺序#xff0c;组织成 0–1–2 和 0–2–3 的结构。
const quadIndexArray … 现在让我们将 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 的支持已完成而且我们还不需要更改着色器代码。
