demo · v147 · WebXR · rendering

Layer Performance Analyzer

Benchmarks three rendering strategies — single framebuffer, quad layer overlay, and equirect background — and shows per-frame time budgets as a stacked bar chart. Feature-detects XRSystem and layer support; falls back to Canvas2D simulation.

WebXR + Layers requires a connected XR device. When no device is present, this page runs a Canvas2D simulation with realistic frame timing based on published Quest 3 benchmarks. All layer API calls are shown in the trace panel.
Layer configuration
Loading…
Reprojection Rate
—
% frames
Compositor Latency
—
ms avg
Frame Budget Used
—
ms / 11.1ms total
Per-frame time budget breakdown (ms)
Single framebuffer
Quad layer overlay
Equirect layer
CPU (app)
GPU (render)
Compositor
Reprojection

about the modes

Single framebuffer (baseline)
All content — 3D scene, UI, background — drawn into one XRProjectionLayer. The compositor gets one texture; everything goes through a single warp pass.
Quad layer overlay
UI is separated into an XRQuadLayer at native resolution. The compositor composites it independently — no double-warp, sharper text, and the UI can update without re-rendering the 3D scene.
Equirect background layer
A 360° environment image in an XREquirectLayer handled entirely by the compositor. The app GPU never draws the background; reprojection is eliminated for that layer.

see also

implementation reference

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