Viz · Audiovisuelles WebGPU-Instrument / eigenes F&E-Projekt

SignalBiome

Ein audiovisuelles Echtzeit-Instrument für den Browser, gebaut auf WebGPU. Acht GPU-Simulationen, von Schwärmen und Schleimpilzen bis zu Fraktalen, teilen sich eine Render-Pipeline. Gespielt wird es wie ein Synthesizer: über Audio, MIDI, OSC und Tempo.

1M GPU-Agenten
WebGPU WGSL TypeScript Vite
Rolle
Alleinentwickler
Plattform
Browser · WebGPU (Chrome / Edge 113+)
Workflow
KI-gestützt, agentengesteuert
Status
Aktives eigenes F&E-Projekt

SignalBiome ist weniger wie eine Effektsammlung aufgebaut als wie ein Synthesizer. Simulationen liefern Bewegung und Struktur; Audio, MIDI, OSC und Tempo liefern Steuersignale; Kraftfelder formen die Dynamik um; Ebenen und Post-Processing formen das Bild; Presets, Decks und Playlists machen das ganze System spielbar.

  • 1.000.000 GPU-Agenten
  • 8 Simulationen
  • 21 Modulationssignale
  • 16 Kraftfelder gleichzeitig
Architekturdiagramm. Eingänge links (Audioanalyse, MIDI, OSC, LFOs und Timer, DAW-Bridge) speisen Signale und Bindings (setzen, addieren, skalieren), dann Simulation und Felder, Szenenebenen, Akkumulation und Spuren sowie Bloom und Post. Ausgänge rechts: Live-Ausgabe im Browser oder auf einem Projektor, Steuerung (Deck A/B, Crossfader, Playlists, Presets) und Aufnahme/Export (WebM-Aufnahme, frame-genauer WebCodecs-Export). Eine blaue Linie führt Live-Interaktion zurück zu den Signalen. Fußzeile: TypeScript, WebGPU, WGSL, GPU-residenter Simulationszustand.
So greift alles ineinander: Signale rein, eine gemeinsame Simulations- und Bild-Pipeline, Performance raus.

Keine Shader-Playlist

Die meisten Visualizer beginnen beim Audio und entscheiden, wie sie es zeichnen. SignalBiome stellt eine andere Frage:

Was wäre, wenn Musik eine künstliche Welt beeinflussen könnte, statt einen Equalizer anzutreiben?

Ein Beat stört einen Schwarm, Bassenergie ändert die Viskosität eines Fluids, ein MIDI-Controller bewegt einen Wirbel durch Tausende Partikel, und eine Kraft lässt sich auf ein Wort oder eine Webcam-Silhouette begrenzen. Das Ergebnis liegt zwischen VJ-Tool, modularem visuellem Synthesizer und kleinem GPU-Simulationslabor.

Acht Simulationen, ein Instrument

  • Boids Schwarmverhalten aus Separation, Ausrichtung und Kohäsion, mit Nachbarschaftssuche auf der GPU und optionalen Verbindungslinien.
  • Physarum Schleimpilz-Agenten, die ein Spurenfeld wahrnehmen und hinterlassen und daraus Adern, Flächen und verzweigte Netze wachsen lassen. Skaliert bis zu einer Million Agenten.
  • SPH Fluid Smoothed Particle Hydrodynamics, von Tropfen bis zu schweren, zusammenhängenden Körpern.
  • Life Diskrete zelluläre Automaten neben kontinuierlichen Regeln wie SmoothLife, Lenia und MNCA.
  • Reaction Gray-Scott-Reaktions-Diffusion, bei der die Parameter Feed und Kill Muster von Punkten über Würmer bis zu zellteilungsartigen Strukturen erzeugen.
  • Fractal Escape-Time-Fraktale, seltsame Attraktoren aus Hunderttausenden Punkten und per Raymarching gerenderte Mandelbulbs und Mandelboxes.
  • Particle Life Bis zu sechs Arten bilden, gesteuert von einer asymmetrischen Interaktionsmatrix, Cluster, Membranen, Ketten und instabile Ökologien.
  • Plant Samen treiben Spitzen aus, die sich verzweigen, Blätter und Blüten bilden, altern und welken.

Ein Off-Modus blendet die Simulation aus, während Hintergründe, Audio-Scopes, Farbe, Spuren, Bloom und Post-Processing weiterlaufen.

Architektur und Performance

Der gesamte Simulationszustand bleibt auf der GPU, in WebGPU-Compute- und -Render-Pipelines, geschrieben in WGSL. Statt eines eigenen Renderers pro Simulation teilen sich sechs Ebenen (Hintergrund, Verbindungen, Simulation, Farbfüllung, Spektrum und Metaballs) einen gemeinsamen Akkumulations- und Compositing-Pfad, gefolgt von Bloom und Post-Processing. Deshalb funktionieren Bloom, Masken, Kaleidoskop, Color Grading, Spuren, Kacheln und Displacement in jedem Modus gleich.

  • 1.000.000 Physarum-Agenten
  • 200.000 Boids
  • 150.000 SPH-Partikel
  • 10¹³ Fraktal-Zoom
