compute_dof

compute_dof

English | 日本語

compute_dof

概要

DoF は、焦点距離に近い面を鮮明に残し、手前や奥をぼかすことで奥行き感を作るポストプロセスです。このサンプルは Compute Shader で DoF を構成し、表示品質と GPU 負荷を調整しやすい多段階ぼかしを使います。

処理の流れは、まず 3D scene を color と sampleable depth を持つ RenderTarget へ描画します。次に scene color を small / medium / large の 3 つの低解像度 target へ downsample し、webg/ComputeDofPass.js 内部の段階 blur でぼかします。最後の dispatch は depth texture を読み、非線形 depth を view-space 距離へ戻して focusDistance と比較し、元 scene と 3 段階の blur 結果を pixel ごとに混ぜます。

ComputeDofPass は webg コアの正式クラスです。このサンプルは webg/ComputeDofPass.js を直接利用し、Compute Shader での多段階ぼかし、sample spacing、低解像度 target の使い方を確認できる構成です。

実行方法

実装の考え方

focus distance は鮮明に残す距離です。focus range は、最大 blur へ到達する距離ではなく、blur stage 1 つ分の距離幅として扱います。つまり、焦点からの距離差を abs(depth - focusDistance) / focusRange として stage 位置へ変換し、0..1 で scene から small blur、1..2 で small から medium blur、2..3 で medium から large blur へ移ります。3 以上は large blur として扱います。

blur radius は各 blur pass が参照する tap 範囲です。blur iterations は水平・垂直 blur を何回積むかを決めます。sample step は tap 間の pixel 間隔で、sampleStep=1 は隣接 pixel を読み、sampleStep=2 は同じ tap 数のまま 1 pixel 飛ばしで読みます。広い blur を作るために tap 数や iteration を増やすだけでなく、sample step と低解像度 target を組み合わせて負荷を抑えることを狙っています。

small scale、medium scale、large scale は、各 blur target の解像度を canvas に対する倍率で指定します。既定値は small 0.7、medium 0.5、large 0.3 です。scale を小さくすると、その stage の downsample と blur の処理画素数が減るため GPU 負荷は下がりやすくなります。ただし最終 composite や scene render は full resolution のままなので、フレーム全体の負荷が同じ割合で下がるとは限りません。

確認ポイント

V で scene / depth / focus / blur / blurSmall / blurMedium / blurLarge / composite を切り替えます。depth では depth の線形化、focus では合焦帯と前後 3 段階の stage、blurSmall、blurMedium、blurLarge では合成前の各 blur texture を確認できます。

focus view では、合焦帯を 0 として、手前側を -1 / -2 / -3、奥側を 1 / 2 / 3 の色で表示します。1 つの物体の中で stage がどのように変化しているかを確認し、輪郭が急に変化して見える場合は focus range、sample step、各 scale を調整してください。

注意点として、このサンプルは Compute Shader で扱いやすい多段階ぼかしを主軸にしています。円形の玉ボケを厳密に再現するものではありませんが、WebGPU でリアルタイムに使う DoF として、表示品質、GPU 負荷、調整しやすさのバランスを確認しやすい構成です。