Vom Magier zum Drachen – Musik aus Partikeln

Früher gehörten für mich die Musikvisualisierungen von Winamp fest zum Musikhören. Schon damals faszinierte mich, wie sich Klang in Farbe und Bewegung übersetzen lässt. Als ich später im Internet eine moderne WebGL-Demo sah, kam diese Begeisterung wieder zurück. Ich wollte das Gefühl von damals neu aufleben lassen und selbst ausprobieren, was heute direkt im Browser möglich ist. Daraus entstand nach und nach ein Magier aus Partikeln, der die Musik dirigiert und sich beim Drop in einen Drachen verwandelt.

INTERAKTIVE DEMO ▶Demo starten Der Ton startet nach der Trackauswahl

Aus dem ersten Partikelversuch wurde schrittweise eine Figur mit eigener Choreografie. Simulation, Musik und Regie bleiben technisch getrennt und treffen erst im Browser zu einer gemeinsamen Szene zusammen.

Beim Start stehen drei Stücke zur Wahl. Sie werden nicht als Audiodateien abgespielt, sondern mit der Web Audio API im Browser erzeugt. Gleichzeitig gehen die musikalischen Ereignisse an die Szene: Ein Kick bewegt also nicht nur die Lautsprechermembran, sondern auch Kamera, Gewand und Lichtwelle.

Eine Figur aus bis zu 2,1 Millionen Partikeln

Der Magier besitzt kein sichtbares Polygonmodell. Ein unsichtbares, bewegliches Skelett liefert lediglich Orientierungspunkte für Gewand, Kopf, Hut, Arme und Hände. Die GPU verteilt die Partikel auf mehrere Emitter: Einige bilden die feste Gestalt, andere werden zu Rauch, Schleppe, Armspuren, Zauberstab oder dem leuchtenden Ring am Boden. Zu Beginn liegt die Figur noch als goldene Scheibe auf dem Boden und wächst Stück für Stück daraus hervor.

Position und Geschwindigkeit jedes Punktes liegen in Texturen und werden mit dem GPUComputationRenderer von Three.js aktualisiert. Auf dem Desktop startet die Szene standardmäßig mit 1024 mal 1024 Partikeln, also 1.048.576 Punkten. Auf Smartphones und Tablets verwendet sie zunächst rund 262.000 Punkte und reduziert bei anhaltendem Ruckeln zusätzlich die Renderauflösung.

Wie eine Million Punkte zur Figur werden

Die Simulation behandelt die Partikel nicht als eine Million JavaScript-Objekte. Stattdessen speichert sie ihren Zustand in zwei Gleitkomma-Texturen: In der ersten stehen Position und Lebensalter, in der zweiten Geschwindigkeit und Farbwert. Zwei Fragment-Shader lesen diese Texturen parallel, berechnen den nächsten Zustand und schreiben ihn in ein zweites Texturpaar. Danach werden Quelle und Ziel vertauscht. Dieses Ping-Pong-Verfahren hält die Arbeit vollständig auf der GPU und erspart den Transfer jedes einzelnen Punktes zwischen Prozessor und Grafikkarte.

const gpu = new GPUComputationRenderer(size, size, renderer);
const position = gpu.addVariable('texturePosition', positionShader, positionStart);
const velocity = gpu.addVariable('textureVelocity', velocityShader, velocityStart);

gpu.setVariableDependencies(position, [position, velocity]);
gpu.setVariableDependencies(velocity, [position, velocity]);

// pro Bild: beide Zustände auf der GPU fortschreiben
gpu.compute();

Eine feste Zufallszahl ordnet jeden Punkt dauerhaft einem Emitter und einem Untertyp zu. Dadurch weiß der Shader, ob ein Punkt etwa Gewand, Kopf, Arm, Rauch oder Zauberstabspur bildet. Kurzlebige Formpartikel werden ungefähr viermal pro Sekunde neu an der bewegten Figur abgetastet; Rauch und Schweife leben länger und dürfen sich lösen. Beim Drop entscheidet dieselbe stabile Kennung über die persönliche Umschaltschwelle zur Drachenform. So zerfällt der Magier organisch, obwohl für alle Punkte derselbe Shader läuft.

Drei Stücke entstehen live im Browser

Die aktuelle Fassung enthält drei bewusst unterschiedliche Stücke. Kick, Hats, Clap oder Snare, Bass, Arpeggio und Lead entstehen aus Oszillatoren, Rauschgeneratoren, Filtern und Effekten. Jeder Track besitzt ein eigenes Tempo und eine eigene Klangidee, nutzt aber denselben dramaturgischen Ablauf.

Jedes Arrangement umfasst 44 Takte und dauert je nach Tempo rund 75 bis 84 Sekunden. Es führt durch Intro, Hauptteil, Breakdown, Build-up, Drop, einen zweiten Hauptteil und das Outro. Am Ende sinkt der Magier wieder in die goldene Scheibe zurück; anschließend beginnt die Schleife von vorn.

