compute_bloom

English | 日本語

compute_bloom

概要

Bloom は、高輝度部分を抽出してぼかし、元の scene へ重ねることで光のにじみを作るポストプロセスです。このサンプルは samples/bloom の Fragment Shader 版と比較するための Compute Shader 版で、bright extract、水平/垂直 blur、composite を複数の compute dispatch と storage texture で構成しています。

現在の core webg/ComputeBloomPass.js は staged bloom として動作します。small / medium / large の 3 段階に分けて明るい部分を抽出し、それぞれ別の低解像度 target と sample step で blur します。Small / Medium / Large Threshold はどの明るさから各段に入るかを決め、Small / Medium / Large Strength は各段から blur へ渡す光量を決めます。最終的には 3 段の blur を合計し、全体の Strength と Exposure を使って scene へ加算します。

このサンプルは、core の staged ComputeBloomPass が持つ中間 target のうち、調整に必要な view だけを表示します。V または View selector では scene / extract / small / medium / large / blur / composite を切り替えます。extract は small 段の bright-pass 結果、small / medium / large は各段階の blur 結果、blur は 3 段階の blur を合計した Bloom 成分です。中間 target は rgba16float で保持し、広い blur で小さくなった値が 8bit storage target で黒に量子化される問題を避けます。既存の Fragment Shader 版である webg/BloomPass.js は変更していません。

実行方法

実行ファイルは ./compute_bloom.html です
WebGPU に対応したブラウザで開き、必要に応じて help panel と CommandPalette と合わせて確認してください

確認ポイント

samples/bloom と同じ種類の全体 Strength、Soft Knee、Exposure に加えて、Small / Medium / Large Threshold、Small / Medium / Large Strength、Small / Medium / Large Scale、Small / Medium / Large Step を操作できます。同じ blur radius と blur iterations でも光の強い部分だけ広くにじませられるかを確認してください。

Small / Medium / Large Threshold を small <= medium <= large の順に並べると、「より明るいものほど遠くまで広がる」という関係が読み取りやすくなります。Small / Medium / Large Step は blur の tap 間隔で、値を大きくすると同じ tap 数でも広く薄く広がります。Small / Medium / Large Scale を下げると各段階の extract と blur の対象画素数が減るため、GPU負荷を下げられます。Soft Knee は threshold 近傍のつながり、Exposure は最終的な明るさ、全体 Strength は Bloom の合成量です。

中心の大きな球は Bloom 抽出用の発光レベルを 0.60 から 0.95 までゆっくり往復させます。発光強度が threshold をまたぐと、small / medium / large のどの段階に入るかが変わるため、光が強くなるほど背景側へのにじみ半径が変化するかを確認できます。

中心球の下には、user/compute_bloom0 と同じ考え方で 0.50 から 1.00 まで 0.05 刻みの白い固定発光体を並べています。中心球のアニメーションで 0.70 から 0.80 付近の急な変化が見えた場合、同じ画面内の固定列を見ることで、どの輝度から small / medium / large の寄与が目立つかを比較できます。調査対象を絞るため、以前の背景側の固定色付き球は外しています。

既定値は smallThreshold=0.60、mediumThreshold=0.75、largeThreshold=0.90、smallStrength=1.00、mediumStrength=1.33、largeStrength=2.00、smallSampleStep=2、mediumSampleStep=3、largeSampleStep=6、softKnee=0.40、strength=0.70、exposure=0.80、blurRadius=7、blurIterations=2 です。実用化では、この staged 構成に加えて、sRGB/Linear の扱い、モバイル GPU での bandwidth、tone mapping の順序も合わせて設計する必要があります。