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
getViewport(view)
Parameter
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 aktivenXRFrame
ist oder sich diesesXRFrame
und dieXRWebGLLayer
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.
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