XRWebGLLayer

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.

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

Das XRWebGLLayer Interface der WebXR Device API stellt eine Verbindung zwischen dem WebXR-Gerät (oder einem simulierten XR-Gerät im Falle einer Inline-Sitzung) und einem WebGL-Kontext her, der zum Rendern der Szene für die Anzeige auf dem Gerät verwendet wird. Insbesondere bietet es Zugriff auf den WebGL-Framebuffer und das Viewport, um den Zugang zum Kontext zu erleichtern.

Obwohl XRWebGLLayer derzeit der einzige unterstützte Typ von Framebuffer-Ebenen von WebGL ist, ist es durchaus möglich, dass zukünftige Aktualisierungen der WebXR-Spezifikation andere Ebenentypen und entsprechende Bildquellen ermöglichen.

EventTarget XRLayer XRWebGLLayer

Konstruktor

XRWebGLLayer() Experimentell

Erstellt und gibt ein neues XRWebGLLayer-Objekt zur Nutzung durch die angegebene XRSession zurück, wobei ein bestimmter WebGLRenderingContext oder WebGL2RenderingContext als Zielkontext verwendet wird.

Instanzeigenschaften

antialias Schreibgeschützt Experimentell

Ein boolescher Wert, der angibt, ob der Framebuffer des WebGL-Kontexts Anti-Aliasing unterstützt oder nicht. Die spezifische Art des Anti-Aliasing wird vom User Agent bestimmt.

fixedFoveation Experimentell

Eine Zahl, die die Menge der Foveation angibt, die vom XR-Kompositor verwendet wird. Fixed Foveated Rendering (FFR) rendert die Ränder der Augentexturen in einer niedrigeren Auflösung als die Mitte und reduziert die GPU-Belastung.

framebuffer Schreibgeschützt Experimentell

Gibt ein WebGLFramebuffer zurück, das zum Übergeben an die Methode bindFrameBuffer() geeignet ist.

framebufferWidth Schreibgeschützt Experimentell

Gibt die Breite des Framebuffers von XRWebGLLayer zurück.

framebufferHeight Schreibgeschützt Experimentell

Gibt die Höhe des Framebuffers der Ebene zurück.

ignoreDepthValues Schreibgeschützt Experimentell

Ein Boolean, der angibt, ob der WebXR-Kompositor die Inhalte des Tiefenpuffers der Ebene beim Komponieren der Szene verwenden soll.

Statische Methoden

getNativeFramebufferScaleFactor() Experimentell

Gibt den Skalierungsfaktor zurück, der verwendet werden kann, um die Auflösung des empfohlenen WebGL-Framebuffers auf die native Auflösung des Rendering-Geräts zu skalieren.

Instanzmethoden

getViewport() Experimentell

Gibt eine neue XRViewport Instanz zurück, die die Position, Breite und Höhe repräsentiert, auf die das WebGL-Kontext-Viewport gesetzt werden muss, um die Zeichnung auf den Bereich des Framebuffers zu enthalten, der für die Inhalte der angegebenen Ansicht vorgesehen ist. Auf diese Weise wird zum Beispiel das Rendering der Sicht des linken Auges und der Sicht des rechten Auges jeweils in die richtigen Teile des Framebuffers platziert.

Beispiele

Die Ebene an einen WebGL-Kontext binden

Dieses Snippet, entnommen aus Zeichnen eines Frames in unserem "Bewegung und Bewegung" WebXR-Beispiel, zeigt, wie das XRWebGLLayer vom Renderzustand des XRSession Objekts erhalten wird und dann durch den Aufruf der WebGL-Funktion bindFrameBuffer() als aktueller rendender WebGL Framebuffer gebunden wird.

js
let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

Rendern jeder Ansicht in einem Frame

Jedes Mal, wenn die GPU bereit ist, die Szene auf das XR-Gerät zu rendern, ruft der XR-Laufzeit das Funktion auf, die Sie angegeben haben, als Sie die Methode requestAnimationFrame() des XRSession aufgerufen haben, um das Frame zu rendern.

Diese Funktion erhält als Eingabe ein XRFrame, das die Daten kapselt, die zum Rendern des Frames benötigt werden. Diese Informationen umfassen die Pose (ein XRViewerPose Objekt), das die Position und Blickrichtung des Betrachters innerhalb der Szene beschreibt, sowie eine Liste von XRView Objekten, die jeweils eine Perspektive auf die Szene darstellen. In aktuellen WebXR-Implementierungen wird diese Liste niemals mehr als zwei Einträge enthalten: einen, der die Position und den Blickwinkel des linken Auges beschreibt, und einen weiteren, der dasselbe für das rechte Auge tut.

js
let pose = xrFrame.getViewerPose(xrReferenceSpace);

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

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

    /* Render the view */
  }
}

Spezifikationen

Specification
WebXR Device API
# xrwebgllayer-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch