Audioreaktive Shader: einen GLSL-Musik-Visualizer im Browser schreiben

Ein Fragment-Shader ist ein kleines Programm, das in jedem Frame für jedes Pixel des Bildschirms läuft. Gib ihm ein paar Zahlen, die die Musik im Moment beschreiben, etwa wie laut der Bass ist oder ob gerade eine Kickdrum kam, und er wird zum audioreaktiven Shader: einem Visualizer, den du selbst schreibst, in ein paar Dutzend Zeilen GLSL.

Schwierig ist meist nicht der Shader, sondern alles drumherum: Audio erfassen, eine FFT berechnen, Werte glätten, Beats erkennen, alles an WebGL übergeben. Diesen Teil erledigt Deus Studio für dich, sodass du in Chrome einen Editor öffnest und direkt mit den Visuals loslegst.

Was Deus Studio ist

Deus Studio ist ein GLSL-Editor in der Erweiterung Deus, verbunden mit der echten Deus-Engine. Du schreibst einen Fragment-Shader und siehst sofort, wie er auf den Tab reagiert, den Deus gerade abhört, oder auf eine Audiodatei von deinem Computer. Die Vorschau nutzt dieselben Uniforms, dieselbe Klanganalyse und denselben WebGL-1-Renderer wie der Visualizer: Was du in der Vorschau siehst, läuft genauso in Deus. Studio ist im Free-Plan enthalten.

Zum Öffnen startest du den Visualizer für einen Tab (siehe die Anleitung für jeden Tab) und wählst im Menü Erstellen › GLSL. Du kannst mit der Vorlage beginnen, mit der Tour durch die Audio-Eingaben, die jeden Audio-Eingang als Anzeige zeichnet, oder mit einer bearbeitbaren Kopie eines der 70 eingebauten WebGL-Presets. Das Original-Preset bleibt unverändert.

Die Eingaben, die dein Shader bekommt

Studio verwendet GLSL ES 1.00 und mainImage im Shadertoy-Stil. Deus versorgt jeden Shader live mit einer Reihe von Uniforms, und du nutzt die Namen direkt, ohne Deklaration. Einige der nützlichsten:

• u_resolution: Rendergröße in Pixeln. u_time: Sekunden seit dem Start des Presets.
• u_bass, u_mid, u_treble, u_level: die drei Bänder und die Gesamtlautstärke, normiert auf 0–1.
• u_kick, u_snare, u_hihat: Drum-Erkennung, 0–1. u_attack schlägt bei jedem neuen Klang aus; u_bass_pulse ist ein abklingender Impuls bei Bass-Schlägen.
• u_level_integral: eine Uhr, die schneller läuft, wenn die Musik lauter ist. Nimm sie statt u_time für Bewegung, die dem Track folgt.
• u_frequency[32] und u_waveform[32]: das Spektrum von Bass bis Höhen und die Wellenform, je 32 Werte.
• u_note_color, u_note_intensity[12] und weitere u_note_*-Eingänge: Notenanalyse für die 12 Tonklassen, C bis H.

Shadertoys iTime, iResolution und iFrame funktionieren auch, sodass sich Schnipsel von dort mit weniger Anpassungen einfügen lassen. Fahr im Editor mit der Maus über einen u_-Namen, um zu sehen, was er bedeutet und welchen Wert er gerade hat; der Tab Eingaben listet alle mit Live-Werten.

Ein erster audioreaktiver Shader

Hier ein komplettes Preset: ein Ring, der mit dem Bass atmet, bei jedem Kick springt und sich schneller dreht, wenn der Track lauter wird.

// Ein Ring, der mit dem Bass atmet und bei Kicks springt.
uniform vec3 u_tint; // @color #ff2bd6 label="Tint"

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  // Zentrierte Koordinaten: y von -1 bis 1.
  vec2 p = (fragCoord * 2.0 - u_resolution) / u_resolution.y;
  float r = length(p);
  float a = atan(p.y, p.x);

  float radius = 0.35 + u_bass * 0.35 + u_kick * 0.15;
  float ring = 1.0 - smoothstep(0.0, 0.04, abs(r - radius));

  // Streifen, die sich schneller drehen, wenn die Musik lauter ist.
  float stripes = 0.6 + 0.4 * sin(a * 8.0 + u_level_integral * 2.0);

  vec3 color = u_tint * ring * stripes;
  color += u_tint * u_hihat * 0.25 * (1.0 - smoothstep(0.0, 0.6, r));
  fragColor = vec4(color, 1.0);
}

Ein paar Details, die du kennen solltest. Float-Literale brauchen einen Dezimalpunkt (1.0, nicht 1). Der Kommentar // @color macht u_tint zu einem Farbwähler, sowohl in Studio als auch im Bereich Anpassen des Visualizers. Regler funktionieren genauso: uniform float u_speed; // @param 0 3 1 ergibt einen Regler von 0 bis 3 mit Standardwert 1, und // @toggle 1 macht einen Schalter. Weil jedes Bedienelement eine Zeile im Code ist, reist es mit dem Shader mit.

Regler ohne Tippen

Diese Kommentare musst du nicht von Hand schreiben. Markiere eine Zahl im Code oder eine vec3-Farbe und drück Slider erstellen: Daraus wird ein Bedienelement in Studio und im Bereich Anpassen. Farb-Literale bekommen ein anklickbares Farbfeld, und Kompilierfehler werden an den Zeilen markiert, die sie verursacht haben.

Sieh, was der Shader hört

Der Tab Audio zeigt das rohe und das normierte Spektrum sowie die letzten 12 Sekunden von Pegel, Bass, Mitten, Höhen, Attacks und erkannten Drum-Schlägen, jeweils beschriftet mit dem Uniform, das den Wert liest. Das macht das Feintuning viel leichter: Wenn sich der Ring kaum bewegt, siehst du, ob u_bass bei diesem Track überhaupt 1.0 erreicht, und skalierst deine Formel entsprechend. Als Audioquelle dient der Tab, den Deus gerade erfasst, oder ein Track von deinem Computer.

Render-Passes, Feedback und andere Namen

Kommentare steuern auch das Rendering: // @pass buffA scale=0.5 fügt einen Render-Pass hinzu, den du als uniform sampler2D buffA; zurückliest, // @feedback 0.09 blendet das letzte Frame aus, statt es zu löschen, was Spuren erzeugt, und // @fps 30 begrenzt die Bildrate. Wenn du einen Shader im Synesthesia-Stil portierst: Namen wie syn_BassLevel, syn_Hits oder TIME setzt die Engine ebenfalls; deklariere sie in deinem Code, um sie zu nutzen.

In Deus speichern

Drück Speichern (⌘S), und das Preset erscheint unter Presets › Eigene mit einem Vorschaubild aus der Vorschau, oder Speichern & abspielen, um den Visualizer sofort darauf umzuschalten. Ungespeicherte Änderungen überstehen ein Neuladen als Entwurf, und deine Presets werden lokal in deinem Browser gespeichert.

Ab dann läuft dein Shader im Visualizer neben den eingebauten Presets, du kannst ihn also auch im Vollbild auf einem Fernseher oder zweiten Bildschirm zeigen. Wenn du die Analyse hinter den Uniforms verstehen willst, lies, wie Musik-Visualizer funktionieren.