XRWebGLLayer: getViewport()-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.

Die getViewport()-Methode der XRWebGLLayer-Schnittstelle gibt den XRViewport zurück, der verwendet werden sollte, um den angegebenen XRView in die WebGL-Schicht zu rendern. Für WebXR-Geräte, die einen einzelnen Framebuffer für beide Augen verwenden, repräsentiert der zurückgegebene Viewport den Bereich des Framebuffers, in den die Szene für das durch die Ansicht dargestellte Auge gerendert werden soll.

Syntax

js
getViewport(view)

Parameter

view

Ein XRView-Objekt, das die Ansicht angibt, für die der Viewport zurückgegeben werden soll.

Rückgabewert

Ein XRViewport-Objekt, das den Viewport repräsentiert, der das Zeichnen auf den Teil der Schicht beschränkt, der der angegebenen view entspricht.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn entweder die angegebene view nicht in einem aktiven XRFrame ist oder sich dieses XRFrame und die XRWebGLLayer nicht in derselben WebXR-Sitzung befinden.

Beispiele

Dieses Beispiel zeigt teilweise, wie der Callback für die requestAnimationFrame()-Funktion aussehen könnte, indem getViewport() verwendet wird, um den Viewport zu erhalten, sodass das Zeichnen auf den für das gerade gerenderte Auge vorgesehenen Bereich beschränkt werden kann.

Dies funktioniert, weil die durch ein XRViewerPose zurückgegebene Menge an Ansichten jeweils die Perspektive eines Auges auf die Szene darstellt. Da der Framebuffer in zwei Hälften geteilt ist, eine für jedes Auge, wird durch das Einstellen des WebGL-Viewports auf den Viewport der WebXR-Schicht sichergestellt, dass beim Rendern der Szene für die Pose des aktuellen Auges die Szene in die richtige Hälfte des Framebuffers gerendert wird.

js
function drawFrame(time, frame) {
  const session = frame.session;

  const pose = frame.getViewerPose(mainReferenceSpace);

  if (pose) {
    const glLayer = session.renderState.baseLayer;
    gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

    gl.clearColor(0, 0, 0, 1.0);
    gl.clearDepth(1.0);
    gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_COLOR_BIT);

    for (const view of pose.views) {
      const viewport = glLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      /* Render the scene now */
    }
  }
}

Spezifikationen

Specification
WebXR Device API
# dom-xrwebgllayer-getviewport

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch