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 Bereich einer XRView ändert.
Beachten Sie, dass die Ansicht einem bestimmten Auge zugeordnet ist und der für den Benutzer sichtbare Bereich durch eine Sichtbarkeitsmaske definiert wird. Weitere Informationen finden Sie in der Beschreibung der Schnittstelle XRVisibilityMaskChangeEvent.
Dies ermöglicht Leistungsverbesserungen, da der Browser nur den sichtbaren Bereich der aktualisierten Ansicht zeichnen muss.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("visibilitymaskchange", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onvisibilitymaskchange = (event) => { }
Ereignistyp
Ein XRVisibilityMaskChangeEvent. Erbt von Event.
Beispiele
Three.js-Beispiel
Dieser Ausschnitt zeigt, wie visibilitymaskchange verwendet werden kann, um in einer Three.js-Anwendung nur den sichtbaren Bereich der XRView zu zeichnen. Die neue Ansicht muss mithilfe der XRView.projectionMatrix der betreffenden XRView und eines standardmäßigen 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 Codeausschnitt stammt aus diesem Fork von WebXRManager.js.
Spezifikationen
| Spezifikation |
|---|
| WebXR Device API # eventdef-xrsession-visibilitymaskchange |