mcpField
T
threejs-atmosphere-aerial-perspective

threejs-atmosphere-aerial-perspective

github.com/scottsttsクリエイティブ・メディア94699 回インストール6 日前に更新
リポジトリ

threejs-atmosphere-aerial-perspective について

Three.jsで大気散乱と大気遠近法を実装するためのスキルです。小規模なシーンから惑星や地理空間の世界までを対象とし、散乱パラメーターの一貫性と深度を考慮した合成を重視します。

主な機能

  1. 01解析式またはLUTによる描画方式
  2. 02空の放射輝度と太陽透過率
  3. 03表面までの透過率と散乱積分
  4. 04ワールド単位と大気単位の変換
  5. 05深度を考慮した大気遠近法

活用シーン

  1. 01空と地表の霞を一貫して描画
  2. 02地上から宇宙までの惑星視点の構築
  3. 03地理空間シーンへの大気遠近法の追加
  4. 04大気LUTの統合

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-atmosphere-aerial-perspective

インストール後、Claude Code で/threejs-atmosphere-aerial-perspectiveを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/lut-aerial-perspective/
irradiance.bin
irradiance.exr
THIRD_PARTY_LICENSES.md
transmittance.bin
transmittance.exr
examples/lut-aerial-perspective/
atmosphere-effect.js
examples/lut-aerial-perspective/source/atmosphere/
AerialPerspectiveEffect.ts
AtmosphereMaterialBase.ts
AtmosphereParameters.ts
blackBodyChromaticity.ts
celestialDirections.ts
constants.ts
getAltitudeCorrectionOffset.ts
getSunLightColor.ts
index.ts
IrradianceMaskPass.ts
PrecomputedTexturesLoader.ts
examples/lut-aerial-perspective/source/atmosphere/helpers/
functions.ts
sampleTexture.ts
examples/lut-aerial-perspective/source/atmosphere/shaders/
aerialPerspectiveEffect.frag
aerialPerspectiveEffect.vert
functions.glsl
index.ts
irradianceMask.frag
parameters.glsl
sky.frag
sky.glsl
sky.vert
stars.frag

詳細

大気と空気遠近法

空のレンダリングと空気遠近法は、同じ散乱モデルの異なる表現として扱います。両者で、半径、密度プロファイル、係数、太陽の方向、露出スケール、座標変換を共有する必要があります。

このスキルには、説明的なガイダンスだけでなく、参考になる例やアセットも含まれています。関連する場合は十分に調べ、参照し、場合によってはコピーしてください。むやみに読み飛ばさないでください。

実装ティアの選択

  • 軌道カメラを使用しない小規模なシーン:解析的な高度/距離近似。
  • 惑星の地表から宇宙まで移動するカメラ:レイ積分または事前計算済み LUT。
  • 広大な地理空間ワールド:LUT に加えて、ワールドから惑星への変換、高度補正、深度を考慮した空気遠近法。

実装前にreferences/atmosphere-system-contract.mdを読んでください。LUT/楕円体アーキテクチャと、動的積分、シェルからポストエフェクトへの受け渡しを分けて説明しています。

LUT を使った空と空気遠近法の例と、その source/ モジュールを読み、LUT の例で使用している SkyMaterial、SkyLightProbe、SunDirectionalLight、AerialPerspectiveEffect、事前計算済みテクスチャローダー、太陽/月の方向、レンズフレア、トーンマッピング、ディザリングの処理経路を確認してください。

必須の出力

  • 空の放射輝度。
  • 太陽の透過率/色。
  • カメラから可視面までの区間透過率。
  • 区間内散乱光。
  • マテリアル用のオプションの空の照度。
  • ワールド単位と大気単位の間の明示的なスケール変換。

失敗条件

  • 空と地形の霞で、太陽の方向または係数が異なる。
  • 大気が一様に透明な球体になっている。
  • 軌道移動中のカメラ高度を、局所的な平面座標系で測定している。
  • シーン深度が非線形なのに、線形として扱っている。
  • 誤った放射輝度スケールを隠すために露出を使用している。
  • 大気シェルへの突入時に、大気が急激にフェードする。

適用範囲の境界

このスキルでは、分子/エアロゾルによる空の散乱と、面までの区間における空気遠近法を扱います。天候に応じた雲密度、時間方向の雲の再構成、雲の影には $threejs-volumetric-clouds を使用してください。放射性のオーロラカーテンのボリュームと、その透視投影/正距円筒図法の放射輝度マテリアル、および単体のフィルミック HDR レンズフレア合成には $threejs-procedural-vfx を使用してください。LUT の例におけるレンズフレアが、空の散乱と空気遠近法の合成処理の一段階である場合は、このスキルの対象に含めてください。

コメント