Signatur
Beschreibung
Die Eigenschaft radius der Schnittstelle XREquirectLayer legt fest, wie groß die Kugel ist, auf deren Innenseite der Compositor das equirektangulare Bild (etwa ein 360°-Foto oder -Video) abbildet. Der Wert wird in Metern angegeben und bezieht sich auf das Koordinatensystem des XRSpace der Ebene, verschoben durch transform.
Der Sonderwert 0 (Standard) steht für eine unendlich große Kugel. Der Inhalt wirkt dann wie ein Himmel oder eine ferne Umgebung, und Kopfbewegungen erzeugen keine Parallaxe. Das ist die übliche Einstellung für 360°-Panoramen. Ein endlicher Radius, zum Beispiel 2, erzeugt dagegen eine greifbare „Blase“ um die Nutzerin oder den Nutzer. Geht man darin umher, verzerrt sich das Bild erkennbar, und man kann die Kugel sogar verlassen.
Den Anfangswert übergibt man beim Anlegen über XRWebGLBinding.createEquirectLayer() im Init-Objekt (radius). Danach lässt sich die Eigenschaft direkt ändern, etwa für Zoom- oder Übergangseffekte. Der neue Wert gilt ab dem nächsten Frame, der zusammengesetzt wird.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | number | 0 | Neuer Radius in Metern beim Setzen der Eigenschaft. Erlaubt sind nur Werte >= 0; 0 bedeutet unendlicher Radius. |
Rückgabewert
0 bedeutet, dass die Kugel unendlich groß ist.Beispiele
360°-Panorama mit unendlichem Radius anlegen
const session = await navigator.xr.requestSession('immersive-vr', {
requiredFeatures: ['layers']
});
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2', { xrCompatible: true });
const refSpace = await session.requestReferenceSpace('local');
const binding = new XRWebGLBinding(session, gl);
const panorama = binding.createEquirectLayer({
space: refSpace,
viewPixelWidth: 4096,
viewPixelHeight: 2048,
layout: 'mono',
radius: 0 // unendlich: Himmel ohne Parallaxe
});
session.updateRenderState({ layers: [panorama] });
console.log(panorama.radius);Endliche Kugel um die Nutzerin oder den Nutzer
// Voraussetzung: binding und refSpace wie im vorigen Beispiel
const bubble = binding.createEquirectLayer({
space: refSpace,
viewPixelWidth: 2048,
viewPixelHeight: 1024,
radius: 3 // Kugel mit 3 m Radius
});
console.log(`Radius: ${bubble.radius} m`);Radius im Render-Loop animieren (Zoom-Effekt)
// Voraussetzung: session und bubble aus den Beispielen oben
const start = performance.now();
const onFrame = (time, frame) => {
const t = Math.min((time - start) / 2000, 1); // 2 Sekunden
// Kugel von 10 m auf 2 m zusammenziehen
bubble.radius = 10 - 8 * t;
// ... Textur der Ebene bei Bedarf neu zeichnen ...
frame.session.requestAnimationFrame(onFrame);
};
session.requestAnimationFrame(onFrame);// Wichtig · Fallstricke
- Experimentelle API: Die WebXR Layers API wird bislang vor allem im Meta Quest Browser und in einigen Chromium-Varianten unterstützt. Firefox und Safari unterstützen sie nicht. Prüfe die Unterstützung vorher mit
typeof XRWebGLBinding !== 'undefined'und fordere das Feature'layers'beirequestSession()an. - Keine negativen Werte: Der Radius darf nicht negativ sein. Je nach Implementierung wird ein negativer Wert abgelehnt oder als
0behandelt. Verlasse dich also nicht darauf. - Parallaxe: Bei endlichem Radius wird das Bild verzerrt, sobald sich der Kopf aus dem Mittelpunkt bewegt. Liegt der Kopf außerhalb der Kugel, ist der Inhalt eventuell gar nicht mehr zu sehen. Für Panoramen ohne Tiefe nimmst du besser
0. - Bezugssystem: Der Radius gilt im Koordinatensystem von
space. Bei einem'viewer'-Raum wandert die Kugel mit dem Kopf mit, was in der Regel unerwünscht ist. - Die Eigenschaft beschreibt nur die Geometrie der Projektion. Welcher Ausschnitt der Kugel belegt wird, bestimmen
centralHorizontalAngle,upperVerticalAngleundlowerVerticalAngle.