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秒時点のスクリーンショットを見て「日食の瞬間を迎えた大聖堂サイズの時計」と伝わらないなら、完成ではありません。オブジェクトを追加する前に、構図、マテリアル、カメラを調整してください。