§ Case 05 — Audio-Visual Experience
VoidEngine2024
A real-time audio-reactive 3D scene rendered with custom raymarching. Audio FFT bins drive volumetric lighting and material color grading — originally an installation, now a web port.
Year
2024
Role
WebGL
Stack
Three.js · GLSL
Case 05 · 2024
Audio-Visual Experience
01 · Brief
Void Engine — brief
Lokal Sound commissioned a permanent gallery installation that would react to the live room — not pre-rendered video, not a pre-recorded loop. The web port had to feel like the same piece on any laptop, on any network.
02 · Approach
Approach
A single raymarched scene fed by 64 FFT bins. Lower frequencies drive volume density, mids drive material absorption, highs spawn micro-sparks. The web version downsamples FFT to 32 bins and degrades raymarch step count gracefully on integrated GPUs.
03 · Solution
Solution
On the gallery rig (RTX A2000), the piece runs at 1440p / 60fps. On a 2019 MacBook Air it runs at 720p / 45fps with the same visual language — the volumes are softer, the sparks are denser, but it still reads as the same room.
◊ Gallery
Selected frames
Click any image to enter the lightbox. Use ←/→ to step through, Esc to close.
◊ Numbers
64
FFT bins
99.97%
Gallery uptime
720p / 45fps
Web ports
240k
Unique visitors
◊ Deliverables
- 01Custom raymarched fragment shader (volumes + sparks)
- 02Web Audio API → GLSL uniform pipeline
- 03Adaptive quality controller (raymarch steps × FPS targeting)
- 04Headless gallery build for Linux + auto-reload
- 05Web port deployed via Cloudflare with HLS audio fallback
- 06Sound design (12-minute generative loop, 8 stems)
04 · Outcome
Outcome
Installed at Lokal Sound's Berlin space for six months. Web port garnered 240 000 unique visitors in its first quarter. Used as a teaching reference at three universities for FFT-driven shader work.
It listens. That is the only word. The room comes in and the room goes out and the piece is just patient.
◊ Stack
Three.js
GLSL
Web Audio API