XRVisibilityMaskChangeEvent

Constructor

XRVisibilityMaskChangeEvent()

Creates and returns a new XRVisibilityMaskChangeEvent object.

Instance properties

In addition to properties inherited from its parent interface, Event, XRVisibilityMaskChangeEvent provides the following:

eye Read only

The eye the mask applies to.

index Read only

The index of the current XRView in the XRViewerPose.views array.

indices Read only

An array of indices specifying the vertices in the vertices array that should be drawn to display the currently visible part of the scene displayed in the XRView. If this array is empty, the whole region of the XRView will be drawn.

session Read only

The XRSession to which the event belongs.

vertices Read 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 the XRView will be drawn.

Instance methods

While XRSessionEvent defines no methods, it inherits methods from its parent interface, Event.

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

Browser compatibility