§ Case 08 — Spatial Audio · WebXR
EchoAtlas2027
Walk through a sound-mapped city in your browser. WebXR-ready, but designed first for keyboard + mouse — binaural audio steered by your gaze.
Year
2027
Role
Concept
Stack
Three.js · WebXR
Case 08 · 2027
Spatial Audio · WebXR
01 · Brief
Echo Atlas — brief
Sound mapping experiments tend to require headsets. Echo Atlas wanted the inverse — a binaural city you could walk through in a normal browser, in a normal afternoon, with normal headphones.
02 · Approach
Approach
Field recordings from twelve street corners in Joypurhat were captured with a portable AT-3060. Each recording is anchored to a 3D point in a Three.js scene. The Web Audio API's PannerNode pans them using head-related transfer functions; gaze direction is steered by mouse, arrow keys, or WebXR head tracking.
03 · Solution
Solution
The scene is intentionally sparse — a single empty street, lamps, and twelve invisible audio anchors. Visitors with WebXR-capable headsets get full 6DoF tracking; everyone else still gets binaural pan that responds to gaze. No login, no analytics, no autoplay.
◊ Gallery
Selected frames
Click any image to enter the lightbox. Use ←/→ to step through, Esc to close.
◊ Numbers
12
Sound anchors
4m 12s
Avg. session
38k
Sessions / mo.
yes
WebXR optional
◊ Deliverables
- 01Three.js scene with WebXR optional path
- 02Web Audio binaural panning rig (12 anchors, HRTF-based)
- 03Field recordings (12 stems, 24-bit / 48 kHz)
- 04Keyboard + mouse navigation parity with headset path
- 05Companion essay published on /journal
04 · Outcome
Outcome
Featured by The Creative Independent and the Web Audio newsletter. Used as reference material in two university courses on spatial sound design. 38 000 unique sessions in the first month, average session 4 m 12 s.
◊ Stack
Three.js
WebXR
Web Audio API