Ein Video kann der Ausgangspunkt für eine Welt sein, die du verändern kannst. Gib einem Coding-Agenten die Referenz, lass ihn die Einzelbilder analysieren und bitte ihn, die Szene als prozeduralen Code nachzubauen. Dann änderst du Kamera, Beleuchtung, Materialien oder Bewegung und renderst alles neu.
Das ist die Idee hinter Video 2 GLSL, dem referenzbasierten Shader-Workflow, den ich rund um shader-skills entwickelt habe. Das Spannende daran ist, wie viel von diesem Prozess auf das nächste Video übertragen werden kann.
https://x.com/gokayfem/status/2111907592129671505
Zwei Teile, die zusammenwirken
shader-skills gibt Coding-Agenten eine Bibliothek mit Grafiktechniken, funktionierenden Beispielen und einem Prozess zum Erstellen und Prüfen prozeduraler Shader. Video 2 GLSL ergänzt das um eine referenzgesteuerte Aufgabe: einen Clip analysieren, eine Spezifikation ableiten, die Szene konstruieren und das Ergebnis anschließend mit dem Clip vergleichen.
Der Skill unterstützt Claude Code, Codex, Cursor, Gemini und andere Coding-Agenten. Seine wiederverwendbaren Bausteine umfassen Formen, Noise, Materialien, Terrain, Gebäude, Wasser, Wolken, Beleuchtung und Farbe. Du kannst sie für eine eigene Szene, ein interaktives Experiment oder die Nachbildung eines Videos nutzen.
Für das eigenständige Ziel Video 2 GLSL besteht das Ergebnis aus einem einzigen Shadertoy-kompatiblen Fragment-Shader. Geometrie wird mathematisch beschrieben, Oberflächen sind prozedural und die Animation wird durch die Zeit gesteuert. Das Referenzvideo liefert die visuelle Spezifikation; seine Einzelbilder werden im Shader nicht abgespielt.
Beginne damit, das Video in eine Spezifikation zu verwandeln
Der erste Schritt ist eine zuverlässige Extraktion der Einzelbilder. Eine Video-URL oder ein Dateiname gibt einem Agenten kaum etwas zum Arbeiten. Er muss untersuchen, was tatsächlich zu sehen ist und wie es sich im Laufe der Zeit verändert.
Der wiederverwendbare Prompt fordert vor dem Szenencode eine REFERENCE.md an: Fakten zum Clip, eine Timeline der Einstellungen, ein Objektinventar, Proportionen des Motivs, Bewegung, Kamerarahmung, Beleuchtung und eine abgetastete Farbpalette. Außerdem soll der Agent benennen, was er nicht exakt reproduzieren kann, und Ersatzlösungen zur Freigabe vorschlagen.
Die Beobachtungen variieren je nach Clip. Eine Einstellung mit einer Figur erfordert Kontaktpunkte, Schrittlänge und Sekundärbewegung. Eine Architektureinstellung braucht Proportionen, Perspektive und Kamerafahrt. Bei einer Wasseraufnahme liegt der Fokus auf Oberflächenbewegung, Reflexionen und Tiefe. Derselbe Analyseprozess gibt jedem Fall einen konkreten Ausgangspunkt.
Gib dem Agenten getestete Grafikbausteine
Eine plausibel wirkende Formel kann trotzdem ein unsicheres Distanzfeld, instabiles Noise oder falsche Farben erzeugen. Solche Fehler lassen sich schwerer isolieren, sobald sie in einer großen Szene stecken.
shader-skills umfasst aktuell 186 Funktionen in 20 GLSL-Modulen. Der Agent kann nach einer Technik suchen, die Bibliotheksfunktion namentlich aufrufen und mit dem Bundler alle Abhängigkeiten in einen einzigen, in sich geschlossenen Shader einbinden.
Die Bibliothek enthält Signed Distance Functions für Formen, Operatoren zu deren Kombination, prozedurales Noise und Muster, Raymarching-Hilfsfunktionen, Shading, Atmosphäre und Farbtransformationen. Templates zeigen, wie diese Bausteine in vollständigen Szenen zusammenspielen.
Die Validierung deckt die Kompilierung in WebGL2 sowie numerische Eigenschaften auf der GPU ab: Vorzeichen und Grenzen von Distanzfeldern, Noise-Ableitungen, Farbrundläufe und weiteres prüfbares Verhalten. Gerenderte Beispiele ergänzen eine visuelle Kontrolle. Diese Prüfungen machen die Bausteine verlässlicher; die fertige Szene muss dennoch begutachtet werden.
Baue eine Feedbackschleife rund um den Renderer
Der Workflow durchläuft Blockout und Timing, Bewegung, Details des Motivs, Details der Umgebung, Licht und Farbe, Abgleich mit der Referenz sowie Performance. Jeder Meilenstein erzeugt etwas Sichtbares, das beurteilt werden kann.
Referenz und Render sollten bei gleichem Zeitpunkt und gleicher Rahmung verglichen werden. Nutze Vollbilder für die Komposition, Ausschnitte für Objektformen und Materialien sowie Bildsequenzen für Bewegungen. Ein einzelnes attraktives Standbild kann rutschende Füße, einen Kamerasprung oder eine zu früh stattfindende Interaktion verbergen.
Der Prompt verlangt wiederholte Kritik: Identifiziere die fünf größten Unterschiede, behebe sie und rendere erneut. Messwerte unterstützen diese Prüfung. Motivgröße und Horizontposition helfen bei der Diagnose von Kamerafehlern; abgetastete Farben beim Grading; Bewegungsproben beim Aufspüren von Unstetigkeiten.
Schnelle Iteration ist hier entscheidend. Vorschaubilder in niedriger Auflösung und isolierte Objektansichten ermöglichen es, Proportionen zu korrigieren, bevor du dich an aufwendige Renders bindest. Prüfe Silhouetten und Objektproportionen, bevor du Materialien und Beleuchtung verfeinerst.
Teile komplexe Szenen nach Zuständigkeiten auf
Größere Szenen profitieren davon, wenn mehrere Agenten an getrennten Teilen arbeiten: Motiv, Umgebung, Requisiten, Bewegung oder Beleuchtung. Die Aufteilung sollte sich nach den Anforderungen der Szene richten.
Gemeinsame Schnittstellen halten diese Arbeit kompatibel. Einigt euch auf Maßstab, Koordinaten, Timing und Materialkennungen, weist jedem Agenten die Verantwortung für seine Dateien zu und verlangt Nachweise aus echten Renders. Ein Orchestrator kann die Teile integrieren und das Gesamtbild mit der Referenz vergleichen.
Die wiederverwendbare Lehre daraus ist die Review-Struktur: Jemand muss die gesamte Einstellung bewerten. Ein detailliertes Gebäude oder eine überzeugende Figur können für die Komposition trotzdem falsch sein.
Was die Experimente belegen
Die bisherige Arbeit umfasst eine Floating-Island-Sequenz mit wechselnden Aktionen, eine Dorfsequenz mit Interaktionen und eine endlose Straßenschleife. Ihre Anforderungen unterscheiden sich: Event-Timing, gesetzte Bodenkontakte, Kameraübergänge und exakte Wiederholung verlangen jeweils eine andere Szenenlogik. Auch ihr Fertigstellungsgrad und ihre visuelle Qualität variieren.
Über alle hinweg bleibt derselbe Prozess nützlich: extrahieren, messen, zusammensetzen, rendern, vergleichen und korrigieren. Das Repo enthält außerdem prozedurale Stadt-, Terrain- und Wasserbeispiele, während separate interaktive Experimente organische Formen und Schwarze-Loch-Motive erkunden.
Was editierbar wird und was ungewiss bleibt
Sobald eine Szene als Code existiert, kannst du Steuerungen für Kameraposition, Lichtrichtung, Farbpalette, Timing und prozedurale Details freigeben. Das Straßenexperiment zeigte alternative Kameraansichten desselben aufgebauten Sets.
Diese neuen Ansichten offenbaren auch die Grenzen der Rekonstruktion. Eine Referenz zeigt immer nur einen Teil einer Welt. Verdeckte Flächen müssen erschlossen werden, und ein KI-generiertes Video kann wechselnde Geometrien oder inkonsistente Bewegungen enthalten. Eine überzeugende Übereinstimmung aus einem Blickwinkel beweist noch keine vollständige, akkurate Szene.
Performance ist ein weiteres szenenspezifisches Ergebnis. Detaillierte Raymarching-Geometrie, Vegetation, Schatten und Reflexionen können rechenintensiv sein. Miss die Frametime auf dem Zielrechner, prüfe verschiedene Momente der Einstellung und melde verfehlte Ziele zusammen mit den verbleibenden visuellen Unterschieden.
Video 2 GLSL ist ein wiederverwendbarer Authoring-Workflow. Seine Zuverlässigkeit bei beliebigem Footage muss noch breiter evaluiert werden. Die aktuelle Arbeit liefert uns mehrere konkrete Experimente und eine gemeinsame Methode zur Verbesserung.
Probiere es mit deiner eigenen Referenz aus
Für Claude Code fügst du den Marketplace hinzu und installierst das Plugin:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
Für andere unterstützte Agenten:
npx skills add gokayfem/shader-skills
Nutze prompts/video-to-shader-prompt.md, gib einen Referenzclip, einen Ausgabename und einen Zielrechner an und lege fest, was zwingend bleiben muss und was übersprungen werden darf. Prüfe die Analyse, bevor die Umsetzung beginnt.
Ich möchte diesen Ansatz weiter zu einer verlässlichen Methode entwickeln, um visuelle Referenzen in editierbare prozedurale Szenen zu verwandeln. Jede Rekonstruktion sollte bessere Werkzeuge, bessere Tests und Techniken hinterlassen, die die nächste wiederverwenden kann.
Repository: github.com/gokayfem/shader-skills
