XRSession: visibilitymaskchange-Ereignis
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Das visibilitymaskchange-Ereignis wird an eine XRSession gesendet, wenn sich der für den Benutzer sichtbare Teil einer XRView ändert.
Beachten Sie, dass die Ansicht mit einem bestimmten Auge verbunden ist und der sichtbare Teil für den Benutzer durch eine Sichtbarkeitsmaske definiert ist. Weitere Informationen finden Sie in der XRVisibilityMaskChangeEvent-Schnittstelle.
Dies ermöglicht Leistungsverbesserungen, indem der Browser nur den sichtbaren Teil der aktualisierten Ansicht zeichnet.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("visibilitymaskchange", (event) => { })
onvisibilitymaskchange = (event) => { }
Ereignistyp
Ein XRVisibilityMaskChangeEvent. Erbt von Event.
Beispiele
Three.js-Beispiel
Dieses Snippet zeigt, wie visibilitymaskchange verwendet werden könnte, um in einer Three.js-Anwendung nur den sichtbaren Teil der XRView zu zeichnen. Die neue Ansicht muss mit der XRView.projectionMatrix der entsprechenden XRView und einem Standard-XRRigidTransform gezeichnet werden.
session.addEventListener("visibilitymaskchange", onVisibilityMaskChange);
function onVisibilityMaskChange(event) {
const geometry = new BufferGeometry();
geometry.setIndex(new BufferAttribute(event.indices, 1));
const vertices = new Float32Array((event.vertices.length / 2) * 3);
let x = 0,
y = 0;
while (x < event.vertices.length) {
vertices[y++] = event.vertices[x++];
vertices[y++] = event.vertices[x++];
vertices[y++] = -1;
}
geometry.setAttribute("position", new BufferAttribute(vertices, 3));
const mask = event.eye === "left" ? leftEyeMask : rightEyeMask;
const matrix = cameras[event.eye === "left" ? 0 : 1].projectionMatrix;
mask.geometry = geometry;
mask.material = new ShaderMaterial({
vertexShader: _visibility_mask_vertex,
fragmentShader: _visibility_mask_fragment,
uniforms: {
clipMatrix: { value: matrix },
},
});
maskScene = new Scene();
maskScene.add(leftEyeMask);
maskScene.add(rightEyeMask);
}
Der Code-Schnipsel stammt aus diesem Fork von WebXRManager.js.
Spezifikationen
| Spezifikation |
|---|
| WebXR Device API # eventdef-xrsession-visibilitymaskchange |