As announced at Meta Connect 2022, Browser has added support for WebXR mixed reality services on Meta Quest 2 and Meta Quest Pro headsets.

The following WebXR specifications are now supported in Browser:

Passthrough provides a real-time and perceptually comfortable 3D visualization of the physical world in the Meta Quest headsets. Previously, there was no way to show the real world to the user using WebXR.

Passthrough is in color on the Meta Quest Pro and grayscale on Meta Quest 2.

To use passthrough, use the new "immersive-ar" mode when you request the WebXR session:

navigator.xr.requestSession("immersive-ar").then((session) => {
  xrSession = session;
});

You can detect if passthrough is supported in the browser as shown here:

navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
  if (!supported) { return; }
  // 'immersive-ar' sessions are supported.
  // Page should advertise AR support to the user.
}

You must draw your content on a transparent background, otherwise the passthrough environment won’t be visible. For example, do not clear with an opaque color.

There is no way to get to the pixels of the passthrough content, but it is possible to interact with it using transparent pixels.

You can experience a basic passthrough example here.

Here is a video example of passthrough:

In addition to defining your working space in boundary, you can also go to Settings > Boundary > Mixed Reality to define room settings, such as your desk, couches, and so on.

These objects are then exposed by the browser as planes that are flat shapes with a world position.

To enable this feature, you must pass the "plane-detection" feature descriptor when requesting the session:

const session = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["plane-detection"]
});

The browser then requests access to space setup information from the user and, if granted, presents it to the session.

When this feature is enabled, the XRSession will contain a new array “detectedPlanes” containing XRPlanes. Each XRPlane contains a world position and a polygon. For now, these polygons are always horizontal or vertical rectangles on Meta Quest headsets. You can use these polygons to do hit testing, interaction with VR objects, occlusion, and so on.

Because few people run guardian’s space setup, a new helper function called “initiateRoomCapture” has been added on the XRSession. This helper function will trigger guardian’s space setup from an immersive session. It is recommended that you call this function when you are sure that there are no planes in the “detectedPlanes” array. This “detectedPlanes” array is not populated immediately, so wait 2 to 3 seconds after session creation before making that decision. This function can only be called once per session.

You can experience a basic plane detection example here.

Here is a video example of plane detection:

Anchors allow you to define locations in the real world. Once defined, an anchor remains in the same space, regardless of where the device’s origin is. This allows you to place virtual objects in the real world or set a common origin for a scene.

Meta Quest headsets also support persistent anchors. These allow you to save and restore these positions across immersive sessions.

Non-persistent anchors are created by calling “createAnchor” with a position and an XRSpace. This returns an object that has an API to get its world position. This position will always be the same in the real world, even if the headset’s origin is reset, such as by holding down the button on the controller.

To create a persistent anchor, call “requestPersistentHandle” on an anchor object. The resulting string can be stored by the site. To restore an anchor, such as when the site is reloaded, the site can call “restorePersistentAnchor” which returns an anchor object at the same position.

A site can currently only create 8 persistent anchors at a time. Anchors are also not persistent if your session is running in private mode. This means that if you save an anchor in private mode and close and reopen private mode, the persistent anchor can no longer be restored. Clearing the site’s history will also delete the persistent anchors.

You can experience a basic persistent anchors example here.

Here is a video example of persistent anchors: