GPURenderPassEncoder: setVertexBuffer() 方法

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表格。

安全上下文： 仅在安全上下文 (HTTPS) 中，某些或所有支持的浏览器中才可以使用此功能。

setVertexBuffer() 方法是 GPURenderPassEncoder 接口的一部分，用于设置或取消设置当前的 GPUBuffer，该缓冲区将为给定插槽提供顶点数据，以便在随后的绘制命令中使用。

语法

setVertexBuffer(slot, buffer, offset, size)

参数

slot: 一个数字，表示要设置顶点缓冲区的顶点缓冲区插槽。
buffer: 一个 GPUBuffer，它表示包含要用于后续绘制命令的顶点数据的缓冲区，或者为 null，在这种情况下，将取消设置给定插槽中任何先前设置的缓冲区。
offset 可选: 一个数字，表示顶点数据在 buffer 中开始的偏移量（以字节为单位）。如果省略，则 offset 默认值为 0。
size 可选: 一个数字，表示 buffer 中包含的顶点数据的长度（以字节为单位）。如果省略，则 size 默认值为 buffer 的 GPUBuffer.size - offset。

返回值

无 (Undefined).

验证

调用 setVertexBuffer() 时，必须满足以下条件，否则会生成 GPUValidationError，并且 GPURenderPassEncoder 将变为无效

buffer 的 GPUBuffer.usage 包含 GPUBufferUsage.VERTEX 标志。
slot 小于 GPUDevice 的 maxVertexBuffers 限制。
offset + size 小于或等于 buffer 的 GPUBuffer.size。
offset 是 4 的倍数。

示例

设置顶点缓冲区

在我们基本的渲染演示中，通过 GPUCommandEncoder 记录了多个命令。这些命令中的大多数来自通过 GPUCommandEncoder.beginRenderPass() 创建的 GPURenderPassEncoder。根据需要使用 setVertexBuffer() 设置顶点数据的来源。

// ...

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

// Create GPUCommandEncoder to issue commands to the GPU
// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...

取消设置顶点缓冲区

// Set vertex buffer in slot 0
passEncoder.setVertexBuffer(0, vertexBuffer);

// Later, unset vertex buffer in slot 0
passEncoder.setVertexBuffer(0, null);

规范

规范
WebGPU # dom-gpurendercommandsmixin-setvertexbuffer

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

The WebGPU API