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.
A full shop, except the products are actually there: four departments, a product page whose hero you look around rather than spin a turntable of photos, search, a cart — and a studio that turns one photograph into a 3D item you can keep. Sign in with Google to scan your own. Open it in the DisplayXR Browser on hardware for glasses-free 3D; anywhere else it degrades to 2D.
A photoreal 3D Gaussian splat as a glasses-free tile — loaded with one
addSplat() call, auto-framed on the zero-disparity plane, drag to spin, with a
2D price plate composited crisply over the woven 3D.
A glTF mesh as a glasses-free tile via addModel() — and, beside it, a mesh and a
Gaussian splat sharing one scene and sorting against each other, so a catalogue can mix
captured and authored content instead of committing to one.
A real product from a Shopify demo storefront, loaded straight from
cdn.shopify.com by URL — no conversion, no re-export, no copy in this repo.
Shopify serves 3D product media uncompressed, CORS-open and at real-world metre scale, so a
merchant’s existing catalogue already works. Paste another URL to try your own.
Hand the runtime your camera instead of a virtual display: pose, vertical FOV and a
convergence distance, sent every frame with setViewRig(). Drag to orbit — your
framing, the runtime’s stereo. Sliders for convergence and FOV with a live comfort
readout, and C to cut between a camera rig and the display rig that frames the
same cube, which is the clearest way to see what each one is for.
Ask the panel what it is — metres, pixels, the view scale it recommends — and what rendering modes the runtime can put it in, then ask it to change one. A 2D/3D lens toggle that fades the page’s own stereo out with it (the lens alone leaves the woven atlas showing flat, which is blurry), a per-mode request button with the non-2-view modes greyed out, and a live log of the two session events.
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.
The same scrolling wall under a sticky, translucent page header — the chrome-occlusion path. Tiles pass under the bar as flat 2D with no page wiring at all: auto-chrome finds the sticky bar and excludes it from every tile's weave.
Every hard way flat 2D and woven 3D can land on top of each other, as
14 numbered cases on one page — translucent chrome, frosted glass, opaque
plates, a page modal, a nested scroller, a sticky tile, tile-on-tile, partial visibility at
all four viewport edges, and a mixed scene + video + photo load. It is both
the demo of what draw-order occlusion buys an author and the standing hardware
regression surface: cases that glitch today are built anyway and marked red on-page, and
every section carries a stable data-case marker so a test session can be
scripted against it.
A full 3D-photo/video social app (a glasses-free-3D Instagram) built on the inline-3D SDK and hosted on Vercel — browse, upload, and view a feed of woven 3D posts. Open it in the DisplayXR Browser on hardware for glasses-free 3D; anywhere else it degrades to 2D.
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.