Une vidéo peut être le point de départ d'un monde que vous pouvez modifier. Donnez la référence à un agent de code, laissez-le étudier les images, et demandez-lui de reconstruire la scène sous forme de code procédural. Modifiez ensuite la caméra, l'éclairage, les matériaux ou le mouvement, puis effectuez un nouveau rendu.
C'est l'idée derrière Video 2 GLSL, le workflow de conversion référence-vers-shader que je développe autour de shader-skills. Le plus intéressant est de voir à quel point ce processus peut être réutilisé pour la vidéo suivante.
https://x.com/gokayfem/status/2111907592129671505
Deux éléments qui fonctionnent ensemble
shader-skills fournit aux agents de code une bibliothèque de techniques graphiques, des exemples fonctionnels et une méthode pour construire et vérifier des shaders procéduraux. Video 2 GLSL y ajoute une tâche guidée par une référence : étudier un extrait, en déduire un cahier des charges, construire la scène, puis comparer le résultat à la vidéo d'origine.
Cette compétence est compatible avec Claude Code, Codex, Cursor, Gemini et d'autres agents de code. Ses composants réutilisables couvrent les formes, le bruit, les matériaux, les terrains, les bâtiments, l'eau, les nuages, l'éclairage et les couleurs. Vous pouvez les exploiter pour créer une scène originale, une expérience interactive ou recréer une vidéo.
Pour la cible autonome Video 2 GLSL, le livrable est un unique fragment shader compatible Shadertoy. La géométrie est décrite mathématiquement, les surfaces sont procédurales et l'animation est pilotée par le temps. La vidéo de référence fournit le cahier des charges visuel ; ses images ne sont pas lues directement dans le shader.
Commencez par transformer la vidéo en cahier des charges
La première étape consiste à extraire les images de manière fiable. Une URL ou un nom de fichier vidéo donne très peu d'éléments à un agent. Il doit pouvoir inspecter ce qui apparaît réellement et comment cela évolue dans le temps.
Le prompt réutilisable demande de produire un fichier REFERENCE.md avant tout code de scène : faits sur l'extrait, chronologie des plans, inventaire des objets, proportions du sujet, mouvement, cadrage, éclairage et palette échantillonnée. Il demande également à l'agent d'identifier ce qu'il ne peut pas reproduire à l'identique et de proposer des solutions de remplacement pour validation.
Les observations varient selon l'extrait. Un plan centré sur un personnage nécessite d'analyser les points de contact, la foulée et les mouvements secondaires. Un plan architectural exige de se concentrer sur les proportions, la perspective et le déplacement de la caméra. Un plan aquatique demande une attention particulière au mouvement de la surface, aux reflets et à la profondeur. Ce même processus d'analyse offre à chacun un point de départ concret.
Fournissez à l'agent des blocs graphiques testés
Une formule qui semble plausible peut tout de même générer un champ de distance instable, un bruit erratique ou des couleurs incorrectes. Ces erreurs deviennent plus difficiles à isoler une fois intégrées dans une grande scène.
shader-skills comprend actuellement 186 fonctions réparties dans 20 modules GLSL. L'agent peut rechercher une technique, appeler la fonction de la bibliothèque par son nom et utiliser le bundler pour inclure ses dépendances dans un seul shader autonome.
La bibliothèque inclut des fonctions de distance signée pour les formes, des opérateurs pour les combiner, du bruit et des motifs procéduraux, des utilitaires de raymarching, du shading, des effets atmosphériques et des transformations de couleurs. Des modèles montrent comment ces éléments s'articulent dans des scènes complètes.
La validation couvre la compilation en WebGL2 et les propriétés numériques sur le GPU : signes et bornes des champs de distance, dérivées du bruit, allers-retours de couleurs et autres comportements vérifiables. Des exemples rendus ajoutent un contrôle visuel. Ces vérifications rendent les composants plus fiables, mais la scène finale nécessite toujours une inspection.
Créez une boucle de feedback autour du moteur de rendu
Le workflow progresse par étapes : blockout et timing, mouvement, détails du sujet, détails de l'environnement, lumière et couleur, correspondance avec la référence, puis performances. Chaque jalon produit un résultat visible à évaluer.
La référence et le rendu doivent être comparés au même instant et avec le même cadrage. Utilisez des images complètes pour la composition, des recadrages pour la forme des objets et les matériaux, et des séquences d'images pour le mouvement. Une seule image fixe attrayante peut masquer des pieds qui glissent, un saut de caméra ou une interaction qui se déclenche trop tôt.
Le prompt impose une critique itérative : identifier les cinq plus grandes différences, les corriger, puis effectuer un nouveau rendu. Des mesures viennent appuyer cette révision. La taille du sujet et la position de l'horizon aident à diagnostiquer les erreurs de caméra ; les couleurs échantillonnées facilitent l'analyse de l'étalonnage ; les sondes de mouvement permettent de repérer les discontinuités.
L'itération rapide est essentielle ici. Les aperçus en basse résolution et les vues d'objets isolés permettent de corriger les proportions avant de lancer des rendus coûteux. Vérifiez les silhouettes et les proportions des objets avant de peaufiner les matériaux et l'éclairage.
Découpez les scènes complexes par responsabilités
Les scènes plus vastes gagnent à être réparties entre plusieurs agents travaillant sur des parties distinctes : sujet, environnement, accessoires, mouvement ou éclairage. Ce découpage doit répondre aux besoins de la scène.
Des interfaces partagées garantissent la compatibilité de ce travail. Mettez-vous d'accord sur l'échelle, les coordonnées, le timing et les identifiants de matériaux, attribuez à chaque agent la propriété de ses fichiers et exigez des preuves issues de rendus réels. Un orchestrateur peut ensuite intégrer les différentes parties et juger l'image combinée par rapport à la référence.
La leçon réutilisable ici concerne la structure de révision : quelqu'un doit évaluer le plan dans son ensemble. Un bâtiment détaillé ou un personnage convaincant peuvent malgré tout ne pas convenir à la composition.
Ce que prouvent ces expérimentations
Les travaux réalisés jusqu'à présent incluent une séquence d'île flottante avec des actions changeantes, une séquence de village avec des interactions et une boucle de rue infinie. Leurs exigences diffèrent : le timing des événements, les contacts ancrés au sol, les transitions de caméra et la répétition exacte nécessitent chacun une logique de scène différente. Leur aboutissement et leur qualité visuelle varient également.
Malgré tout, le même processus reste pertinent : extraire, mesurer, assembler, rendre, comparer et corriger. Le dépôt contient aussi des exemples procéduraux de villes, de terrains et d'eau, tandis que des expériences interactives distinctes explorent des formes organiques et l'imagerie de trous noirs.
Ce qui devient modifiable et ce qui reste incertain
Une fois qu'une scène existe sous forme de code, vous pouvez exposer des contrôles pour la position de la caméra, la direction de la lumière, la palette, le timing et les détails procéduraux. L'expérience de la rue a démontré qu'il était possible d'obtenir des angles de caméra alternatifs à partir du même décor construit.
Ces nouvelles vues révèlent aussi les limites de la reconstruction. Une référence ne montre qu'une partie d'un monde. Les surfaces cachées doivent être déduites, et une vidéo générée par IA peut contenir une géométrie changeante ou des mouvements incohérents. Une correspondance convaincante sous un angle ne garantit pas une scène complète et exacte.
Les performances constituent un autre résultat propre à chaque scène. Une géométrie détaillée en raymarching, la végétation, les ombres et les reflets peuvent être coûteux. Mesurez le temps de rendu par image sur la machine cible, vérifiez différents moments du plan et signalez les objectifs non atteints en parallèle des différences visuelles restantes.
Video 2 GLSL est un workflow de création réutilisable. Sa fiabilité sur des séquences arbitraires doit encore être évaluée plus largement. Les travaux actuels nous offrent plusieurs expériences concrètes et une méthode commune à perfectionner.
Essayez-le avec votre propre référence
Pour Claude Code, ajoutez le marketplace et installez le plugin :
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
Pour les autres agents pris en charge :
npx skills add gokayfem/shader-skills
Utilisez prompts/video-to-shader-prompt.md, fournissez un extrait de référence, un nom de sortie et une machine cible, puis précisez ce qui doit être conservé ou ce qui peut être ignoré. Validez l'analyse avant de commencer l'implémentation.
Je souhaite continuer à faire évoluer ce projet vers une méthode fiable pour transformer des références visuelles en scènes procédurales modifiables. Chaque reconstruction devrait laisser derrière elle de meilleurs outils, de meilleurs tests et des techniques réutilisables pour la suivante.
