mcpField
T
threejs-bloom

threejs-bloom

github.com/linegel開発11138 回インストール5 週間前に更新
リポジトリ

threejs-bloom について

HDR イメージングパイプラインで Bloom を設計する Three.js スキルです。グラフィックス開発者向けに、入力信号、ブレンドと出力の設定、コストと画質の測定を扱います。

主な機能

  1. 01全シーンまたは選択式 HDR 入力
  2. 02しきい値とソフトニーの設定
  3. 03透明出力のアルファとハロー処理
  4. 04Bloom グラフの順序と出力の所有権
  5. 05性能測定とリソース破棄

活用シーン

  1. 01HDR シーンへのグレア追加
  2. 02選択的な発光寄与の設定
  3. 03透明出力のアルファ挙動の維持
  4. 04出力サイズごとの Bloom コスト測定

インストール

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

$npx skills add https://github.com/linegel/threejs-complete-set-of-skill --skill threejs-bloom

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

同梱ファイル

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

LICENSE
agents/
openai.yaml
references/
hdr-bloom-system.md

詳細

ブルーム

ブルームは、撮像系の点像分布関数の裾野が広がったものとして扱います。最も近い組み込みの光学入力は、シーンリニアの全 HDR です。寄与を選択的に決めるのは演出上の分岐であり、自動的に品質が向上するわけではありません。

1. ソースシーンを検証する

シーンリニア HDR、トーンマッピング前の輝度の疑似カラー画像、ブルームを無効にした最終画像を取得します。ハイライトがクランプされている場合や、ブルームなしではシルエット、マテリアル、ライティングの特徴が失われる場合は、ソースを修正します。

ブルームを無効にしたシーンでも判読可能であり、入力が宣言済みの作業基準におけるクランプされていないシーンリニア HDR になったら、この手順は完了です。

2. 信号を選ぶ

契約信号採用基準
発光、直接応答、反射、透過、空、太陽による光学的なグレアシーン全体の HDR輝度しきい値とニーが寄与の誤差制限を満たす
同じ明るさの放射輝度でも、指定したサーフェスごとに異なる発光をさせる選択的な発光寄与シーン全体のしきい値では誤差制限を満たせず、MRT の差分が許容範囲内
光学的なハイライトと意図的なブーストシーン HDR と選択的なブースト両方の成分が必要で、共有アタッチメントは一度だけ計上する
グレアなしではソースシーンが成立しない、またはすべてのブルーム段階が基準を満たさないブルームを後回しにするソースを修正するか、予算/ビューポートを変更する

分岐を比較する前に露出を安定させます。明るいミラーや透過サーフェスも含め、ブルームエネルギーの誤検出と見逃しの両方を調べます。

ソースの分岐を一つ指定し、その対象外となる要素を許容し、寄与誤差と対象デバイスのコストが宣言済みの制限を満たしたら、この手順は完了です。

3. シーンパスを一つ構築する

シーン全体のブルームと選択的なブルームの両方に、一つの HDR シーントラバーサルを使用します。シーン全体のブルームでは、シーン出力を読み取ります。選択的なブルームでは、同じパスに emissive MRT 出力を追加し、BlendMode(MaterialBlending) を設定します。マテリアルのアルファと一致する RGB 規約を用いて、寄与を表す RGBA を明示的に指定します。ブレンド係数だけでは、値がそのままの emissive vec3 や二重のプリマルチプライは修正できません。リファレンスには、マテリアルごとの式と修正済みのエミッターが含まれています。

r185 では、マテリアルレベルの mrtNode マージによって、適用されるブレンドモードのマップが失われることがあります。標準の選択的パスでは通常の emissiveNode を使用してください。可視の発光とブルーム寄与を分ける必要がある場合に限り、計測済みの別個の寄与パス、またはソースを検証したカスタムマージを使用します。

ブルーム RGB を追加する前に、最終出力のアルファ分岐を選びます。

  • 不透明な出力、または合成済みの出力:vec4(scene.rgb + bloom.rgb, 1) を使用します。
  • 透明で、カバレッジによってクリップされる出力:vec4(scene.rgb + bloom.rgb, scene.a) を使用し、ソースのカバレッジ外のグレアが破棄されることを明示的に許容します。
  • ソースのカバレッジ外のハローを維持する必要がある透明出力:renderOutput() の前に既知の背景へ合成するか、明示的なカバレッジ/合成契約とともに、グレア RGB を別個に出力します。

ソースのアルファを変更しないままでは、透明なハローを維持できるとは言えません。挿入順序の両方と、選択したプリマルチプライ/ストレートアルファのポリシーで、透明な寄与の重なり方を検証します。

