Teardown Cinema

teardown（Three.jsコード、1つのクロック、フレームごとのキャプチャ、コードで作られたスコア）と同じエンジンを使用し、目的は正反対です。Teardownは説明するためパネルを表示します。Cinemaは見せるため、画面には世界以外何も表示しません。実用的な例として、このスキル内の example/orison（30秒フィルム Orison とそのインタラクティブページ）がすべてのファイルとともに含まれています。

このスキルを使用するには、teardown スキルが隣に必要です（node_modules（three, esbuild, playwright）、sims/capture.mjs、sfx/ のため）。キャプチャはPlaywright独自のChromiumを必要としません。CHROMIUM にインストール済みのChromeを設定してください。ダウンロードが停止した場合、Chromeが動作します。

手順（順番通り）

1枚のマスター画像。 任意の強力な画像モデルで複雑な絵を生成します。Codexアプリを使用する場合: codex exec --skip-git-repo-check -s workspace-write -C <dir> - < prompt.txt。プロンプトはマシンの外部に出るため、機密コンテンツは含めないでください。名前を付けられる構造（ドーム、リブ、リング、リボンなど）を持つものを依頼してください。Codexはどの画像モデルを使用したか報告しません。
マスターからのテクスチャプレート。 -i master.png で画像を添付し、フラットで正面から見た均一な照明のプレート（ガラスパネル、真っ黒な背景の金属のトレーサリー、シルク、黒い背景の惑星、リング断面、上から見たクリーチャー）を生成します。黒は切り取る部分です。これらのプレートにより、結果は絵画の細部を保持します。1回に1枚ずつ生成してください。
マスターを計測し、再構築する。 画像からピクセル単位で比率を読み取り、ジオメトリを書く前にワールド単位に変換します。初期のミスのほとんどは、誰も比率を測定しなかったことによるものでした。
1つの入力がボディを駆動する。 クリーチャーや機械のビートを選択し、JSとGLSLで記述し、頂点シェーダーですべてのパーツをそのビートからポーズさせます。キーフレームは使用しません。shared/kin.js、shared/glsl.js を参照してください。
フライスルーではなく、ショット。 各ショットはその内部の時間の純粋関数であり、ハードカットとショットごとのグレードを持ちます。カットが映画を作ります。orison-film/shots.js を参照してください。
毎パスでマスターと比較する。 ヒーローフレームを画像の隣にレンダリングし、何が異なるかを書き留めます。修正し、繰り返します。
同じタイムライン上でコードでスコアを作成する（teardownの sfx/ を使用）。 score.py を参照してください。
ページは同じ世界だが、カメラの操作が異なる。 スクロールでパス上の1点を選択、クリックがビート、ドラッグで見回します。orison-live/ を参照してください。

レイアウト

my-film/
  brief/            マスター画像とプロンプト
  assets/           プレート（.jpg、ページにインライン化）
  shared/           ワールド: kin.js, glsl.js, sky.js, creature.js, world.js
  my-film-film/     main.js, shots.js, timeline.json
  my-film-live/     main.js, path.js, audio.js, body.html, style.css
  score.py

コマンド

フィルムのフォルダから実行します。SKILL_DIR はこのスキル、T は隣の teardown スキルです。Windows PowerShell 5.1では、npx.cmd と npm.cmd を使用し、&& は使用しないでください。

node "$SKILL_DIR/build.mjs" ./my-film-film ./my-film-live
export CHROMIUM="C:/Program Files/Google/Chrome/Application/chrome.exe"    # キャプチャはインストール済みChromeを使用可能

# 1フレーム、または選択された品質のシート: --config は {"samples": N} を指す
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --config s.json --still 12.5 --out frame.png
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --config s.json --stills 3,8,12,18,23,29 --cols 3 --out sheet.png

# フィルム全体
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --fps 24 --crf 15 --config s.json --out silent.mp4
python "$T/run_sfx.py" score.py
ffmpeg -i silent.mp4 -i teardown-out/my-score.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart film.mp4

--stills はパレットを通してタイル表示するため、シートに見えるバンディングは誤りです。色とバンディングは、隣のフルフレームで判断してください。

`kit/cinema.js` が提供するもの

new Cinema({canvas, samples, fps, shutter, msaa})、その後 cine.frame(t, draw, look) を使用します。

