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