Voice Wave ParticlesAudio-reactive Three.js fragment shader demo
Study a Three.js audio visualizer shader that maps synthetic bass, mid, treble, and level into three additive procedural wave layers. Live demo and GLSL source.
How synthetic frequency bands drive the visualizer.
- Family
- Audio Visualization
- Status
- Active
- Drivers
- Time · Synthetic level · Synthetic bass · Synthetic mid · Synthetic treble
- Primitive
- Segmented fullscreen plane
- Pipeline
- Procedural dot field · Seeded wave layers · Additive blending · Frequency-band mapping
- Source
- 2 mapped units
Three seeded wave layers translate synthetic level, bass, mid, and treble values into motion, density, tint, and alpha. It is an audio study without microphone access or recorded media.
The visual behavior and production defaults are retained in the TSL adaptation. Only application-specific orchestration and unlicensed model inputs were replaced, leaving a focused study that can be read independently of the original product.
This preview uses one managed WebGPU renderer with automatic WebGL2 fallback, a capped pixel ratio, deterministic geometry, and complete GPU cleanup when you leave or switch studies.
Pipeline, step by step
- Seed three procedural wave layers
Each layer creates its own moving spark field, phase, width, and vertical displacement inside one fragment pass.
- Map the frequency bands
Synthetic level, bass, mid, and treble values control motion, density, color, and opacity without collecting audio.
- Blend the waveform additively
Cyan, amber, and pearl sparks overlap as luminous energy while the production blend behavior stays intact.
CompatibilityThe live study uses Three.js 0.185.0, preferring WebGPU and falling back automatically to WebGL2. Source, classification, and notes remain readable when graphics are unavailable, animation is disabled, or the graphics device is lost.
CreditFirst-party GLSL is extracted from commit d018f6d057c8f30144979bbcc95436cfb405d7c5.
Open-source adaptationThe original audio inputs are replaced by deterministic synthetic level and frequency controls. No microphone or recording is requested.
Audio response, without a microphone.
Automatic mode generates deterministic level and frequency curves. Move any slider to hold a manual signal instead.
GLSL source: the audio waveform fragment stage.
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}