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

Specifies the index position of each coordinate pair (not individual array index) inside the vertices array that define the triangles used to draw the currently visible part of the scene displayed in the XRView.

session Read only

The XRSession to which the event belongs.

vertices Read only

An array representing the set of possible coordinate values that may be used in a visibility mask. 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