threejs-sky-atmosphere-and-haze について
threejs-sky-atmosphere-and-hazeは、Three.jsで空の輸送、大気ヘイズ、大気由来のライティングを実装するためのスキルです。作成型とLUT方式、生成物の依存関係、合成ルール、各レンダリング分岐の検証方法を説明します。
主な機能
- 01作成型の空とヘイズの実装指針
- 02コンパクトおよび高次LUT方式
- 03大気生成物の依存関係管理
- 04深度対応の空中遠近合成
- 05大気ライティングの受け渡し指針
- 06数値と視覚による検証
活用シーン
- 01シーンに適した大気モデルの選択
- 02レンダリングシーンへの深度対応ヘイズ追加
- 03カメラやシーン入力の変化に応じたLUT更新
- 04数値と視覚の基準による大気レンダリングの確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ linegel/ threejs-complete-set-of-skill --skill threejs-sky-atmosphere-and-hazeインストール後、Claude Code で/threejs-sky-atmosphere-and-hazeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSEagents/openai.yamlreferences/atmosphere-transport.mdbody-depth-and-composition.md詳細
空、空気、ヘイズ
すべてのブランチを、1つの大気モデル、1つのシーンリニアHDRパス、1つの最終出力の担当者を中心に構成します。
プロセス
1. 輸送方式の主張を選択する
要求された観測可能性を満たすブランチのうち、最もコストの低いものを選択します。
| 必要なもの | ブランチ | 妥当な主張 |
|---|---|---|
| 地域ごとに作成した空、距離ヘイズ、高度ヘイズ | SkyMesh と TSL フォグ/ヘイズ | 範囲が限られたローカル座標系で作成した見た目 |
| リアルタイムの惑星規模の空と大気遠近法 | コンパクトな Hillaire 方式 LUT | 測定誤差の範囲内で、高次の輸送を近似 |
| 固定された大気で、より厳密な分光・角度精度が必要 | Bruneton 方式の散乱次数、またはオフライン計算 | 選択した参照との比較で精度を実証 |
カメラや太陽が変化する場合は、コンパクトなブランチを使用します。再生成コストと高次元のプロダクトが実際のワークロードに適合する場合は、高次のブランチを使用します。オフライン積分器は、可視ピクセルのランタイム処理ではなく、参照用の根拠として維持します。
完了条件: 実装で1つのブランチ、その対応する空間領域、物理ベースか作成した見た目かの主張、および採用を判断する誤差または視覚的基準が明示されています。
2. 1つのモデルを確立する
半径、位置、積分ステップに使用する長さの単位を1つ定めます。消散係数/散乱係数はその逆数単位で保存し、beta * ds が無次元になるようにします。天体またはローカル座標系、原点の方針、高度モデル、太陽方向の規約、分光/作業基底、および太陽光源が法線放射照度か有限円盤の放射輝度かを定義します。
WebGPURenderer を初期化し、renderer.init() の完了を待ってから、計算/ストレージ用プロダクトを割り当てる前にネイティブの WebGPU バックエンドを確認します。輸送データには NoColorSpace を使用し、ホストの出力段階まで放射輝度をシーンリニアに保ちます。
物理的な次元を持つ消散、LUT の放射測定、マッピング方程式、位相の規約、プロダクトの依存関係、インポートした LUT/プロダクトの互換性、または単位同等性を確認する単一のフィクスチャについては、 references/atmosphere-transport.md を参照してください。
完了条件: すべての生成側と利用側で、座標系、長さの換算、太陽の規約、放射測定の基底が一致しています。また、物理的な次元を持つ消散では、CPU と GPU でフィクスチャの光学的深さも一致しています。
3. 依存関係の順序でプロダクトを構築する
作成したインシーンブランチは、空と距離/高さフォグを共有モデルから直接サンプリングします。フォグが深度対応の独立したポスト処理である場合に限り、ホスト深度が必要です。コンパクトな LUT ブランチでは、ブランチが選択されたという理由だけでプロダクトを割り当てないでください。コンシューマーに応じてプロダクトを許可します。
| プロダクト | 次の場合にのみ割り当てる |
|---|---|
| 透過率 | 許可された空、大気散乱、またはライティングのパスが、直接、または依存プロダクトを通じて必要とする |
| 多重散乱 | 許可された空、大気散乱、またはライティングのクロージャーに高次の応答が含まれる |
| 放射照度 | 許可された拡散ライティングのコンシューマーがサンプリングする |
| 空のビュー | 許可された可視空のコンシューマーがサンプリングする |
| 大気散乱の RGB と RGB 光学的深度 | 許可された深度対応合成コンシューマーがペアのペイロードをサンプリングする |
空のみ、またはライティングのみのブランチでは、大気散乱の割り当ても、大気散乱ビューへの依存関係もありません。
各プロダクトに固有の依存関係キーと最終更新理由を設定します。大気プロファイルと天体の変更はベースプロダクトをダーティーにします。カメラの天体相対姿勢、投影、ビューポート、深度マッピングの変更は、大気散乱プロダクトをダーティーにします。カメラのヨー、投影ジッター、純粋な浮動原点の平行移動では、変更のない天体座標系の LUT は有効なままです。
2D プロダクトの書き込みには StorageTexture と textureStore() を、3D プロダクトの書き込みには Storage3DTexture と storageTexture3D() を使用します。フォーマット、フィルター、ラッピング、ミップマップの所有者を明示的に設定します。renderer.computeAsync() は GPU 処理の完了ではなく、送信として扱います。読み戻し、再利用、破棄の同期には、実際の完了を検知する仕組みを使用します。
完了条件: サンプリングされるすべてのプロダクトに、その物理的依存関係とビューへの依存関係がすべて示されていること。どのコンシューマーも、新しい依存関係と古い依存プロダクトを同時に参照できないこと。置き換えられた処理が現在のモデルのエポックを上書きできないこと。許可されていないプロダクトには割り当てが一切なく、依存関係の状態も存在しないこと。カメラのみの変更では、変更のないベース LUT が維持されること。
4. 選択したブランチを合成する
インシーンに作成したブランチでは、SkyMesh と TSL のフォグ/ヘイズをホストシーンにアタッチし、出力をシーンリニアに保ちます。
深度対応の独立したヘイズブランチ、または LUT による大気散乱ブランチでは、ホストシーンのカラーと深度を再利用します。有効なパースペクティブ、リバース、対数、または正投影の深度規約をメートル単位のセグメントに再構築し、そのセグメントと大気が交差する位置を求めて、不透明な天体に最初に入る地点で停止します。不透明な区間の後方にあるシェルで積分を再開しないでください。明示的なカバレッジ、または宣言されたクリア深度のエンコーディングを使って空を分類します。
このブランチの可視面には、次の式を厳密に適用します。
C_out = C_scene * T_segment + S_segment
空のピクセルでは、空の放射輝度とキャリブレーション済みの太陽/月の円盤をサンプリングします。直接光、拡散空光、雲の影、不透明物の可視性、カメラセグメントの光輸送は、それぞれ独立した要素として扱います。出力の表示変換は、renderOutput() または RenderPipeline.outputColorTransform のどちらか一方に任せます。
惑星体、天体の外部にあるカメラ、楕円体、非パースペクティブ深度、またはシェルとポスト処理の受け渡しについては、 references/body-depth-and-composition.md を参照してください。
完了条件: 許可された各インシーンブランチがホスト出力パスに一度だけ到達すること。有効化された深度対応ブランチが、宣言された許容誤差内で既知の位置を再構築し、空と表面のカバレッジを安定させ、ゼロ大気の制御時に C_scene を返すこと。トーンマッピング/出力変換が一度だけ実行されること。
5. 認められたライティングの受け渡しを公開する
別のシステムが大気由来のライティングを利用する場合は、必要な量だけを公開します。
- サンプル時刻、モデルのリビジョン、物理フレーム/原点、サポート、フィルター、経過時間、誤差。
- サンプルから太陽への単位方向と円盤の角半径。
- 校正済みの太陽量、単位、基底。
- 大気による減衰が適用済みの直射日光、または減衰前の光源と大気透過率。
- 方向別の空の放射輝度、法線に依存する空の放射照度、およびそれぞれが直射円盤を含むかどうか。
- カメラ区間の RGB 透過率と RGB 散乱光。
雲は雲のみの光学的厚さを追加し、ジオメトリは可視性を追加し、水は独自の経路減衰を追加します。利用側は大気の直射光の形式を 1 つ選び、各係数を 1 回だけ適用します。
完了条件: ビジュアル専用の分岐に未使用のライティングインターフェースがなく、ライティングを利用する各システムが量、単位、フレーム、サンプル経過時間、含まれる減衰を特定できること。また、係数のトレースにより、大気、雲、ジオメトリ、水、大気遠近法がそれぞれ最大 1 回だけ適用されていることを確認できること。
6. 選択した分岐を検証する
実際に使用する分岐の仕組みを検証します。
- テクセル中心、境界、地平線の分割、方位角の継ぎ目での LUT の順方向/逆方向マッピング。
- 位相関数の正規化と順方向ローブの符号。
- 高精度な参照値との比較による、光学的厚さ、放射輝度、エネルギーの収束。
- 天体との交差判定と、有効になっているすべての深度エンコーディング。
- パラメーター、カメラ、ジッター、ビューポート、原点の変更時のプロダクト無効化。
- 固定ビューでのリニア HDR による、空、地平線、夜間、地表付近の霞、外部カメラの診断。
- 作成、リサイズ/品質ティア切り替え、完了、破棄における所有権。
完了条件: 有効なすべての分岐が数値および視覚のゲートに合格し、各診断が表示するプロダクトのリビジョンを明示していること。また、リサイズ/品質ティア切り替えを繰り返しても、保持されるプロダクトごとに有効な世代が 1 つだけ残ること。
失敗の兆候
| 症状 | 調査対象 |
|---|---|
| 太陽と反対側にハローが現れる | 位相方向の符号 |
| ワールドスケールによって霞が変化する | 距離/係数の換算 |
| 地平線に継ぎ目が現れる、または天体の縁が跳ねる | LUT の継ぎ目、天体の区間、または所有者の切り替え |
| 地形が 2 回暗くなる | 直射光または大気遠近法の係数の所有権 |
| カメラのジッターによってベース LUT が再生成される | 依存関係キーの範囲が広すぎる |
| 軸外の霞が短すぎる | 正規化深度を視線距離と誤認している |
適用範囲の境界
このスキルは、分子/エアロゾルによる空の輸送、大気由来の太陽光/空のライティング、カメラ区間の大気遠近法を担当します。天候に応じた雲の密度と雲のみの影には $threejs-volumetric-clouds を、共有シーン信号と最終出力の所有権には $threejs-image-pipeline を、測光/トーンマッピングには $threejs-exposure-color-grading を、地形/天体の詳細には $threejs-procedural-planets を使用してください。