GPURenderPassEncoder: setViewport() 方法

实验性： 这是一个 实验性技术
在生产环境中使用此功能前，请仔细查看 浏览器兼容性表格。

安全上下文：此功能仅在 安全上下文（HTTPS）中可用，并且仅在部分或全部 支持的浏览器 中可用。

setViewport() 方法是 GPURenderPassEncoder 接口的一部分，用于设置光栅化阶段使用的视口，以便将规范化设备坐标线性映射到视口坐标。

语法

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

参数

x

表示视口最小 X 值的数字，单位为像素。

y

表示视口最小 Y 值的数字，单位为像素。

width

表示视口宽度的数字，单位为像素。

height

表示视口高度的数字，单位为像素。

minDepth

表示视口最小深度值的数字。

maxDepth

表示视口最大深度值的数字。

注意：如果未调用 setViewport()，则每个渲染通道的默认值为 (0, 0, 附加宽度, 附加高度, 0, 1)。

返回值

无 (Undefined).

验证

调用 setViewport() 时必须满足以下条件，否则将生成 GPUValidationError，并且 GPURenderPassEncoder 将变为无效。

  • x、y、width 和 height 都大于或等于 0。
  • x + width 小于或等于渲染通道渲染附件的宽度（参见下面的说明）。
  • y + height 小于或等于渲染通道渲染附件的高度（参见下面的说明）。
  • minDepth 和 maxDepth 都在 0.0 到 1.0（含）之间。
  • minDepth 小于 maxDepth。

注意：请参阅 GPUCommandEncoder.beginRenderPass() 描述符中指定的颜色和深度/模板附件；宽度和高度基于其 view 来源的 GPUTexture 的宽度和高度。

示例

基本代码片段

在典型的画布渲染中，可以使用以下代码将渲染图形的宽度和高度减半。

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

上下文

在 WebGPU 示例 reversedZ 示例 中，setViewport 被多次用于设置不同渲染通道的视口。请研究示例代码清单以了解完整上下文。

例如

js
// ...

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

// ...

规范

规范
WebGPU
# dom-gpurenderpassencoder-setviewport

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