conwayjw97/3d-spectrogram — explained in plain English
Analysis updated 2026-05-18
Visualize live microphone or browser audio as an interactive 3D spectrogram terrain.
Learn how GLSL shaders and Three.js can turn real-time data into 3D visuals.
Use as a starting point for building custom audio-reactive web visualizations.
| conwayjw97/3d-spectrogram | 00kaku/wp-rest-playground | botpress/documentation-v12 | |
|---|---|---|---|
| Stars | 5 | 5 | 5 |
| Language | JavaScript | JavaScript | JavaScript |
| Last pushed | — | — | 2023-02-07 |
| Maintenance | — | — | Dormant |
| Setup difficulty | easy | hard | easy |
| Complexity | 2/5 | 3/5 | 2/5 |
| Audience | developer | developer | writer |
Figures from each repo's GitHub metadata at analysis time.
Needs a local web server (e.g. python -m http.server) since it uses ES Modules that browsers block over file:// URLs.
This project turns sound into a moving 3D landscape you can watch in your web browser. It listens to audio, either from a browser tab or a microphone input, and continuously renders the different frequencies present in that sound as a scrolling terrain made of hills and valleys, updating in real time as the audio plays. The visual effect is built using Three.js, a popular library for creating 3D graphics inside a web page, along with custom GLSL shaders, small programs that run directly on the graphics card to calculate how the terrain should bend and move based on the incoming sound. The Web Audio API, a browser feature for capturing and analyzing audio, supplies the raw frequency data that drives the visualisation. The terrain shows several kinds of information at once. The front edge displays the currently active frequencies, while the back edge tracks the loudest each frequency has ever peaked during the session. The two side edges show the maximum and average loudness recorded over time. Labels around the terrain update automatically to show frequency values in Hz or kHz and volume in decibels. Users can freely rotate, pan, and zoom the view to inspect the terrain from any angle, and a control panel offers sliders to adjust which frequency range is shown, how much time history is displayed, and whether the audio comes from a microphone or a browser audio stream. The code is organized into a few clear files: one sets up the 3D scene and rendering loop, one manages the on screen controls and labels, one handles audio capture and analysis, and one contains the custom shader code responsible for the visual deformation effect. To run it, a user needs to clone the project and serve it from a simple local web server, since the code uses modern JavaScript modules that browsers block from loading directly off the file system for security reasons. A one-line command using Python or Node.js is enough to start that server.
A browser tool that visualizes live audio as a moving 3D terrain, using Three.js and GLSL shaders to turn sound frequencies into a scrolling landscape.
Mainly JavaScript. The stack also includes JavaScript, Three.js, GLSL.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.