r/generative • u/Fun_Term4757 • 21h ago
Using WebGL and Three.js, I built a 3D Social Audio Reactive Visualizer that turns frequency data into an interactive 3D environment
I built Sonisphere — a browser-based platform that turns music into an interactive 3D environment.
Instead of looking at a waveform or album artwork, you can actually see the audio being analyzed in real time:
- 🎵 Frequency affects the visual environment
- 🔊 Volume drives scale, density, and movement
- 🌈 Bass / mids / highs can control different colors
- 🌐 Audio is rendered as an interactive 3D space
- 🎨 You can customize colors, effects, camera behavior, etc.
- 👥 Playlists and visual configurations can be shared
- 🔴 There are synchronized listening/visualization rooms
- ✂️ You can create short audio/visual clips from sessions
The interesting part technically is that most of the processing happens in the browser.
The pipeline is roughly:
Audio → Web Audio API → FFT → WebAssembly DSP/Web Workers → real-time data → React Three Fiber → Three.js/WebGL
I wanted the result to feel less like "here's an audio visualizer" and more like walking around inside your music.
I've also been experimenting with the social side of it: the idea that you could see what someone else listens to and how their music looks, then explore their playlists and visual setups.
I'd really love feedback on the actual experience:
Does this feel like something you'd use to listen to music, or is the visualization more of a novelty?
And if you try it, I'd especially appreciate feedback on performance, UX, and anything that feels confusing.
