ぼっちプログラマのメモ

UE4とかUE5とかについて書いたり書かなかったり。

UE4のポストプロセスマテリアルで色々してみた 番外編

UE4のポストプロセスマテリアルで色々してみた」の番外編です。
今回はモザイク表示を実装します。新年一発目がこれです。なにこのブログ

f:id:pafuhana1213:20141207205903j:plain

基本編:
http://pafuhana1213.hatenablog.com/entry/2014/12/02/121649

応用編:
http://pafuhana1213.hatenablog.com/entry/2014/12/09/000111

モザイクフィルタ

今回実装するモザイクフィルタは、以下のサイトで紹介されている
簡易版モザイクフィルタです
wgld.org | WebGL: mosaic フィルタ |
f:id:pafuhana1213:20150102142212j:plain

で、早速ですがBPを載せます。使用しているマテリアル関数の中身は
基本編を参照して下さい。
f:id:pafuhana1213:20180217171249j:plain
結果
f:id:pafuhana1213:20150102142705j:plain

していることは、とてもシンプルです。

  1. TexCoordを(0,0)~(1,1)から(0,0)~(画面解像度)に変換
  2. 特定ボックス内の左上ピクセルまでのオフセット値を取得

これで画面全体にモザイクを掛けることができました。
ボックスサイズの値をパラメータ化することで、こんな演出もできます。

f:id:pafuhana1213:20150102145640g:plain

モザイクフィルタを部分的に掛ける

モザイクは部分的に掛けたくなるのが人のSaGaです。
なので、カスタムデプスを使ってフィルタを部分的に掛けます。
カスタムデプスに関しては、応用編を参照して下さい。

f:id:pafuhana1213:20180217171300j:plain
これで「RenderCustomDepth」が有効になったMeshに対してのみ
モザイクフィルタが掛かるようになりました。

なので、RenderCustomDepth有効, RenderInMainPass無効にした
Meshを配置することでこんな事ができます。
f:id:pafuhana1213:20150102144915g:plain

おまけ すりガラス風フィルタ

f:id:pafuhana1213:20150102150138j:plain
応用編で画像だけ載せた、すりガラス風フィルタの実装方法について

モザイクフィルタの「Mulitply(,-1)ノード」を取り除くだけ。以上


あくまでポストプロセスなので、磨りガラスを表現する際にこれを
使うのはオススメできません。このサイトで紹介されている手法を薦めます。
磨りガラスってなんだよ(哲学)

じゃあなんで紹介したの?と言われると…
偶然出来たからネタになるかなとか…ゴニョゴニョ…