GPURenderPassEncoder: setPipeline() method

Limited availability

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

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

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Web Workers.

The setPipeline() method of the GPURenderPassEncoder interface sets the GPURenderPipeline to use for subsequent render pass commands.

Syntax

setPipeline(pipeline)

Parameters

pipeline: The GPURenderPipeline to use for subsequent render pass commands.

Validation

The following criteria must be met when calling setPipeline(), otherwise a GPUValidationError is generated and the GPURenderPassEncoder becomes invalid:

If the GPURenderPipeline writes to the depth component of the depth/stencil attachment, depthReadOnly (as specified in the descriptor of the originating GPUCommandEncoder.beginRenderPass() call) is true.
If the GPURenderPipeline writes to the stencil component of the depth/stencil attachment, stencilReadOnly (as specified in the descriptor of the originating GPUCommandEncoder.beginRenderPass() call) is true.

In our basic render demo, several commands are recorded via a GPUCommandEncoder. Most of these commands originate from the GPURenderPassEncoder created via GPUCommandEncoder.beginRenderPass(). setPipeline() is called in an appropriate place to set the render pipeline.

// ...

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

// Create GPUCommandEncoder to issue commands to the GPU
// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...

Specifications

Specification
WebGPU # dom-gpurendercommandsmixin-setpipeline

Browser compatibility

BCD tables only load in the browser