3D products, movies, photos, maps and video calls, right inside ordinary web pages.
Open these in the DisplayXR Browser on a spatial display
to see them in 3D; in any other browser they render as normal 2D, so they're safe to view anywhere.
Get the DisplayXR Browser
· displayxr.org/browser
Featured apps
Complete web apps built on the DisplayXR Browser and the @displayxr/inline3d SDK.
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.
An in-car rider screen with real depth: a captured destination as an immersive Gaussian-splat
scene, a one-tap 2D/3D toggle, and photoreal 3D maps with fly-to in its 2D mode — all in a
web page, built on addSplat().
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 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 3D media title with real transport via addPlayer() — play/pause/seek/mute
from an SDK-drawn bar or the keyboard, built on addVideo(). Default (SBS) and
format:'mono' side by side.
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.
A glTF mesh as a 3D 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. PlayCanvas by default,
?engine=three for the three.js twin.
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.
A 3D Gaussian splat as a 3D tile, loaded with one
addSplat() call and rendered with the PlayCanvas engine. It auto-frames on
the display plane and turns slowly (a .sog that records its capture camera
opens at that camera instead), drag to tilt, with a 2D plate composited crisply over the
woven 3D. ?engine=spark renders the same tile with Spark.
Scenes & cameras
Your own renderer, your own camera, and the display it runs on.
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.
Automatic 3D
No SDK, no change to the site: the browser converts ordinary WebGL and WebGPU scenes on its own.
A Gaussian splat in PlayCanvas’s own viewer, rendering through WebGPU. The browser finds
the page’s renderer and draws it once per eye — the site was never written for
DisplayXR.
A 40-million-splat capture by Vincent Woo, streamed with level-of-detail by World Labs’
Spark 2.0 viewer. Walk the hill in depth; the browser converges on the world as it streams in.
Conversion is on by default from browser v1.2. A page-info toggle turns it off per
site, and any page that uses the SDK keeps its own 3D — the converter stands down.
Video calls
Peer-to-peer calls with depth, as an API or a drop-in element.
A peer-to-peer video call via addCall() — share a link (or its QR code) and up
to four people join. A stereo camera is sent as a real side-by-side pair and woven with depth;
everyone else, and every other browser, is an ordinary 2D call.
The same call as a drop-in widget: one <dxr-call> element and one
<script> tag, no options, no build step, no account — with a
copy-this-snippet box for your own page. 2D in any browser, 3D on the DisplayXR
Browser. Guide: docs/call.md.
Page composition
How flat page content and 3D tiles layer over each other.
Every hard way flat 2D and woven 3D can land on top of each other, as
15 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.
Three small games with real depth, all built the same way on the inline-3D SDK:
Tetris 3D (the stack sits behind the
glass, the falling piece hovers in front),
Dino Run 3D and
Gem Swap 3D. Open them in the DisplayXR
Browser on hardware to see it in 3D; anywhere else they degrade to 2D.
Pick a historic site off a globe and drop into it — a travel/heritage experience built on the
inline-3D SDK. Open it in the DisplayXR Browser on hardware to see it in 3D; anywhere else
it degrades to 2D.
Build your own
The SDK — @displayxr/inline3d
A 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.
Quick start
npm install @displayxr/inline3d
import { createInline3D } from '@displayxr/inline3d';
const wall = await createInline3D();
if (wall.supported) wall.addImage(canvas, 'photo-sbs.png');