GPUDevice: createRenderPipelineAsync() 方法

语法

createRenderPipelineAsync(descriptor)

参数

描述符（descriptor）

请参阅 GPUDevice.createRenderPipeline() 方法的描述符定义。

返回值

当创建的流水线准备好即可使用而无需额外延迟时，将以一个 GPURenderPipeline 对象实例 Fulfilled 的 Promise。

验证

如果流水线创建失败，并导致流水线无效，则返回的 Promise 会以一个 GPUPipelineError 被 Rejected。

• 如果这是由于内部错误，则 GPUPipelineError 的 reason 将是 "internal"。
• 如果这是由于验证错误，则 GPUPipelineError 的 reason 将是 "validation"。

如果以下任何一项不成立，则可能发生验证错误：

• 对于 depthStencil 对象
  • format 是一个 深度或模板 格式。
  • 对于线条和点拓扑，depthBias、depthBiasClamp 和 depthBiasSlopeScale 属性设置为 0，即如果 topology 设置为 "line-list"、"line-strip" 或 "point-list"。
  • 如果 depthWriteEnabled 为 true 或 depthCompare 不是 "always"，则 format 具有深度分量。
  • 如果 stencilFront 或 stencilBack 的属性不是其默认值，则 format 具有模板分量。
• 对于 fragment 对象
  • targets.length 小于或等于 GPUDevice 的 maxColorAttachments 限制。
  • 对于每个 target，writeMask 的数值等价物小于 16。
  • 如果使用的任何混合因子操作使用了源 alpha 通道（例如 "src-alpha-saturated"），则输出具有 alpha 通道（即，它必须是一个 vec4）。
  • 如果省略了 entryPoint 属性，则着色器代码包含一个单一的片段着色器入口点函数，供浏览器用作默认入口点。
• 对于 primitive 对象
  • 如果使用了 unclippedDepth 属性，则启用了 depth-clip-control 功能。
• 对于 vertex 对象
  • 如果省略了 entryPoint 属性，则着色器代码包含一个单一的顶点着色器入口点函数，供浏览器用作默认入口点。

示例

基本示例

以下示例展示了一个有效的渲染流水线描述符对象的构造基本示例，然后通过调用 createRenderPipelineAsync() 来创建一个 GPURenderPipeline。

async function init() {
  // …

  const vertexBuffers = [
    {
      attributes: [
        {
          shaderLocation: 0, // position
          offset: 0,
          format: "float32x4",
        },
        {
          shaderLocation: 1, // color
          offset: 16,
          format: "float32x4",
        },
      ],
      arrayStride: 32,
      stepMode: "vertex",
    },
  ];

  const pipelineDescriptor = {
    vertex: {
      module: shaderModule,
      entryPoint: "vertex_main",
      buffers: vertexBuffers,
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fragment_main",
      targets: [
        {
          format: navigator.gpu.getPreferredCanvasFormat(),
        },
      ],
    },
    primitive: {
      topology: "triangle-list",
    },
    layout: "auto",
  };

  const renderPipeline =
    await device.createRenderPipelineAsync(pipelineDescriptor);

  // …
}

规范

浏览器兼容性

另见

• WebGPU API