web-sims

Web sims

まず sims/README.md を読んでください。仕様とすべてのコマンドが記載されています。

Remotion の代わりにこちらを使うケース

• 独自のルールに従う動く要素（エージェント、パーティクル、クローラー）が数百個ある場合。
• カメラが周囲を移動したり、内部を通り抜けたりする 3D オブジェクトや機械がある場合。
• React で作るよりも、three.js または canvas のページとして書くほうが簡単な場合。

文字、UI、タイミングに合わせた表示を使うモーショングラフィックスは、引き続き Remotion（src/）を使います。

ワークフロー

1. アイデア、見せ場、長さについてユーザーと合意します。デフォルトの形式は、1080×1350 のレイアウト（4:5）、60 fps、20～24 秒です。
2. すべてのビートを、シムと同じ場所にある timeline.json に記述します（チャプター、見せ場、カメラキー）。サウンドスクリプトも同じファイルを読み込みます。
3. 最も近いサンプルから始めます。crawlers（DOM テキスト上のエージェント）、dossier（同様の内容にスクリーンスペースオーバーレイを追加）、engine（カットアウェイ、チャプター、フライスルー、分解図、生成サウンドを含む three.js オブジェクト）があります。
4. 状態を持つものは、ロード時に一度だけシミュレーションします。render(t) では読み取りのみを行います。
5. ビルドします：node sims/build.mjs <name>。
6. 各ビートの静止画を確認します： node sims/capture.mjs <name> --stills 0,2,5,8,12,16,20 --cols 4 --out out/sims/<name>-review.png。 シートを開き、レビュー手順に従って確認します。0 フレーム目に力強さがあること、各フレームの焦点が 1 つであること、ブルームで白飛びしている箇所がないこと、スマートフォンでも文字が読めること、ラベルが被写体を覆わないことを確認します。修正して、再度確認します。
7. サウンドには、音楽トラック（--music。シムには cfg.beats が渡され、ドロップに合わせる必要があります）、生成した音のベッド（sims/engine/sound.py のように python3 sims/<name>/sound.py を実行）、または ffmpeg で事前にミックスした両方を使えます。
8. キャプチャします：node sims/capture.mjs <name> --size 1080x1350 --out out/sims/<name>.mp4。完成とする前に、最終ファイルのシートを確認します。

サンプルから得られた教訓

• ブルームは細部をつぶします。発光レイヤーと加算レイヤーは約 1.0 未満に保ち、見せ場となる瞬間だけ強めます。
• 光沢のある金属に低い位置から日光が当たると、白い筋ができます。大きな面では roughness ≥ 0.45、envMapIntensity ≈ 0.5 を使います。
• 主役は群衆よりも、1 つのオブジェクトが効果的です。パーツが被写体を隠す場合は、どかすか、フェードアウトします。
• チャプター、各ステップの一行キャプション、実数値を使ったラベルを組み合わせると、シミュレーションは単なる見た目の楽しさではなく、解説として伝わります。
• オブジェクトの周囲を 10 回周回するより、カメラでオブジェクトの内部を通り抜けるほうが価値があります。