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

Syntax

setViewport(x, y, width, height, minDepth, maxDepth)

Parameters

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.

Return value

None (Undefined).

Validation

The following criteria must be met when callingsetViewport(), otherwise aGPUValidationError is generated and theGPURenderPassEncoder becomes invalid:

• x,y,width, andheight 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 andmaxDepth are both inside the range 0.0–1.0 inclusive.
• minDepth is less thanmaxDepth.

Examples

Basic snippet

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 context

In the WebGPU SamplesreversedZ 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,);// …

Specifications

Browser compatibility

See also

• TheWebGPU API