シーントラバーサルの回数を把握し、各寄与に意図した深度/ソート/ブレンド/アルファ状態が適用され、重なった寄与が正しく累積し、最終出力のアルファ分岐でソースのカバレッジ外のハローを破棄、合成、または別個に表現するか明示できたら、この手順は完了です。

シーン全体、選択的、またはハイブリッドのグラフ、あるいは透明な選択的寄与を実装する場合は、 r185 graphs and transparent blending を参照してください。

4. しきい値とフットプリントを設定する

しきい値の基準を指定します。

  • シーン基準:ブルーム入力の輝度基準で固定します。
  • 露出適用後の線形値:現在の適応露出から変換します。
  • ディスプレイ基準:宣言されたトーン/出力経路の逆変換が安定している場合にのみ使用します。

露出適用後の線形値に基づくルールでは、しきい値とソフトニーを両方とも正の露出値で割ります。検証済みの非線形スカラー値に基づくルールでは、両方の端点を逆変換し、差を求めます。ディスプレイ輝度の逆変換が定義できない場合は拒否します。標準のニーには正の値を必須とするか、個別に検証済みのハードしきい値分岐を実装します。radius は物理的な半径ではなく、ミップ間の広がりとして扱います。ビューポートと DPR の最小値および最大値を検証します。標準の r185 の 5 段階チェーンには、次が必要です。

floor(bloomScale * min(drawingBufferWidth, drawingBufferHeight)) >= 16

しきい値の単位と更新の担当者が明示され、ハローが端点のビューに合格し、最深ミップが出荷対象のすべてのサイズで有効であれば、この手順は完了です。

広がり、スケール、または標準外の光学的フットプリントを調整する場合は、 BloomNode の PSF と処理負荷を参照してください。

5. 最終画像のグラフに組み込む

次の順序をデフォルトとして使用します。

stable scene-linear HDR
  -> temporal resolve, when present
  -> excluded transparent/refractive layers
  -> pre-bloom meter tap
  -> bloom extraction, blur, and RGB add
  -> adapted exposure
  -> tone map, grade, and one output conversion

テンポラル解決を迂回する選択的入力では、サブピクセルまたは不連続な発光の安定性についても判断が必要です。視覚的な仕様に含まれない限り、UI と診断表示は HDR ブルームの外に置きます。アクティブな出力グラフを変更した後は、RenderPipeline.needsUpdate = true を設定します。

ブルームの担当者が 1 つであること、許可された各メーター、露出、トーンマップ、アルファ処理、出力変換の担当者がそれぞれ 1 つであること、選択した出力アルファの分岐が表示まで維持されること、ブルームを無効にしたグラフに実際に切り替えられることを確認できれば、この手順は完了です。

しきい値を露出に連動させる場合や最終出力の担当者を選ぶ場合は、 露出、出力、ライフサイクルを参照してください。

露出連動しきい値、トーンマッピング、グレーディング、出力変換には $threejs-exposure-color-grading を使用します。シーンパス、MRT 信号、透明オブジェクトの描画順序、または最終グラフを他のエフェクトと共有する場合は $threejs-image-pipeline を使用します。

6. 計測し、負荷を軽減し、破棄する

ウォームアップ後のグラフを並べて計測します。シーンのみ、シーン全体のブルーム、寄与 MRT を含むシーン、該当する場合は選択的/ハイブリッドブルームを計測します。物理ピクセル数、スケール、アタッチメントの形式、ターゲットの一覧、透明オブジェクトの画面占有率、継続時の時間、追加の処理時間を報告します。ピクセル処理がボトルネックで目標を達成できない場合は、まずブルームのスケールを下げてから再計測します。シーン全体の入力にすると、負荷の高いフル解像度の寄与アタッチメントを削減できる場合があります。最小ミップ、メモリ、温度、または追加処理時間の条件をなお満たせない場合は、ブルームを無効にします。

無効化パスでは出力ノードを置き換え、パイプラインをダーティとしてマークし、最後の GPU 使用後に BloomNode と専用の寄与リソースを破棄します。ユニフォームの更新ではグラフは再構築されません。構造的な再構築には新しいノードを使用するか、冪等性のあるピン留め済みの修正を適用します。標準のセットアップではマテリアルが追加されるためです。レンダラー/デバイスの喪失後、または形式の世代が変わった場合は、エビデンスを作り直します。

出荷対象の各ティアが固定キャプチャと継続時の対象デバイス予算を満たし、ブルーム無効時の計測でブルーム処理の時間がなくなり、有効化/無効化、リサイズ、破棄を繰り返してもリソースが安定することを確認できれば、この手順は完了です。

内部ストレージ/処理負荷を正確に計算する場合や、条件を満たせなかった原因を調べる場合は、 予算と受け入れ条件を参照してください。

コメント