GPURenderPassEncoder

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

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

GPURenderPassEncoder 接口是 WebGPU API 的一部分，它用于编码与控制顶点和片段着色器阶段相关的命令，这些命令是由 GPURenderPipeline 发出的。它是 GPUCommandEncoder 的整体编码活动的组成部分。

渲染管线将图形渲染到 GPUTexture 附加项，通常用于在 <canvas> 元素中显示，但它也可以渲染到用于其他目的的纹理，这些纹理从未出现在屏幕上。它有两个主要阶段

  • 顶点阶段，其中顶点着色器获取输入到 GPU 的定位数据，并使用它通过应用指定的效果（如旋转、平移或透视）来将一系列顶点定位在 3D 空间中。然后，顶点被组装成基元（如三角形，它是渲染图形的基本构建块），并由 GPU 光栅化，以确定每个顶点应该在绘图画布上覆盖哪些像素。
  • 片段阶段，其中片段着色器计算由顶点着色器生成的基元覆盖的每个像素的颜色。这些计算通常使用诸如图像（以纹理形式）之类的输入，这些输入提供表面细节以及虚拟光源的位置和颜色。

GPURenderPassEncoder 对象实例是通过 GPUCommandEncoder.beginRenderPass() 属性创建的。

实例属性

label

一个字符串，提供一个标签，可用于识别对象，例如在 GPUError 消息或控制台警告中。

实例方法

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" 混合因子的常数混合颜色和 alpha 值（如在 GPUDevice.createRenderPipeline() 方法的描述符中设置，在 blend 属性中）。

setIndexBuffer()

设置当前的 GPUBuffer，它将为后续绘制命令提供索引数据。

setPipeline()

设置用于此渲染通道的 GPURenderPipeline。

setScissorRect()

设置光栅化阶段使用的剪切矩形。在转换为视口坐标后，落在剪切矩形之外的任何片段都将被丢弃。

setStencilReference()

使用 "replace" 模板操作（如在 GPUDevice.createRenderPipeline() 方法的描述符中设置，在定义各种模板操作的属性中）设置模板参考值。

setVertexBuffer()

设置或取消设置当前的 GPUBuffer，它将为后续绘制命令提供顶点数据。

setViewport()

设置光栅化阶段使用的视口，以线性地从规范化设备坐标映射到视口坐标。

示例

在我们的 基本渲染演示 中，通过 GPUCommandEncoder 记录了几个命令。这些命令中的大多数来自通过 GPUCommandEncoder.beginRenderPass() 创建的 GPURenderPassEncoder。

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
# gpurenderpassencoder

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