Communitygithub.com

igm61799-cloud/zoom-explainer-3d

コードで描画された3D「無限ズーム」説明ビデオ(MP4)を生成します。Three.js、ヘッドレスChrome(GPU)、ffmpeg を使用し、動画生成モデルは使いません。規模感の説明や「10の累乗」のようなクリップを作成したいときに使います。

zoom-explainer-3d とは?

このスキルは、コードベースの3D「無限ズーム」説明ビデオ(MP4)を作成するためのものです。Three.js、ヘッドレスChrome(GPU)、ffmpeg を使用し、動画生成モデルは一切使いません。視聴者は、誰もが知っている物体から始まり、カットなしで内部に飛び込み、画面上に表示される数字で進んだ距離を把握し、最後に予想外の事実にたどり着く、という体験を得られます。このスキルのリファレンス結果は「Nothing is really sharp」で、かみそりの刃から26回の半減、鉄原子、そして刃の端がまだ約300原子の幅であるという事実を示しています。テンプレートは `assets/template/` にあり、精度を失わずに8桁の規模をズームする、規模に応じて変化する詳細、被写界深度、決定論的レンダリングといった難しい部分が既に解決されています。このスキルはClaude Code、Cursor、Codex、OpenAI Codex CLI、GitHub Copilotなど、エージェントとして機能するほとんどのAIプラットフォームで使用できます。ワークフローは、事前調査、シーンの適応、スチルレンダリングによる確認、フルレンダリングと検証という流れです。サイレント(無音)がデフォルトで、テキストはデータと名前のみ。1920x1080、30fps、40~50秒の動画を生成します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/igm61799-cloud/zoom-explainer-3d/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

3Dズーム説明ビデオ

どんなグラフよりもスケールを説明できるフォーマット:誰もが知っている物体から始まり、カットなしで内部に飛び込み、画面上に1つの数字を表示して視聴者にどれだけ進んだかを伝え、予想外の事実で終わります。このスキルのリファレンス結果は「Nothing is really sharp」:かみそりの刃、26回の半減、1つの鉄原子、そしてその刃の端はまだ約300原子の幅であるという事実です。

assets/template/ は完成したプロジェクトです。空のファイルから始めるのではなく、ここから始めてください。難しい部分(精度を失わずに8桁の規模をズームする、規模に応じて変化する詳細、被写界深度、決定論的レンダリング)は既にそこで解決されており、正しくするために数回の試行を要しました。

公式

5つの要素すべてを守ってください。それぞれが機能しています。

  1. ワンカット連続撮影。 最も重要な点は、視聴者が位置を見失わないことです。カットがあると、スケール感がリセットされます。
  2. 1つのライブ計測。 被写体に固定された細いバー、フレームごとに変化する数字、半減(または倍加)のカウント、現在見えているものを示す2~3語のテキスト。バーは視聴者が読むべき唯一のものであるため、正直でなければなりません。シーン内でのその長さは、表示されている数字と実際に一致していなければなりません。
  3. 被写体はスケールごとに性質を変える。 研磨面は研削痕になり、次にチップ、結晶粒、丸みを帯びたエッジ、そして原子になります。表面が3秒間同じに見えると、ズームは何も起こっていないように見えます。
  4. スケールのためのオブジェクト。 ズームが各サイズを通過するたびに、そのサイズの身近なオブジェクトが被写体の横に、名前とサイズとともに配置されます:塩の粒、髪の毛、赤血球、バクテリア、ウイルス、トランジスタ、抗体、DNA。これらは抽象的な数字を「ウイルスより小さい」という実感に変えます。
  5. 見返り。 開始地点まで素早く引き戻し、その旅のための1つの数字を表示します。

ワークフロー

1. モデリング前の調査

ビデオは真実である場合にのみ作る価値があります。実際の寸法を調べ(ウェブ検索、可能な限り一次資料)、被写体と各スケールオブジェクトについて、サイズ、出典、簡略化した点を書き留めてください。ジオメトリはそれらの数値から構築されるため、画像が事実から逸脱することはありません。出典と簡略化した点は最後にユーザーに報告してください。ユーザーから求められます。

6~9個のスケールオブジェクトを選択し、それぞれが前のオブジェクトの少なくとも約3倍以上小さいものにしてください。それより近いとラベルが重なり、約30倍以上離れると画面が数秒間空っぽになります。

2. 役立つ場合に計画を表示する

ユーザーが最初に計画を見るように要求した場合、または依頼に実際の選択肢(ナレーションの有無、言語、見返りは何か)が残されている場合は、短い表(時間、スケール、表示内容、スケールオブジェクト)を提示してください。それ以外の場合は進めてください。誰も求めていない計画は、最初のレンダリングを遅らせるだけです。

3. プロジェクトのセットアップ

cp -r <skill>/assets/template <project>/ && cd <project> && npm install
node render.mjs --stills 1,10,20,30,40

2番目のコマンドはGPU名を出力し、out/ に5枚のJPEGを書き込む必要があります。SwiftShaderまたはllvmpipeと報告された場合、レンダリングはCPU上で行われ、時間がかかります。先に進む前にGPUフラグを修正してください(references/pitfalls.md 参照)。

4. シーンの適応

main.js は1つのファイルで、セクションに分かれています。構造的な変更を行う前に references/techniques.md を読んでください。各部分がなぜそのように構築されているかが説明されています。新しいトピックで通常変更される部分は以下の通りです:

