ボケの形

被写界深度表現を実装しましたが, なんとなくガウスブラーで画面をボカシていました。実際はカメラのボケというようのは,ガウシアンのボケではなく,カメラの絞りの形状による円形だったり六角形のフラットなボケとなるはずです。今回はガウスブラーではない,カメラの絞りの形状のような形となるブラーの作り方を考えます。

ガウスブラー

まずは,ブルームや被写界深度を実装したときに作った,ガウスブラーの画像を比較までに置いておきます。

f:id:hikita12312:20170926223258p:plain:w600

ブラー無し	ガウスブラー

なんだかボケの輪郭がボヤッとしてますね。

ディスクブラー

円形のボケを実装します。以下のスライドの134ページ目あたりを参考にしました。

https://www.slideshare.net/siliconstudio/cedec-2009imagire-day-2009

f:id:hikita12312:20170926223603p:plain:w300

上の図が9x9のディスクブラーを作成するときのサンプリングの概略図です。
シェーダーのBilinear補間を考慮してサンプル位置とサンプル重みを決定します。円に完全にフェッチする4x4(2x1,1x2)のテクセルの矩形が含まれている場合には,目的のテクセルの中央を等しい重みでサンプルしますが, 円周がフェッチするテクセルの矩形に含まれる場合には,含まれる面積を考慮してサンプリング位置を円の内側へずらし,重みも面積に比例するように調整します。また,ブラーをかけて元の画像よりも明度が変わるのを避けるために,サンプリングする重みは正規化して総和が1となるように調整します。

それで出来上がった結果がこちらです。

f:id:hikita12312:20170926224131p:plain:w600

ガウスブラー	ディスクブラー

輝度が高い部分のボケが円形のサンプリングに従ってキレイに丸くなっています。

六角形ブラー

今度は六角形のボケを実装します。以下の記事を参考にしました。

https://colinbarrebrisebois.com/2017/04/18/hexagonal-bokeh-blur-revisited/

実現方法として,まずは1回目のパスで六角形の垂直方向の対角線のブラーと対角120度方向のブラーのMRTを行います。 2回目のパスで1回目の結果を六角形になるように延ばすことで,六角形を作ります。

f:id:hikita12312:20170926224800p:plain:w600

詳しいシェーダーコードなどは,参考にした記事を参照してください。　　 1パス目のMRTを使って作った2本の方向のブラーが頭が良くて,2回めのパスで六角形の余った領域を240度方向への1回のブラーでキレイに埋めています。実は上の図で表した方法は,参考にした記事から少しだけ実装が変えていて, 垂直方向に関連するブラーをするときに+1のオフセットを与えて重なる領域を作らないようにすることで,六角形の対角が重なって見える問題を解決しています。

半径 ${r}$ の六角形を作るときに, ${2r+2r}$ 回程度のテクセルフェッチで実現できます。 MRTを使っている分,コスト面では劣りますが,実質ガウスブラーと同程度のサンプル数で実現できます。