3Dショット
Three.js（ライブレイヤー）
/engines/three.jsからthreeLayer(el, { update(t), background, fov })を使用します。three用のインポートマップを追加してください（examples/engines-demo/index.htmlを参照）。update(t)はすべてのトランスフォームをtから設定します。カメラ移動：プレーンオブジェクトにGSAPトゥイーンでキーフレームを設定し（tl.to(cam, { x: 4, z: 8, duration: 2 }, 3)）、update内でcamera.positionにコピーします。- モデル：
three/addons/loaders/GLTFLoader.jsのGLTFLoaderを使用します（インポートマップに"three/addons/": "/core/node_modules/three/examples/jsm/"を追加）。読み込みはStudio.wait(...)でラップします。モデルファイルはブランドのassets/models/またはプロダクションのcomposition/に配置します。 - ルック（
looks/README.md）がレンダリングスタイルを決定します。同じモデルを以下のいずれかの方法で使用できます：- カートゥーン（
looks/toon-3d）：toon(color, { steps })+outline(mesh, { thickness })。ハードライト：1つのDirectionalLight+ 低いAmbientLight。 - フォトリアル（
looks/photoreal）：await realistic(renderer, scene)（Studio.waitでラップ：ACESトーンマッピング、反射用のスタジオ環境、ソフトシャドウ）+pbr(color, { metalness, roughness, clearcoat })。castShadow付きのキーライト、後方からのクールなリムライト、CSSグラデーション上のShadowMaterialフロア。カメラを水平に近い角度に保ち（光沢面が白くなるのを防ぐ）、ゆっくり移動させ、最終レンダリングはStudio.setup({ motionBlur: true })で行います。 - ネオン（
looks/neon-noir）：emissive(color, intensity)+threeLayer(el, { post: bloom({ strength, threshold }) })、scene.fog。thresholdを 0.2 以上、emissive を 2 以下に保たないと、すべてが白く bloom します。
- カートゥーン（
- アニメーションGLBクリップ：
AnimationMixerを作成し、update内でmixer.setTime(t - start)を呼び出します。mixer.update(delta)は使用しないでください。 - 3Dポイントに追従するHTMLタグ：
update(t)内で、camera.updateMatrixWorld()と親のupdateMatrixWorld()を、vector.applyMatrix4(obj.matrixWorld).project(camera)の前に呼び出します。Three.js はこれらをrender()内でのみ更新するため、これがないとタグは前のフレームに追従します。例：productions/bike-logger/REEL-002-engines。 - CADメッシュをJSON（頂点+インデックス）として扱う場合：
toNonIndexed()+computeVertexNormals()でシャープなフラットファセットを生成します。threeLayer(..., { pixelRatio: 2 })でレンダリングすると、エッジがスーパーサンプリングされます。 - 物理：ベイクします（最初のフレームの前に固定1/120秒ステップで配列にシミュレートし、
tで参照します）。 - 会話キャラクター：
/engines/lipsync.jsと台詞の.visemes.js（scripts/lipsync.shから）を従来の<script>タグで読み込み、update(t)内でLipSync.paramsAt(cues, t, "mouth", { offset })→{ open, wide, round }（0…1）をモーフターゲット（mesh.morphTargetInfluences）または口のメッシュのスケールに適用します。engines/README.mdの リップシンク を参照してください。
Blender（プレート）
- シーンスクリプトは
build(ctx)を定義します。engines/blender/example_scene.pyをコピーしてください。ctxはtoon(rgb)、key(obj, "location", t, value)、size、fps、duration、frames、sceneを提供します。 - レンダリング：
engines/blender/render.sh scene.py composition/plates/<name>.mp4 --size 1080x1920 --duration 4 [--engine EEVEE|CYCLES|WORKBENCH]。下書きは--size 540x960、最終はフルサイズで。 - 背景色：カメラにのみ表示します（Light Path "Is Camera Ray" ミックス、例を参照）。これによりシーンを照らしたりトゥーンバンドを平坦化したりしません。
- カラーマネジメントは Standard に設定されているため、ブランドの16進カラーがそのまま出力されます。フォトリアルプレートの場合は、
build内でctx["scene"].view_settings.view_transform = "AgX"に切り替え、--engine CYCLESでレンダリングし、エリアライトとカメラ被写界深度を使用します。 - 物理とシミュレーション：レンダリング前にシーンスクリプト内でベイクします。
- 会話キャラクター：シーンスクリプトで
import lipsync as Lとインポートします（run.pyがengines/blender/とスクリプト自身のフォルダをパスに追加します）。cues = L.load("productions/…/audio/vo.visemes.json")でキューを読み込み、L.key_shape_keys(head, cues, ctx, offset=VO_START)で各フレームのシェイプキーopen、wide、roundをキーします（names={"open": "Jaw"}で他の名前にマッピング可能）。その他の操作：各フレームでL.params_at(cues, t, offset=…)をctx["key"]とともに使用します。 - コンポジション内：
<video src="plates/<name>.mp4">+Studio.video(el, { start })。プレートはアルファなしです。テキストやキャラクターはHTMLレイヤーで上部に配置します。
チェック
キービートを静止画としてレンダリングして確認します。Three.js の場合は、1フレームを2回レンダリングしてmd5を比較します。レンダリング時間をプロダクションログに記録します。