An experimental WebGPU-based audio visualizer combining a GPU particle system and a deformable glow sphere. Real-time audio data drives a uniform-based state system, procedural displacement logic, and shader-controlled visual modes.
Creative Coding, Shader Development, GPU Programming /
Designed and developed a WebGPU-powered audio visualization system featuring a GPU particle simulation and a deformable glow sphere. Built a uniform-driven state machine with procedural displacement logic, mapping real-time audio data to shader uniforms to create dynamic generative visuals.
What I learned through this project:
Implemented a uniform-driven state machine controlling multiple visual modes — Speaking, Thinking, Audio Listening, and Idle. Each state modifies shader uniforms, deformation intensity, glow behavior, and particle motion patterns in real time.
Custom shader-based procedural displacement logic manipulates vertex positions of both particles and the central sphere. Audio frequency data is mapped to GPU uniforms, driving dynamic deformation, pulsation, and distortion effects.
The scene combines a GPU-accelerated particle field and a glowing central sphere. Both systems are synchronized through shared uniform inputs, creating a cohesive audio-reactive visual composition.
Built on WebGPU with custom TSL shaders, the rendering pipeline is optimized for stable frame rates despite complex deformation, state transitions, and continuous audio input processing.
steps of development