The setViewport() method of the GPURenderPassEncoder interface sets the viewport used during the rasterization stage to linearly map from normalized device coordinates to viewport coordinates.

x

A number representing the minimum X value of the viewport, in pixels.

y

A number representing the minimum Y value of the viewport, in pixels.

width

A number representing the width of the viewport, in pixels.

height

A number representing the height of the viewport, in pixels.

minDepth

A number representing the minimum depth value of the viewport.

maxDepth

A number representing the maximum depth value of the viewport.

None (Undefined).

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

• x, y, width, and height are all greater than or equal to 0.
• x + width is less than or equal to the width of the render pass's render attachments (see note below).
• y + height is less than or equal to the height of the render pass's render attachments (see note below).
• minDepth and maxDepth are both inside the range 0.0–1.0 inclusive.
• minDepth is less than maxDepth.

In a typical canvas render, the following could be used to halve the width and height of the rendered graphics:

passEncoder.setViewport(0, 0, canvas.width / 2, canvas.height / 2, 0, 1);

In the WebGPU Samples reversedZ example, setViewport is used several times to set the viewport for the different render passes. Study the example code listing for the full context.

For example:

// ...

colorPass.setViewport(
  (canvas.width * m) / 2,
  0,
  canvas.width / 2,
  canvas.height,
  0,
  1,
);

// ...

• The WebGPU API