threejs-bloom について
明るい HDR 信号への反応としてブルームを調整する Three.js スキルです。シーン露出、選択的ブルームの管理方式、合成順序、基礎画像と最終画像の検証を扱います。
主な機能
- 01トーンマッピング前の輝度確認
- 02ブルーム信号と管理方式の選択
- 03しきい値、半径、強度の調整
- 04選択パス後の置換マテリアル復元
- 05露出とトーンマッピング前の合成
活用シーン
- 01シーンの発光要素によるグローの調整
- 02合成シーンへの選択的ブルーム追加
- 03基礎画像との比較による効果確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-bloomインストール後、Claude Code で/threejs-bloomを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlreferences/hdr-bloom-system.md
詳細
ブルーム
ブルームは、明るい HDR 信号に対するカメラ/ディスプレイの応答です。ぼかしを調整する前に、シーンの露出と発光輝度を設定します。
ワークフロー
- トーンマッピング前の輝度を確認します。
- どのシーン値にブルームを適用するか選択します。
- 単一ノードまたはデュアルの選択的レンダリングの所有モデルを選択します。
- HDR でしきい値、半径、滑らかさの幅、強度を調整します。
- 選択的パスでは、置換したすべてのマテリアルをトランザクション方式で復元します。
- 露出/トーンマッピングの前に合成します。
- ベース、寄与分、最終ビューを検証します。
HDR の処理順序、デュアル選択的ブルームのトランザクション、簡潔な発光階層、および各所有モデルのコストと制限については、references/hdr-bloom-system.md を参照してください。
合成済みシーンに選択的ブルームを追加する前に、リファレンスに記載されたマテリアルの置換/復元の所有パターンを適用してください。
失敗条件
- ブルームがエフェクトの唯一の視覚的な表現になっている
- すべての明るいマテリアルで、根拠のない同一の発光倍率を使っている
- トーンマッピング後にしきい値を調整している
- 復元の保証がないまま、選択的ブルームのために毎フレームシーンのマテリアルを変更している
- パスの所有関係が不明確なため、抽出時に透明なパーティクルが消える
- 解像度によってブルームの半径が大きく変化する
- エネルギーを早い段階でクランプするため、ハイライトが灰色になる
ルーティングの境界
測光、適応、トーンマッピング、LUT には $threejs-exposure-color-grading を使用します。ブルームを複数の共有イメージスペースシステムと合成する必要がある場合にのみ、$threejs-image-pipeline を読み込みます。独自の低解像度ターゲットと蓄積履歴を持つピクセル単位のレイ積分器では、ブルームは内部に保持されます。その場合は $threejs-raymarched-space-effects にルーティングします。
コメント
Markdown 対応