Um vídeo pode ser o ponto de partida para um mundo que você pode transformar. Entregue a referência a um agente de código, deixe-o estudar os quadros e peça para reconstruir a cena como código procedural. Depois, altere a câmera, a iluminação, os materiais ou o movimento e renderize tudo 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 código 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 guiada por referência: estude um clipe, derive uma especificação, construa a cena e, em seguida, compare o resultado com o clipe original.
A skill é compatível com Claude Code, Codex, Cursor, Gemini e outros agentes de código. Suas partes reutilizáveis cobrem 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 uso 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 é controlada 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: dados do clipe, uma linha do tempo das tomadas, um inventário de objetos, proporções dos elementos, 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. Uma tomada de personagem exige pontos de contato, passada e movimento secundário. Uma tomada arquitetônica requer proporções, perspectiva e deslocamento de câmera. Uma tomada de água pede atenção ao movimento da superfície, reflexos e profundidade. O mesmo processo de decomposição dá a cada uma delas 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 ficam 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 buscar 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 (SDF) 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 cobre a compilação em WebGL2 e propriedades numéricas na GPU: sinais e limites de campos de distância, derivadas de ruído, ida e volta de cores e outros comportamentos verificáveis. Exemplos renderizados adicionam uma checagem visual. Essas verificações tornam as partes mais confiáveis, mas a cena final ainda precisa de inspeção.
Crie um ciclo de feedback em torno do renderizador
O fluxo de trabalho avança por blockout e timing, movimento, detalhes do elemento principal, detalhes do ambiente, luz e cor, correspondência com a referência e desempenho. Cada etapa 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 e materiais dos objetos e sequências de quadros para movimento. Um único still bonito 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 elemento principal e a posição do horizonte ajudam a diagnosticar erros de câmera; cores amostradas auxiliam na correção de color grading; sondas de movimento revelam descontinuidades.
Iteração rápida faz diferença aqui. Previews em baixa resolução e visualizações isoladas de objetos permitem corrigir proporções antes de investir em renders pesados. Verifique silhuetas e proporções 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: elemento principal, 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. Um prédio detalhado 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. As exigências são diferentes: timing de eventos, contatos fixos no chão, transições de câmera e repetição exata demandam lógicas de cena distintas. A conclusão e a 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 deduzidas, e um vídeo gerado por IA pode conter geometria mutável ou movimentos inconsistentes. Uma correspondência convincente sob um único â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 da tomada e relate as metas não atingidas junto com as diferenças visuais restantes.
O Video 2 GLSL é um fluxo de criação 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.
Teste 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 como uma forma 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 reaproveitar.
Repositório: github.com/gokayfem/shader-skills
