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.
Konstruktor
XRWebGLLayer()
Experimentell-
Erstellt und gibt ein neues
XRWebGLLayer
-Objekt zur Nutzung durch die angegebeneXRSession
zurück, wobei ein bestimmterWebGLRenderingContext
oderWebGL2RenderingContext
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 MethodebindFrameBuffer()
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.
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.
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
- WebXR Device API
- Erste Schritte mit WebGL
WebGLRenderingContext
undWebGL2RenderingContext
- Zeichnen eines Frames in unserem "Bewegung und Bewegung" WebXR-Beispiel