GPUDevice: createPipelineLayout() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The createPipelineLayout() method of the GPUDevice interface creates a GPUPipelineLayout that defines the GPUBindGroupLayouts used by a pipeline. GPUBindGroups used with the pipeline during command encoding must have compatible GPUBindGroupLayouts.

Syntax

createPipelineLayout(descriptor)

Parameters

descriptor

An object containing the following properties:

bindGroupLayouts: An array of GPUBindGroupLayout objects (which are in turn created via calls to GPUDevice.createBindGroupLayout()). Each one corresponds to a @group attribute in the shader code contained in the GPUShaderModule used in a related pipeline.
label Optional: A string providing a label that can be used to identify the object, for example in GPUError messages or console warnings.

Return value

A GPUPipelineLayout object instance.

Validation

The following criteria must be met when calling createPipelineLayout(), otherwise a GPUValidationError is generated and an invalid GPUPipelineLayout object is returned:

The GPUBindGroupLayout objects in bindGroupLayouts are valid.
The number of GPUBindGroupLayout objects in bindGroupLayouts is less than the GPUDevice's maxBindGroups limit.

Examples

Note: The WebGPU samples feature many more examples.

Multiple bind group layouts, bind group, and pipeline layout

The following snippet:

Creates a GPUBindGroupLayout that describes a binding with a buffer, a texture, and a sampler.
Creates a GPUPipelineLayout based on the GPUBindGroupLayout.

// ...

const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
      buffer: {},
    },
    {
      binding: 1,
      visibility: GPUShaderStage.FRAGMENT,
      texture: {},
    },
    {
      binding: 2,
      visibility: GPUShaderStage.FRAGMENT,
      sampler: {},
    },
  ],
});

const pipelineLayout = device.createPipelineLayout({
  bindGroupLayouts: [bindGroupLayout],
});

// ...

Specifications

Specification
WebGPU # dom-gpudevice-createpipelinelayout

Browser compatibility

BCD tables only load in the browser