フィルムフレームはN個のサブフレームの平均です。各サブフレームは、シャッター内の時間（真のモーションブラー）、フォーカス面を保持した状態でのレンズディスク上のカメラ（透明なレイヤーも含めた真の被写界深度）、およびサブピクセルオフセット（アンチエイリアシング）を移動します。ディザリングされたレイマーチングもこれと収束します。ポスト処理は平均化されたHDR画像に対して1回実行されます: ブルーム、アナモルフィックストリーク、1点へのライトシャフト、ACES、グレード、グレイン、ビネット。samples: 1 はライブページ用の同じパイプラインです。

統合Radeon 780M搭載ノートPC、1920x1080での数値: 1フレームあたり32サンプルでエンコードを含め2.3秒: 24fpsで30秒のフィルムに27分。960x480、4サンプルのドラフトではフィルム全体で41秒だったため、ドラフトを自由に使用してください。ライブページは1600x900で全スクロール中37～51fps、他の処理がない状態でのスポット計測ではより高くなりました。キャプチャの出力で gpu: を確認してください。ソフトウェアレンダラーの場合、GPUフラグが有効になっていません。

動作を決めたルール

フレーム内にテキストを入れない。ラベル、数字、タイトルカード、キャプションも不可。 絵がすべてを伝えます。
正確に1つのthree.jsをバンドルする。 build.mjs が強制します。フィルムの近くに2つ目のコピー（プロジェクト独自の node_modules）があると、静かに失敗します: 反射環境がブラーレベルを失い、金属が暗くなります。
レンダリングを同じサイズのマスターの隣に置き、違いを列挙する。 まず比率、次に色。ピクセル単位で位置を測定し、方向に変換します。Orison の類似性のほとんどは、これらのパスから生まれました。
被写界深度は小さなものだけ浅く保つ。 巨大なものに強いぼかしを入れると、ミニチュアに見えます。フィルムのレンズ半径は、26単位のクリーチャーに対して0.012～0.03単位です。
時間サンプルとレンズサンプルはシーケンスを共有してはならない。 共有すると、ブラーが可視的な弧を描きます。レンズには黄金角、時間にはHalton基底5を使用します。
負になりうる値に pow() を使わない。 D3DはNaNを返し、1つのNaNピクセルがブルームを通じて黒い矩形として広がります。x*x と書いてください。1.-ndv ではなく max(1.-ndv,0.) を使用します。キットも入力をサニタイズします。
a > b の逆順 smoothstep(a, b, x) はWindowsで0を返す。 1.-smoothstep(b,a,x) と書いてください。
狭くなる表面にミラーリングされたプレート: セルが丸く保たれるようにメルカトル図法でマッピングし、プレートの大きなセルのみミラーリングします。細かいセルは近くで紙吹雪のようになります。
光源に沿ったパネルは、明るくするのではなく、透明にする。 そうしないと、ガラスのボディ内のものが読めません。
暗い開口部には、中に何か生きているものが必要。 霧を通した薄い輝きが、最初のビートまでそれを支えます。
ライブ雲: 半分の解像度で移動平均を使用し、カメラの近くを密にマーチングします。雲はソフトなので、何も失われません。
ライブページの最初の1秒はシェーダーコンパイル。 最初のフレームの前にコンパイルし、その間は「読み込み中」のテキストなしで小さなパルスを1つ表示します。

ライブページのルール

teardownのライブルール（品質段階、シェーダーのウォームアップ）はすべて適用されます。さらに: マスター画像で開き、シェーダーの準備ができたら3Dに dissolve します。品質段階はフレームが回復したときに戻るだけでなく、下がることもあります。ページにラベルはありません。キャンバスとすべてのボタンにアクセシブルな名前を付けます。クリックターゲットは最低44px。音は最初のジェスチャーの後にのみ開始します。ボディはビートの後に落ち着き、永遠に上昇し続けることはありません。品質は測定されたフレームレートに基づいて、ユーザーに尋ねることなく段階的に下がります。

レビュー

ビデオは見られませんが、フレームは読めます。最初にすべてのショットのシート、シートでフラグが立ったものについてはフルフレーム、次に --stills every:0.2 --from A --to B でトランジション全体を確認します。最終エンコードの1秒あたり1フレームのシートを読む: エンコーダーが何を書き込んだかがわかります。スコアは ffmpeg -af ebur128=peak=true で測定します。人間が一度はフィルムを見てスコアを聞く必要があります。報告するときにその旨を伝えてください。

Claude Artifactのように独自のドキュメントスケルトンを追加するホストの場合は、FRAGMENT=1 を指定してビルドし、PAGE_TITLE で名前を設定します。<name>.fragment.html も書き込まれます。

Teardown Cinema – テキストなしの3D映像制作