GPURenderPassEncoder: draw() 方法

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

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，在部分或所有支持的浏览器中可用。

GPURenderPassEncoder接口的draw()方法根据setVertexBuffer()提供的顶点缓冲区绘制图元。

语法

draw(vertexCount)
draw(vertexCount, instanceCount)
draw(vertexCount, instanceCount, firstVertex)
draw(vertexCount, instanceCount, firstVertex, firstInstance)

参数

vertexCount: 一个数字，定义要绘制的顶点数。
instanceCount 可选: 一个数字，定义要绘制的实例数。如果省略，instanceCount默认为 1。
firstVertex 可选: 一个数字，定义顶点缓冲区中开始绘制的偏移量（以顶点为单位）。如果省略，firstVertex默认为 0。
firstInstance 可选: 一个数字，定义要绘制的第一个实例。如果省略，firstInstance默认为 0。

返回值

无（Undefined）。

示例

在我们基本的渲染演示中，多个命令通过GPUCommandEncoder记录。大多数这些命令来自通过GPUCommandEncoder.beginRenderPass()创建的GPURenderPassEncoder。draw()用于指定应该绘制三个顶点以创建我们的三角形。

// ...

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

// ...

规范

规范
WebGPU # dom-gpurendercommandsmixin-draw

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

WebGPU API