GPURenderPassEncoder
注意：此功能在 Web Workers 中可用。
WebGPU API 中的 GPURenderPassEncoder 介面用於編碼與控制頂點和片元著色器階段相關的命令，這些命令由 GPURenderPipeline 發出。它構成了 GPUCommandEncoder 整體編碼活動的一部分。
渲染管道將圖形渲染到 GPUTexture 附件，通常用於顯示在 <canvas> 元素中，但它也可以渲染到用於其他目的且從不出現在螢幕上的紋理。它有兩個主要階段：
-
頂點階段，其中頂點著色器接收輸入到 GPU 的位置資料，並透過應用指定的變換（如旋轉、平移或透視）來使用這些資料定位 3D 空間中的一系列頂點。然後，這些頂點被組裝成圖元（如三角形，這是渲染圖形的基本構建塊），並由 GPU 光柵化，以確定每個圖元應該覆蓋繪製畫布上的哪些畫素。
-
片元階段，其中片元著色器計算由頂點著色器生成的圖元覆蓋的每個畫素的顏色。這些計算通常使用諸如影像（以紋理形式）之類的輸入，這些影像提供表面細節以及虛擬燈光的位置和顏色。
GPURenderPassEncoder 物件例項是透過 GPUCommandEncoder.beginRenderPass() 屬性建立的。
例項屬性
例項方法
beginOcclusionQuery()-
在
GPUQuerySet的指定索引處開始一個遮擋查詢（當呼叫GPUCommandEncoder.beginRenderPass()來執行渲染通道時，透過occlusionQuerySet描述符屬性的值提供）。 draw()-
根據
setVertexBuffer()提供的頂點緩衝區繪製圖元。 drawIndexed()-
根據
setVertexBuffer()和setIndexBuffer()提供的頂點和索引緩衝區繪製索引圖元。 drawIndirect()-
使用從
GPUBuffer讀取的引數繪製圖元。 drawIndexedIndirect()-
使用從
GPUBuffer讀取的引數繪製索引圖元。 end()-
完成當前渲染通道命令序列的記錄。
endOcclusionQuery()-
結束一個先前透過
beginOcclusionQuery()啟動的活動遮擋查詢。 executeBundles()-
作為當前渲染通道的一部分，執行先前已記錄到引用的
GPURenderBundle中的命令。 insertDebugMarker()-
使用標籤在一系列已編碼命令中的特定點進行標記。
popDebugGroup()-
結束一個除錯組，該除錯組由
pushDebugGroup()呼叫開始。 pushDebugGroup()-
開始一個除錯組，該除錯組由指定的標籤標記，並將包含所有後續已編碼命令，直到呼叫
popDebugGroup()方法為止。 setBindGroup()-
為指定的索引設定後續渲染命令將使用的
GPUBindGroup。 setBlendConstant()-
設定用於
"constant"和"one-minus-constant"混合因子（在GPUDevice.createRenderPipeline()方法的描述符的blend屬性中設定）的常量混合顏色和 alpha 值。 setIndexBuffer()-
設定當前將為後續繪製命令提供索引資料的
GPUBuffer。 setPipeline()-
設定此渲染通道將使用的
GPURenderPipeline。 setScissorRect()-
設定光柵化階段使用的剪刀矩形。轉換為視口座標後，任何落在剪刀矩形外的片元都將被丟棄。
setStencilReference()-
設定在進行模板測試並使用
"replace"模板操作時使用的模板參考值（在GPUDevice.createRenderPipeline()方法的描述符中，在定義各種模板操作的屬性中設定）。 setVertexBuffer()-
設定或取消設定當前將為後續繪製命令提供頂點資料的
GPUBuffer。 setViewport()-
設定光柵化階段使用的視口，用於將歸一化裝置座標線性對映到視口座標。
示例
在我們 基本的渲染演示 中，透過 GPUCommandEncoder 記錄了幾個命令。其中大多數命令都源於透過 GPUCommandEncoder.beginRenderPass() 建立的 GPURenderPassEncoder。
// …
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 # gpurenderpassencoder |
瀏覽器相容性
載入中…