GPURenderPassEncoder: setViewport()-Methode

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die setViewport()-Methode der GPURenderPassEncoder-Schnittstelle setzt den Viewport, der während der Rasterisierungsstufe verwendet wird, um von normalisierten Gerätekoordinaten zu Viewport-Koordinaten linear zu konvertieren.

Syntax

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

Parameter

x

Eine Zahl, die den minimalen X-Wert des Viewports in Pixeln darstellt.

y

Eine Zahl, die den minimalen Y-Wert des Viewports in Pixeln darstellt.

width

Eine Zahl, die die Breite des Viewports in Pixeln darstellt.

height

Eine Zahl, die die Höhe des Viewports in Pixeln darstellt.

minDepth

Eine Zahl, die den minimalen Tiefenwert des Viewports darstellt.

maxDepth

Eine Zahl, die den maximalen Tiefenwert des Viewports darstellt.

Hinweis: Wenn kein setViewport()-Aufruf vorgenommen wird, lauten die Standardwerte (0, 0, attachment width, attachment height, 0, 1) für jeden Render-Pass.

Rückgabewert

Keiner (Undefined).

Validierung

Die folgenden Kriterien müssen erfüllt sein, wenn setViewport() aufgerufen wird, da sonst ein GPUValidationError erzeugt wird und der GPURenderPassEncoder ungültig wird:

  • x, y, width und height sind alle größer als oder gleich 0.
  • x + width ist kleiner als oder gleich der Breite der Render-Anhänge des Render-Passes (siehe Hinweis unten).
  • y + height ist kleiner als oder gleich der Höhe der Render-Anhänge des Render-Passes (siehe Hinweis unten).
  • minDepth und maxDepth liegen beide im Bereich 0.0–1.0 inklusive.
  • minDepth ist kleiner als maxDepth.

Hinweis: Siehe die in der Beschreibung von GPUCommandEncoder.beginRenderPass() angegebenen Farb- und Tiefen-/Stencil-Anhänge; die Breite und Höhe basieren auf der des GPUTexture, von dem ihre views stammen.

Beispiele

Grundlegender Ausschnitt

Bei einem typischen Canvas-Render könnte das Folgende verwendet werden, um die Breite und Höhe der gerenderten Grafiken zu halbieren:

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

Im Kontext

Im WebGPU-Samples-reversedZ example wird setViewport mehrmals verwendet, um den Viewport für die verschiedenen Render-Passes einzustellen. Studieren Sie die Beispielcodeliste für den vollen Kontext.

Zum Beispiel:

js
// ...

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

// ...

Spezifikationen

Specification
WebGPU
# dom-gpurenderpassencoder-setviewport

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch