v147 · WebXR · Rendering

WebXR Layers

Chrome 147 ships WebXR Layers, a rendering API that lets the device compositor handle layer compositing rather than JavaScript. Layers improve quality and performance: they render at display resolution with dedicated depth, avoid double-compositing artefacts, and allow different types of geometry — quads, cylinders, equirectangular projections — as first-class objects.

concepts

  1. Layer Type Explorer

    Visual guide to all five WebXR layer types — XRProjectionLayer, XRQuadLayer, XRCylinderLayer, XREquirectLayer, and XRCubeLayer — with diagrams, use cases, and the compositor properties each exposes.

  2. Compositor Model

    Side-by-side illustration of the traditional WebGL rendering path versus the WebXR Layers approach, showing where the system compositor takes over and how that eliminates a full re-projection pass.

  3. UI Overlay Simulator

    Toggle an XREquirectLayer background, XRProjectionLayer 3D scene, and XRQuadLayer HUD overlay on and off. Shows how the compositor stacks layers in order and why a flat XRQuadLayer produces sharper UI text than baking it into the projection framebuffer.

  4. Layer Performance Analyzer

    Benchmarks three rendering strategies — single framebuffer, quad layer overlay, equirect background layer — and measures reprojection rate, compositor latency, and CPU/GPU time per frame. A stacked bar chart shows the time budget breakdown for each mode.

  5. Compatibility Lab

    Probes all five WebXR layer type globals (XRQuadLayer, XRCylinderLayer, XREquirectLayer, XRCubeLayer, XRProjectionLayer). Tests navigator.xr.isSessionSupported() for immersive-vr/ar. Provides the requestSession feature-detection fallback pattern for graceful degradation to standard projection rendering.

why it shipped

Before WebXR Layers, every piece of content in a WebXR scene — 3D geometry, 2D UI panels, video streams — was drawn into a single WebGL framebuffer and then composited by the browser. This single-buffer approach forces everything to share one resolution and causes text and UI to appear blurry because the final image goes through an extra warp step to correct for lens distortion. The Layers API gives the device compositor direct access to per-layer textures. Each XRQuadLayer, for example, is rendered at exactly the resolution it occupies in the viewport, and the system compositor applies the lens correction directly to the source pixels — the same way native VR apps work. The result is sharper UI, crisper video, and a lower GPU load because the compositor can skip re-projecting layers whose content hasn't changed. Chrome 147 ships all five layer types and support for native colour and depth textures.

references

implementation reference

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