WebXR
put the web in your faceEngine-free input, interactions, spatial UI and environment for the immersive web. One adapter per engine, the rest is yours.
Interaction playground
UI Extensions showcase
Environment playground, noon
Multiplatform lab, XR Blocks
Interaction playground, levers
UI Extensions, hand menu
Environment playground, dusk
Multiplatform lab, three.js
Interaction playground, dial and button
Environment playground, controls
Interaction playground, all stations
Environment playground, overcast
Pick your engine
three.js and raw WebXR, Babylon.js, Meta IWSDK or Google XR Blocks. The engine you already use.
Install one adapter per family
The adapter depends on its core, and on the shared input contracts where the family uses them, so npm installs those with it. It also re-exports them, so your app imports everything from the one package.
npm install @realitycollective/threejs-interactionsRun the playground
Every family ships a deployed demo. Open it on a headset, or on a desktop with the mouse fallback.
How it is built
Every family has the same shape, and the shape is the whole idea. The logic lives in an engine-free core that carries the tests. A thin adapter, one per engine, binds that core to three.js, Babylon.js, Meta IWSDK or Google XR Blocks. Your app installs one adapter per family and never touches the engine's input, UI or environment systems directly again.
Your app
Owns the content: meshes, panels, placement, physics and sound files. Installs one adapter per family and wires families together with subscriptions, in the one place where both halves are in scope.
One adapter per engine
The only place an engine name appears. It reads the engine each frame, feeds the core and applies the results back. It depends on the core, so npm installs it, and re-exports it, so you import from one package.
The engine-free core
All the logic as plain TypeScript with no engine import. An architecture test fails the build the moment one lands. That is what lets a behaviour, a window or an environment run unchanged on every engine, and be tested without a headset.
Shared contracts
One description of input, poses and pointers, published from its own repository with zero dependencies. An adapter written once feeds both the Interactions and UI Extensions families.
Capabilities that report
What an engine cannot do is reported, never silent. A behaviour switches itself off and says why; a sensor answers unsupported, unavailable, pending or active.
Families never reference each other
Not a runtime import, not a type. What crosses a boundary is a subscription your app makes, such as playing an Environment cue when an Interactions press fires.
The families
Input
The contracts. Where a hand or controller points, what it touches, what the device can do. Zero dependencies, consumed by every other family.
@realitycollective/webxr-inputImplemented by each engine adapter
Interactions
Interactables, interactors and behaviours: press, hinge, dial, slide, grab, toss-scoring, gaze dwell. Capability checks that switch a behaviour off and say why.
@realitycollective/webxr-interactionsthree.js · Babylon.js · IWSDK · XR Blocks
UI Extensions
Movable, dockable windows, layout regions, hand menus and controls for spatial UI, authored in UIKitML. Plus dev tooling for live editing on a headset.
@realitycollective/webxr-uiextensionsIWSDK · XR Blocks and three.js
Environment
The world around the player as one document: sky, fog, light, image-based lighting, passthrough, occlusion, world sensing and the sound in it.
@realitycollective/webxr-environmentthree.js · IWSDK · XR Blocks
Put it on a headset
These are the live hosts, deployed from each repository's main branch with every release. Open one on a headset, or on a desktop with the mouse fallback, then come back for how it is built. The preview builds of the development branches are listed on the Start here page.
Interaction playground
Seven stations from one descriptor: push button, gaze dwell, wall and table levers, dial, pulley, scoop and toss.
webxr-interactions.pages.dev → EnvironmentEnvironment playground
Preset transitions, a passthrough toggle that restores the sky exactly, live bus and master sliders.
webxr-environment.pages.dev → UI ExtensionsUI Extensions showcase
Six windows and two dock regions: registration form, event log, hand menu, gallery, player status.
webxr-uiextensions.pages.dev → UI ExtensionsMultiplatform lab
The same scene through the IWSDK, XR Blocks and desktop pipelines, picked from a launch screen.
webxr-uix-lab.pages.dev →The Service Framework for the web is the fifth member of the estate and keeps its own site: serviceframework.realitycollective.net.