v147 · UI Overlay Simulator

UI Overlay Simulator

The key use case for XRQuadLayer is placing a sharp 2D UI panel in XR space without the blurring introduced by passing through the projection framebuffer. Toggle layers on and off to see how the compositor stacks a background equirect, a 3D scene projection, and a crisp quad UI overlay.

WebXR Layers require an XR device and session. This demo simulates the layer compositor as a 2D canvas to explain the layering concept. Real XRQuadLayer and XREquirectLayer composition only happens inside an active XR session.
Layer 0 — Background XREquirectLayer
Visible

Fills the full field of view with a 360° environment texture. Rendered first, composited underneath everything else.

Layer 1 — 3D Scene XRProjectionLayer
Visible

The main 3D WebGL render. Drawn into the projection framebuffer and composited on top of the equirect background.

Layer 2 — HUD / UI XRQuadLayer
Visible

A flat 2D panel rendered to its own high-res texture and composited last. Avoids the double-resampling blurring of baking UI into the projection layer.

Compositor layer order (bottom → top)
z=0XREquirectLayer — 360° background environment
z=1XRProjectionLayer — main 3D scene render
z=2XRQuadLayer — crisp 2D UI overlay (HUD)

see also

implementation reference

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