GPURenderPassEncoder: drawIndirect() 方法

实验性: 这是一个 实验性技术
在生产环境中使用此功能前,请仔细查看 浏览器兼容性表格

安全上下文:此功能仅在 安全上下文(HTTPS)下可用,并且在部分或全部 支持的浏览器 中可用。

drawIndirect() 方法是 GPURenderPassEncoder 接口的方法,它使用从 GPUBuffer 读取的参数绘制图元。

语法

js
drawIndirect(indirectBuffer, indirectOffset)

参数

indirectBuffer

一个包含 vertexCountinstanceCountfirstVertexfirstInstance 值的 GPUBuffer,这些值是执行绘图操作所需的。该缓冲区必须包含一个紧密打包的四个 32 位无符号整数值块,表示这些值(总共 16 字节),顺序与 GPURenderPassEncoder.draw() 的参数相同。例如:

js
const uint32 = new Uint32Array(4);
uint32[0] = 3; // The vertexCount value
uint32[1] = 1; // The instanceCount value
uint32[2] = 0; // The firstVertex value
uint32[3] = 0; // The firstInstance value

// Write values into a GPUBuffer
device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length);
indirectOffset

indirectBuffer 中值数据开始处的偏移量(以字节为单位)。

返回值

无(Undefined)。

验证

调用 drawIndirect() 时必须满足以下条件,否则会生成 GPUValidationError,并且 GPURenderPassEncoder 会变为无效状态。

  • indirectBufferGPUBuffer.usage 包含 GPUBufferUsage.INDIRECT 标志。
  • indirectOffset 加上 indirectBuffer 中值参数指定的总大小小于或等于 indirectBufferGPUBuffer.size
  • indirectOffset 是 4 的倍数。

示例

js
// ...

// Create GPURenderPassEncoder
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Set pipeline and vertex buffer
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);

// Create drawIndirect values
const uint32 = new Uint32Array(4);
uint32[0] = 3;
uint32[1] = 1;
uint32[2] = 0;
uint32[3] = 0;

// Create a GPUBuffer and write the draw values into it
const drawValues = device.createBuffer({
  size: 16,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.INDIRECT,
});
device.queue.writeBuffer(drawValues, 0, uint32, 0, uint32.length);

// Draw the vertices
passEncoder.drawIndirect(drawValues, 0);

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

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

// ...

规范

规范
WebGPU
# dom-gpurendercommandsmixin-drawindirect

浏览器兼容性

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

另请参阅