Wie die Performance-Arbeit abläuft

Die Performance-Arbeit misst, wohin die Frame-Zeit geht, mit GPU-Timing für Simulation, Gitteraufbau, Rendering, Bloom und Post-Processing. Experimente laufen als kontrollierte A/B-Tests, weil GPU-Takt, Browser-Scheduling und Hintergrundlast sonst erstaunlich überzeugende Fehlschlüsse erzeugen.

Die Gewinne kommen aus den Algorithmen, nicht aus geringerer Bildqualität: räumliche Sortierung für bessere Speicherlokalität bei der Nachbarschaftssuche, keine Quadratwurzeln in zeitkritischen Partikelschleifen, vorberechnete SPH-Terme, Workgroup-lokale Kacheln für dichte Felder und inaktive Kräfte und Modulationen werden übersprungen, statt blind durchlaufen zu werden.

  • core Plattformunabhängige Simulations- und Domänenlogik.
  • adapters Die Schnittstellen: WebGPU, Audio, MIDI, OSC, Speicher, Medien und UI.
  • app Die Kompositionsebene, die alles mit der Frame-Schleife und dem Anwendungszustand verbindet.

Die Abhängigkeitsrichtung zwischen den Ebenen wird maschinell geprüft, einschließlich zirkulärer Abhängigkeiten, und WGSL liegt in eigenen Shader-Quellen, die zu den benötigten Pipelines zusammengesetzt werden. Einen WebGL-Fallback gibt es bewusst nicht: WebGPU ist die Architektur, keine optionale Beschleunigung.

Musik als Steuerdaten und als Bild

Jedes Signal kann jeden bindbaren Parameter setzen, addieren oder skalieren, sodass keine neue Simulation die Audio-Reaktivität neu erfinden muss:

  • Frequenzbänder
  • Energie
  • Spektrale Helligkeit
  • Build-up / Drop
  • Beat und Onset
  • Stereo-Balance und -Breite
  • LFOs
  • Timer
  • Tap-Tempo (BPM)
  • MIDI-CC, Noten, Pitch Bend, Aftertouch
  • OSC

Spektrum, Wellenform und Vektorskop werden direkt in die Szene gerendert und bekommen so wie alles andere Bloom, Spuren und Verzerrung ab. Ein Spektrum kann zur radialen Geometrie in einem Kaleidoskop werden, und das Vektorskop ist zugleich Messung des Mixes und Bildelement. Die Wellenform triggert wie ein Hardware-Oszilloskop auf den Nulldurchgang.

Kräfte und Formen

Bis zu 16 Kraftfelder ziehen an, stoßen ab, rotieren, schieben, fügen Turbulenz oder Widerstand hinzu, begrenzen oder schicken Wellen durch die Simulation. Formen begrenzen Kräfte und Modulation auf einen Bereich:

  • Kreise
  • Rechtecke
  • Ringe
  • Sterne
  • Polygone
  • Text
  • Bilder
  • Video
  • Live-Webcam-Maske

Bereiche lassen sich gruppieren. So sammeln sich Partikel nur innerhalb von Schrift, eine Kraft folgt der Silhouette eines Performers, ein Schwarm bekommt links im Bild einen anderen Parameterbereich als rechts, und ein Wort wird zur Spawn-Region statt zum Overlay. Die Geometrie wirkt auf das System, statt es nur zu dekorieren.

Gebaut, um gespielt zu werden

  • Zwei Decks und ein Crossfader Räumliche Wipes sowie Schnitte, die im Tap-Tempo sitzen.
  • Playlists Presets in einer Abfolge nach Zeit oder musikalischem Timing.
  • Direkte Steuerung MIDI, OSC, Tastenkürzel, Suche, Rückgängig und ein Bedienfeld, das sich auf einen zweiten Bildschirm auslagern lässt.
  • Beat-Effekte Blitze, Zoom-Impulse, Kamerawackeln und kurzes Anhalten der Simulationszeit.
  • Aufnahme Live-WebM mit der aktuellen Audiospur.
  • Frame-genauer Export Berechnet die Simulation Frame für Frame und kodiert sie mit WebCodecs. Braucht eine Szene 40 ms pro Frame, dauert der Export einfach länger und ergibt trotzdem ein lückenloses 60-fps-Video: Renderqualität, getrennt von Echtzeit-Tempo.

