Estúdio de vídeo 3D

Video 3D Studio

Construa cada cena como código, verifique quadros estáticos dela e renderize um MP4 na máquina do usuário. Fale com o usuário no idioma dele e em termos simples. Muitas pessoas que pedem isso nunca escreveram código.

1. Prepare um projeto

Primeiro, procure um projeto existente: uma pasta com tools/render.mjs e src/kit/. Se houver, adicione uma nova cena a ele.

Caso contrário, verifique node --version (18 ou mais recente) e crie um projeto na pasta atual do usuário, com o nome baseado na cena:

node <pasta-desta-skill>/scripts/new-project.mjs video-<assunto>

Avise o usuário que isso leva alguns minutos e cerca de 1 GB de disco, e que a primeira renderização também baixa um navegador headless de 130 MB. Todos os comandos seguintes são executados dentro da pasta do projeto.

2. Defina a cena

Determine formato, duração, assunto, clima, cores, texto exato e quaisquer arquivos de logotipo ou modelo. Pergunte apenas sobre o que mudaria o resultado e não tem um padrão sensato. Padrões: 9:16 para redes sociais, 16:9 caso contrário, 5 a 8 segundos, 30 fps.

Escreva um plano curto para si mesmo antes de construir, já que uma cena com uma ideia clara é melhor que várias:

• Assunto: a única coisa que o espectador deve olhar
• Câmera: lente e um único movimento
• Luz: de onde vem e o que revela
• Batida: o momento em que a coisa principal acontece, em segundos

Os arquivos fornecidos pelo usuário vão para a pasta public/ do projeto.

3. Construa a partir da cena mais próxima

O pedido é principalmente sobre	Comece de	Leva
Um objeto ou produto	src/scenes/ProductOrbit.tsx	modelFile, color, backdrop
Uma palavra ou título curto	src/scenes/KineticTitle.tsx	text, fontFile, color, backdrop
Um logotipo	src/scenes/LogoReveal.tsx	logoFile, tagline, color, glow, backdrop
Um cômodo, lugar ou atmosfera	src/scenes/MorningRoom.tsx	wall, accent
Algo abstrato, líquido ou baseado em shaders	src/scenes/LiquidForm.tsx	look

Se o pedido apenas alterar essas configurações, passe-as com --set e deixe o código intacto. Caso contrário, copie a cena para um novo arquivo, registre-a em src/Root.tsx e modifique a cópia, para que os exemplos permaneçam disponíveis como referências.

Antes de escrever o código da cena, leia references/toolkit.md, que lista o que o kit fornece. Para decisões sobre lente, luz, material e tempo, leia references/craft.md.

Sem um arquivo de modelo, construa o objeto a partir das peças do kit: useLathe para qualquer coisa redonda, useRoundedBox para qualquer coisa em formato de caixa, useExtrudedSvg para silhuetas planas, agrupadas. Pequenos detalhes, como costuras, anéis, ranhuras de aderência, texto impresso e bordas ligeiramente arredondadas são o que tornam um modelo simples crível, então dê a cada objeto alguns deles e um mapa de superfície do kit. Uma cor sólida em uma forma lisa sempre parece um placeholder.

O que mantém uma renderização correta

Remotion renderiza quadros fora de ordem e em várias abas do navegador ao mesmo tempo, então um quadro não pode depender do anterior:

• Calcule tudo que muda a partir de useShot(). useState, useFrame, Math.random() e Date causam cintilação ou saltos, então use wobble e scatter para aleatoriedade.
• Carregue apenas de public/, através de usePublicFile ou dos hooks construídos sobre ele. Uma renderização não deve depender da rede.
• Mantenha o 3D dentro de <Stage>. Ele controla o pipeline de renderização, portanto não adicione um segundo loop de renderização ou defina mapeamento de tom em outro lugar.
• Cada quadro é desenhado muitas vezes e calculado a média, que é de onde vêm sombras suaves, desfoque de foco real e bordas limpas. Qualquer coisa que deva desfocar dentro de um quadro vai em useEachSample.
• Coloque texto pequeno em um AbsoluteFill normal acima do Stage, como LogoReveal faz. Ele permanece mais nítido do que texto 3D em tamanhos pequenos.

4. Verifique quadros estáticos antes de renderizar

npm run check
node tools/stills.mjs <Shot> --set format=vertical --count 5

Abra cada imagem que o comando listar e olhe para ela. Você não pode assistir a um vídeo, então quadros estáticos são como você vê a cena. Para julgar o movimento, solicite quadros próximos ao redor da batida, por exemplo --frames 20,24,28,32.

Verifique:

• O assunto está no quadro e livre das bordas no primeiro quadro, no último quadro e no meio do movimento.
• Em 9:16, nada importante fica nos 14% superiores ou 20% inferiores, onde os aplicativos de celular colocam seus botões.
• Os destaques mantêm seus detalhes e a imagem não está desbotada ou turva.
• O texto está escrito corretamente e cada letra apareceu no tempo em que deve ser legível.
• Nada flutua, atravessa outra coisa ou projeta uma sombra com passos visíveis.

Quando algo estiver errado, mude uma coisa e verifique novamente, para que você possa dizer o que corrigiu. references/troubleshooting.md lista os sintomas e correções usuais.

Em seguida, escaneie cada quadro em busca de flashes e saltos, usando os mesmos valores de --set:

node tools/check-motion.mjs <Shot> --set format=vertical

Os quadros estáticos amostram apenas alguns momentos, então um flash que dura alguns quadros pode escapar entre eles. Superfícies planas e brilhantes são a causa usual, porque podem refletir uma luz brilhante de uma só vez. Se o comando relatar CHECK, olhe os quadros que ele nomeia e corrija-os antes de renderizar, a menos que a mudança repentina seja intencional, como um corte deliberado.

5. Renderize

node tools/render.mjs <Shot> --set format=vertical --out out/<nome>.mp4

Use --quality draft para um teste em meia resolução. Na qualidade total, cenas de 5 a 8 segundos levaram de 36 a 88 segundos em uma placa de vídeo desktop. Sem uma, as ferramentas caem para 4 passes por quadro, o que é muito mais grosseiro e ainda muito mais lento, então avise o usuário e execute renderizações longas em segundo plano.

Dê ao usuário o caminho para o MP4, seu formato e duração, e quanto tempo levou. Seja claro que você verificou quadros estáticos e mudanças quadro a quadro, e não assistiu ao vídeo.

6. Lide com observações

Aplique exatamente o que o usuário pediu e deixe todo o resto intacto, para que uma observação como "luz mais quente" não mude também o enquadramento. Verifique os quadros estáticos novamente e re-renderize.

Limites a serem francos

• Não há motion blur verdadeiro, então movimentos muito rápidos podem parecer com passos. Mantenha-os moderados ou tente --set fps=60.
• A iluminação não é ray tracing completo. Sombras e oclusão do céu são suaves e precisas, mas a luz não quica por si só, então interiores precisam de luz de preenchimento adicional.
• Remotion tem sua própria licença: gratuita para indivíduos e empresas de até 3 pessoas, enquanto empresas maiores precisam de uma licença paga da remotion.dev. Mencione isso se o usuário parecer estar trabalhando para uma empresa.