main.js のセクション置き換える内容
constantsメートル単位の物理データ、開始サイズ L0、半減回数 HMAX、タイムライン
subject surface断面 prof()、輪郭の切り抜き、表面特徴テーブル FEATS(波長、種類、強度)
finest scale原子格子(または最終段階を構成するもの)
things for scaleaddObj(name, sizeText, sizeInMetres, geometry, material, placement) リスト
overlayLABELS(各ズームレベルで表示されているもの)、最終キャプション
camera keysK_AZ、K_EL、K_TY、K_D、K_AP(ズームレベルの関数として)

異なる形状(チップ、葉、紙)の被写体の場合は、メカニズムを維持し、プロファイルと特徴を置き換えてください。外向きズームの場合は、同じタイムラインを逆に実行し、「倍加」と表示します。

5. フィルムレンダリング前にスチルを確認する

タイムライン全体にわたって8~10枚のスチルをレンダリングし、ffmpegでコンタクトシートにタイル配置して読み取ってください。その後、見つけた問題を修正して繰り返します。このループで品質が生まれます。リファレンスフィルムの最初のバージョンのすべての問題はスチルで見え、コードでは見えませんでした。特に以下を確認してください:

  • 露出。 最初のパスはほぼ常に白飛びしています。金属はほとんど暗く、明確なハイライトがあるべきです。
  • フレームエッジで切り取られているもの、 特に上部付近のスケールオブジェクト。
  • 明るい領域や互いに重なっているラベル。 計測ラベルは空の黒色に保ってください。
  • 各段階がラベル通りのものに見えるか。 ラベルが「粒」で画像が縞模様の場合、どちらかが間違っています。
  • 最初と最後のフレーム。 これらはサムネイルと決めゼリフになるため。
ffmpeg -y -i a.jpg -i b.jpg -i c.jpg -i d.jpg -filter_complex "[0][1]hstack[t];[2][3]hstack[u];[t][u]vstack,scale=1920:-1" sheet.jpg

6. 結果のレンダリングと検証

node render.mjs --full --o video.mp4            # ナレーションがある場合は --audio vo.wav を追加

バックグラウンドで実行してください。45秒の1080pフィルムは、ディスクリートGPUで数分かかります。次に、以前作成したスチルではなく、ファイル自体を確認します:長さとサイズを調査し、概要グリッドを抽出し、動きの多いセクションから6フレームを連続で抽出してフリッカーを確認します。微細な手続き的ディテールは圧縮に弱いため、ファイルが大きくなることを想定し、必要に応じて小さいコピーを作成してください:

ffmpeg -i video.mp4 -vf "fps=1/3,scale=640:-1,tile=4x4" -frames:v 1 overview.jpg
ffmpeg -ss 13 -i video.mp4 -vf "crop=960:540:480:270,tile=3x2" -frames:v 1 consecutive.jpg
ffmpeg -i video.mp4 -vf scale=1280:720 -c:v libx264 -preset slow -crf 25 -maxrate 4200k -bufsize 8400k small.mp4

検証したこととしなかったことを明確に述べてください。フレームグリッドは画像が正しいことを証明しますが、動きが正しいと感じられることを証明するわけではないため、ユーザー自身が確認すべきであると伝えてください。

デフォルト設定

  • サイレント。 音楽、効果音、ナレーションは、依頼がない限り不要です。このフォーマットはそれ自体で成立し、元となったリファレンスにもナレーションはありませんでした。
  • テキストはデータと名前のみ。 計測値、半減カウント、表示内容、スケールオブジェクトの名前とサイズ、1つの最終的な数字。ナレーションが追加される場合は、ナレーションですでに述べられているラベルはすべて削除してください。読むことと聞くことで同じ言葉が分割されると注意力が分散するためです。
  • 1920x1080、30fps、40~50秒、1.5倍速でレンダリングしダウンスケールします。縦型ビデオの場合は W と H を変更し、すべてのスチルを再確認してください。構図は自動的には転送されません。
  • ラベルはユーザーの視聴者の言語で。 これはユーザーがチャットしている言語と常に同じとは限りません。不明な場合は質問してください。

ボイスオーバーの追加

依頼があった場合のみ。各段階に属する短い行としてスクリプトを作成し、オーディオを生成または受け取り、単語のタイミングを取得し(faster-whisperが適しています)、その後オーディオからズームを駆動します。ズームレベルはオーディオのキーフレーム関数となり、ある段階を説明するラインの間はホールドし、ライン間を移動します。render.mjs --audio にオーディオを渡します。各ホールド中に小さな何か(ライトスイープ、オブジェクトの到着、原子の振動)を発生させてください。そうしないと、停止したズームは凍結したように見えます。

リファレンスファイル

  • references/techniques.md - テンプレートの仕組みとその理由:焦点点周りのスケーリング、スケールウィンドウ処理された手続き的ディテール、スフィアインポスタ、被写界深度、物理空間に固定されたオブジェクト、決定論的レンダラー。構造的な変更の前に読んでください。
  • references/pitfalls.md - すでに遭遇した失敗とその修正。レンダリングがおかしい場合やツールが誤動作する場合に読んでください。
  • MASTER_PROMPT.md - 新しいビデオを開始するための穴埋めプロンプトと、公式に適合するトピックのアイデア。

関連スキル