murathany7/scene-3d

Cenas 3D

Three.js (camada ao vivo)

• Use threeLayer(el, { update(t), background, fov }) de /engines/three.js. Adicione um mapa de importação para three (veja examples/engines-demo/index.html).
• update(t) define todas as transformações a partir de t. Movimentos de câmera: keyframe com uma tween GSAP em um objeto simples (tl.to(cam, { x: 4, z: 8, duration: 2 }, 3)) e copie para camera.position em update.
• Modelos: GLTFLoader de three/addons/loaders/GLTFLoader.js (adicione "three/addons/": "/core/node_modules/three/examples/jsm/" ao mapa de importação). Envolva o carregamento em Studio.wait(...). Coloque os arquivos de modelo na pasta assets/models/ da marca ou em composition/ da produção.
• O visual (looks/README.md) define o estilo de renderização; o mesmo modelo pode seguir qualquer um destes caminhos:
  • Cartoon (looks/toon-3d): toon(color, { steps }) + outline(mesh, { thickness }). Luz forte: uma DirectionalLight + AmbientLight baixa.
  • Realista (looks/photoreal): await realistic(renderer, scene) (envolva em Studio.wait: mapeamento ACES, um ambiente de estúdio para reflexos, sombras suaves) + pbr(color, { metalness, roughness, clearcoat }). Uma luz principal com castShadow, uma luz de borda fria vindo de trás, um chão de ShadowMaterial sobre um gradiente CSS. Mantenha a câmera acima de ângulos rasantes (faces brilhantes ficam brancas), mova lentamente, renderize o final com Studio.setup({ motionBlur: true }).
  • Neon (looks/neon-noir): emissive(color, intensity) + threeLayer(el, { post: bloom({ strength, threshold }) }), scene.fog. Mantenha threshold ≥ 0.2 e emissive ≤ 2, senão tudo fica branco com bloom.
• Clipes GLB animados: crie um AnimationMixer, então em update chame mixer.setTime(t - start). Nunca use mixer.update(delta).
• Tags HTML que seguem pontos 3D: em update(t), chame camera.updateMatrixWorld() e updateMatrixWorld() do pai antes de vector.applyMatrix4(obj.matrixWorld).project(camera). Three.js atualiza estes apenas dentro de render(), então sem isso a tag segue o quadro anterior. Exemplo: productions/bike-logger/REEL-002-engines.
• Malhas CAD como JSON (vértices + índices): toNonIndexed() + computeVertexNormals() dá facetas planas nítidas. Renderize com threeLayer(..., { pixelRatio: 2 }) para bordas com supersampling.
• Física: pré-calcule (simule em passos fixos de 1/120 s em um array antes do primeiro quadro) e consulte por t.
• Personagem falante: carregue /engines/lipsync.js e o arquivo .visemes.js da linha (de scripts/lipsync.sh) com tags <script> clássicas, então em update(t): LipSync.paramsAt(cues, t, "mouth", { offset }) → { open, wide, round } (0…1) em alvos de morph (mesh.morphTargetInfluences) ou na escala de uma malha de boca. Veja engines/README.md, Lip sync.

Blender (plate)

• Um script de cena define build(ctx); copie engines/blender/example_scene.py. ctx fornece toon(rgb), key(obj, "location", t, value), size, fps, duration, frames, scene.
• Renderize: engines/blender/render.sh scene.py composition/plates/<nome>.mp4 --size 1080x1920 --duration 4 [--engine EEVEE|CYCLES|WORKBENCH]. Rascunho em --size 540x960, final no tamanho completo.
• Cor de fundo: mostre apenas para a câmera (Light Path "Is Camera Ray" mix, como no exemplo), ou ilumine a cena e achate as bandas de toon.
• Gerenciamento de cor é definido como Standard para que as cores hex da marca saiam como digitadas. Para um plate fotorrealista, mude para ctx["scene"].view_settings.view_transform = "AgX" em build, renderize com --engine CYCLES, e use luzes de área e profundidade de campo da câmera.
• Física e simulações: pré-calcule no script da cena antes de renderizar.
• Personagem falante: import lipsync as L no script da cena (o run.py coloca engines/blender/ e a própria pasta do script no path), cues = L.load("productions/…/audio/vo.visemes.json"), então L.key_shape_keys(head, cues, ctx, offset=VO_START) chaveia shape keys open, wide, round em cada quadro (names={"open": "Jaw"} para outros nomes). Qualquer outra coisa: L.params_at(cues, t, offset=…) por quadro com ctx["key"].
• Na composição: <video src="plates/<nome>.mp4"> + Studio.video(el, { start }). Plates não têm alfa; coloque texto e personagens por cima com camadas HTML.

Verificação

Renderize os beats chave como stills e examine-os. Para Three.js, renderize um quadro duas vezes e compare md5s. Anote os tempos de renderização no log da produção.