The GPURenderPipeline
interface of the WebGPU API represents a pipeline that controls the vertex and fragment shader stages and can be used in a GPURenderPassEncoder
or GPURenderBundleEncoder
.
A GPURenderPipeline
object instance can be created using the GPUDevice.createRenderPipeline()
or GPUDevice.createRenderPipelineAsync()
methods.
Instance properties
label
Experimental
-
A string providing a label that can be used to identify the object, for example in GPUError
messages or console warnings.
Instance methods
getBindGroupLayout()
Experimental
-
Returns the pipeline's GPUBindGroupLayout
object with the given index (i.e. included in the originating GPUDevice.createRenderPipeline()
or GPUDevice.createRenderPipelineAsync()
call's pipeline layout).
Examples
Basic example
Our basic render demo provides a simple example of the construction of a valid render pipeline descriptor object, which is then used to create a GPURenderPipeline
via a createRenderPipeline()
call.
const vertexBuffers = [
{
attributes: [
{
shaderLocation: 0,
offset: 0,
format: "float32x4",
},
{
shaderLocation: 1,
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);
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
GPURenderPipeline |
113Currently supported on ChromeOS, macOS, and Windows only.
|
113Currently supported on ChromeOS, macOS, and Windows only.
|
previewCurrently supported on Linux and Windows only.
|
No |
99Currently supported on ChromeOS, macOS, and Windows only.
|
No |
No |
No |
No |
No |
No |
No |
getBindGroupLayout |
113Currently supported on ChromeOS, macOS, and Windows only.
|
113Currently supported on ChromeOS, macOS, and Windows only.
|
previewCurrently supported on Linux and Windows only.
|
No |
99Currently supported on ChromeOS, macOS, and Windows only.
|
No |
No |
No |
No |
No |
No |
No |
label |
113Currently supported on ChromeOS, macOS, and Windows only.
|
113Currently supported on ChromeOS, macOS, and Windows only.
|
previewCurrently supported on Linux and Windows only.
|
No |
99Currently supported on ChromeOS, macOS, and Windows only.
|
No |
No |
No |
No |
No |
No |
No |
See also