GPURenderPassEncoder: draw() 方法
注意：此功能在 Web Workers 中可用。
draw() 方法是 GPURenderPassEncoder 介面的一部分，它會根據透過 setVertexBuffer() 提供給它的頂點緩衝區來繪製圖元。
語法
js
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() 用於指定繪製三個頂點來建立我們的三角形。
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()]);
// …
規範
| 規範 |
|---|
| WebGPU # dom-gpurendercommandsmixin-draw |
瀏覽器相容性
載入中…