Un video può essere il punto di partenza per un mondo che puoi modificare. Fornisci il riferimento a un agente di programmazione, lascialo studiare i fotogrammi e chiedigli di ricostruire la scena come codice procedurale. Poi cambia l'inquadratura, le luci, i materiali o il movimento e fai un nuovo rendering.
Questa è l'idea alla base di Video 2 GLSL, il flusso di lavoro da riferimento a shader che ho sviluppato attorno a shader-skills. La parte interessante è quanto di questo processo possa essere riutilizzato per il video successivo.
https://x.com/gokayfem/status/2111907592129671505
Due elementi che lavorano insieme
shader-skills offre agli agenti di programmazione una libreria di tecniche grafiche, esempi funzionanti e un processo per creare e verificare shader procedurali. Video 2 GLSL aggiunge un compito guidato dal riferimento: studiare una clip, ricavare una specifica, costruire la scena e poi confrontare il risultato con la clip originale.
La skill supporta Claude Code, Codex, Cursor, Gemini e altri agenti di programmazione. Le sue parti riutilizzabili coprono forme, rumore, materiali, terreni, edifici, acqua, nuvole, illuminazione e colore. Puoi usarle per una scena originale, un esperimento interattivo o la ricreazione di un video.
Per l'obiettivo autonomo Video 2 GLSL, il risultato finale è un singolo fragment shader compatibile con Shadertoy. La geometria è descritta matematicamente, le superfici sono procedurali e l'animazione è guidata dal tempo. Il video di riferimento fornisce la specifica visiva; i suoi fotogrammi non vengono riprodotti all'interno dello shader.
Inizia trasformando il video in una specifica
Il primo passo è un'estrazione affidabile dei fotogrammi. Un URL o un nome file video dà pochissimi spunti di lavoro a un agente. Ha bisogno di esaminare cosa appare realmente e come cambia nel tempo.
Il prompt riutilizzabile richiede un file REFERENCE.md prima del codice della scena: dati sulla clip, una timeline delle inquadrature, un inventario degli oggetti, le proporzioni dei soggetti, il movimento, l'inquadratura della camera, l'illuminazione e una palette campionata. Chiede inoltre all'agente di identificare ciò che non può riprodurre esattamente e di proporre delle sostituzioni da approvare.
Le osservazioni cambiano in base alla clip. Un'inquadratura di un personaggio richiede punti di contatto, passo e movimenti secondari. Un'inquadratura architettonica richiede proporzioni, prospettiva e spostamento della camera. Un'inquadratura dell'acqua richiede attenzione al movimento della superficie, ai riflessi e alla profondità. Lo stesso processo di scomposizione offre a ciascuna di esse un punto di partenza concreto.
Fornisci all'agente blocchi grafici già testati
Una formula dall'aspetto plausibile può comunque generare un campo di distanza non sicuro, un rumore instabile o un colore errato. Questi errori diventano più difficili da isolare quando si trovano all'interno di una scena complessa.
shader-skills include attualmente 186 funzioni distribuite in 20 moduli GLSL. L'agente può cercare una tecnica, chiamare la funzione della libreria per nome e usare il bundler per includerne le dipendenze in un unico shader autonomo.
La libreria comprende funzioni di distanza con segno per le forme, operatori per combinarle, rumore e pattern procedurali, helper per il raymarching, shading, atmosfera e trasformazioni di colore. I template mostrano come questi elementi collaborano in scene complete.
La validazione copre la compilazione in WebGL2 e le proprietà numeriche sulla GPU: segni e limiti dei campi di distanza, derivate del rumore, round trip del colore e altri comportamenti verificabili. Gli esempi renderizzati aggiungono un controllo visivo. Queste verifiche rendono i componenti più affidabili, ma la scena finale richiede comunque un'ispezione.
Costruisci un ciclo di feedback attorno al renderer
Il flusso di lavoro procede attraverso blockout e tempistiche, movimento, dettagli del soggetto, dettagli dell'ambiente, luce e colore, corrispondenza con il riferimento e prestazioni. Ogni traguardo produce qualcosa di visibile da valutare.
Riferimento e rendering dovrebbero essere confrontati nello stesso momento e con la stessa inquadratura. Usa fotogrammi interi per la composizione, ritagli per la forma degli oggetti e i materiali, e sequenze di fotogrammi per il movimento. Una singola immagine statica accattivante può nascondere piedi che scivolano, uno stacco di camera improvviso o un'interazione che avviene troppo presto.
Il prompt prevede una critica ripetuta: identifica le cinque differenze maggiori, correggile e fai un nuovo rendering. Le misurazioni supportano questa revisione. Le dimensioni del soggetto e la posizione dell'orizzonte aiutano a diagnosticare gli errori della camera; i colori campionati aiutano a valutare la color correction; le sonde di movimento aiutano a individuare le discontinuità.
L'iterazione rapida è fondamentale qui. Le anteprime a bassa risoluzione e le visualizzazioni isolate degli oggetti ti permettono di correggere le proporzioni prima di avviare rendering costosi. Controlla le silhouette e le proporzioni degli oggetti prima di perfezionare materiali e illuminazione.
Suddividi le scene complesse per responsabilità
Le scene più ampie possono trarre vantaggio da diversi agenti che lavorano su parti separate: soggetto, ambiente, oggetti di scena, movimento o illuminazione. La suddivisione dovrebbe seguire le esigenze della scena.
Interfacce condivise mantengono compatibili questi lavori. Concordate scala, coordinate, tempistiche e identificatori dei materiali, assegnate a ogni agente la proprietà dei propri file e richiedete prove basate su rendering reali. Un orchestratore può integrare le parti e valutare l'immagine combinata rispetto al riferimento.
La lezione riutilizzabile è la struttura di revisione: qualcuno deve valutare l'intera inquadratura. Un edificio dettagliato o un personaggio convincente possono comunque risultare sbagliati all'interno della composizione.
Cosa dimostrano gli esperimenti
Il lavoro svolto finora include una sequenza con un'isola fluttuante e azioni variabili, una sequenza in un villaggio con interazioni e un loop infinito lungo una strada. I loro requisiti differiscono: la tempistica degli eventi, i contatti fissi, le transizioni di camera e la ripetizione esatta richiedono ciascuno una logica di scena diversa. Anche il loro completamento e la qualità visiva variano.
In tutti questi casi, lo stesso processo rimane utile: estrarre, misurare, assemblare, renderizzare, confrontare e correggere. Il repository contiene anche esempi procedurali di città, terreni e acqua, mentre esperimenti interattivi separati esplorano forme organiche e immagini di buchi neri.
Cosa diventa modificabile e cosa resta incerto
Una volta che una scena esiste sotto forma di codice, puoi esporre controlli per la posizione della camera, la direzione della luce, la palette, le tempistiche e i dettagli procedurali. L'esperimento della strada ha dimostrato viste alternative della camera a partire dallo stesso set costruito.
Queste nuove viste rivelano anche i limiti della ricostruzione. Un riferimento mostra solo una parte di un mondo. Le superfici nascoste devono essere dedotte e un video generato dall'IA può contenere geometrie mutevoli o movimenti incoerenti. Una corrispondenza convincente da un'angolazione non garantisce una scena completa e accurata.
Le prestazioni sono un altro risultato specifico della scena. Geometrie dettagliate in raymarching, vegetazione, ombre e riflessi possono essere onerosi. Misura il frame time sulla macchina di destinazione, verifica momenti diversi dell'inquadratura e segnala gli obiettivi mancati insieme alle differenze visive residue.
Video 2 GLSL è un flusso di lavoro di creazione riutilizzabile. La sua affidabilità con filmati arbitrari necessita ancora di valutazioni più ampie. Il lavoro attuale ci offre diversi esperimenti concreti e un metodo condiviso da migliorare.
Provalo con il tuo riferimento
Per Claude Code, aggiungi il marketplace e installa il plugin:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
Per gli altri agenti supportati:
npx skills add gokayfem/shader-skills
Usa prompts/video-to-shader-prompt.md, fornisci una clip di riferimento, un nome per l'output e una macchina di destinazione, specificando cosa deve rimanere e cosa può essere omesso. Rivedi la scomposizione prima che inizi l'implementazione.
Voglio continuare a spingere questo progetto verso un metodo affidabile per trasformare riferimenti visivi in scene procedurali modificabili. Ogni ricostruzione dovrebbe lasciare dietro di sé strumenti migliori, test migliori e tecniche che quella successiva potrà riutilizzare.
Repository: github.com/gokayfem/shader-skills
