Signatur
Beschreibung
Der Konstruktor XRVisibilityMaskChangeEvent() erstellt ein Ereignisobjekt vom Typ XRVisibilityMaskChangeEvent. Solche Ereignisse löst der Browser normalerweise selbst auf einer XRSession aus (Ereignistyp visibilitymaskchange), sobald das XR-Gerät mitteilt, welcher Bereich einer Ansicht tatsächlich sichtbar ist. Linsen von VR-Headsets verdecken meist Randbereiche des gerenderten Bildes – die Sichtbarkeitsmaske beschreibt den sichtbaren Bereich als Dreiecksnetz.
Anwendungen nutzen diese Maske, um nicht sichtbare Pixel gar nicht erst zu rendern (etwa über den Stencil- oder Depth-Buffer). Das spart Füllrate und GPU-Zeit, was bei hohen Bildraten im VR-Kontext spürbar ist.
Den Konstruktor selbst ruft man selten direkt auf – typische Einsatzzwecke sind Tests, Polyfills oder das Simulieren von Maskenänderungen, etwa um die eigene Render-Logik ohne echtes Headset zu prüfen. Alle Felder des Init-Objekts sind Pflicht; insbesondere wird eine gültige XRSession benötigt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses, in der Praxis "visibilitymaskchange". |
|
| $options Pflicht | XRVisibilityMaskChangeEventInit | Init-Objekt (erweitert EventInit, also auch bubbles, cancelable, composed) mit folgenden Pflichtfeldern:
|
Beispiele
Auf echte Maskenänderungen einer Sitzung reagieren
const session = await navigator.xr.requestSession('immersive-vr');
const masks = new Map();
session.addEventListener('visibilitymaskchange', (event) => {
// Maske pro Ansicht speichern und später in den Stencil-Buffer zeichnen
masks.set(event.index, {
eye: event.eye,
vertices: event.vertices,
indices: event.indices,
});
console.log(`Maske für ${event.eye}: ${event.indices.length / 3} Dreiecke`);
});Maskenänderung für Tests simulieren
const session = await navigator.xr.requestSession('immersive-vr');
// Einfaches Quadrat aus zwei Dreiecken als Testmaske
const vertices = new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1]);
const indices = new Uint32Array([0, 1, 2, 0, 2, 3]);
const event = new XRVisibilityMaskChangeEvent('visibilitymaskchange', {
session,
eye: 'left',
index: 0,
vertices,
indices,
});
console.log(event.type, event.eye, event.index, event.vertices.length);
session.dispatchEvent(event);Feature-Erkennung vor der Nutzung
const supportsMask = 'XRVisibilityMaskChangeEvent' in window;
if (!supportsMask) {
console.warn('Sichtbarkeitsmasken werden nicht unterstützt – es wird das volle Bild gerendert.');
}// Wichtig · Fallstricke
- Experimentell: Nur in einigen Chromium-basierten Browsern verfügbar, Firefox und Safari unterstützen die Schnittstelle nicht. Immer per Feature-Erkennung prüfen.
- Nur in sicheren Kontexten (HTTPS) verfügbar; eine echte
XRSessionerfordert zudem eine Nutzergeste und ggf. eine Berechtigung. - Alle Felder des Init-Objekts sind Pflicht – fehlt z. B.
sessionoder ist es keineXRSession, wirft der Konstruktor einenTypeError. - Selbst erzeugte und per
dispatchEvent()ausgelöste Ereignisse habenisTrusted === falseund verändern die tatsächliche Maske des Geräts nicht. - Eine leere Maske (keine Indizes) bedeutet, dass die gesamte Ansicht sichtbar ist – die Render-Logik sollte diesen Fall abfangen.