2019年1月19日のUE4新大坂勉強会で登壇した際のスライドになります。

1. そうだ PostProcessMaterial で見た目を変えよう

2. 自己紹介
・Twitter : @MozPaca398
・UE4でゲーム/映像制作の仕事をしています。
・音声合成/ボイスチェンジャーを作るのが趣味です。
・UE4についてのブログ書いてます。
http://mozpaca.hatenablog.com/

3. 自己紹介
UE4非公式アイドルの「Grayちゃん」の音声まわりを色々やってます。
GrayちゃんボイスのUTAU音声ライブラリが爆誕
http://www.gray-chan.com/2018/11/03/utau-voice-library
Grayちゃんボイスが使いやすくなりました
http://www.gray-chan.com/2017/12/31/voice
使ってくれると嬉しい。

4. はじめに
・今回はPostProcess Materialを作る上でどのように作っているかの話をします。
一つのマテリアルの中でこんな意図で機能をつけましたみたいな話です。
・関係なさそうな箇所の解説は入れません。
ある程度UE4が使える人向け。
・エンジン改造はしません。
・Customノードは使いません。
・HLSL, C++は書きません。
・処理負荷は気にしません。
・外部アセットは使いません。
・今回のスライドは後日配布します。
サンプルプロジェクトは配布中です。
https://drive.google.com/open?id=1Q6A0kBrFtBBJAajDLKIOm0QXvZ3WFmVc

5. エンジンのバージョン
使用したバージョンはUE4 4.21.1です。

6. PostProcess Materialとは

7. PostProcess Materialとは

8. 今回の目標
・サイバー感のあるエフェクト的に使用できるマテリアルを作る。
・指定したObjectにのみエフェクトがかかるようにする。
・いい感じにする。

9. ちょっと前にこんなマテリアルを作りました。

10. 呼びにくいので
このスライドでは、
・ノイズ的なアレ→NoiseEffect
・ジャミング的なアレ→NoiseWidget
と呼ぶことにします。

11. 参考にしたもの
・マテリアル式リファレンス(公式ドキュメント)
http://api.unrealengine.com/JPN/Engine/Rendering/Materials/ExpressionReference/
・Unityのエフェクト紹介動画
https://www.youtube.com/watch?v=cHN7p4BUpkw
・その他マテリアル関係のブログ、Wikiなど。

13. 見よう見まねで作ってみる
このあたりから真似るのが簡単そう？
・画面全体がぶれて見える。
・ずれている画像は色が違う（何かしらの要素が薄い）
・重なっている箇所は半透明で元の画像の上に重ねる。

14. できた
なんか違うけど、まぁいいか。

15. 最終的に出来上がったものがこちら。

17. 参考したのか疑問に思うレベルで違うMaterialになりました。

18. PostProcessの作り方の手順
・前準備をする(Custom Depthの設定など)
・Materialを組む。
・PostProcessVolumeに適応する。

19. 前準備の話

20. PostProcess Materialを個別のObjectにかける方法
個別にエフェクトをかけたい場合は
Objectの詳細タブから
Rendering/Render CustomDepthに
チェックを入れておく必要があります。

21. PostProcess Materialを個別のObjectにかける方法
Render CustomDepth
Off
Render CustomDepth
On

22. NoiseEffectのMaterial

23. 見えない

24. よし、機能ごとにMaterial Functionでまとめよう。

25. NoiseEffectのMaterial

26. 見えない

27. NoiseEffect Materialの中にある機能について
一つのMaterialの中に14つの関数が含まれています。
・縞模様をTextureで追加する。
・NormalMapのUVアニメーションを行う。
・ブラウン管のようなメッシュ状の模様を追加する。
・エフェクトをかけるものをDepthで判別する。
・ビネット効果をかける。
・カラー版なんちゃって色収差。
・ノーマル版なんちゃって色収差。
・2つの色収差を混ぜ合わせる。

28. Material Functionの話

29. MF_DepthChecker

30. MF_DepthCheckerの概要
対象のRender Custom Depthにチェックが入っているものにエフェクトをかけるためのものです。
元の画像とエフェクトをかけた画像の線形補間に使用します。
Input Uvs
・エフェクトで使用しているUVをScene DepthとCustom Depthに渡す。
Output Alpha
・Linear Interpolate(Lerp)ノードのAlphaに渡す。
※使用しているSphere MaskのRadiusとHardnessの値は0です。

