Open Sea — リアルタイムWebGPUオーシャン

WebGPUとThree.js TSLを使い、「Open Sea — Night Storm」という単体で動作するリアルタイム海洋デモを作成してください。 Gerstner波のうねり、FBMによる微細な水面法線、時刻に応じて変化するスペクトルの空を描画してください。 ドラッグによるオービット操作とスクロールによるズーム操作、嵐の強さ・波高スライダーとリアルタイムFPS表示を備えたHUDパネル、カメラが自動で滑るように移動するドリフトモードに対応させてください。ビルド工程なしで単一の静的ページにすべてを収め、レンダラーの起動中は洗練された初期化画面を表示し、WebGPUが利用できない場合も適切に機能を縮小してください。

「Open Sea」という単体で動作するリアルタイム海洋デモを作成してください。起動時にWebGPUの対応状況を検出し、WebGPUが利用できない場合はより軽量なWebGL2レンダラーにフォールバックします。どちらの経路でも同じシーンと操作を維持してください。 Gerstner波のうねり、FBMによる微細な水面法線、時刻に応じて変化するスペクトルの空を描画してください。ドラッグによるオービット操作とスクロールによるズーム操作、海況・時刻スライダーとリアルタイムFPS表示を備えたHUDパネル、カメラが自動で滑るように移動するドリフトモードに対応させてください。ビルド工程なしで単一の静的ページにすべてを収め、レンダラーの起動中は洗練された初期化画面を表示し、モバイルではHUDをタッチ操作でオービットできるボトムシートに折りたたむレイアウトにしてください。