GPUDevice: createRenderPipelineAsync() method

descriptor

See the descriptor definition for the GPUDevice.createRenderPipeline() method.

A Promise that fulfills with a GPURenderPipeline object instance when the created pipeline is ready to be used without additional delay.

If pipeline creation fails and the resulting pipeline becomes invalid as a result, the returned promise rejects with a GPUPipelineError:

• If this is due to an internal error, the GPUPipelineError will have a reason of "internal".
• If this is due to a validation error, the GPUPipelineError will have a reason of "validation".

A validation error can occur if any of the following are false:

• For depthStencil objects:
  • format is a depth-or-stencil format.
  • If depthWriteEnabled is true or depthCompare is not "always", format has a depth component.
  • If stencilFront or stencilBack's properties are not at their default values, format has a stencil component.
• For fragment objects:
  • targets.length is less than or equal to the GPUDevice's maxColorAttachments limit.
  • For each target, writeMask's numeric equivalent is less than 16.
  • If any of the used blend factor operations use the source alpha channel (for example "src-alpha-saturated"), the output has an alpha channel (that is, it must be a vec4).

The following example shows a basic example of the construction of a valid render pipeline descriptor object, which is then used to create a GPURenderPipeline via a createRenderPipelineAsync() call.

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
  );

  // ...
}

• The WebGPU API