Für wen es gedacht ist

  • VJs Ein gemeinsames Vokabular aus Kräften, Modulation, Spuren und Post-Effekten über alle Presets, MIDI auf echte Dynamik gemappt, beatquantisierte Übergänge und generative Szenen, die sich nie exakt wiederholen.
  • Indie-Bands Sets, vorbereitet als Presets und Playlists, die der Musik folgen, mit ein paar wirkungsvollen Reglern für jemanden auf der Bühne. Eine optionale DAW-Bridge (als CLAP-Plugin erprobt; VST3 lässt sich ebenfalls bauen, muss aber je Host noch getestet werden) überträgt MIDI und Transport: Ein Songteilwechsel kann zum visuellen Ereignis werden, eine Automationsspur eine Kraft bewegen. Dieselben Presets lassen sich offline für Videos und Clips rendern.
  • Kleine Clubs und Bühnen Ein Laptop mit moderner GPU und ein Browser, die Steuerung auf einem zweiten Bildschirm und Shows, die vor dem Soundcheck vorbereitet sind. Das Ziel: Probleme zeigen sich vor der Show, nicht währenddessen.

KI-gestützte Entwicklung

KI ist stark an Implementierung, Tests, Dokumentation und Code-Review beteiligt, aber nicht an der Erzeugung der Visuals: Die Runtime ist konventionelle Software aus TypeScript, WebGPU, WGSL und deterministischen Algorithmen. So ist SignalBiome zwei Projekte zugleich: ein audiovisuelles Instrument und ein Experiment mit einem disziplinierten Entwicklungsprozess, in dem Mensch und KI zusammenarbeiten.

Wie der Agenten-Workflow aufgebaut ist
  • Designdokumente vor größeren Features
  • Isolierte Branches und Worktrees mit expliziten Datei-Reservierungen, damit parallele Agenten nicht kollidieren
  • Ein fortlaufendes Protokoll (append-only) offener Aufgaben und Entscheidungen
  • Automatisierte Gates, die sich nach den geänderten Dateien richten, und eine vollständige Prüfung, bevor Änderungen gemergt werden
  • Browsertests, die Pixel statt Einstellungen prüfen: ob das Bild wirklich heller wurde oder ein Schwarm sich wirklich von einer Kraft entfernt hat
  • Regressions-Gates, die mit Mutationstests geprüft werden, indem der Fehler wieder eingebaut und geprüft wird, dass sie anschlagen
  • Ein Register, welcher Agent was verantwortet, und eine Sammlung von Annahmen, die sich als falsch erwiesen haben; Designnotizen gelten als Hinweise, die am Quellcode nachgeprüft werden, nicht als Wahrheit

Der Prozess ist aus zwei Beobachtungen über Coding-Agenten entstanden: Sie sind sehr gut in paralleler Recherche, mechanischem Refactoring und darin, explizite Vorgaben in Code umzusetzen, und ebenso anfällig dafür, veralteter Dokumentation selbstbewusst zu folgen oder Tests zu schreiben, die bloß den gerade geschriebenen Code bestätigen. Der Workflow ist auf beides ausgelegt.

Wie es weitergeht

Geplant, noch nicht ausgeliefert:

  • Gekoppelte Simulationen Eine gemeinsame GPU-Feldschnittstelle, über die ein Fluid-Geschwindigkeitsfeld Boids oder Pflanzen steuern kann, und ein inkompressibler 2D-Fluid-Solver als Infrastruktur.
  • Wachstum auf Geometrie Pflanzen, die Konturen folgen und Formen umranken.
  • Art Direction Eine Palettenebene, eine Kompositionskamera und reichhaltigeres zeitliches Feedback.
  • Show-Ausgabe Native Ausgabe über Spout und später NDI, das Abspielen aufgezeichneter Performance-Takes und ein Show-Preflight, der Szenen über dem Frame-Budget schon vor der Show auf dem Show-Rechner meldet.

Spannend ist nicht ein einzelnes Feature, sondern was passiert, wenn die Systeme dieselben Felder, Clocks, Modulationen und denselben Renderer teilen.

Technischer Überblick
  • Laufzeitumgebung: TypeScript, Vite, WebGPU, WGSL, Web Audio, Web MIDI, OSC
  • GPU-Modell: rechenintensive Simulation mit GPU-residentem Zustand, gemeinsamer Szenen-Akkumulation, geschichteter Komposition, Bloom und Post-Processing
  • Simulationen: Boids, Physarum, SPH, zelluläre Automaten, Gray-Scott, Fraktale, Attraktoren und Raymarching, Particle Life, prozedurales Pflanzenwachstum
  • Steuerung: Audioanalyse, Beat- und Onset-Erkennung, MIDI, OSC, LFOs, Timer und Tap-Tempo
  • Performance-Workflow: GPU-Zeitstempel, kontrollierte A/B-Experimente, Browser-Szenarien auf Effektebene und Architektur-Gates
  • Ausgabe: Live-Rendering im Browser, WebM-Aufnahme und WebCodecs-Export Frame für Frame
  • Entwicklung: menschlich geführter, KI-gestützter Multi-Agent-Workflow mit isolierten Worktrees, Designdokumenten, klarer Verantwortung und automatisierter Prüfung