カートゥーン3Dストーリー短編(three.js + Remotion)
実績例:「The Bridge That Fell for a Song」。1831年のブロートン橋と74人の兵士が歩調を合わせて行進したことにまつわる、67秒のオリジナル短編です。
- コード:
src/videos/bridge/(あなたのRemotionプロジェクト内の構成BridgeShort、1080x1920、30 fps)。 - スクリプト、音声、サウンド:
~/bridge-short/。 - スタイル研究:
references/。
スタイルリファレンスは非公開で研究されたチャンネルです(references/:STYLE_BIBLE.md、reports/*.md、frames/)。
- それらの動画は私的学習用資料です。アップロード、公開、送信は絶対に行わないでください。
- それらのスクリプト、キャラクター、ショットをコピーしないでください。ストーリー、キャラクター、音声は常に独自のものです。
- ナレーションや説明文でチャンネル名を決して言わないでください。
適用されるユーザールール:
- 動画内にキャプションやラベルを入れない。
- 英語のみ。
- 音声:一定のトーン。
- ジョークは調査された実際の事実に基づく。
- 標準ミックス:音楽 +3 dB、SFX -6 dB、音声はそのまま。
- 最終出力 2K 縦型:1440x2560、
--scale 1.3333。 - Opus max がすべてのチェックを検証。
- 各ステップ後に保存。
- スクリプトが承認されたら「Just do it」。
パイプライン
- トピックと事実。 物理的な原因と結果がある(視覚的に表現できる)驚くべき実話を1つ選び、それを説明するシンプルな日常のアナロジーも用意します。
- 事実とその出典を
SCRIPT.mdの先頭に書きます。
- 事実とその出典を
- スクリプト(約3.7語/秒、55〜70秒)。橋の短編からのビート構造:
- フック: 不条理な事実を一文で(「74人の兵士が橋を歩いて渡っただけで鉄橋を倒した」)。
- 設定: 年、場所、誇り。
- アクション: 3〜4ビートでエスカレーション、各ビートは少しずつ大きくなる。
- スナップ: 壊れる瞬間。
- 無表情の二行: 「幸いにも…/不幸にも…」
- 説明: 日常のアナロジーを通した1つの物理学のアイデア(ブランコに乗る子供)。
- 結果: それが生み出したルール。
- コールバックのひねり: エンディング。
- 視聴者がすでに見ているものを画面上で説明しないでください。
- 音声。
voice.wavを録音または生成し、そのワードタイミングをwords.jsonに作成します(任意の音声認識ツールで単語のタイミングを取得)。- プロジェクトフォルダ、例えば
~/bridge-short/voice/に配置します。 - ワードタイミングは手動で修正します。すべては words.json にタイミングが合わせられます。
- プロジェクトフォルダ、例えば
- ショット計画
story.ts:templates/bridge/(最終的な橋のソース。Remotionプロジェクトのsrc/videos/bridge/と同じ)をsrc/videos/<name>/にコピーし、src/Root.tsxでBridgeShortの隣に新しいコンポジションを登録し、名前を変更します。SHOTS:id、a/bフレーム、ライト(昼/ゴールデン)、群衆モード、tauストーリー時間。XFADE:場所/時間の変更時のクロスフェード。FLASH_AT:フック後の白いフラッシュ。CAMS:ショットごとのキー{f, dur?, cut?, s: f => {pos, look, fov, roll}}。KICKS:インパクト時のフリップシェイク。DOF/dofAt:ビートごとのレンズブラー。FOREGROUND:近接のフレーミング用小道具。- すべての視覚的なリアクションは、その単語の0〜3フレーム前に発生します。
- ワールド。
lights.ts:LIGHTS と、各ライトごとの LOOK(空/川/雲のパレット)。shade.ts:2トーンシェーディングとuntone()。build.ts:町、家、Kenney CC0 キットのプロップ、色変更、カメラを遮るものの視線カリング。paint.ts:HD Canvas2D で描かれたテクスチャ、継ぎ目は暗い色合いでペイント。world.ts:空のシェーダー、フォグ = 地平線の色、川、フレームごとのポージング、サンはショットごとに固定されカメラ相対。
- キャラクター。
toon.ts:Canvas2D のPen描画API、600x1000 のデザインキャンバス、靴底は y = 975、豆頭、棒状の手足、プラム色の可変幅アウトライン、表情ライブラリ。cast.ts:カメラ対面のビルボード、群衆、エフェクトカード、瞬き、歩行サイクル。すべてのビルボードはNOINKレイヤーに配置。cardshade.ts:シーンのライトで照らされるカード、エミッシブなし。
- ポスト(
Bridge.tsx+ink.ts+lensblur.ts+grade.ts)。- コンポーザー順序:インク → レンズプレ → レンズメイン → ブルーム → NEUTRAL トーンマップ → グレード(MSAA 4)。
- すべてのピクセルパラメータは出力高さ / 1920 でスケーリングします。
- サウンド(
~/bridge-short/audio/:timeline.py、sfx_gen.py、sfx.py、music.py、instruments.py、dsp.py、mix.py)。- イベントテーブル → 合成SFX と、音声の下でダッキングされたオリジナルスコア。
- 出力:mix.wav(48 kHz、正確な長さ)、ステム、cues.md。
- サウンド作成前にピクチャーの時間定数をロックします。後でタイミングを変更する場合はサウンドを再実行する必要があります。
- ルックチェック。
node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5を実行。BRIDGE_ENTRY=src/sandboxes/<n>/index.tsxを設定してサンドボックスコピーをレンダリング。python scripts/sbs_sheet.py out.jpg --ours ... --ref ...で参照フレームとのサイドバイサイドを作成。- Opus max 検証者に送信:1〜3枚の画像、200ワード以内の判定。
- 最終レンダリング。
npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333-map 0:v:0 -map 1:a:0でマルチプレックス(Remotionは無音のオーディオトラックを書き出します)。- QA:
python scripts/short_qa.py final.mp4 out/<name>/qa shots.jsonで全フレームの黒、白、フリーズ、ポップフレーム、ラウドネス、シートをチェック。 - 見つかった問題を修正し、徹底的なOpus監査を実行。
- 配信。 最終mp4をSendUserFileで送信、メモリを更新、ノートを書き込みます。
最終ルック値(4回のベリファイアラウンド後の橋の値。すべて templates/bridge/ にあり)
新しい短編は常に templates/bridge/ から開始( src/videos/<name>/ にコピー):ルックはこれらの値に、ストーリーは story.ts / build.ts のレイアウト / cast.ts の役割に存在します。最終的なOpus maxスコア:カラー デイ7、ゴールデン5-6、ライティング5-6、インク6、テクスチャ5-6、キャラクター7、深度6-7、構図6-7(開始時の5/3/4/5/4/7/4/6から改善)。
- ライトプリセット(
lights.ts、サンはカメラ相対でショットごとに固定):- デイ:az 75 / el 48、lit [1.58,1.5,1.33]、shade [.30,.29,.36]、lift [.05,.06,.11](クールティントはシャードのみ)、空 上部 #3e7fd2 → 地平線 #b8d0ec、フォグ = 地平線、25→300 m、uSat 1.08、60 m 以遠で約15%の青いヘイズ。
- ゴールデン:az 6 / el 7(バックライトの低い太陽)、キーは #FFB36B ×1.5 へ、バイオレットブルーのシャード(ファサード ≈ #444380)、空 #ffc47c → #8a6f8a、ピーチフォグは50 m以降のみ、太陽の円盤 #ffcf9e + ブルーム、コンタクトブロブ+ リアルなカードシャドウ。
- アルベド(
paint.ts/build.ts):くすんだレンガ / クリーム / オーカー / テラコッタの家、台座、コーニス、窓台、フード、玄関ステップ、煙突 + ポット、高さ 7 / 8.4 / 9.8 m;暖かいグレー/ベージュの石(「絵本風」から彩度 −35%);オーカー色の木製デッキ C* 〜51-58(ほぼ黒の継ぎ目)。鉄は暗く彩度低め。レモン色やラベンダー色の照らされた面は禁止。 - インク(
ink.ts):#030303、近距離(6 m)で5.1 px → 遠距離(90 m)で3.3 px(1080x1920時)、折り目は35°から×0.8、深度ジャンプは1%から、フォグティントは遠方のみ0.3;キャラクターカードはNOINKレイヤー(独自のプラムインクを持つ)。 - レンズ(
lensblur.ts+story.tsのdofAt):1080px時の cInf:フック/川 CU 15-16、クローズアップ 12-14、MS 10-12、パーク 7、ゴールデンスウェイ 5、ワイド/航空 0。前列の目の高さにピントを合わせる。 - ポスト(
Bridge.tsx):インク → レンズプレ → レンズメイン → ブルーム(thr 1.0、int .5、6レベル、半径 .6)→ NEUTRAL トーンマップ → グレード;MSAA 4。フィルムグレインは存在するがOFF(リファレンスにグレインなし;ファイルサイズが4倍になる)。 - キャラクター(
toon.ts/cast.ts/cardshade.ts):豆頭 h/w .94、プラムインク #241726、目は .26 W の間隔、チークなし、14の表情;大人は3.5頭身;歩行バウンス 5%、傾き 1-7°、歩幅 0.8 m;瞬き 0.5-2.3 秒;タイトなコンタクトシャドウ 〜.5 足の下 + デイ時は太陽方向の尾;ゴールデン時は内側のみのリムライト(外部にオフセットコピーを作らない)。 - カメラ(
story.ts):大きなジャンプでカット、smootherstep グライド 18-40 f、すべてのホールドは微動(4 f以上の静的ホールドなし)、インパクト時のフリップキックは7 fで減衰、4-4.6°のロール、フォアグラウンドプロップ(FOREGROUND)はショットの約1/3で使用。
ルックターゲット(リファレンスから測定;references/reports/ 参照)
- インク:
- ワールド線:1080幅で約3 px、ほぼ黒 #0b0a0c、距離によらずほぼ一定。シルエット、深度ジャンプ、法線の折り目のみ。壁/床の継ぎ目や地平線には線なし。キャラクターカードはワールドインクで輪郭を描かれない。
- キャラクターインク:暗いプラム #201628-#2f1d28、下部/影側で太い。
- カラー:
- デイの中央ルーマ 〜.57。非インク p5 〜.23(つぶれた黒なし)。照らされた彩度 C* p90 〜55。デイの空上部 〜#5e93d9、地平線は1.28倍明るい。
- ゴールデン:ピーチの地平線 #ffd08a、バイオレットブルーの影(茶色ではない)、バックライトの太陽。
- 深度:
- DOF は表示時間の約1/3(CU、MS、インサート)、cInf 1080px時 10-16 px、目の高さにピント。エスタブリッシングショットとワイドショットはシャープに保つ。
- フォグ = 地平線の色、デイ 25→420 m、ゴールデン 20→360 m。
- ブルームはHDRエミッシブのみ:閾値1.0。
- カメラ:
- 大きなジャンプはハードカット。その他はすべて18-40 fのsmootherstepグライド、ピーク ≤ 25 px/f(720p時)。
- すべてのホールドは0.15-0.35%/fで押し込み、パンチワードでは0.6%/f。
- ロール 4-5°。
- 手持ち風のフロートなし。インパクトシェイクは毎フレーム符号を反転し、7 fで減衰。
- キャラクター:
- 約3.5頭身、脚 1.4 HH。
- 棒状の手足 約0.055 頭幅、インクドットの手。
- 豆頭(h/w 〜0.93、あごが狭く、頭頂がとがる)。
- チークや目のハイライトなし。顔の明るさ 〜.93。
- 歩行バウンス 3-7%、傾き 1-7°、足を設置。
- 瞬き 0.5-2.3秒ごと、持続 4 f。
ルックマッチループ(橋のルックに到達した方法;任意の「Xのように見せる」パスに再利用)
- まずリファレンスを測定。 トピックごとに1つの分析エージェント(モーション、深度、テクスチャ、キャラクター、ライティング、アウトライン、グレード)、各エージェントは数値(形容詞ではなく)を
references/reports/<topic>.mdに書き込む。共有ブリーフ:compare/CONTEXT.md。レポートは以降のすべてのエージェントの真実のソースとなる。 - サンドボックス、ファイルごとに1オーナー。 プロジェクトフォルダを
src/videos/<name>_{cam,world,mat,char,post}にコピーし、エントリsrc/sandboxes/<n>/index.tsxを設定(メインと同じindex.tsx、インポートパスのみ変更)。橋での所有権:- cam:story.ts(カメラキー、カット、キック、DOFテーブル、フォアグラウンドプロップ)
- world:world.ts、lights.ts、shade.ts、grade.ts(太陽、空、フォグ、川、カラー、グレード)
- mat:paint.ts、build.ts(ペイントテクスチャ、建物、プロップ)
- char:toon.ts、cast.ts、cardshade.ts(キャラクター描画、ポージング、カードライティング、FXカード)
- post:ink.ts、Bridge.tsx、lensblur.ts(アウトラインパス、コンポーザー、レンズブラー、ブルーム)
エージェントは自身のサンドボックス内の自身のファイルのみを編集し、
BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<name>/<n>/x_ <frames> 0.5でスチルをレンダリング。
- マージ
python scripts/bridge_merge.py [cam,world,mat,char,post]で(メインをbackup/bridge_<time>/にバックアップ、所有ファイルのみコピー)。その後npx tsc --noEmit(プロジェクトフォルダにフィルター)、次のラウンドの前にメインからすべてのサンドボックスを再同期(cp -f src/videos/<name>/* src/videos/<name>_<n>/)。 - 検証 新しいOpus maxエージェントで:サイドバイサイドシート(
python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2)、各エリアを10点満点でスコア付け(カラーデイ/ゴールデン、ライティング、インク、テクスチャ、キャラクター、深度、構図)し、番号付きの修正リストとフレーム番号を付ける。各修正をファイルオーナーにマッピングし、SendMessageでそのオーナーのエージェントを再開(コンテキストを保持)。橋のスコア:ラウンド1 5/3/4/5/4/7/4/6 → ラウンド2 5/4/5/6/4/7/6/6 → ラウンド3はメモ参照。 - オーナー間の契約はエクスポートされた定数で管理(例:ink.ts の
NOINKレイヤー、story.ts のdofAt/FOREGROUND、lights.ts のLIGHTS/LOOK)。契約を変更する場合は、それを読み取るすべてのオーナーに伝える必要がある。
注意点
- Kenney nature-kit のマテリアルはティール色:build.ts でマテリアル名で色を変更する。
- カメラが家の中に入ることがある:build.ts/world.ts の視線カラーがカメラレイを遮るものを除去。
- DOFと同じマージされたエフェクトパス内のインクは上書きされる。インクはブラーの前に独自のパスでなければならない。
- ピクセルサイズのポストパラメータは解像度にスケーリングする必要がある:スチルは0.5、最終は1.333。R3Fはdprを≥ 1にクランプするため、
--scale 0.5のスチルでも1080x1920のバッファがレンダリングされる。 - ディスク: 各Remotionバンドルは
public/(約1.3 GB)をテンポラリフォルダ\remotion-webpack-bundle-*にコピーし、決して削除しない。橋のパス中に60+ GBがシステムドライブを満たし、レンダリングがENOSPCで停止した。常にexport TEMP='<big drive>/remotion-tmp' TMP='<big drive>/remotion-tmp'でレンダリングし(bridge-stills.mjs は自動で設定)、共有テンポラリフォルダ内の古いバンドルフォルダを削除する前にユーザーに確認する(自動モードは掃除をブロック)。/remotion-tmp も満杯になる(橋の4ラウンド後、約500フォルダ / 110 GB):プロジェクトが完了し、何もレンダリングしていない場合、そのフォルダ内のremotion-webpack-bundle-*とpuppeteer_dev_chrome_profile-*フォルダを削除する。 - JS文字列では
"<big drive>/remotion-tmp"と書き、"<big drive>\remotion-tmp"と書かないこと(\rはキャリッジリターンになる)。 - Remotionは無音のオーディオトラックを書き出す:
-map 0:v:0 -map 1:a:0でマルチプレックス。 - サブエージェントはこのハーネスでレポートファイルを書き込めない:150ワード以内の最終メッセージを要求し、自分で
out/<name>/<n>/REPORT.mdに保存する。 out/内のスクラッチ.tsファイルはtscを壊す:名前を.txtにする。- 2Kレンダリングは約4 fps(67秒で約10分)。スチル(0.5)は約40秒のバンドル後、各3-8秒。
- 2.5%のフィルムグレインは2Kファイルを約250 MBではなく910 MBにし、YouTubeでどろどろになる;リファレンスにはない。オフのままに。
ベリファイアが捕捉した読みやすさの落とし穴(新しいプロップ/ショットごとにこれらを確認)
- 子供の後ろに消える一本のロープで描かれたブランコは「絞首刑」に見える。 常に二本のロープで広い板を持ち、子供はその間(
swingKidin toon.ts)、脚が弧をクリアするフレーム(両端にAフレーム)。 - レンズから約2 m未満のプロップや浮遊物は、フレームエッジで巨大な切り取られたブロブになる。カメラが動くとき、新しい位置の近くのすべてのプロップを再確認する(川のカメラが浮遊する帽子の中に動いた)。
- フレームエッジで切れた前景の茂みは「緑のボール」に見える;前景プロップは認識可能か、存在しないかのどちらかでなければならない。
- 旗:赤+黄色の星/菱形はベトナムの旗に見える。時代に合った旗を使用する(1831年のイングランドなら聖ジョージ十字)。