3D動画スタジオ

Video 3D Studio

各ショットをコードで構築し、その静止画フレームを確認してから、ユーザーのマシン上でMP4にレンダリングします。ユーザーとは、そのユーザーの言語で、平易な言葉で話してください。この機能を頼む人の多くはコードを書いたことがありません。

1. プロジェクトの準備

既存のプロジェクトがあるかどうかを先に確認してください。tools/render.mjs と src/kit/ を含むフォルダーがあれば、それに新しいシーンを追加します。

そうでない場合は、node --version を確認し（18以上であること）、ユーザーのカレントフォルダーにショットにちなんだ名前のプロジェクトを作成します：

node <this-skill-folder>/scripts/new-project.mjs video-<subject>

この処理に数分と約1GBのディスク容量が必要であること、また最初のレンダリング時には130MBのヘッドレスブラウザもダウンロードされることをユーザーに伝えてください。以降のコマンドはすべてプロジェクトフォルダー内で実行します。

2. ショットの詳細を詰める

フォーマット、尺、被写体、雰囲気、色、正確な文言、そしてロゴやモデルファイルを決定します。結果が変わらず、かつ妥当なデフォルト値がないものについてのみ質問してください。デフォルト値：ソーシャルメディア用は9:16、それ以外は16:9、5～8秒、30fps。

構築を始める前に、自分用の短いプランを書き出しましょう。複数のアイデアを詰め込むより、一つの明確なアイデアがあるショットの方が見栄えが良くなります。

• 被写体: 視聴者が見るべき一つのもの
• カメラ: レンズと一つの動き
• 照明: どこから来て、何を照らすか
• ビート: 主要な出来事が発生するタイミング（秒単位）

ユーザーから提供されたファイルは、プロジェクトの public/ フォルダーに配置します。

3. 最も近いシーンから構築する

リクエストの主な内容	開始するシーン	設定項目
一つのオブジェクトまたは製品	src/scenes/ProductOrbit.tsx	modelFile, color, backdrop
単語または短いタイトル	src/scenes/KineticTitle.tsx	text, fontFile, color, backdrop
ロゴ	src/scenes/LogoReveal.tsx	logoFile, tagline, color, glow, backdrop
部屋、場所、または雰囲気	src/scenes/MorningRoom.tsx	wall, accent
抽象的なもの、液体、またはシェーダ駆動	src/scenes/LiquidForm.tsx	look

リクエストがこれらの設定値を変更するだけの場合は、--set で渡し、コード自体は変更しないでください。それ以外の場合は、シーンを新しいファイルにコピーし、src/Root.tsx に登録し、コピーした方を変更します。そうすることで、元のサンプルシーンが参考として利用可能な状態を保てます。

シーンコードを書く前に、references/toolkit.md を読んでください。このファイルにはキットが提供するものがリストアップされています。レンズ、照明、マテリアル、タイミングに関する判断については、references/craft.md を読んでください。

モデルファイルがない場合は、キットの部品からオブジェクトを構築します。丸いものには useLathe、箱状のものには useRoundedBox、平らなシルエットには useExtrudedSvg を使用し、それらをグループ化します。継ぎ目、リング、グリップの溝、印刷されたテキスト、わずかに丸みを帯びたエッジといった小さなディテールこそが、単純なモデルを信頼できるものに見せます。そのため、すべてのオブジェクトにこれらのディテールをいくつか加え、キットからサーフェスマップを適用してください。滑らかな形状に単色を塗っただけでは、常に仮置きのように見えます。

レンダリングを正しく保つために

Remotionはフレームを順不同で、複数のブラウザタブで同時にレンダリングするため、あるフレームが直前のフレームに依存してはなりません。

• 変化するものはすべて useShot() から計算します。useState、useFrame アニメーション、Math.random()、Date はちらつきやジャンプの原因となるため、乱数には wobble と scatter を使用してください。
• 読み込みは public/ からのみ、usePublicFile またはそれを基にしたフックを通じて行います。レンダリングはネットワークに依存してはなりません。
• 3Dは <Stage> 内に収めてください。<Stage> がレンダリングパイプラインを管理するため、他の場所に第二のレンダリングループを追加したり、トーンマッピングを設定したりしないでください。
• 各フレームは複数回描画され、平均化されます。これにより、ソフトシャドウ、リアルなフォーカスブラー、クリーンなエッジが生成されます。フレーム内でブラーをかけるべきものは useEachSample に配置します。
• 小さなテキストは、LogoReveal が行っているように、ステージの上に通常の AbsoluteFill で配置します。小さなサイズの3Dテキストよりもシャープに保たれます。

4. レンダリング前にスチルを確認する

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

コマンドがリストアップしたすべての画像を開いて確認します。ビデオを見ることはできないため、スチルがショットを確認する方法です。動きを評価するには、ビート付近のフレームを近接してリクエストします。例：--frames 20,24,28,32

以下の項目を確認してください：

• 被写体が最初のフレーム、最後のフレーム、および動きの中間点で、フレーム内に収まっており、端にかかっていないこと。
• 9:16の場合、重要な要素が上部14%または下部20%（スマートフォンアプリがボタンを配置する領域）に配置されていないこと。
• ハイライト部分のディテールが保持され、画像が白飛びや黒つぶれしていないこと。
• テキストのスペルが正しく、すべての文字が読めるようになるべきタイミングまでに出現していること。
• 何も浮いていない、他のものに突き刺さっていない、または目に見える段差のある影を落としていないこと。

問題がある場合は、一つのことを変更して再確認します。そうすることで、何が問題を修正したのかがわかります。references/troubleshooting.md に、よくある症状と修正方法がリストアップされています。

次に、同じ --set 値を使用して、すべてのフレームをフラッシュとジャンプについてスキャンします：

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

スチルはほんの数瞬間しかサンプリングしないため、数フレーム続くフラッシュはその間をすり抜けます。平坦で光沢のある表面が一般的な原因です。これは、明るい光を一度に反射する可能性があるためです。コマンドが CHECK を報告した場合は、それが意図的なカットなどの意図された変化でない限り、名前が挙げられたフレームを確認し、レンダリング前に修正してください。

5. レンダリング

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

ハーフ解像度のテストには --quality draft を使用します。フル品質では、5～8秒のショットはデスクトップグラフィックカードで36～88秒かかりました。グラフィックカードがない場合、ツールはフレームあたり4パスに低下し、はるかに粗くなり、かつ非常に遅くなるため、ユーザーにその旨を伝え、長時間のレンダリングはバックグラウンドで実行してください。

ユーザーにMP4のパス、フォーマットと尺、そしてかかった時間を伝えてください。スチルとフレーム間の変化を確認したものであり、ビデオを再生して見たわけではないことを明確にしてください。

6. 修正に対応する

ユーザーが依頼した内容だけを正確に適用し、それ以外はそのままにします。例えば「照明を暖かく」という指示で、フレーミングまで変わってしまわないようにします。再度スチルを確認し、その後再レンダリングします。

事前に伝えておくべき制限事項

• 真のモーションブラーはないため、非常に速い動きはカクついて見えることがあります。動きは控えめにするか、--set fps=60 を試してみてください。
• 照明は完全なレイトレーシングではありません。影とスカイオクルージョンはソフトで正確ですが、光はそれ自体では反射しません。そのため、インテリアには追加のフィルライトが必要です。
• Remotionには独自のライセンスがあります。個人および3人以下の企業は無料ですが、それ以上の規模の企業はremotion.devから有料ライセンスを取得する必要があります。ユーザーが会社のために作業していると思われる場合は、このことを伝えてください。