Totality Engine：映画的な蝕の大聖堂

洗練された、視覚的に印象的な、自己完結型の単一ファイルHTML/WebGL体験を、次の名前で作成してください：

totality-engine.html documents/llm-benchmarksに配置してください

アイデアを説明するだけでは不十分です。実際に完全に動作するHTMLファイルを生成し、現在のディレクトリに保存してください。

32秒のシネマティックな短編映像をループ再生します。サンドボックス風のジオラマにしないでください。主役はカメラの演技です。操作機能は、映像を一度最後まで再生した後のおまけとして実装します。

世界観：
皆既日食の食の最大を迎えた、水没したゴシック大聖堂。身廊の床は黒い水に覆われています。翼廊いっぱいに、Totality Engineと呼ばれる巨大な真鍮製の天文時計があります。入れ子状のオーラリーリング、ガラスの惑星、黒い太陽のコア、金具付きの全長40メートルの黒大理石製振り子を備えています。濡れた石灰岩、緑青、ろうそくの炎、金粉。すべてをプロシージャルなコードで生成してください。外部モデル、テクスチャ、画像、ファイルとしてのフォント、音声は使用しないでください。

演出された映像（1つの時計、名前付きのビート、シームレスなループ）：

0.0～4.0秒 DUST
極端なクローズアップ。赤金色の光の筋の中で、1粒の塵が回転します。周囲の状況はほとんど見せません。ゆっくりとプッシュインします。

4.0～10.0秒 NAVE
カメラを引きながら上昇させます。大聖堂の交差部で、黒い水に膝まで浸かっています。リブ・ヴォールトが霧の中へ遠ざかります。振り子が左からフレームインし、重くゆっくりと動き、質量を感じられるほど近くを通過します。カメラを起点に水紋が広がります。

10.0～18.0秒 ASCENT
振り子が上向きに振れる動きに乗って移動します。ヴォールト内にあるオーラリーを見せます。異なる傾斜角を持つ真鍮のリングを少なくとも4重に配置し、異なる大気を持つガラスの惑星を3つ置いてください（雲に覆われた惑星、環を持つ惑星、嵐の帯がある惑星）。そして黒い太陽のコアを配置します。トリフォリウムに沿ってろうそくの群れを置きます。金粉は重力に逆らって上向きに落下します。

18.0～24.0秒 THREAD
カメラをオーラリーの中に通します。環を持つ惑星のガラスを通過させます（透明度のハックではなく、屈折を使うこと）。一拍の間、その環の面に沿って移動し、黒い太陽へ向かって抜けます。振り子の次の振動で、弱い重力レンズのように周囲の光を歪ませます。

24.0～30.0秒 TOTALITY
コロナが白金色の炎のリングへと炸裂し、オーラリーの最外周の車輪になります。時計が1回、音として感じられるように刻みます。すべてのリングが完全な整列位置へ瞬時に収まり、その後コロナが留まります。白へフェードしないでください。炎のリングを背景に、機械全体のシルエットを保ちます。

30.0～32.0秒 CODA
フレーム0と一致する、ゆっくりとした継続動作へ滑らかにつなぎ、ループが見えないようにします。スマッシュカットは使わないでください。

最初の全編再生が終わった後、ドラッグによるオービット操作、マウスホイールによるズーム、「Replay film」コントロールを有効にしてください。一時停止ボタンは常に機能させます。任意で、1～5キーによって各ビートの開始位置へジャンプできるようにします。

