WebXR Volumes Examples

Append ?relay= (empty) to any Spectacles page to skip the WS connection and orbit with the mouse.

Standalone

Basic
A cube inside a 30 cm volume, mouse orbited from the desktop.
examples/basic.html
Manim
Animated math explanations rendered into a bounded volume. Riemann and Gaussian demos.
examples/manim.html

Spectacles relay

Spectacles
A spinning cube driven by the Spectacles relay.
examples/spectacles.html?relay=
Spectacles Torus
A torus knot in a second volume on a separate relay channel.
examples/spectacles-torus.html?relay=

Showcase scenes

Both live in spectacles-showcase.html. Switch with ?scene= or arrow keys.

Hello Cube
A cube inside a 30 cm WebXR volume.
?scene=cube
Hand Tracking
White hand skeletons with pinch to grab, drag, and release shapes.
?scene=hands
Bernoulli Flow (manim)
Pinch the violet cylinder. Potential-flow streamlines deform around it in real time, illustrating P + ½ρv² = const.
?scene=manim-bernoulli

Repository layout

src/
TypeScript source for the WebXR Volumes polyfill.
dist/
Compiled output from npm run build. The examples import from here.
examples/
The pages on this index. Each one imports ../dist/index.js.
lens/
Full Lens Studio reference project (WebXRVolume.esproj) with VolumeHost.ts and SimpleWebView.ts.
relay/
Cloudflare Worker that brokers WebSocket pose and hand traffic.
scripts/
dev.mjs builds the polyfill, serves the repo, and opens a cloudflared tunnel for Spectacles. npm start runs it; npm run dev runs it without a tunnel.
docs/
Architecture notes, Lens Studio guide, multi-volume recipe, relay deploy.