GPURenderPipeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheGPURenderPipeline interface of theWebGPU API represents a pipeline that controls the vertex and fragment shader stages and can be used in aGPURenderPassEncoder orGPURenderBundleEncoder.

AGPURenderPipeline object instance can be created using theGPUDevice.createRenderPipeline() orGPUDevice.createRenderPipelineAsync() methods.

Instance properties

label: A string providing a label that can be used to identify the object, for example inGPUError messages or console warnings.

Instance methods

getBindGroupLayout(): Returns the pipeline'sGPUBindGroupLayout object with the given index (i.e., included in the originatingGPUDevice.createRenderPipeline() orGPUDevice.createRenderPipelineAsync() call's pipeline layout).

Examples

Note:TheWebGPU samples feature many more examples.

Basic example

Ourbasic render demo provides an example of the construction of a valid render pipeline descriptor object, which is then used to create aGPURenderPipeline via acreateRenderPipeline() call.

// …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 = device.createRenderPipeline(pipelineDescriptor);// …