Signatur
Beschreibung
Die Eigenschaft radius einer XRCylinderLayer gibt den Radius des gedachten Zylinders an, auf dessen Innenseite die Ebene dargestellt wird. Der Wert ist eine Gleitkommazahl in Metern. Gemessen wird von der Zylinderachse aus, deren Lage der transform der Ebene im Referenzraum space festlegt. Hat man bei XRWebGLBinding.createCylinderLayer() keinen Radius angegeben, gilt der Standardwert 2.0.
Zylinderebenen eignen sich gut für gebogene Bedienoberflächen, Videowände oder Textflächen in VR. Durch die Krümmung ist der Abstand zum Auge überall gleich. Deshalb bleibt die Darstellung auch am Rand scharf und verzerrt nicht. Der Radius bestimmt dabei zusammen mit centralAngle und aspectRatio die sichtbare Größe:
- Bogenbreite =
radius * centralAngle - Höhe = Bogenbreite /
aspectRatio
Die Eigenschaft ist schreibbar. Du kannst den Radius also zur Laufzeit ändern, etwa um eine Oberfläche näher heranzuholen oder weiter wegzuschieben. Die Änderung wirkt sich beim nächsten Bild aus, das der Compositor ausgibt. Die Pixelauflösung der Ebene (viewPixelWidth/viewPixelHeight) bleibt dabei gleich.
Rückgabewert
2.0). Wenn du einen neuen number-Wert zuweist, ändert sich die Geometrie der Ebene.Beispiele
Zylinderebene mit eigenem Radius erzeugen
const session = await navigator.xr.requestSession('immersive-vr', {
requiredFeatures: ['layers']
});
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2', { xrCompatible: true });
const space = await session.requestReferenceSpace('local');
const binding = new XRWebGLBinding(session, gl);
const cylinder = binding.createCylinderLayer({
space,
viewPixelWidth: 1024,
viewPixelHeight: 512,
radius: 1.5, // 1,5 m Abstand zur Achse
centralAngle: Math.PI / 3, // 60°
aspectRatio: 2
});
session.updateRenderState({ layers: [cylinder] });
console.log(cylinder.radius);Sichtbare Größe aus dem Radius berechnen
const layerSize = (layer) => {
const width = layer.radius * layer.centralAngle; // Bogenlänge
const height = width / layer.aspectRatio;
return { width: width.toFixed(2), height: height.toFixed(2) };
};
// Standardwerte: radius 2, centralAngle π/4, aspectRatio 2
console.log(layerSize(cylinder));Radius ändern, Bogenbreite beibehalten
// Oberfläche heranholen, ohne dass die Bogenbreite sich ändert
const setDistance = (layer, newRadius) => {
const arcWidth = layer.radius * layer.centralAngle;
layer.radius = newRadius;
layer.centralAngle = Math.min(arcWidth / newRadius, 2 * Math.PI);
};
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') setDistance(cylinder, cylinder.radius - 0.25);
if (e.key === 'ArrowDown') setDistance(cylinder, cylinder.radius + 0.25);
});// Wichtig · Fallstricke
Kompatibilität: Die WebXR Layers API ist experimentell. Unterstützt wird sie vor allem im Meta Quest Browser, in anderen Browsern fehlt sie weitgehend oder ist nur über Flags verfügbar. Fordere bei requestSession() das Feature 'layers' an. Prüfe außerdem vorher, ob XRWebGLBinding.prototype.createCylinderLayer existiert. Für Browser ohne Unterstützung gibt es das WebXR-Layers-Polyfill.
- Die Einheit ist immer Meter. Ein sehr kleiner Radius kann unangenehm sein, weil die Ebene dann zu nah am Auge liegt. Etwa 1–3 m sind für Bedienoberflächen üblich.
- Der Betrachter sollte sich in der Nähe der Zylinderachse befinden. Andernfalls wirkt die Krümmung ungleichmäßig. Die Position der Achse legt
transformfest. - Wenn du nur
radiusänderst, wird die Ebene breiter bzw. schmaler, weilcentralAnglegleich bleibt. Soll die Größe konstant bleiben, passe den Winkel mit an. - Die Texturauflösung ändert sich nicht. Bei größerem Radius wirkt der Inhalt deshalb gröber gerastert.