v147 · Web APIs · WebXR
Compatibility Lab
Probes WebXR plane detection globals and immersive-ar session support. Simulates the XRFrame.detectedPlanes data shape — XRPlane.polygon vertex arrays, orientation values, and per-plane pose — to show what your AR app receives on a supporting device.
API probes
XRPlane data shape simulation
Simulated top-down view of XRFrame.detectedPlanes — floor (blue), wall (rose), table (amber). Vertices are DOMPointReadOnly objects in local plane space.
Live API and frame-level probe
XRPlane globals + simulated plane data inspection
Click "Inspect plane data shape" to see XRPlane field structure and live API availability…
Plane loop pattern
/* XRFrame plane detection loop — Chrome 147+ */
/* Request a session with plane-detection optional feature */
const session = await navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['local'],
optionalFeatures: ['plane-detection'],
});
const refSpace = await session.requestReferenceSpace('local');
function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
/* frame.detectedPlanes is null if plane-detection was not granted */
if (!frame.detectedPlanes) return;
for (const plane of frame.detectedPlanes) {
/* plane.orientation: 'horizontal' | 'vertical' */
const orientation = plane.orientation;
/* plane.polygon: DOMPointReadOnly[] — convex hull in plane space */
const verts = plane.polygon; // e.g. 4–8 vertices
/* plane.planeSpace: XRSpace — use with getPose() to get world position */
const pose = frame.getPose(plane.planeSpace, refSpace);
if (!pose) continue;
/* pose.transform.matrix: Float32Array (4×4) — plane's world transform */
const matrix = pose.transform.matrix;
/* Render a quad at the plane's position with matching dimensions */
renderPlane(matrix, verts, orientation);
}
}
session.requestAnimationFrame(onXRFrame);
/* Check all plane detection prerequisites at once */
function checkPlaneDetectionSupport() {
return {
hasXR: 'xr' in navigator,
hasXRPlane: 'XRPlane' in window,
hasDetected: typeof XRFrame !== 'undefined' && 'detectedPlanes' in XRFrame.prototype,
};
}
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