31. MF_DepthCheckerの例

33. MF_NormalDistortion

34. MF_NormalDistortionの概要
Normalの画像を任意の方向にスクロールさせる機能です。
SmoothStepでCustomノード使ってるのは勘弁してください。
Output Distortion
・UVを更新したNormalを出力する。
色は次のノード任せ。

35. MF_NormalDistortionの例

37. MF_StrechUV

38. MF_StrechUVの概要
UVを伸縮させたりズラしたりする機能です。
Output UVs
・伸縮させたりズラしたりしたUVを出力します。

39. MF_StrechUVの例

41. MF_FlushSine

42. MF_FlushSineの概要
StrechUV関数内で使用している関数です。
一定間隔ごとにSineを使用して返す値を変動させるものです。
「0～1」と「-1～1」で返す値を分けています。
Input Speed
・値が変動する速度、値が大きいほど早い。
Output [0, 1]
・変動した値を0～1の範囲で返す。
Output [-1, 1]
・変動した値を-1～1の範囲で返す。

43. MF_FlushSineの例

45. MF_SideBand

46. MF_SideBandの概要
Textureをベースに横縞模様のエフェクトを描画します。
Output Result
・白黒を描画するためのScalarの値が出力されます。

47. MF_SideBandの例

49. MF_ScreenBaseColor

50. MF_ScreenBaseColorの概要
インチキ色収差。版ずれ表現用の機能です。今回は色の設定をこれで行っています。
Inputで渡したUVとScalar ParameterでPostProcessInput0のUVを制御して、
それぞれの値をRGBとして出力しています。
Input BumpOffset
・どのくらいズレを起こすか決めるパラメータです。
完全に重ねる(0.0にする)と色が白になってしますので要注意。
Input UVs
・全体のUVが移動するエフェクトを作成しているので、
それを考慮してBumpOffsetに加算するパラメータです。
Output R
Output G 各色情報
Output B

51. MF_ScreenBaseColorの例

53. MF_WorldNormal

54. MF_WorldNormalの概要
MF_ScreenBaseColorのNormal版です。
Input BumpOffset
・どのくらいズレを起こすか決めるパラメータです。
完全に重ねる(0.0にする)と色が白になってしますので要注意。
Input UVs
・全体のUVが移動するエフェクトを作成しているので、
それを考慮してBumpOffsetに加算するパラメータです。
Output R
Output G 各色情報
Output B

55. MF_WorldNormalの例

57. MF_ScreenBaseColor MF_WorldNormal

58. MF_CreateNormal

59. MF_CreateNormalの概要
MF_ScreenBaseColorとMF_WorldNormalを混ぜ合わせるための機能です。
2つの関数から同チャンネル同士を乗算して、R-G B-Gを行います。
それらに明るさ調整用のパラメータを乗算して、外積計算結果を出力します。
Output Result
・計算したColor情報を出力します。

60. MF_CreateNormal例

62. MF_NoiseGlitch

63. MF_NoiseGlitchの概要
Noise Textureを拡縮したり、スクロールさせたりする機能です。
最後に黒との線形補間を行い、Texture成分を調整することもできる。
Output NoiseGlitch
・更新したColor情報を出力する。

64. MF_NoiseGlitchの例

66. MF_ScreenContrast

67. MF_ScreenContrastの概要
色の強弱を変更するための関数です。
Input Base
・Color情報を入力する。
Output Result
・色の強弱を変更した結果を出力する。

68. MF_ScreenContrastの例

69. Color Texture

70. MF_Vegnette

71. MF_Vegnetteの概要
なんとなくつけてみた関数です。
なくても問題ありません。
ビネット効果を付け加えるための関数です。
画面全体にエフェクトをかける際はあったほうがいいかもしれません。
Output Vignette
・ビネット効果を付加したものを出力する。

72. MF_Vegnetteの例

74. MF_ScreenColor
本当は繋がっています。

75. MF_ScreenColorの概要
あってもなくても気にならない関数です。
MF_ScreenBaseColorに潰されてます。
元々は色をつけるための関数です。
Input Color
・関数を呼び出すまでのColor情報を入力する。
Output ScreenColor
・もとの色と指定の色を混ぜ込んだ結果を出力する。

