ポストプロセスマテリアルで中心以外をぼかす(1) マテリアルによる円の表示
妹「ポストプロセスのやつなんだけど、ひょっとしてこれ使うと画面の中心以外をぼかすっていうのが出来たりしない？」
「できると思うけど、何に使うの？」
妹「ロックオンしてる時とかに、そこ以外あんまり見えない感じの演出をやりたいと思ったことがあるんだけど、その時はやり方わからなかったから。画面の真ん中あたりに丸があって、その部分は見えてるんだけど、その回りはぼやけてる」
「丸は、完全にまん丸（正円）のやつ？ それとも楕円型？ どっちかというと楕円の方が簡単かも」
妹「それはあんまり考えてなかったから、とりあえず簡単な方で。あと丸とそれ以外のとこの境目のとこは滑らかに変化して欲しいような」
「それだったら昨日調べてたノードの練習台に丁度いいかもしれない。トゥーンアウトラインより簡単そうだから、先にそっちを作ってしまおう」
「まずマテリアルの根本的な仕組みとして、円を描きたいと思った場合に、円を描くというノードを使ったりはしない。まずマテリアルが現在担当してる点が、その円の範囲内かどうか調べて、範囲内なら色を塗る、範囲外なら元のまま、みたいな考え方をする。これはポストプロセスマテリアルも同じ」
妹「なぜそんなわかりにくいことを」
「そういう仕組みだからしょうがないというか、その方が計算が速かったから世界的にそういう仕組みになったというか」
「で、とりあえず、画面の中心に円を描く仕組みを作った。まん丸にしたい場合はもう少し計算で補正すれば可能。SphereMaskというノードを使うと、中心からの距離に応じて、0～1の数字が返ってくるから、それをそのままエミッシブカラー出力につなぐとこうなる」
妹「丸はそんな感じでよさそうな気がする」
「あとはこれを直接出力せずに、LerpのAlpha値にすればいい。白ければ元のピクセル、黒ければボカしたピクセルが出てくるように。ただこのボカシがちょっと面倒なので、とりあえず今日は回りを黒くするだけにした」
マテリアルによるトゥーンアウトライン研究(3) SceneTextureノードの色々
SceneTexture:SceneDepth（を6000で割った物）
「ポストプロセスマテリアルの中では、色以外の情報も色々操作できる。だいたいSceneTextureというノード経由で、各ピクセルごとの情報を調べることが出来る。あんまり使わなそうなのもあるけど、上の画像は、その場所に表示されてる物体までの距離をそのままエミッシブカラーとして出力したもの。深度情報ともいう」
妹「その絵はなんかカッコイイかもしれない」
「距離が近いほど数字が0に近い＝黒っぽい色になる。逆に遠くにいくと白くなる。距離の単位がよくわかってないんだけど、多分普通のUE4の計測単位で、1=1cmのやつだと思う。何にしても適当な数字で割って表示しないと、1cm以上の距離があるものを白にしちゃうと、画面全体が真っ白になってしまう」
妹「6000で割るのがいいの？」
「6000というのは、サンプルのマテリアルの中で使ってる数字を流用したんだけど、これはマップの寸法とか、見える範囲とか、あとエフェクトの都合とかで変えるものだと思う」
「他にも、各ピクセルごとの法線情報とか、光が当たる前のベースカラーとか、色々おもしろい物が取れるけど、輪郭線で特に関係しそうなのがさっきの深度情報。SceneTextureは、UVs入力に何もつないでない時は、デフォルトで現在担当中のピクセルのデータを返すけど、隣のピクセルの情報とかも調べられる。これを利用して、隣のピクセルとの深度差がデカい場所を黒いピクセルにするというのが、輪郭線処理の基本」
妹「深度差があると輪郭ができる？ わかるようなわからないような」
「さっきの深度の画像でいう、色が違うところが深度差があるという結果が出る。たとえば黒い木と白い空の境目とか。ただ曲面とか斜めになってたりってこともあるから、ちょっとぐらいの違いなら無視して線を出さないようにとか、逆に深度差ないけどここは線が欲しいとか、そのへんは工夫が必要。好みの問題もかなりある部分」
マテリアルによるトゥーンアウトライン研究(2) ポストプロセスマテリアルとは何か
「StylizedRenderingサンプルは全体的にイラスト風の表示になってるけど、おおまかにわけると３つの処理に分かれてる」
・色の塗り方をアニメ風に（セルシェーディング）→普通のマテリアル
・画用紙っぽい質感→ポストプロセスマテリアル
・黒の輪郭線→ポストプロセスマテリアル
「最初のやつは水面とか金属とかと同じ、普通のマテリアルを色々調整して作ってる。そのへんはあとでやるかもしれないけど今回はパスして、ポストプロゼスマテリアルの方を調べる」
妹「ポストプロセスというのは聞いたことがあるような」
「後工程とか、仕上げとかいった意味の英語。ゲームエンジンで使う場合は、ポリゴンを置いて、光をあてて、金属の質感とかアレして、そういうのが終わった後の仕上げ処理をポストプロセスという。UE4の標準設定だと、暗いところに行くとまわりの色が変わって見やすくしたりするけどあれもそう。ポストプロセスでかける特殊効果だからポストプロセスエフェクト」
参考記事
unrealengine.hatenablog.com
「こういう最初から決まった効果をオンオフしたり、強さを調節したりするのもあるんだけど、もっと色々変なことがやりたい人用の仕組みがポストプロセスマテリアル」
妹「普通のマテリアルとはどう違うの？」
「通常のマテリアルは、そのマテリアルが設定されたポリゴンに対して作用するけど、これは画面全体に効く。画面全体の、1ピクセルずつに対して何かしらの処理をする。マテリアルのアセットとして作るのは普通のマテリアルと同じ」
「具体的な設定としてはこのへんが違う。あとポストプロセスじゃないと上手く作動しないノードとか、逆にポストプロセスだと動かないノードとかもある。出力先もエミッシブカラーしかない」
「これが多分一番シンプルなポストプロセスマテリアル。Constant3Vectorで適当な色を設定して、それをエミッシブカラーにつなぐ。それを画面上、全てのピクセルに対してそうするわけだから、結果的に画面中全部ピンクになった」
「もう少し高度なやつ。SceneTexture:PostProcessInput0というのが元のピクセルの色らしいから、それをピンクと半分だけ混ぜるようにした」
妹「なんかお絵かきソフトのレイヤみたい」
「だいたいそんな感じ。ただもっと複雑な事もできるから、プログラムが出来るレイヤ機能みたいな」
