v147 · WebXR · demo

Layer Type Explorer

WebXR Layers introduces five distinct layer types, each optimised for a different class of content. The system compositor handles each layer independently — matching the quality and performance model of native VR apps.

XRWebGLBinding (layers API) in this browser checking…
XRProjectionLayer base layer
viewport

The full-screen base layer that renders the 3D scene. Replaces the default framebuffer with a higher-quality compositor-managed texture. All other layers composit on top of this one.

textureType"texture" | "texture-array"
colorFormatGLenum (RGBA8, sRGB…)
depthFormatGLenum | null
fixedFoveation0–1 (foveation level)
XRQuadLayer flat panel
quad

A flat rectangular panel in 3D space — ideal for UI panels, text, video, and any 2D content that should appear as a floating plane. Renders at exactly the resolution it occupies in the view, eliminating re-projection blur.

widthmeters (default 1)
heightmeters (default 1)
transformXRRigidTransform
spaceXRSpace (anchor)
XRCylinderLayer curved panel
cylinder

A curved panel wrapped around a cylinder segment. Good for panoramic browser content, curved menus, and text that wraps around the user's field of view at a consistent reading distance.

radiusmeters (default 2)
centralAngleradians (arc width)
aspectRatiowidth / height
transformXRRigidTransform
XREquirectLayer 360° sphere
sphere

Maps an equirectangular texture onto a sphere or partial sphere around the user. The natural choice for 360° photos and videos — the texture can cover the full sphere or be limited to a specific lat/lon range.

radius0 = infinite sphere
centralHorizontalAngleradians (default 2π)
upperVerticalAngleradians above equator
lowerVerticalAngleradians below equator
XRCubeLayer cubemap

Projects a six-face cubemap texture as an infinite skybox around the user. More efficient than equirectangular for environment backgrounds because cube faces align naturally with GPU texture sampler optimisations.

orientationDOMPointReadOnly (quaternion)
spaceXRSpace (reference)
colorTexturesWebGLTexture[6]

see also

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

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