Glasses-free 3D elements inside ordinary web pages, for the
DisplayXR Browser. The analog of
immersive-web/webxr-samples.
Get the DisplayXR Browser
and open a sample below on DisplayXR hardware to see it in glasses-free 3D — in any other browser the
pages render as normal 2D, so they're safe to view anywhere.
The minimal sample — one rotating three.js cube in a bordered canvas, re-projected off-axis so you look around it. Start here to see the smallest complete inline-3D page.
Still 3D photos, a live 3D video, and a real-time three.js scene — every kind of glasses-free-3D content, each woven with one SDK call, all on one session. The runtime batches every visible window into a single weave per frame, so it scales to a wall.
A grid of the DisplayXR demo logos, each woven inline as a glasses-free-3D tile — a compact showcase of the multi-element weave.
A lazy-loading scrolling wall of 3D pictures — each tile's weave layer is created as it nears the viewport and closed as it scrolls away, so a long wall only pays for what's on screen.
js/inline3d.jsA dependency-free helper over the inline-3d WebXR surface:
wall.addImage() / addVideo() / addScene() turn any canvas into a
weaved 3D window and manage the side-by-side buffer, feature detection, and (for many windows) a lazy
create/close lifecycle. Optional three.js glue in js/inline3d-three.js.
Start here: Authoring inline-3D pages.
Clone displayxr-web and turn any
canvas into a woven 3D window with one SDK call:
import { createInline3D } from './js/inline3d.js';
const wall = await createInline3D();
if (wall.supported) wall.addImage(canvas, 'photo-sbs.png');Full API in the SDK reference, authoring details in Authoring inline-3D pages.