GPURenderPassEncoder: setVertexBuffer() 方法

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

注意:此功能在 Web Workers 中可用。

GPURenderPassEncoder 接口的 setVertexBuffer() 方法用于为给定的插槽设置或取消设置当前的 GPUBuffer,该缓冲区将为后续的绘制命令提供顶点数据。

语法

js
setVertexBuffer(slot, buffer, offset, size)

参数

slot

一个数字,引用要为其设置顶点缓冲区的顶点缓冲区插槽。

buffer

一个 GPUBuffer,表示包含用于后续绘制命令的顶点数据的缓冲区,或者 null。在这种情况下,给定的插槽中任何先前设置的缓冲区都将被取消设置。

offset 可选

一个数字,表示 buffer 中顶点数据开始位置的偏移量(以字节为单位)。如果省略,offset 默认为 0。

size 可选

一个数字,表示 buffer 中顶点数据的大小(以字节为单位)。如果省略,size 默认为 bufferGPUBuffer.size - offset

返回值

无 (Undefined)。

验证

调用 setVertexBuffer() 时必须满足以下条件,否则将生成 GPUValidationError,并且 GPURenderPassEncoder 将失效。

示例

设置顶点缓冲区

在我们的 基础渲染演示 中,通过 GPUCommandEncoder 记录了几个命令。其中大多数命令源自通过 GPUCommandEncoder.beginRenderPass() 创建的 GPURenderPassEncodersetVertexBuffer() 会根据需要用于设置顶点数据的源。

js
// …

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()]);

// …

取消设置顶点缓冲区

js
// 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

浏览器兼容性

另见