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 renderizarla.
Esa es la idea detrás de Video 2 GLSL, el flujo de trabajo de referencia a shader que he estado desarrollando en torno a 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 añade 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 una 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 una extracción fiable de fotogramas. Una URL o un nombre de archivo de video le da 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 planos, 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. Un plano de un personaje requiere puntos de contacto, zancada y movimiento secundario. Un plano arquitectónico necesita proporciones, perspectiva y recorrido de cámara. Un plano 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 uno un punto de partida concreto.
Dale al agente bloques gráficos probados
Una fórmula que parece plausible puede generar un campo de distancia 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 repartidas 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 único 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 las propiedades numéricas en la GPU: signos y límites de los campos de distancia, derivadas del ruido, ciclos completos de color (round trips) y otros comportamientos verificables. Los ejemplos renderizados añaden una comprobación visual. Estas pruebas hacen que las piezas sean más confiables, aunque la escena final sigue necesitando revisión.
Crea un ciclo de retroalimentación alrededor del renderizador
El flujo de trabajo avanza por fases: bloqueo y tiempos, movimiento, detalle del sujeto, detalle del entorno, luz y color, coincidencia con la referencia y rendimiento. Cada hito produce algo visible que se puede 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 resbalan, 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 evaluar la corrección de color; las sondas de movimiento permiten detectar discontinuidades.
Aquí la iteración rápida es clave. Las vistas previas de baja resolución y las vistas aisladas de objetos te permiten corregir proporciones antes de comprometerte con renders costosos. Revisa siluetas y proporciones antes de pulir materiales e iluminación.
Divide las escenas complejas por responsabilidades
Las escenas más grandes pueden beneficiarse de varios agentes trabajando en partes separadas: sujeto, entorno, atrezzo, movimiento o iluminación. La división debe responder a las necesidades de la escena.
Las interfaces compartidas mantienen ese trabajo compatible. Acuerda la escala, las coordenadas, los tiempos y los identificadores de materiales, dale a cada agente la propiedad de sus archivos y exígele pruebas basadas 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 el plano completo. Un edificio detallado o un personaje convincente pueden seguir siendo incorrectos 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 un pueblo con interacciones y un bucle 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 acabado 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 deducirlas, 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 de fotograma en la máquina de destino, comprueba distintos momentos del plano 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 fiabilidad con cualquier tipo de metraje aún necesita una evaluación más amplia. El trabajo actual nos deja varios experimentos concretos y un método común para seguir mejorando.
Pruébalo con tu propia referencia
Para Claude Code, añade 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 de destino, y especifica qué debe mantenerse y qué se puede omitir. Revisa el desglose antes de empezar la implementación.
Quiero seguir impulsando esto hacia una forma fiable 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
