ThecreateRenderPipelineAsync() method of theGPUDevice interface returns aPromise that fulfills with aGPURenderPipeline, which can control the vertex and fragment shader stages and be used in aGPURenderPassEncoder orGPURenderBundleEncoder, once the pipeline can be used without any stalling.

Syntax

createRenderPipelineAsync(descriptor)

Parameters

descriptor

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

Return value

APromise that fulfills with aGPURenderPipeline object instance when the created pipeline is ready to be used without additional delay.

Validation

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

• If this is due to an internal error, theGPUPipelineError will have areason of"internal".
• If this is due to a validation error, theGPUPipelineError will have areason of"validation".

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

• FordepthStencil objects:
  • format is adepth-or-stencil format.
  • ThedepthBias,depthBiasClamp, anddepthBiasSlopeScale properties are set to0 for line and point topologies, i.e., iftopology is set to"line-list","line-strip", or"point-list".
  • IfdepthWriteEnabled istrue ordepthCompare is not"always",format has a depth component.
  • IfstencilFront orstencilBack's properties are not at their default values,format has a stencil component.
• Forfragment objects:
  • targets.length is less than or equal to theGPUDevice'smaxColorAttachmentslimit.
  • For eachtarget,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 avec4).
  • If theentryPoint property is omitted, the shader code contains a single fragment shader entry point function for the browser to use as the default entry point.
• Forprimitive objects:
  • If theunclippedDepth property is used, thedepth-clip-controlfeature is enabled.
• Forvertex objects:
  • If theentryPoint property is omitted, the shader code contains a single vertex shader entry point function for the browser to use as the default entry point.

Examples

Basic example

The following example shows a basic example of the construction of a valid render pipeline descriptor object, which is then used to create aGPURenderPipeline via acreateRenderPipelineAsync() 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);  // …}

Specifications

Browser compatibility

See also

• TheWebGPU API