76. MF_ScreenColorの例

78. MF_PixelSize

79. MF_PixelSizeの概要
ViewportUVとBufferResolutionから縦縞と横縞の模様を生成します。
これら2つを混ぜ合わせてメッシュ状の模様を作るためのものです。
パラメータを2つ用意すれば、縦縞と横縞それぞれの幅が変えられますが、
今回は共通の幅にするためのパラメータしか用意してません。
Output PixelSize_X
・縦縞模様を出力する。
Output PixelSize_Y
・横縞模様を出力する。

80. MF_PixelSizeの例

82. MF_PixelSimulation

83. MF_PixelSimulationの概要
ブラウン管的な表現を行うための関数です。
Input Color
・Color情報を入力する。内部でRとGのみに分けられる。
Input PixelSize_X
・MF_PixelSizeで出力したXの値を入力する。
・値を一定の範囲で線形補間に使用する。
Input PixelSize_Y
・MF_PixelSizeで出力したYの値を入力する。
・値を一定の範囲で線形補間に使用する。

84. MF_PixelSimulationの例

86. Material Functionの解説終わり

87. 関数を組み立てる

88. 関数を組み立てる

89. 関数を組み立てる

90. 適応の話

91. 関数を組み立てる
配列を追加し、アセットリファレンスで作成したMaterialもしくはInstanceを適応します。

93. おまけ

95. 以上

96. 小ネタ
余談ともいう

97. あると便利なアセット
400 Noise Texture Mega Pack
ノイズやパターン系のテクスチャが405枚入ってます。

98. あると便利なアセット
100+ Noise Texture Pack
ノイズ系のテクスチャが151枚入っています。

99. あると便利なアセット
気にいったMaterialのアセット
Paragon系のやつとか

101. マテリアルパラメータはカテゴリ分けしよう
ここを変更すると、
パラメータのカテゴリ分けができます。
Material Functionの場合は、
Functionの名前をそのままカテゴリにしても
いいかもしれません。

102. マテリアルパラメータはカテゴリ分けしよう
このあたりで手を抜くと、
Material Functionを組み合わせたときに
どのFunctionのパラメータかわからなくなります。

103. 優先度について
Materialエディタの詳細タブで
優先度の変更が行えます。
値の小さいものから実行されるので、
優先度を変更したい場合は設定してください。

104. 優先度について
優先度 高
優先度 低
優先度の値が同じ場合は
配列の順番で実行されるっぽいです。
C++でソート関数が走ってたので、
気になる方はC++を読んでください。

105. 作ったPostProcessをWidgetに流用しよう
PostProcessではありませんが、
Materialで作成したエフェクトを少しの変更で扱うことができます。
今回作成したようなものはそもそもWidgetに向いてないので、
うまく紹介できません。

106. ごめんなさい。

108. 作ったPostProcessをWidgetに流用しよう
こちらもサンプルを用意しました。上手いこと使ってください。
PostProcessのサンプルプロジェクトに同梱してます。

109. 作ったPostProcessをWidgetに流用しよう

110. 作ったPostProcessをWidgetに流用しよう

112. 作ったPostProcessをWidgetに流用しよう
RetainerBoxについての参考になりそうな記事
【UMG】ディゾルブエフェクトもできる、RetainerBoxについて
http://unwitherer.blogspot.com/2017/04/umgretainerbox.html
UE4 Widgetで使用しているマテリアルにエフェクトをつける
http://mozpaca.hatenablog.com/entry/20181108/1541660490

113. PostProcessのON/OFFをBPで制御する方法
ポストプロセスの有効/無効を切り替える値
この数値を動的に扱いたい場合

114. PostProcessのON/OFFをBPで制御する方法
PostProcessVolumeの場合 (レベルブループリント)
PostProcessVolumeに適応している
任意のMaterial
In Weight
0…無効
1…有効

115. PostProcessのON/OFFをBPで制御する方法
PostProcessComponentの場合
Get

116. PostProcessのON/OFFをBPで制御する方法
ターゲットが違うノードが出てくることもあるので注意。
上手く繋がらないときはここが原因かも？

117. 小ネタ終わり。

118. PostProcess Materialは楽しい。

119. ご清聴ありがとうございました。