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 |
浏览器兼容性
加载中…