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

SignalBiome

Ein audiovisuelles Echtzeit-Instrument auf Basis von WebGPU. Acht Familien von GPU-Simulationen, von Schwarmverhalten und Schleimpilz über Reaktions-Diffusion und Partikel-Ökologien bis zu geraymarchten Fraktalen, teilen sich eine gemeinsame Render-, Modulations- und Compositing-Architektur, und Audio, MIDI, OSC und Tempo spielen sie wie einen Synthesizer.

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

SignalBiome ist weniger eine Sammlung visueller Effekte als 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, und Presets, Decks und Playlists machen das ganze System spielbar.

  • 1.000.000 GPU-Agenten
  • 8 Simulationssysteme
  • 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 auf Browser oder 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 beeinflusst, statt einen Equalizer anzutreiben?

Ein Beat stört einen Schwarm, Bass-Energie ä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 Feed und Kill von Punkten über Würmer bis zu zellteilungsartigen Strukturen reichen.
  • Fractal Escape-Time-Fraktale, seltsame Attraktoren aus Hunderttausenden Punkten und geraymarchte Mandelbulbs und Mandelboxes.
  • Particle Life Bis zu sechs Arten, gesteuert von einer asymmetrischen Interaktionsmatrix, die Cluster, Membranen, Ketten und instabile Ökologien bilden.
  • 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 heißen Partikelschleifen, vorberechnete SPH-Terme, Workgroup-lokale Kacheln für dichte Felder und begrenzte statt blind durchlaufener Arbeit für inaktive Kräfte und Modulationen.

  • 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, ergänzen 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
  • Getappte BPM-Clock
  • MIDI-CC, Noten, Pitch Bend, Aftertouch
  • OSC

Spektrum, Wellenform und Vektorskop werden direkt in die Szene gerendert und leuchten, ziehen Spuren und verzerren sich so mit allem anderen. 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 und Schnitte, die sich an der getappten musikalischen Clock ausrichten.
  • Playlists Presets, abgefolgt 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, Beat-quantisierte Ü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 (CLAP gut erprobt, ein VST3-Build existiert) überträgt MIDI und Transport: Ein Songteil-Wechsel kann zum visuellen Ereignis werden, eine Automationsspur eine Kraft bewegen. Dieselben Presets lassen sich offline für Videos und Clips rendern.
  • Kleine Venues Ein Laptop mit moderner GPU und ein Browser, die Steuerung auf einem zweiten Bildschirm und Shows, die vor dem Soundcheck vorbereitet sind statt währenddessen. Das Ziel: Fehler vor der Show finden, nicht während der Show.

KI-gestützte Entwicklung

KI ist stark an Implementierung, Tests, Dokumentation und Code-Review beteiligt, aber nicht an der Erzeugung der Visuals: Die Laufzeit ist konventionelle Software aus TypeScript, WebGPU, WGSL und deterministischen Algorithmen. So ist SignalBiome zwei Projekte zugleich: ein audiovisuelles Instrument und ein Experiment für einen disziplinierten Entwicklungsprozess aus Mensch und KI.

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 Ledger, in dem offene Arbeit und Entscheidungen nur ergänzt werden
  • Automatisierte Gates, die sich nach den geänderten Dateien richten, und eine vollständige Prüfung, bevor Arbeit übernommen wird
  • 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 wird
  • 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-Agents entstanden: Sie sind sehr gut in paralleler Recherche, mechanischem Refactoring und darin, explizite Vorgaben in Code umzusetzen, und ebenso gut darin, veralteter Dokumentation selbstbewusst zu folgen oder Tests zu schreiben, die nur die gerade geschriebene Implementierung 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
  • Laufzeit: 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 getapptes 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