Skip to main content
Family 04 · Environment

The sky, the fog, the light, and the sound in it.

WebXR Environment describes the world around the player, the sky, the fog and the light, and the sound in it, as plain data, and applies that description through a thin adapter for whichever engine is hosting. Every one of those is a platform facility that each host exposes differently. Content is never here: meshes, prefabs and placement belong to the app.

Released, 0.1.0 on npmMITCore has zero dependencies
webxr-environment
environment document · presets · audio director · occlusion · light estimation · world sensing
threejs-environment
adapter
iwsdk-environment
adapter
xrblocks-environment
adapter, experimental, builds on three.js

How it is built

Every Reality Toolkit WebXR family has the same shape. The logic lives in an engine-free core that carries the tests. A thin adapter binds that core to one engine, depends on it, and re-exports it, so your app installs one package. Where families need to agree on a shape, they share plain contracts rather than importing each other.

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, applies the core's results back, and reports anything the engine cannot do instead of failing silently.

The engine-free core

All the logic, as plain TypeScript with no engine import. An architecture test fails the build the moment one lands, which is what lets the same behaviour run unchanged on every engine, and be tested without a headset.

Your appcontent, physics, the wiring between familiesOne adapterthreejs-, iwsdk- or xrblocks-environmentEngine-free corewebxr-environment · environment document, presets, audio, sensingArrows only point down. Families never reference each other.

Where it sits in the stack

Four families, one rule: no package references a sibling family, not even a type. What crosses a boundary is a subscription your app makes, such as playing an Environment cue when an Interactions press fires.

The Service Framework for the web sits beside these four and keeps its own site: serviceframework.realitycollective.net. The layering rule explains the boundaries in full.

Why you would use it

01

An environment as one document

Sky, fog, ambient light, key light and an environment map for image-based lighting, as plain data. Name a preset, then ease to it: every slot moves together on one curve.

02

One owner for the background

Passthrough is a suppression on top of the one writer, not a second writer. The sky stops being drawn while the real world shows and comes back unchanged afterwards.

03

Sensors that admit when they do nothing

Depth occlusion, light estimation and world sensing report unsupported, unavailable, pending or active, each with a sentence saying why. Nothing fails silently.

Pick an adapter

Install exactly one. Each re-exports the core, so you never install the core yourself. A Babylon.js adapter is pending an estate-wide review.

three.js and raw WebXR

threejs-environment

A gradient sky as an equirectangular texture regenerated in place, Fog and FogExp2, an AmbientLight and a DirectionalLight, Web Audio playback, light estimation straight from WebXR.

fullRead more →

Meta IWSDK

iwsdk-environment

Drives IWSDK's own DomeGradient, IBL and light components, AudioSource entities and depth occlusion. IWSDK 0.5 has no light estimation, and the adapter says so. Setup is one call: registerEnvironment(world).

fullRead more →

Google XR Blocks

xrblocks-environment

The three.js adapter plus two sensors: XR Blocks' depth occlusion and its Lighting manager for light estimation.

experimentalRead more →

Babylon.js

pending

Waits on a review across all five families rather than being started here.

pendingRoadmap →

Who does what

Read the ladder top to bottom. The middle column is the stage every engine goes through; the core owns the left, the adapter you install owns the right.

The core
Stage
The adapter
One document: sky, fog, ambient, key light, image-based lighting
Describe the world
Writes each slot to the engine: scene.background, Fog, DomeGradient, lights
Presets, easing, every slot on one curve
Change it
Regenerates textures and mutates lights in place
Suppresses the sky slot; nothing to restore
Passthrough
Stops drawing the background while the real world shows
Cues, buses, retrigger policy, absolute gains
Sound
Plays through Web Audio or AudioSource entities
Asks for occlusion, light estimation, planes, anchors and hit tests; diffs the reports
Sense the room
Answers unsupported, unavailable, pending or active, with a reason

Five words you will meet

Environmentthe setting: what the sky looks like, how far you can see, what colour the light is
Cuea sound the app knows how to make, played by name
Preseta named environment, possibly partial, that the director eases to
Passthroughthe real world showing through; a suppression of the sky, pushed in by the app
Reportwhat a sensor says about itself: unsupported, unavailable, pending or active, with a reason