Viz · WebGPU audiovisual instrument / personal R&D project
SignalBiome
A real-time audiovisual instrument built on WebGPU. Eight GPU simulation families, from flocking and slime mould to reaction-diffusion, particle ecologies and raymarched fractals, share one rendering, modulation and compositing architecture, and audio, MIDI, OSC and tempo play it like a synthesizer.
- Role
- Author, developer & owner
- Platform
- Browser, WebGPU (Chrome / Edge 113+)
- Workflow
- AI-assisted, agent-driven
- Status
- Active personal R&D project
Overview
SignalBiome is built less like a collection of visual effects and more like a synthesizer. Simulations provide motion and structure; audio, MIDI, OSC and tempo provide control signals; force fields reshape the dynamics; layers and post-processing shape the image; presets, decks and playlists make the whole system playable.
- 1,000,000 GPU agents
- 8 simulation systems
- 21 modulation signals
- 16 force fields at once
Not a playlist of shaders
Most visualizers start with audio and decide how to draw it. SignalBiome asks a different question:
What if music could influence an artificial world instead of driving an equalizer?
A beat disturbs a flock, bass energy changes the viscosity of a fluid, a MIDI controller moves a vortex through thousands of particles, and a force can be confined to a word or a webcam silhouette. The result sits between a VJ tool, a modular visual synthesizer and a small GPU simulation lab.
Eight simulations, one instrument
- Boids Flocking through separation, alignment and cohesion, with GPU neighbourhood search and optional connection lines.
- Physarum Slime-mould agents that sense and deposit a trail field, growing veins, sheets and branching networks. Scales to one million agents.
- SPH Fluid Smoothed-particle hydrodynamics, from droplets to heavy cohesive bodies.
- Life Discrete cellular automata next to continuous rules such as SmoothLife, Lenia and MNCA.
- Reaction Gray-Scott reaction-diffusion, where feed and kill span spots, worms and mitosis-like structures.
- Fractal Escape-time fractals, strange attractors from hundreds of thousands of points, and raymarched Mandelbulbs and Mandelboxes.
- Particle Life Up to six species driven by an asymmetric interaction matrix, forming clusters, membranes, chains and unstable ecologies.
- Plant Seeds send out tips that branch, leaf, flower, age and wither.
An Off mode removes the simulation while backgrounds, audio scopes, colour, trails, bloom and post-processing keep running.
Architecture and performance
All simulation state stays on the GPU, in WebGPU compute and render pipelines written in WGSL. Instead of one renderer per simulation, six layers (background, connections, simulation, colour fill, spectrum and metaballs) share one accumulation and compositing path, followed by bloom and post-processing. That is why bloom, masks, kaleidoscope, colour grade, trails, tiling and displacement work the same in every mode.
- 1,000,000 Physarum agents
- 200,000 boids
- 150,000 SPH particles
- 10¹³ fractal zoom
How the performance work is done
Performance work measures where the frame time goes, with GPU timing around simulation, grid construction, rendering, bloom and post-processing. Experiments run as controlled A/B tests, because GPU clocks, browser scheduling and background load can otherwise produce surprisingly convincing false conclusions.
The gains come from the algorithms, not from lower image quality: spatial sorting for memory locality in neighbourhood searches, no square roots in hot particle loops, precomputed SPH terms, workgroup-local tiles for dense fields, and inactive force and modulation work that is bounded instead of blindly traversed.
corePlatform-independent simulation and domain logic.adaptersThe boundaries: WebGPU, audio, MIDI, OSC, storage, media and UI.appThe composition layer that connects everything to the frame loop and application state.
The dependency direction between the layers is machine-checked, including circular dependencies, and WGSL lives in dedicated shader sources composed into the pipelines the engine needs. There is deliberately no WebGL fallback: WebGPU is the architecture, not an optional acceleration layer.
Music as control data, and as image
Every signal can set, add to or scale any bindable parameter, so a new simulation never has to reinvent audio reactivity:
- Frequency bands
- Energy
- Spectral brightness
- Build / drop
- Beat and onset
- Stereo balance and width
- LFOs
- Timers
- Tapped BPM clock
- MIDI CC, notes, pitch bend, aftertouch
- OSC
Spectrum, waveform and vectorscope are composited into the scene itself, so they bloom, trail and distort with everything else. A spectrum can become radial geometry inside a kaleidoscope, and the vectorscope is both a measurement of the mix and a visual element. The waveform triggers on the zero crossing like a hardware oscilloscope.
Forces and shapes
Up to 16 force fields attract, repel, rotate, push, add turbulence, drag, contain or send waves through the simulation. Shapes gate forces and modulation to a region:
- Circles
- Rectangles
- Rings
- Stars
- Polygons
- Text
- Images
- Video
- Live webcam mask
Regions can be grouped. Particles can gather only inside typography, a force can follow a performer’s silhouette, a flock can get one parameter range on the left of the frame and another on the right, and a word can become a spawning region instead of an overlay. The geometry affects the system instead of decorating it.
Built to be played
- Two decks and a crossfader Spatial wipes, and cuts synced to the tapped musical clock.
- Playlists Presets sequenced by time or by musical timing.
- Hands on MIDI, OSC, keyboard shortcuts, search, undo and a control panel that pops out to a second screen.
- Beat effects Flashes, zoom impulses, camera shake and short freezes of the simulation clock.
- Recording Live WebM with the current audio track.
- Frame-exact export Steps the simulation frame by frame and encodes it with WebCodecs. If a scene needs 40 ms per frame, the export just takes longer and is still a complete 60 fps video: render quality, separated from real-time speed.
Who it is for
- VJs A shared vocabulary of forces, modulation, trails and post effects across presets, MIDI mapped to real dynamics, beat-quantized transitions and generative scenes that never repeat exactly.
- Indie bands Sets prepared as presets and playlists that follow the music, with a few high-impact controls left for someone on stage. An optional DAW bridge (CLAP well tested, a VST3 build path exists) carries MIDI and transport: a section change can become a visual event, an automation lane can move a force. The same presets render offline for videos and clips.
- Small venues One laptop with a modern GPU and a browser, controls on a second display, and shows prepared before soundcheck instead of during it. The aim is failure before showtime, not during it.
AI-assisted development
AI is heavily involved in implementation, testing, documentation and code review, but not in generating the visuals: the runtime is conventional TypeScript, WebGPU, WGSL and deterministic algorithms. That makes SignalBiome two projects at once: an audiovisual instrument, and an experiment in a disciplined human/AI development process.
How the agent workflow is set up
- Design documents before larger features
- Isolated branches and worktrees, with explicit file claims so parallel agents don’t collide
- An append-only ledger of open work and decisions
- Automated gates selected by the changed files, and full verification before work lands
- Browser tests that check pixels, not settings: whether the image actually got brighter, or a flock actually moved away from a force
- Regression gates mutation-tested by reintroducing the problem and checking that they fail
- A registry of which agent owns what, and a record of assumptions that turned out to be wrong; design notes are evidence to re-check against the source, not truth
The process grew out of two facts about coding agents: they are very good at parallel investigation, mechanical refactoring and turning explicit contracts into code, and just as good at confidently following stale documentation or writing tests that prove the implementation they just wrote. The workflow is designed around both.
Where it is going
Planned, not shipped yet:
- Coupled simulations A shared GPU field interface, so a fluid velocity field can steer boids or plants, and a 2D incompressible fluid solver as infrastructure.
- Growth on geometry Plants that follow contours and wrap around forms.
- Art direction A palette layer, a composition camera and richer temporal feedback.
- Show output Native Spout and later NDI output, performance-take replay, and a Show Preflight that flags scenes over the frame budget on the show machine before the show.
The interesting part is not any single feature, but what happens when the systems share the same fields, clocks, modulation and renderer.
Technical snapshot
- Runtime: TypeScript, Vite, WebGPU, WGSL, Web Audio, Web MIDI, OSC
- GPU model: compute-heavy simulation with GPU-resident state, shared scene accumulation, layered composition, bloom and post-processing
- Simulations: Boids, Physarum, SPH, cellular automata, Gray-Scott, fractals, attractors and raymarching, Particle Life, procedural plant growth
- Control: audio analysis, beat and onset detection, MIDI, OSC, LFOs, timers and tapped tempo
- Performance workflow: GPU timestamps, controlled A/B experiments, effect-level browser scenarios and architecture gates
- Output: live browser rendering, WebM recording and frame-by-frame WebCodecs export
- Development: human-directed, AI-assisted multi-agent workflow with isolated worktrees, design docs, explicit ownership and automated verification