GPURenderPassEncoder: setViewport() 方法

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

注意:此功能在 Web Workers 中可用。

GPURenderPassEncoder 介面的 setViewport() 方法用於設定光柵化階段使用的視口,該視口用於將歸一化裝置座標線性對映到視口座標。

語法

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 會失效

  • xywidthheight 都大於或等於 0。
  • x + width 小於或等於渲染通道的渲染附件的寬度(見下方的註釋)。
  • y + height 小於或等於渲染通道的渲染附件的高度(見下方的註釋)。
  • minDepthmaxDepth 都包含在 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

瀏覽器相容性

另見