Signatur
XRCompositionLayer.layout
Beschreibung
Die schreibgeschützte Eigenschaft layout des Interfaces XRCompositionLayer gibt an, wie die Bildinhalte einer Ebene auf die Ansichten (Augen) der XR-Sitzung verteilt sind. Sie ist bei allen abgeleiteten Ebenentypen verfügbar: XRProjectionLayer, XRQuadLayer, XRCylinderLayer, XREquirectLayer und XRCubeLayer.
Mögliche Werte sind:
"default"– Die Ebene umfasst alle Ansichten der Sitzung (typisch für Projektionsebenen, z. B. beitextureType: "texture-array")."mono"– Ein einziges Bild wird beiden Augen gezeigt."stereo"– Der User-Agent entscheidet, wie die Bilder für linkes und rechtes Auge in der Textur angeordnet werden."stereo-left-right"– Linkes Auge links, rechtes Auge rechts in einer gemeinsamen Textur."stereo-top-bottom"– Linkes Auge oben, rechtes Auge unten in einer gemeinsamen Textur.
Der Wert wird bei der Erstellung der Ebene über die Option layout im Init-Objekt (z. B. von XRWebGLBinding.createQuadLayer()) festgelegt und kann danach nicht mehr geändert werden. Beim Rendern ist er wichtig, um zu entscheiden, ob pro Auge ein eigenes Teilbild (über getSubImage(layer, frame, eye)) gezeichnet werden muss oder ob ein einziges Bild genügt.
Rückgabewert
Typ
string ("default" | "mono" | "stereo" | "stereo-left-right" | "stereo-top-bottom")
Beschreibung
Der Layout-Typ der Ebene als Zeichenkette (Enum
XRLayerLayout).Beispiele
Quad-Ebene mit Stereo-Layout erstellen und prüfen
const session = await navigator.xr.requestSession('immersive-vr', {
requiredFeatures: ['layers']
});
const gl = document.createElement('canvas').getContext('webgl2', { xrCompatible: true });
const refSpace = await session.requestReferenceSpace('local');
const binding = new XRWebGLBinding(session, gl);
// Stereo-Video (Oben/Unten-Format) auf einer Fläche anzeigen
const quadLayer = binding.createQuadLayer({
space: refSpace,
viewPixelWidth: 1920,
viewPixelHeight: 1080,
layout: 'stereo-top-bottom'
});
session.updateRenderState({ layers: [quadLayer] });
console.log(quadLayer.layout);stereo-top-bottom
Rendering abhängig vom Layout pro Auge oder einmalig
const drawLayer = (binding, layer, frame, pose, gl, drawScene) => {
// Bei 'mono' reicht ein Teilbild, sonst eines pro Auge
const eyes = layer.layout === 'mono'
? ['none']
: pose.views.map((view) => view.eye);
for (const eye of eyes) {
const subImage = binding.getSubImage(layer, frame, eye);
const { x, y, width, height } = subImage.viewport;
gl.framebufferTexture2D(
gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
gl.TEXTURE_2D, subImage.colorTexture, 0
);
gl.viewport(x, y, width, height);
drawScene(eye);
}
};Layout einer Projektionsebene protokollieren
const projLayer = binding.createProjectionLayer({ textureType: 'texture-array' });
session.updateRenderState({ layers: [projLayer] });
// Bei Texture-Arrays deckt die Ebene alle Ansichten ab
console.log(`Projektionsebene-Layout: ${projLayer.layout}`);Projektionsebene-Layout: default
// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
layer.layouthat keine Wirkung. Das Layout muss beim Erstellen der Ebene im Init-Objekt angegeben werden; für ein anderes Layout ist eine neue Ebene nötig. - Der Wert
"default"ist Projektionsebenen vorbehalten; bei Quad-, Zylinder-, Equirect- und Cube-Ebenen führt er zu einem Fehler. Cube-Ebenen unterstützen keine"stereo-left-right"/"stereo-top-bottom"-Anordnung. - Bei
"stereo"legt der User-Agent die Anordnung fest – lesen Sie Viewport und Textur immer übergetSubImage()aus, statt die Aufteilung selbst anzunehmen. - Kompatibilität: Die WebXR Layers API ist experimentell und nur in wenigen Browsern verfügbar (v. a. Meta Quest Browser). Die Funktion
'layers'muss beirequestSession()angefordert werden; Desktop-Browser unterstützen sie meist nicht. Nur in sicheren Kontexten (HTTPS) verfügbar.