v147 · Web APIs · Plane Detection Demo

Plane Detection Demo

Checks WebXR and plane detection support on this device, and shows the code to request an AR session with plane detection enabled.

WebXR plane detection requires an Android device with ARCore support and Chrome 147+. The feature is not available on desktop browsers or iOS. This page detects support and shows what the API returns.

device support

API availability

navigator.xr Checking…
immersive-ar session Checking…
XRFrame.detectedPlanes Checking…
plane-detection feature Checking…

requirements

Click "Start AR session" on a supported device to see plane detection output

session code

// Full plane detection session setup
async function startAR() {
  if (!navigator.xr) throw new Error('WebXR not supported');

  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (!supported) throw new Error('immersive-ar not supported');

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

  const referenceSpace = await session.requestReferenceSpace('local');
  const gl = canvas.getContext('webgl2', { xrCompatible: true });
  await gl.makeXRCompatible();
  session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });

  session.requestAnimationFrame(function onFrame(time, frame) {
    session.requestAnimationFrame(onFrame);

    // Iterate over detected planes each frame
    for (const plane of frame.detectedPlanes) {
      const pose = frame.getPose(plane.planeSpace, referenceSpace);
      if (!pose) continue;

      console.log(
        'Plane:', plane.orientation,
        'vertices:', plane.polygon.length,
        'position:', pose.transform.position
      );
    }
  });
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