Un video puede ser el punto de partida para un mundo que puedes transformar. Dale la referencia a un agente de programación, deja que estudie los fotogramas y pídele que reconstruya la escena como código procedural. Después, cambia la cámara, la iluminación, los materiales o el movimiento y vuelve a renderizar.
Esa es la idea detrás de Video 2 GLSL, el flujo de trabajo de referencia a shader que he estado desarrollando alrededor de shader-skills. Lo interesante es cuánto de ese proceso se puede aprovechar para el siguiente video.
https://x.com/gokayfem/status/2111907592129671505
Dos piezas que trabajan juntas
shader-skills le da a los agentes de programación una biblioteca de técnicas gráficas, ejemplos funcionales y un proceso para construir y verificar shaders procedurales. Video 2 GLSL suma una tarea guiada por referencias: estudiar un clip, derivar una especificación, construir la escena y luego comparar el resultado con el clip original.
La skill es compatible con Claude Code, Codex, Cursor, Gemini y otros agentes de programación. Sus componentes reutilizables abarcan formas, ruido, materiales, terrenos, edificios, agua, nubes, iluminación y color. Puedes usarlos para una escena original, un experimento interactivo o la recreación de un video.
Para el objetivo independiente de Video 2 GLSL, el entregable es un único fragment shader compatible con Shadertoy. La geometría se describe matemáticamente, las superficies son procedurales y la animación está impulsada por el tiempo. El video de referencia aporta la especificación visual; sus fotogramas no se reproducen dentro del shader.
Empieza convirtiendo el video en una especificación
El primer paso es extraer los fotogramas de forma confiable. Una URL o un nombre de archivo le dan muy poco material al agente. Necesita inspeccionar qué aparece realmente y cómo cambia con el tiempo.
El prompt reutilizable pide un REFERENCE.md antes del código de la escena: datos del clip, una línea de tiempo de tomas, un inventario de objetos, proporciones del sujeto, movimiento, encuadre de cámara, iluminación y una paleta muestreada. También le pide al agente que identifique lo que no puede reproducir exactamente y proponga sustituciones para su aprobación.
Las observaciones cambian según el clip. Una toma de un personaje requiere puntos de contacto, zancada y movimiento secundario. Una toma arquitectónica necesita proporciones, perspectiva y recorrido de cámara. Una toma de agua exige prestar atención al movimiento de la superficie, los reflejos y la profundidad. El mismo proceso de desglose le da a cada una un punto de partida concreto.
Dale al agente bloques gráficos probados
Una fórmula que parece plausible puede generar un campo de distancias inseguro, ruido inestable o colores incorrectos. Esos errores se vuelven más difíciles de aislar cuando están dentro de una escena grande.
shader-skills incluye actualmente 186 funciones distribuidas en 20 módulos GLSL. El agente puede buscar una técnica, llamar a la función de la biblioteca por su nombre y usar el bundler para incluir sus dependencias en un solo shader autónomo.
La biblioteca incluye funciones de distancia con signo para formas, operadores para combinarlas, ruido y patrones procedurales, utilidades de raymarching, sombreado, atmósfera y transformaciones de color. Las plantillas muestran cómo esas piezas funcionan juntas en escenas completas.
La validación cubre la compilación en WebGL2 y propiedades numéricas en la GPU: signos y límites de campos de distancia, derivadas de ruido, ciclos completos de color y otros comportamientos verificables. Los ejemplos renderizados suman una comprobación visual. Estas pruebas hacen que las partes sean más confiables, aunque la escena final igual necesita revisión.
Crea un ciclo de retroalimentación alrededor del renderizador
El flujo de trabajo avanza por etapas: bloqueo general y tiempos, movimiento, detalle del sujeto, detalle del entorno, luz y color, coincidencia con la referencia y rendimiento. Cada hito produce algo visible para evaluar.
La referencia y el render deben compararse al mismo tiempo y con el mismo encuadre. Usa fotogramas completos para la composición, recortes para la forma de los objetos y los materiales, y secuencias de fotogramas para el movimiento. Una sola imagen atractiva puede ocultar pies que se deslizan, un salto de cámara o una interacción que ocurre demasiado pronto.
El prompt exige críticas repetidas: identificar las cinco diferencias más grandes, corregirlas y volver a renderizar. Las mediciones respaldan esa revisión. El tamaño del sujeto y la posición del horizonte ayudan a diagnosticar errores de cámara; los colores muestreados sirven para ajustar la corrección de color; las sondas de movimiento permiten encontrar discontinuidades.
Iterar rápido es clave aquí. Las vistas previas en baja resolución y las vistas de objetos aislados te dejan corregir proporciones antes de comprometerte con renders costosos. Revisa siluetas y proporciones de los objetos antes de pulir materiales e iluminación.
Divide las escenas complejas por responsabilidades
Las escenas más grandes se benefician de tener varios agentes trabajando en partes separadas: sujeto, entorno, utilería, movimiento o iluminación. La división debe responder a las necesidades de la escena.
Las interfaces compartidas mantienen ese trabajo compatible. Acuerden la escala, las coordenadas, los tiempos y los identificadores de materiales, asignen a cada agente la propiedad de sus archivos y exijan evidencia basada en renders reales. Un orquestador puede integrar las partes y evaluar la imagen combinada frente a la referencia.
La lección reutilizable es la estructura de revisión: alguien tiene que evaluar la toma completa. Un edificio detallado o un personaje convincente pueden estar mal para la composición.
Lo que demuestran los experimentos
El trabajo hasta ahora incluye una secuencia de una isla flotante con acciones cambiantes, una secuencia de pueblo con interacciones y un loop infinito de una calle. Sus requisitos difieren: la sincronización de eventos, los contactos fijos, las transiciones de cámara y la repetición exacta exigen lógicas de escena distintas. Su nivel de terminación y calidad visual también varían.
En todos ellos, el mismo proceso sigue siendo útil: extraer, medir, ensamblar, renderizar, comparar y corregir. El repositorio también contiene ejemplos procedurales de ciudades, terrenos y agua, mientras que experimentos interactivos independientes exploran formas orgánicas e imágenes de agujeros negros.
Qué se vuelve editable y qué sigue siendo incierto
Una vez que una escena existe como código, puedes exponer controles para la posición de la cámara, la dirección de la luz, la paleta, los tiempos y el detalle procedural. El experimento de la calle demostró vistas de cámara alternativas desde el mismo set construido.
Esas nuevas vistas también revelan los límites de la reconstrucción. Una referencia solo muestra una parte de un mundo. Las superficies ocultas hay que inferirlas, y un video generado por IA puede contener geometrías cambiantes o movimientos inconsistentes. Una coincidencia convincente desde un ángulo no garantiza una escena completa y precisa.
El rendimiento es otro resultado específico de cada escena. La geometría detallada con raymarching, la vegetación, las sombras y los reflejos pueden ser costosos. Mide el tiempo por fotograma en la máquina destino, revisa distintos momentos de la toma y reporta los objetivos no alcanzados junto con las diferencias visuales restantes.
Video 2 GLSL es un flujo de trabajo de creación reutilizable. Su confiabilidad con cualquier tipo de material audiovisual todavía necesita una evaluación más amplia. El trabajo actual nos deja varios experimentos concretos y un método compartido para seguir mejorando.
Pruébalo con tu propia referencia
Para Claude Code, agrega el marketplace e instala el plugin:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
Para otros agentes compatibles:
npx skills add gokayfem/shader-skills
Usa prompts/video-to-shader-prompt.md, proporciona un clip de referencia, un nombre de salida y una máquina destino, y especifica qué debe mantenerse o qué se puede omitir. Revisa el desglose antes de empezar la implementación.
Quiero seguir impulsando esto hacia una forma confiable de convertir referencias visuales en escenas procedurales editables. Cada reconstrucción debería dejar mejores herramientas, mejores pruebas y técnicas que la siguiente pueda reutilizar.
Repositorio: github.com/gokayfem/shader-skills