シーン構成：
- 前景・中景・背景を明確に分けます。NAVEでは振り子を前景に配置します。ヴォールトと霧で奥行きを表現します。
- 人間のスケールを示す基準物を少なくとも2つ置きます（水没した長椅子、倒れた尖塔、並んだろうそくなど）。機械が巨大であることが伝わるようにしてください。
- 水は実体のあるマテリアルにします。オーラリーの反射、かすかなフレネル効果、ゆっくりしたディスプレイスメント、振り子とカメラによって生じる水紋を表現します。
- ガラスの惑星は、光る球体ではなく厚みのあるガラスにします。少なくとも1つの惑星越しに、歪んだ大聖堂が見えるようにしてください。
- 真鍮には重量感を持たせます。影の中では暗く、縁だけがコロナの光を受けるようにします。
- ろうそくの炎と金粉はインスタンシングします。金粉が上向きに引かれるのは、ASCENTとTOTALITYの間だけにしてください。
- リブ・ヴォールト、フライング・バットレスのシルエット、そして遠い壁にある巨大な円形の薔薇窓／日食の開口部を配置し、黒い太陽と一直線に揃えます。
- パレットは限定し、次の色で固定します。濡れた石灰岩 #8a8680、真鍮 #c4a574、緑青 #2f6f66、食の深紅 #6b1020、コロナ #ffe9c2、黒い水 #05070c、金粉 #e6c27a。シアン、マゼンタ、ネオン、虹色、紫と黒による「AIっぽい見た目」は使用しないでください。
- タイポグラフィは、小さなタイトル「TOTALITY ENGINE」とビート名を1つずつ表示します。ダッシュボード風ではなく、映画的にしてください。

技術要件：
- 安定版のCDNからThree.jsを読み込みます。HTML、CSS、JSはすべてこの1ファイルに含めます。
- すべてのアニメーションを、名前付きのビート区間を持つ単一の経過時間クロックから駆動します。独立したMath.randomループ、シェーダー内のDate.now、シードなしのノイズは禁止です。シード付きRNGのみを使用し、シードは定数0xA2E1にしてください。
- カメラの映像演出には、大きな動きにイーズイン・アウトを使った滑らかな補間を適用します。振り子には重量感のある、より強いイージングを使い、長い余韻を残してTOTALITYへ収束させます。主カメラを直線的なオービットにするのは不合格です。
- 既製マテリアルでごまかさず、カスタムGLSL（ShaderMaterialまたはフルスクリーンパス）を使用します。
1. 水（反射＋フレネル＋ゆっくりしたディスプレイスメント）
2. 黒い太陽のコロナ（スプライトではなく、炎／プラズマ）
3. 振り子のレンズ効果（THREAD中、振り子の球の近くで光を屈折させる）
4. 少なくとも1つの惑星に厚みのあるガラス
- 金粉、ろうそく、繰り返し配置する石／真鍮のセルにはInstancedMeshを使用します。何千もの独立したMeshオブジェクトを生成しないでください。
- ポストプロセスは使用しても構いませんが、ライティングの代わりにしてはいけません。ブルームを使う場合は、コロナとろうそくだけに控えめに適用します。シーン全体にUnrealBloomをかけるのは不合格です。
- 大気感は霧、濡れた反射、日食の開口部で表現します。実際にシェーダーで駆動していない安易な透明コーンを「ゴッドレイ」として使わないでください。
- ブラウザの全画面に対応し、リサイズを処理し、2023年製のノートパソコンで60fpsを目標にします。選択を迫られた場合は、カメラの映像演出を削る前にパーティクル数を減らしてください。
- UIは小さく目立たないものにします。タイトル、現在のビート、一時停止、リプレイだけを表示します。FPSカウンター、dat.gui、デバッグ用ヘルパーを有効なまま残さないでください。
- TODOコメント、擬似コード、プレースホルダー、未実装の関数、「Xがあればもっと良くなる」といった記述は禁止です。
- 読み込み時に映像が自動的に始まるようにします。スタートボタンの背後に静止画を置くだけでは不合格です。

品質基準：
three.jsのサンプルではなく、短編映画のワンシーンのように見える必要があります。26秒時点のスクリーンショットを見て「日食の瞬間を迎えた大聖堂サイズの時計」と伝わらないなら、完成ではありません。オブジェクトを追加する前に、構図、マテリアル、カメラを調整してください。