XRViewport

Limited availability

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

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

Das XRViewport-Interface der WebXR Device API bietet Eigenschaften zur Beschreibung der Größe und Position des aktuellen Viewports innerhalb der XRWebGLLayer, die zur Darstellung der 3D-Szene verwendet wird.

Instanz-Eigenschaften

height Nur lesbar

Die Höhe in Pixeln des Viewports.

width Nur lesbar

Die Breite in Pixeln des Viewports.

x Nur lesbar

Der Versatz von der Ursprung der Ziel-Grafikoberfläche (typischerweise eine XRWebGLLayer) zur linken Kante des Viewports, in Pixeln.

y Nur lesbar

Der Versatz vom Ursprung des Viewports zur unteren Kante des Viewports; das Koordinatensystem von WebGL platziert (0, 0) in der unteren linken Ecke der Oberfläche.

Nutzungshinweise

Aktuell ist der einzige verfügbare Oberflächentyp die XRWebGLLayer. Die genaue Ausrichtung des Koordinatensystems kann bei anderen Oberflächentypen variieren, aber in WebGL befindet sich der Ursprung (0, 0) in der unteren linken Ecke der Oberfläche. Somit definieren die in einem XRViewport angegebenen Werte ein Rechteck, dessen untere linke Ecke bei (x, y) liegt und das sich width Pixel nach links und height Pixel nach oben erstreckt.

Diese Werte können direkt in die Methode WebGLRenderingContext.viewport() übergeben werden:

js
const xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);

Beispiel

Dieses Beispiel richtet einen Animationsrahmen-Callback mit requestAnimationFrame() ein. Nach der anfänglichen Einrichtung durchläuft es jede der Ansichten innerhalb der Pose des Betrachters und konfiguriert den Viewport entsprechend der Vorgaben von XRWebGLLayer.

js
xrSession.requestAnimationFrame((time, xrFrame) => {
  const viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  gl.bindFramebuffer(xrWebGLLayer.framebuffer);

  for (const xrView of viewerPose.views) {
    const xrViewport = xrWebGLLayer.getViewport(xrView);
    gl.viewport(
      xrViewport.x,
      xrViewport.y,
      xrViewport.width,
      xrViewport.height,
    );

    // Now we can use WebGL to draw into a viewport matching
    // the viewer's needs
  }
});

Spezifikationen

Specification
WebXR Device API
# xrviewport-interface

Browser-Kompatibilität

BCD tables only load in the browser