【UE4】ポストプロセスマテリアルの基本を押さえよう！
ポストプロセスによる画面効果を自作できる「ポストプロセスマテリアル」。
その基本的な実装方法を自学を兼ねまとめてみました。
作例などは通常のマテリアル制作にも応用できるかも？
目次
ポストプロセスマテリアル ～ 応用
3-1. 効果範囲をマスク
3-2. 効果具合を調節
3-3. パラメータを動的に変化させるポストプロセスマテリアル ～ 作例
4-1. 画面をモノクロ化
4-2. 色反転
4-3. Photoshop的レイヤー効果
4-4. ノイズ表示
4-5. マスク効果で画面フチ演出
4-6. 画面ズーム演出- 参考
ポストプロセスの表示準備
適当なブループリント（ここではActor）を作成 ＆ ワールドに配置し、
「コンポーネントを追加」からPost Processコンポーネントを追加。
作成したポストプロセスマテリアルはPost Processコンポーネント → 詳細タブ内の
「ポストプロセスセッティング → Array」または「ポストプロセスボリューム → Rendering Features → Post Process Materials → Array」にセットして使用。
ポストプロセスマテリアル ～ 基本
始めに新規マテリアルを作成。
詳細タブ → 「Material Domain」 を「Post Process」に。
何もノードを接続していない現時点では、ただ「画面に"無"を表示するポストプロセス」。
次に、グラフ上に「SceneTexture」ノードを配置。
詳細タブから 「Scene Texture Id」を「PostProcessInput0」に。
すると「元の表示画面をそのまま画面に表示するポストプロセス」に！
ここで「ComponentMask」ノードで元画面のRGB要素を分解し、
「MakeFloat3」ノードで分解した要素を再び合成してみる。
現時点では結果は先ほどと変わらないものの・・・
「Multiply」ノードでR要素の値を2倍にしてみると、画面が赤っぽく！
これで「画面全体が赤っぽくなるポストプロセス」の完成！👍
あとは通常のマテリアル作成と同様、ノードをこねくり回して画面効果を作っていきます。
ポストプロセスマテリアル ～ 応用
効果範囲をマスク
ポストプロセスを画面の一部分だけに適用させたい場合はこのようなマスク処理で。
白黒の「マスク用テクスチャ」を元に、白い箇所は元画面を表示し、黒い箇所は加工画面を表示。最後に2つの画面情報をAddノードで合成することでマスク効果のできあがり。
マスクテクスチャ次第でオシャレな効果も？
効果具合を調節
「Lerp」ノードで2つのデータ（元画面と加工画面）の割合を調節。
パラメータ「Alpha」に与える値が
0.0の場合、元画面のみに
0.5の場合、元画面と加工画面が半々に
1.0の場合、加工画面のみに
マテリアルからマテリアルインスタンスを作成。
パラメータの値をぐりぐり変更して確認できるように。
副次的なおまけ機能として、
パラメータ「Alpha」の値が「0.0未満」または「1.0より大きい」と出力結果が極端な見た目に。
パラメータを動的に変化させる
ポストプロセスマテリアル内のパラメータをBP等から動的に変化させたい場合、
通常のマテリアルとは違い、事前に一工夫が必要！
パラメータマテリアルコレクションという機能を活用する必要があります。
[参考]
・Material Parameter Collections | Unreal Engine Documentation
・複数のマテリアルに共通の設定値を用意するには - ### 開発めも
「マテリアルパラメータコレクション」アセットを新規作成し、パラメータを作成。
通常のパラメータノードの代わりに「Collection Parameter」ノードを接続し、
詳細タブから使いたい Collection と Parameter Name を設定。
1つのマテリアル内から参照できるCollectionは最大2つまでという仕様があるため注意！（3つ以上参照した場合はエラーが発生）
あとはBPから「Set Scalar Parameter Value」ノードを用いて、「TimeLine」ノード等でマテリアルパラメータコレクション内のパラメータを変化させると・・・
「ポストプロセス内のパラメータをBPで動的に変化させる処理」の完成！👍
ポストプロセスマテリアル ～ 作例
・画面をモノクロ化
RGB要素それぞれを「BT.601」形式で重み付けして計算。
V = 0.299×R + 0.587×G + 0.114×B
・色反転
「OneMinus（1-x）」ノードでRGB要素それぞれの値を反転。
・Photoshop的レイヤー効果
#UE4 #UE4Study
— Rwi (@rwiiug) 2020年6月25日
画面全体にPhotoshop的なレイヤー効果を乗せられるポストプロセスマテリアルができました。
乗算、加算、比較（明/暗）、スクリーン、オーバーレイあたりの効果が扱いやすくて実用的かな？ pic.twitter.com/iEcC6917tz
https://blueprintue.com/blueprint/ma9pm35a/
範囲選択 → 「Ctrl ＋ c」「Ctrl ＋ v」 または リンク先の「Code to Copy」でUE4内にコピペできます
UE4標準のBlendノードでレイヤー効果をお手軽に反映できる。
・ノイズ表示
「Custom」ノードを用いてノイズを発生させるポストプロセスマテリアル。
通常のマテリアルとして利用しても便利かも？
#UE4 謎のノイズマテリアルができました。Seed値を極端な値に設定すると形容し難いノイズパターンに。何かに使えるかな・・・？ pic.twitter.com/Tox4X9WZaG
— Rwi (@rwiiug) 2020年6月15日
https://blueprintue.com/blueprint/4utlx1cg/
[参考]
「画面全体にノイズを出力するポストプロセス」
https://qiita.com/dgtanaka/items/13e643fafeb007961601
・マスク効果で画面フチ演出
#UE4 #UE4Study
— Rwi (@rwiiug) 2020年6月24日
画面枠？的な表現に使えそうなポストプロセスマテリアルができました。色も変えられるよ。 pic.twitter.com/AwqZp8V4D7
https://blueprintue.com/blueprint/_m1tqhvq/
・画面ズーム演出
#UE4 #UE4Study
— Rwi (@rwiiug) 2020年6月23日
ポストプロセスマテリアルで画面ズームっぽい演出効果が作れました。平行投影（Orthografhic）設定のカメラでも使えるので2Dゲームで役に立つかも！ pic.twitter.com/rcyDV5ON99
ズーム処理をもう少し活用してみるテスト（BPでズーム率＆ズーム対象を切り替え） pic.twitter.com/Mm36WKODAf
— Rwi (@rwiiug) 2020年6月26日
https://blueprintue.com/blueprint/_-xfkijs/
画面外の表示が気になる場合、上記の「マスク効果で画面フチ演出」ポストプロセスと組み合わせると違和感をある程度軽減できます。（「ズーム演出」の前に「フチ演出」を先に実行）
平行投影カメラの場合、カメラ設定でOrtho Widthの値を変化させても同じようなズーム効果を得られますが、MipMap等の処理関係でグラフィックには差異が生まれます。
「ドット絵感」の好みに合わせてご選択を。
Ortho Width：640 → 64
ポストプロセス：ズーム率10倍
参考
【マテリアル】
・Math 式 | Unreal Engine Documentation
・ブレンド | Unreal Engine Documentation
・もんしょの巣穴blog [UE4] マテリアルノードの解説 その1
・UnrealEngine4マテリアルレシピ - kurosaurus - BOOTH
・UE4でHLSLをはじめよう！-基礎の基礎編- - POKOTARO屋 - BOOTH
【ポストプロセス】
・ドット絵風モザイク https://youtu.be/tJTdgoXZWcM?t=4757
・【UE4】お手軽白黒ドット表現 【★☆】 | キンアジのブログ
・【UE4】ポストプロセスマテリアルで画面をいろいろいじる-前編 【★★】 | キンアジのブログ
・【UE4】いろんな画面のゆがみ【★★】 | キンアジのブログ
・UE4.20.3でブラウン管ポストエフェクトを作るの巻 - 🌥制作記録🌥
・UE4でRGBずらしPostProcessMaterialを作る - 🌥制作記録🌥
【マテリアルパラメータコレクション】
・Material Parameter Collections | Unreal Engine Documentation
・複数のマテリアルに共通の設定値を用意するには - ### 開発めも
関連記事：
rwiiug.hatenablog.com
rwiiug.hatenablog.com
