v147 · WebXR · demo

Plane Visualizer

A top-down 2D simulation of a WebXR plane detection session. The canvas shows how the device discovers surfaces in real time — horizontal planes in blue, vertical planes in green — and how each plane's polygon boundary updates as tracking improves.

Simulated AR — top-down view

frame 0

Speed: 4×

■ horizontal ■ vertical

Detected planes

Horizontal

Vertical

Updated this frame

Rendering detected planes — per-frame loop
function onXRFrame(time, frame) {
  session.requestAnimationFrame(onXRFrame);
  const pose = frame.getViewerPose(refSpace);
  if (!pose) return;

  // Iterate every detected plane this frame
  for (const plane of frame.detectedPlanes) {

    // Get the plane's transform in world space
    const planePose = frame.getPose(
      plane.planeSpace,
      refSpace
    );
    if (!planePose) continue;

    // "horizontal" | "vertical"
    const type = plane.orientation;

    // Boundary polygon in plane-local coordinates
    const verts = plane.polygon;

    drawPolygon(verts, planePose.transform, type);

    // Only reprocess if geometry changed this frame
    if (plane.lastChangedTime === time) {
      updatePlaneGeometry(plane);
    }
  }
}

see also