XRViewport

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.

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:

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

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.

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
  }
});