Um vídeo pode ser o ponto de partida para um mundo que você pode transformar. Entregue a referência a um agente de programação, deixe-o estudar os quadros e peça que ele reconstrua a cena como código procedural. Depois, altere a câmera, a iluminação, os materiais ou o movimento e renderize novamente.
Essa é a ideia por trás do Video 2 GLSL, o fluxo de trabalho de referência para shader que venho desenvolvendo em torno do shader-skills. A parte interessante é o quanto desse processo pode ser reaproveitado no próximo vídeo.
https://x.com/gokayfem/status/2111907592129671505
Duas peças que funcionam juntas
O shader-skills oferece aos agentes de programação uma biblioteca de técnicas gráficas, exemplos funcionais e um processo para construir e validar shaders procedurais. O Video 2 GLSL adiciona uma tarefa orientada por referência: estudar um clipe, derivar uma especificação, construir a cena e, em seguida, comparar o resultado com o clipe original.
A skill é compatível com Claude Code, Codex, Cursor, Gemini e outros agentes de programação. Suas partes reutilizáveis abrangem formas, ruído, materiais, terrenos, construções, água, nuvens, iluminação e cores. Você pode usá-las para criar uma cena original, um experimento interativo ou a recriação de um vídeo.
Para o alvo independente do Video 2 GLSL, o entregável é um único fragment shader compatível com o Shadertoy. A geometria é descrita matematicamente, as superfícies são procedurais e a animação é guiada pelo tempo. O vídeo de referência fornece a especificação visual; seus quadros não são reproduzidos dentro do shader.
Comece transformando o vídeo em uma especificação
O primeiro passo é uma extração confiável de quadros. Uma URL ou nome de arquivo de vídeo dá muito pouco material para o agente trabalhar. Ele precisa inspecionar o que realmente aparece e como isso muda ao longo do tempo.
O prompt reutilizável pede um REFERENCE.md antes do código da cena: fatos sobre o clipe, uma linha do tempo dos planos, um inventário de objetos, proporções do sujeito, movimento, enquadramento de câmera, iluminação e uma paleta amostrada. Ele também solicita que o agente identifique o que não consegue reproduzir exatamente e proponha substituições para aprovação.
As observações mudam conforme o clipe. Um plano de personagem exige pontos de contato, passada e movimento secundário. Um plano arquitetônico requer proporções, perspectiva e deslocamento de câmera. Um plano de água pede atenção ao movimento da superfície, reflexos e profundidade. O mesmo processo de decomposição oferece a cada um deles um ponto de partida concreto.
Dê ao agente blocos gráficos testados
Uma fórmula que parece plausível ainda pode gerar um campo de distância inseguro, ruído instável ou cor incorreta. Esses erros se tornam mais difíceis de isolar quando estão embutidos em uma cena grande.
O shader-skills inclui atualmente 186 funções distribuídas em 20 módulos GLSL. O agente pode pesquisar uma técnica, chamar a função da biblioteca pelo nome e usar o bundler para incluir suas dependências em um único shader autossuficiente.
A biblioteca inclui funções de distância com sinal para formas, operadores para combiná-las, ruído e padrões procedurais, auxiliares de raymarching, sombreamento, atmosfera e transformações de cor. Os templates mostram como essas peças se encaixam em cenas completas.
A validação abrange compilação em WebGL2 e propriedades numéricas na GPU: sinais e limites de campos de distância, derivadas de ruído, ciclos completos de cor e outros comportamentos verificáveis. Exemplos renderizados acrescentam uma checagem visual. Essas verificações tornam as partes mais confiáveis; a cena final ainda precisa de inspeção.
Crie um ciclo de feedback em torno do renderizador
O fluxo avança por blockout e timing, movimento, detalhes do sujeito, detalhes do ambiente, luz e cor, correspondência com a referência e desempenho. Cada marco produz algo visível para ser avaliado.
Referência e render devem ser comparados no mesmo instante e enquadramento. Use quadros completos para composição, recortes para forma de objetos e materiais, e sequências de quadros para movimento. Uma única imagem estática atraente pode esconder pés deslizando, um salto de câmera ou uma interação que acontece cedo demais.
O prompt exige críticas repetidas: identificar as cinco maiores diferenças, corrigi-las e renderizar novamente. Medições apoiam essa revisão. O tamanho do sujeito e a posição do horizonte ajudam a diagnosticar erros de câmera; cores amostradas auxiliam no diagnóstico da correção de cor; sondas de movimento ajudam a encontrar descontinuidades.
A iteração rápida é essencial aqui. Previsões em baixa resolução e visualizações isoladas de objetos permitem corrigir proporções antes de investir em renders custosos. Verifique silhuetas e proporções dos objetos antes de refinar materiais e iluminação.
Divida cenas complexas por responsabilidade
Cenas maiores podem se beneficiar de vários agentes trabalhando em partes separadas: sujeito, ambiente, objetos de cena, movimento ou iluminação. A divisão deve seguir as necessidades da cena.
Interfaces compartilhadas mantêm esse trabalho compatível. Defina em conjunto escala, coordenadas, timing e identificadores de materiais, dê a cada agente a propriedade de seus arquivos e exija evidências vindas de renders reais. Um orquestrador pode integrar as partes e avaliar a imagem combinada em relação à referência.
A lição reutilizável é a estrutura de revisão: alguém precisa avaliar o plano inteiro. Uma construção detalhada ou um personagem convincente ainda podem estar errados para a composição.
O que os experimentos comprovam
O trabalho até agora inclui uma sequência de ilha flutuante com ações variadas, uma sequência de vila com interações e um loop infinito de rua. Seus requisitos diferem: timing de eventos, contatos fixos, transições de câmera e repetição exata exigem lógicas de cena distintas. Sua conclusão e qualidade visual também variam.
Em todos eles, o mesmo processo continua útil: extrair, medir, montar, renderizar, comparar e corrigir. O repositório também contém exemplos procedurais de cidade, terreno e água, enquanto experimentos interativos separados exploram formas orgânicas e imagens de buracos negros.
O que se torna editável e o que permanece incerto
Quando uma cena existe como código, você pode expor controles para posição da câmera, direção da luz, paleta, timing e detalhes procedurais. O experimento da rua demonstrou ângulos de câmera alternativos a partir do mesmo cenário construído.
Esses novos ângulos também revelam os limites da reconstrução. Uma referência mostra apenas parte de um mundo. Superfícies ocultas precisam ser inferidas, e um vídeo gerado por IA pode conter geometria mutável ou movimento inconsistente. Uma correspondência convincente a partir de um ângulo não garante uma cena completa e precisa.
O desempenho é outro resultado específico de cada cena. Geometria detalhada via raymarching, vegetação, sombras e reflexos podem ser custosos. Meça o tempo de quadro na máquina-alvo, verifique diferentes momentos do plano e relate as metas não atingidas junto com as diferenças visuais restantes.
O Video 2 GLSL é um fluxo de autoria reutilizável. Sua confiabilidade com vídeos arbitrários ainda precisa de uma avaliação mais ampla. O trabalho atual nos deixa vários experimentos concretos e um método compartilhado para evoluir.
Experimente com sua própria referência
Para o Claude Code, adicione o marketplace e instale o plugin:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
Para outros agentes compatíveis:
npx skills add gokayfem/shader-skills
Use prompts/video-to-shader-prompt.md, forneça um clipe de referência, um nome de saída e uma máquina-alvo, e especifique o que deve ser mantido ou pode ser ignorado. Revise a decomposição antes de iniciar a implementação.
Quero continuar levando isso adiante rumo a uma maneira confiável de transformar referências visuais em cenas procedurais editáveis. Cada reconstrução deve deixar para trás ferramentas melhores, testes melhores e técnicas que a próxima possa reutilizar.
Repositório: github.com/gokayfem/shader-skills
