Signatur
Beschreibung
Die Eigenschaft eye eines XRVisibilityMaskChangeEvent gibt an, auf welches Auge sich die im Ereignis enthaltene Sichtbarkeitsmaske (vertices und indices) bezieht. Der Wert ist vom Typ XREye und kann "left", "right" oder "none" sein. "none" steht für Ansichten, die keinem bestimmten Auge zugeordnet sind, etwa bei monoskopischer Darstellung oder zusätzlichen Ansichten.
Das Ereignis visibilitymaskchange wird auf der XRSession ausgelöst, sobald das Gerät eine neue oder geänderte Maske meldet. Die Maske beschreibt den Bereich jeder Ansicht, der durch die Linsen tatsächlich sichtbar ist. Pixel außerhalb davon muss man nicht rendern.
In der Praxis nutzt man eye zusammen mit index bzw. view, um die Maskengeometrie der richtigen Ansicht zuzuordnen. Mit der Geometrie füllt man dann z. B. den Stencil- oder Tiefenpuffer vorab, damit der Fragment-Shader unsichtbare Randbereiche überspringt. Das spart GPU-Leistung.
Rückgabewert
Beispiele
Masken pro Auge mit addEventListener speichern
const masks = new Map();
const session = await navigator.xr.requestSession('immersive-vr');
session.addEventListener('visibilitymaskchange', (event) => {
// Maske für das jeweilige Auge ablegen
masks.set(event.eye, {
vertices: event.vertices, // Float32Array (x, y)
indices: event.indices // Uint32Array (Dreiecke)
});
console.log(`Neue Maske für Auge: ${event.eye}, Dreiecke: ${event.indices.length / 3}`);
});Über die on-Property und Zuordnung im Render-Loop
const maskByEye = {};
session.onvisibilitymaskchange = (event) => {
maskByEye[event.eye] = event.vertices;
};
const onFrame = (time, frame) => {
const pose = frame.getViewerPose(refSpace);
if (pose) {
for (const view of pose.views) {
const mask = maskByEye[view.eye];
if (mask) {
// Maske z. B. in den Stencil-Puffer zeichnen (eigene Funktion)
drawStencilMask(view, mask);
}
renderScene(view);
}
}
session.requestAnimationFrame(onFrame);
};
session.requestAnimationFrame(onFrame);Werte von eye auswerten
session.addEventListener('visibilitymaskchange', ({ eye, index }) => {
switch (eye) {
case 'left':
console.log(`Linkes Auge (View-Index ${index})`);
break;
case 'right':
console.log(`Rechtes Auge (View-Index ${index})`);
break;
default:
console.log(`Ansicht ohne Augenzuordnung (Index ${index})`);
}
});// Wichtig · Fallstricke
- Experimentell: Die Eigenschaft wird bisher kaum unterstützt (vor allem in Chromium-basierten XR-Browsern wie dem Meta-Quest-Browser). Vorher prüfen, z. B. mit
'onvisibilitymaskchange' in XRSession.prototype. - Die Eigenschaft ist schreibgeschützt. Zuweisungen haben keine Wirkung.
eyereicht nicht immer als eindeutiger Schlüssel: Bei mehr als zwei Ansichten können mehrere Ansichten den Wert"none"haben. Nutzen Sie dann besserindexoderview.- Das Ereignis kann während einer Sitzung mehrfach auftreten. Ersetzen Sie deshalb gespeicherte Masken und hängen Sie keine neuen an.
- Nur in sicheren Kontexten (HTTPS) und in immersiven Sitzungen verfügbar.