DisplayXR Browser — the web, in depth

hello cube

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.

mixed 3D windows

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.

media player

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.

3D picture wall

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.

demo gallery

A grid of the DisplayXR demo logos, each woven inline as a 3D tile — a compact showcase of the multi-element weave.

glTF model

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.

Shopify product

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.

gaussian splat

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.

camera rig

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.

display modes

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.

3D video call

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.

3D call embed

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.

composition showcase

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.

DisplayXR Arcade — live app

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.

Historic Sites Navigator — live app

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.

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');

Or clone displayxr-web (these samples import the SDK by relative path). Full API in the SDK reference, authoring details in Authoring inline-3D pages.