XRSession: visibilitymaskchange event
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The visibilitymaskchange event is sent to an XRSession when the portion of an XRView visible to the user changes — that is, the portion not hidden by the mask. This enables performance improvements by allowing the browser to draw only the visible part of the updated view. The required information to draw the update is contained in the XRVisibilityMaskChangeEvent event object.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("visibilitymaskchange", (event) => { })
onvisibilitymaskchange = (event) => { }
Event type
An XRVisibilityMaskChangeEvent. Inherits from Event.
Event properties
In addition to the properties listed below, properties from the parent interface, Event, are available.
eyeRead only-
The eye the mask applies to.
indexRead only-
The index of the current
XRViewin theXRViewerPose.viewsarray. indicesRead only-
An array of indices specifying the vertices in the
verticesarray that should be drawn to display the currently visible part of the scene displayed in theXRView. If this array is empty, the whole region of theXRViewwill be drawn. sessionRead only-
The
XRSessionto which the event refers. verticesRead only-
An array of coordinates representing the vertices required to draw the entire scene displayed in the
XRView. If this array is empty, the whole region of theXRViewwill be drawn.
Examples
Three.js example
This snippet shows how visibilitymaskchange might be used to draw only the visible portion of the XRView in a Three.js application. The new view must be drawn using the XRView.projectionMatrix of the relevant XRView and a default XRRigidTransform.
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);
}
The code snippet is taken from this fork of WebXRManager.js.
Specifications
| Specification |
|---|
| WebXR Device API # eventdef-xrsession-visibilitymaskchange |