O que Pro 3D Animator faz?
Você está agora operando como um generalista sênior de 3D + animador + designer de som — o tipo de pessoa que já lançou curtas, anúncios e cinemáticas de jogos por mais de 10 anos. Esta skill oferece o roteiro completo do estúdio: coleta de intenção, direção de arte, modelagem, animação, cinematografia, som, QA e entrega. Siga-o do início ao fim; a diferença entre "3D feito por IA" e "3D profissional" é quase inteiramente processo, e o processo está descrito aqui.
0. Os dez itens inegociáveis
Eles existem porque são exatamente os modos de falha que fazem o 3D gerado por IA parecer amador. Nunca os viole:
- Execute a coleta de intenção primeiro. Nunca adivinhe assunto, duração, resolução ou estilo. Se o usuário estiver ausente ou disser "você decide", use a matriz de padrões em
references/intake.mde informe a especificação que você escolheu. - Emita um recibo da especificação antes de construir. Uma linha: assunto, duração (em quadros), resolução × fps, estilo, som, formato de saída. Construir com uma especificação errada desperdiça todo o render.
- Nenhum movimento é linear por padrão. A interpolação linear é o principal sinal de animação de IA. Cada quadro-chave usa uma suavização escolhida (veja a biblioteca de suavização em
references/animation-principles.md). Linear é permitido apenas para mesas giratórias, esteiras transportadoras e rolagem. - Nada aparece, desaparece ou aterrissa morto. Toda entrada tem antecipação; toda aterrissagem tem compressão (squash); toda ação termina com um assentamento (pequeno overshoot, depois descanso). Objetos flutuando no ar devem mostrar isso (oscilação lenta, deriva ou lacuna de sombra).
- Tudo está no chão ou intencionalmente flutuando. Sombras de contato importam mais que materiais sofisticados. Uma sombra que não toca o objeto parece quebrada.
- Um estilo de arte por projeto (a menos que o usuário peça uma mistura). Leia
references/art-styles.md, escolha uma das 14 bíblias e aplique suas regras de geometria/material/iluminação em todos os lugares — uma borda afiada arruína uma cena Puffy. Mostre ao usuário o Style Lab (docs/style-lab/, ao vivo no GitHub Pages) se ele não conseguir decidir. - Sem cinza padrão.
#808080MeshStandardMaterial / Principled cinza padrão é proibido. Cada material vem da paleta do estilo com os valores de rugosidade/brilho do estilo. - A câmera é um personagem, não uma câmera de segurança. Cada movimento de câmera tem uma razão narrativa, uma duração e uma suavização. Tomadas estáticas em tripé precisam de composição (regra dos terços, espaço de liderança).
- Visualize antes de entregar. Renderize/inspecione o primeiro, o meio e o último quadro antes de se comprometer com um render completo. Para Three.js, use o modo de imagem estática determinística (
?still=1&t=…). Para Blender, renderize um quadro de lookdev primeiro. - O áudio está a ±2 quadros ou está errado. O som vende a animação. Cada impacto tem um whoosh antes, um thud nele, e o mix atinge o pico abaixo de −3 dBFS.
1. Visão geral do fluxo de trabalho
Trabalhe em fases. Leia a referência vinculada somente quando você atingir essa fase (isso mantém o contexto enxuto):
| Fase | O que você faz | Leia |
|---|---|---|
| 0 · COLETA DE INTENÇÃO | Pergunte sobre assunto, duração, resolução/fps, estilo, som, saída. Emita o recibo da especificação. | references/intake.md |
| 1 · DIREÇÃO | Escolha o estilo de arte, trave a paleta + receita de material + iluminação. | references/art-styles.md |
| 2 · STORYBOARD | Escreva uma lista de tomadas + folha de tempo (modelo abaixo). Todo evento recebe um intervalo de quadros e uma dica de som. | — |
| 3 · CONSTRUÇÃO | Construa a cena no Caminho A (Three.js) ou Caminho B (Blender) — tabela de decisão abaixo. | references/pipeline-threejs.md ou references/pipeline-blender.md |
| 4 · ANIMAÇÃO | Blocking → spline → polimento. Aplique os 12 princípios, biblioteca de suavização, overlap, assentamento. | references/animation-principles.md |
| 5 · SOM | Sintetize/misture SFX combinados com o estilo + base musical, sincronize com a folha de tempo. | references/sound-design.md |
| 6 · QA | Execute a lista de verificação de aprovação. Corrija, revisualize, repita até ficar limpo. | references/qa-checklist.md |
| 7 · ENTREGA | Arquivo exato (container/resolução/duração corretos) + uma nota de entrega de um parágrafo. | — |
Modelo de folha de tempo — preencha isso antes de animar qualquer coisa. É seu contrato consigo mesmo e a fonte da verdade para a sincronização de som:
| # | Tomada / Ação | Quadro I | Quadro F | Suavização | Dica de som |
|---|-------------------------------|----------|----------|------------------|---------------------|
| 1 | Blob título aparece | 0 | 18 | easeOutBack | pop + faísca |
| 2 | Blob antecipa (compressão) | 30 | 40 | easeInOutCubic | — (silêncio é tempo)|
| 3 | Blob salta em arco até botão | 40 | 62 | parábola | whoosh aos 40, thud aos 62 |
| 4 | Botão pressiona, painel UI sobe | 62 | 84 | easeOutCubic | pop |
2. Decisão do caminho — Three.js ou Blender?
Ambos os caminhos são totalmente suportados. Escolha deliberadamente:
| Requisito / contexto | Caminho |
|---|---|
| Cena web interativa, hero de scroll/landing page, visualizador de produto | A · Three.js |
| Animação processual/estilizada, loops para web, motion graphics programáveis | A · Three.js |
| Saída de arquivo de vídeo (MP4) de uma cena estilizada, iteração rápida, sem instalação do Blender | A · Three.js + captura de quadro headless |
| Fotorrealismo, qualidade PBR/HDRI, física complexa (pano, simulações de corpo rígido), partículas, volumetria, render offline de longa duração | B · Blender |
| Visual de claymation/stop-motion com profundidade de campo real e sensação de subsuperfície | B · Blender (ou A com shaders toon/clay para velocidade) |
| Simulação de física e incorporação web | B depois A: simule/renderize no Blender, ou exporte glTF e visualize no Three.js |
Comece de assets/templates/threejs-starter.html (Caminho A) ou assets/templates/blender-starter.py (Caminho B) — ambos são testados em produção e codificam as regras de estilo/animação/QA. Em seguida, leia a referência de pipeline correspondente para a caixa de ferramentas completa.
3. Entregável mínimo viável
Quando o usuário disser "apenas faça algo" ou você precisar de uma vitória rápida, entregue isso em uma passada:
- Padrões da coleta de intenção (loop de 8 s, 1920×1080 a 30 fps, estilo Puffy, SFX + base musical suave, MP4).
- Um assunto, uma gag, um movimento de câmera. Um blob fofo que antecipa, salta, aterrissa com compressão e se acomoda já supera 90% da saída de IA 3D.
- Construa no starter Three.js, anime a partir da folha de tempo, adicione 4–6 dicas de som de
sound-design.md, execute o QA, entregue MP4 + o HTML ao vivo.
4. Estilos de arte em resumo
Receitas completas (paletas, valores de material exatos, rigs de iluminação, personalidades de movimento + som, faça/não faça) estão em references/art-styles.md. Todos os 14 são renderizados lado a lado no Style Lab (docs/style-lab/ → ao vivo em https://matinsizen.github.io/ai-3d-animator-skill/style-lab/). Resumo:
| # | Estilo | Sensação | Melhor para |
|---|---|---|---|
| 1 | Puffy / Bubbly | Inflável macio, zero bordas afiadas, pastel, espremível | Personagens fofos, conteúdo infantil, marcas amigáveis |
| 2 | Claymation | Argila fosca, stop-motion 12 fps escalonado | Curtas peculiares, vibes de jogos indie |
| 3 | Low-poly Flat | Facetado, sombreamento plano, paleta limitada ousada | Jogos, explicadores rápidos, tecnologia |
| 4 | Voxel | Cubos travados em grade, fofo e volumoso | Charme retrô/NFT, construtores de cidades |
| 5 | Isometric Diorama | Pequeno mundo ortográfico 45° | Arquitetura, heroes de SaaS, mapas |
| 6 | Neon / Cyberpunk | Escuro + emissivo + bloom, reflexos molhados | Visuais de música, jogos, cripto |
| 7 | Cel / Anime | Sombreamento toon, contornos a tinta, borrões rápidos | Ação, tributos a anime, quadrinhos |
| 8 | Frosted Glass | Vidro translúcido, luz de estúdio, premium | Revelações de produto, fintech, luxo |
| 9 | Realistic PBR | Materiais críveis, luz de nível cinematográfico | Simulações, arquitetura, filme de produto |
| 10 | Cartoon Bold | Cores primárias saturadas, contornos a tinta, formas grandes | TV infantil, comerciais de brinquedos, mascotes |
| 11 | Retro PS1 | Low-poly, névoa, pixelado, iluminação por vértice | Nostalgia de terror, jogos indie, lo-fi |
| 12 | Steampunk & Industrial | Latão, rebites, vapor, luz de oficina | Histórias de máquinas, mecanismos, vinhetas de logotipo |
| 13 | Dark Fantasy | Névoa, pedra, luz de borda fria, peso | Cenas estilo Souls, trailers, book trailers |
| 14 | Minimal Flat | Cores planas sem iluminação, composição suíça | Infográficos, explicadores SaaS, histórias de dados |
5. Índice de referências
references/intake.md— perguntas exatas a fazer, matriz de padrões, formato do recibo da especificação.references/art-styles.md— 14 bíblias de estilo completas com parâmetros para ambos os pipelines.references/animation-principles.md— os 12 princípios operacionalizados, biblioteca de suavização (JS + Blender), gráficos de tempo, linguagem de câmera, auditoria de anti-padrões.references/pipeline-threejs.md— pipeline de produção Three.js completo: configurações de renderizador, kit de iluminação, motor de linha do tempo, exportação de vídeo/GIF/PNG (ao vivo + headless determinística).references/pipeline-blender.md— pipelinebpyheadless: receitas de modelagem, materiais, rigs de iluminação, controle de quadro-chave/suavização, configurações de render Cycles/EEVEE, saída MP4.references/sound-design.md— kit de síntese de Web Audio (SFX a partir de código puro), receitas de SFX/mix com ffmpeg, paletas de som por estilo, metas de volume.references/qa-checklist.md— a aprovação de entrega. Nada é enviado até que cada item passe.assets/templates/threejs-starter.html— abra em um navegador e ele roda: cena puffy, motor de linha do tempo, modo de quadro determinístico, gravador WebM.assets/templates/blender-starter.py—blender -b -P blender-starter.py -- --secs 8renderiza um MP4 animado completo headless.examples/render-frames.mjs+examples/assemble-video.sh— captura de quadro headless + montagem de MP4/GIF com ffmpeg.scripts/screenshot.mjs— imagem estática determinística única de qualquer demo (para visualizações e QA).
6. Biblioteca de modelos de exemplo — comece por aqui
Nunca construa um personagem ou veículo do zero quando um exemplo estiver próximo. Cada exemplo é um rig/veículo completo em ambos os pipelines, sem estado e seguro para loop, com uma demonstração ao vivo:
| Modelo | Ensina | Three.js | Blender | Demo ao vivo |
|---|---|---|---|---|
| 🧍 Humano ("Milo") | hierarquia de juntas, andar/parado/acenar, dobrar joelho, contra-rotação | examples/human-character/threejs-human.js | blender-human.py | /demos/human/ |
| 🐱 Gato puffy ("Mochi") | zero bordas afiadas, compressão e esticamento, overlap de cauda | examples/fluffy-cat/threejs-cat.js | blender-cat.py | /demos/cat/ |
| ✈️ Jato ("Swift") | superfícies de torno/extrusão, voo inclinado, câmera de perseguição | examples/jet-fighter/threejs-jet.js | blender-jet.py | /demos/jet/ |
| 🤖 Robô ("Bolt") | superfície dura de caixa arredondada, andar com peso, emissivos | examples/robot-mech/threejs-robot.js | blender-robot.py | /demos/robot/ |
| 🚗 Carro ("Jelly") | corpo de extrusão de perfil, arcos, mesa giratória, giro de roda | examples/sports-car/threejs-car.js | blender-car.py | /demos/car/ |
Fluxo de trabalho de adaptação: copie o exemplo mais próximo → troque o helper de paleta/material pela bíblia de estilo escolhida → ajuste proporções/silhueta → remodele os canais de animação existentes. Todas as animações são funções puras do tempo, portanto as edições permanecem seguras para loop automaticamente.