Ein Sequencer steuert Ton und Bild

Die Szene versucht nicht, fertigen Ton nachträglich zu analysieren. Der Sequencer kennt jeden Schritt, jede Note und jeden Abschnitt bereits. Beim Planen des Audios legt er deshalb zusätzlich Ereignisse für Kick, Clap, Taktanfang, Melodieton, Build-up und Drop in eine Warteschlange. In der Animationsschleife werden diese Ereignisse passend zur tatsächlichen Audioausgabe abgeholt. So bleiben Bewegung und Klang eng gekoppelt.

if (k) {
  kick(t, k);
  push({ type: 'kick', t, v: k, beat: s % 4 === 0 });
}

const playTime = ctx.currentTime
  - (ctx.outputLatency || 0)
  - (ctx.baseLatency || 0);

while (queue.length && queue[0].t <= playTime) {
  onEvent(queue.shift());
}

Vom Magier zum Drachen

Die Verwandlung ist der dramaturgische Mittelpunkt. Sie wäre weniger überzeugend, wenn alle Partikel im selben Frame von einer Form in die andere sprängen. Deshalb besitzt jedes Partikel eine eigene Schwelle. Beim Drop wechseln zuerst einzelne Punkte, dann ganze Flächen in die Drachenform. Der Magier zerfließt sichtbar, während Kopf, Leib, Flügel, Hörner und Feueratem entstehen.

uniform float uDragon;
bool inDragon(float h) {
  return uDragon > 0.02 + 0.96 * fract(h * 29.71);
}

Der Drachenkörper folgt der zurückliegenden Flugbahn seines Kopfes. Aus dieser Spur werden 48 Punkte einer Wirbelsäule mit gleichmäßigem Abstand gebildet. So entstehen ein dünner Hals, ein kräftiger Rumpf und ein langer auslaufender Schwanz, ohne dass ein starres Drachenmodell bewegt werden muss. Farbige Bänder wandern über den Leib, die Flügel schlagen im Rhythmus und bei musikalischen Akzenten öffnet sich der Kiefer für Feuer oder Rauch. In den letzten beiden Schlägen stürzt der Drache zurück zum Boden; anschließend wächst der Magier erneut aus der Scheibe.

Was die Wirkung zusammenhält

• Der dunkle blau-violette Himmel verändert sich mit dem Filterverlauf der Musik und färbt sich während der Drachenphase wärmer.
• Eine zweite, weich gezeichnete Partikelschicht erzeugt Dunst; Bokeh-Lichter, Tiefenunschärfe und Bloom geben der Szene räumliche Tiefe.
• Farbversatz, Vignette und Filmkorn reagieren verstärkt auf Kick, Build-up und Drop, ohne die Partikel vollständig zu überstrahlen.
• Eine einfache Zwei-Gelenk-Kinematik hält Schultern, Ellbogen und Hände auch bei schnellen Gesten zusammen.
• Die Kamera pendelt langsam um die Figur, wechselt ihre Einstellungen taktweise und setzt auf Kicks kurze Impulse.
• Der Abstand wird aus Blickwinkel und Seitenverhältnis berechnet, damit Magier und Drache auch in einem hochkant geöffneten Browser möglichst vollständig sichtbar bleiben.

Was sich direkt ausprobieren lässt

Die drei Tracks lassen sich jederzeit über die Schaltflächen wechseln. Mit dem Stoppknopf endet die Musik sofort und der Magier sinkt wieder in die Scheibe zurück; die Leertaste pausiert und setzt die laufende Wiedergabe fort. Auf Mobilgeräten passt die Demo Partikelmenge, Pixeldichte und Bildausschnitt automatisch an, damit die Inszenierung auch auf kleineren Geräten möglichst flüssig und weitgehend vollständig sichtbar bleibt.

Der Drache ist kein zweites Modell. Er ist dieselbe Figur in einem anderen Zustand.

Was ich aus der Partikelmagier-Demo mitnehme

Die hohe Partikelzahl ist auffällig, aber sie trägt die Wirkung nicht allein. Entscheidend wurde die Choreografie: das langsame Aufstehen aus der goldenen Scheibe, die dirigierenden Hände, der Wechsel der Kameraperspektiven und die Verwandlung im Drop. Erst dadurch bekommt der abstrakte Rauch eine lesbare Rolle.

Gleichzeitig zeigt der Versuch, wie weit eine kompakte Webanwendung heute reichen kann. Shader berechnen Bewegung und Farbe, die Web Audio API baut drei vollständige Stücke zusammen, und eine gemeinsame Ereignisfolge führt Musik, Figur, Licht und Kamera. Für die Produktionsfassung sind HTML, Gestaltung und Programmlogik getrennt; selbst Three.js wird lokal mitgeliefert. Es braucht dafür keine Game-Engine und kein vorgerendertes Video – nur Code, der im richtigen Moment hörbar und sichtbar wird.