demo · v147 · WebXR · AR
AR Surface Mapper
A 2D top-down map of a simulated room showing planes detected by XRFrame.detectedPlanes. Click a plane to inspect its XRPlane attributes, toggle confidence heat map, and snap virtual objects to surfaces.
top-down view · click plane to select · click surface to place object
XRPlane attributes
Click a plane to inspect its XRPlane data.
Detected planes (0)
how it works
Each plane is an XRPlane object. In a real WebXR session you access planes via frame.detectedPlanes in the animation loop. This simulation reproduces the API shape — orientation, polygon vertices, planeSpace pose, and tracking state — with a realistic room layout.
// Real WebXR usage
const session = await navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['plane-detection'],
});
session.requestAnimationFrame((time, frame) => {
for (const plane of frame.detectedPlanes) {
console.log(plane.orientation); // 'horizontal' | 'vertical'
console.log(plane.polygon); // DOMPointReadOnly[]
const pose = frame.getPose(plane.planeSpace, refSpace);
}
});