Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

そうだPostProcess Materialで見た目を変えよう

1,785 views

Published on

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

Published in: Software
  • Be the first to comment

そうだPostProcess Materialで見た目を変えよう

  1. 1. そうだ PostProcessMaterial で見た目を変えよう
  2. 2. 自己紹介 ・Twitter : @MozPaca398 ・UE4でゲーム/映像制作の仕事をしています。 ・音声合成/ボイスチェンジャーを作るのが趣味です。 ・UE4についてのブログ書いてます。 http://mozpaca.hatenablog.com/
  3. 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. 4. はじめに ・今回はPostProcess Materialを作る上でどのように作っているかの話をします。 一つのマテリアルの中でこんな意図で機能をつけましたみたいな話です。 ・関係なさそうな箇所の解説は入れません。 ある程度UE4が使える人向け。 ・エンジン改造はしません。 ・Customノードは使いません。 ・HLSL, C++は書きません。 ・処理負荷は気にしません。 ・外部アセットは使いません。 ・今回のスライドは後日配布します。 サンプルプロジェクトは配布中です。 https://drive.google.com/open?id=1Q6A0kBrFtBBJAajDLKIOm0QXvZ3WFmVc
  5. 5. エンジンのバージョン 使用したバージョンはUE4 4.21.1です。
  6. 6. PostProcess Materialとは
  7. 7. PostProcess Materialとは
  8. 8. 今回の目標 ・サイバー感のあるエフェクト的に使用できるマテリアルを作る。 ・指定したObjectにのみエフェクトがかかるようにする。 ・いい感じにする。
  9. 9. ちょっと前にこんなマテリアルを作りました。
  10. 10. 呼びにくいので このスライドでは、 ・ノイズ的なアレ→NoiseEffect ・ジャミング的なアレ→NoiseWidget と呼ぶことにします。
  11. 11. 参考にしたもの ・マテリアル式リファレンス(公式ドキュメント) http://api.unrealengine.com/JPN/Engine/Rendering/Materials/ExpressionReference/ ・Unityのエフェクト紹介動画 https://www.youtube.com/watch?v=cHN7p4BUpkw ・その他マテリアル関係のブログ、Wikiなど。
  12. 12. 見よう見まねで作ってみる このあたりから真似るのが簡単そう? ・画面全体がぶれて見える。 ・ずれている画像は色が違う(何かしらの要素が薄い) ・重なっている箇所は半透明で元の画像の上に重ねる。
  13. 13. できた なんか違うけど、まぁいいか。
  14. 14. 最終的に出来上がったものがこちら。
  15. 15. 参考したのか疑問に思うレベルで違うMaterialになりました。
  16. 16. PostProcessの作り方の手順 ・前準備をする(Custom Depthの設定など) ・Materialを組む。 ・PostProcessVolumeに適応する。
  17. 17. 前準備の話
  18. 18. PostProcess Materialを個別のObjectにかける方法 個別にエフェクトをかけたい場合は Objectの詳細タブから Rendering/Render CustomDepthに チェックを入れておく必要があります。
  19. 19. PostProcess Materialを個別のObjectにかける方法 Render CustomDepth Off Render CustomDepth On
  20. 20. NoiseEffectのMaterial
  21. 21. 見えない
  22. 22. よし、機能ごとにMaterial Functionでまとめよう。
  23. 23. NoiseEffectのMaterial
  24. 24. 見えない
  25. 25. NoiseEffect Materialの中にある機能について 一つのMaterialの中に14つの関数が含まれています。 ・縞模様をTextureで追加する。 ・NormalMapのUVアニメーションを行う。 ・ブラウン管のようなメッシュ状の模様を追加する。 ・エフェクトをかけるものをDepthで判別する。 ・ビネット効果をかける。 ・カラー版なんちゃって色収差。 ・ノーマル版なんちゃって色収差。 ・2つの色収差を混ぜ合わせる。
  26. 26. Material Functionの話
  27. 27. MF_DepthChecker
  28. 28. MF_DepthCheckerの概要 対象のRender Custom Depthにチェックが入っているものにエフェクトをかけるためのものです。 元の画像とエフェクトをかけた画像の線形補間に使用します。 Input Uvs ・エフェクトで使用しているUVをScene DepthとCustom Depthに渡す。 Output Alpha ・Linear Interpolate(Lerp)ノードのAlphaに渡す。 ※使用しているSphere MaskのRadiusとHardnessの値は0です。
  29. 29. MF_DepthCheckerの例
  30. 30. MF_NormalDistortion
  31. 31. MF_NormalDistortionの概要 Normalの画像を任意の方向にスクロールさせる機能です。 SmoothStepでCustomノード使ってるのは勘弁してください。 Output Distortion ・UVを更新したNormalを出力する。 色は次のノード任せ。
  32. 32. MF_NormalDistortionの例
  33. 33. MF_StrechUV
  34. 34. MF_StrechUVの概要 UVを伸縮させたりズラしたりする機能です。 Output UVs ・伸縮させたりズラしたりしたUVを出力します。
  35. 35. MF_StrechUVの例
  36. 36. MF_FlushSine
  37. 37. MF_FlushSineの概要 StrechUV関数内で使用している関数です。 一定間隔ごとにSineを使用して返す値を変動させるものです。 「0~1」と「-1~1」で返す値を分けています。 Input Speed ・値が変動する速度、値が大きいほど早い。 Output [0, 1] ・変動した値を0~1の範囲で返す。 Output [-1, 1] ・変動した値を-1~1の範囲で返す。
  38. 38. MF_FlushSineの例
  39. 39. MF_SideBand
  40. 40. MF_SideBandの概要 Textureをベースに横縞模様のエフェクトを描画します。 Output Result ・白黒を描画するためのScalarの値が出力されます。
  41. 41. MF_SideBandの例
  42. 42. MF_ScreenBaseColor
  43. 43. MF_ScreenBaseColorの概要 インチキ色収差。版ずれ表現用の機能です。今回は色の設定をこれで行っています。 Inputで渡したUVとScalar ParameterでPostProcessInput0のUVを制御して、 それぞれの値をRGBとして出力しています。 Input BumpOffset ・どのくらいズレを起こすか決めるパラメータです。 完全に重ねる(0.0にする)と色が白になってしますので要注意。 Input UVs ・全体のUVが移動するエフェクトを作成しているので、 それを考慮してBumpOffsetに加算するパラメータです。 Output R Output G 各色情報 Output B
  44. 44. MF_ScreenBaseColorの例
  45. 45. MF_WorldNormal
  46. 46. MF_WorldNormalの概要 MF_ScreenBaseColorのNormal版です。 Input BumpOffset ・どのくらいズレを起こすか決めるパラメータです。 完全に重ねる(0.0にする)と色が白になってしますので要注意。 Input UVs ・全体のUVが移動するエフェクトを作成しているので、 それを考慮してBumpOffsetに加算するパラメータです。 Output R Output G 各色情報 Output B
  47. 47. MF_WorldNormalの例
  48. 48. MF_ScreenBaseColor MF_WorldNormal
  49. 49. MF_CreateNormal
  50. 50. MF_CreateNormalの概要 MF_ScreenBaseColorとMF_WorldNormalを混ぜ合わせるための機能です。 2つの関数から同チャンネル同士を乗算して、R-G B-Gを行います。 それらに明るさ調整用のパラメータを乗算して、外積計算結果を出力します。 Output Result ・計算したColor情報を出力します。
  51. 51. MF_CreateNormal例
  52. 52. MF_NoiseGlitch
  53. 53. MF_NoiseGlitchの概要 Noise Textureを拡縮したり、スクロールさせたりする機能です。 最後に黒との線形補間を行い、Texture成分を調整することもできる。 Output NoiseGlitch ・更新したColor情報を出力する。
  54. 54. MF_NoiseGlitchの例
  55. 55. MF_ScreenContrast
  56. 56. MF_ScreenContrastの概要 色の強弱を変更するための関数です。 Input Base ・Color情報を入力する。 Output Result ・色の強弱を変更した結果を出力する。
  57. 57. MF_ScreenContrastの例
  58. 58. Color Texture
  59. 59. MF_Vegnette
  60. 60. MF_Vegnetteの概要 なんとなくつけてみた関数です。 なくても問題ありません。 ビネット効果を付け加えるための関数です。 画面全体にエフェクトをかける際はあったほうがいいかもしれません。 Output Vignette ・ビネット効果を付加したものを出力する。
  61. 61. MF_Vegnetteの例
  62. 62. MF_ScreenColor 本当は繋がっています。
  63. 63. MF_ScreenColorの概要 あってもなくても気にならない関数です。 MF_ScreenBaseColorに潰されてます。 元々は色をつけるための関数です。 Input Color ・関数を呼び出すまでのColor情報を入力する。 Output ScreenColor ・もとの色と指定の色を混ぜ込んだ結果を出力する。
  64. 64. MF_ScreenColorの例
  65. 65. MF_PixelSize
  66. 66. MF_PixelSizeの概要 ViewportUVとBufferResolutionから縦縞と横縞の模様を生成します。 これら2つを混ぜ合わせてメッシュ状の模様を作るためのものです。 パラメータを2つ用意すれば、縦縞と横縞それぞれの幅が変えられますが、 今回は共通の幅にするためのパラメータしか用意してません。 Output PixelSize_X ・縦縞模様を出力する。 Output PixelSize_Y ・横縞模様を出力する。
  67. 67. MF_PixelSizeの例
  68. 68. MF_PixelSimulation
  69. 69. MF_PixelSimulationの概要 ブラウン管的な表現を行うための関数です。 Input Color ・Color情報を入力する。内部でRとGのみに分けられる。 Input PixelSize_X ・MF_PixelSizeで出力したXの値を入力する。 ・値を一定の範囲で線形補間に使用する。 Input PixelSize_Y ・MF_PixelSizeで出力したYの値を入力する。 ・値を一定の範囲で線形補間に使用する。
  70. 70. MF_PixelSimulationの例
  71. 71. Material Functionの解説終わり
  72. 72. 関数を組み立てる
  73. 73. 関数を組み立てる
  74. 74. 関数を組み立てる
  75. 75. 適応の話
  76. 76. 関数を組み立てる 配列を追加し、アセットリファレンスで作成したMaterialもしくはInstanceを適応します。
  77. 77. おまけ
  78. 78. 以上
  79. 79. 小ネタ 余談ともいう
  80. 80. あると便利なアセット 400 Noise Texture Mega Pack ノイズやパターン系のテクスチャが405枚入ってます。
  81. 81. あると便利なアセット 100+ Noise Texture Pack ノイズ系のテクスチャが151枚入っています。
  82. 82. あると便利なアセット 気にいったMaterialのアセット Paragon系のやつとか
  83. 83. マテリアルパラメータはカテゴリ分けしよう ここを変更すると、 パラメータのカテゴリ分けができます。 Material Functionの場合は、 Functionの名前をそのままカテゴリにしても いいかもしれません。
  84. 84. マテリアルパラメータはカテゴリ分けしよう このあたりで手を抜くと、 Material Functionを組み合わせたときに どのFunctionのパラメータかわからなくなります。
  85. 85. 優先度について Materialエディタの詳細タブで 優先度の変更が行えます。 値の小さいものから実行されるので、 優先度を変更したい場合は設定してください。
  86. 86. 優先度について 優先度 高 優先度 低 優先度の値が同じ場合は 配列の順番で実行されるっぽいです。 C++でソート関数が走ってたので、 気になる方はC++を読んでください。
  87. 87. 作ったPostProcessをWidgetに流用しよう PostProcessではありませんが、 Materialで作成したエフェクトを少しの変更で扱うことができます。 今回作成したようなものはそもそもWidgetに向いてないので、 うまく紹介できません。
  88. 88. ごめんなさい。
  89. 89. 作ったPostProcessをWidgetに流用しよう こちらもサンプルを用意しました。上手いこと使ってください。 PostProcessのサンプルプロジェクトに同梱してます。
  90. 90. 作ったPostProcessをWidgetに流用しよう
  91. 91. 作ったPostProcessをWidgetに流用しよう
  92. 92. 作ったPostProcessをWidgetに流用しよう RetainerBoxについての参考になりそうな記事 【UMG】ディゾルブエフェクトもできる、RetainerBoxについて http://unwitherer.blogspot.com/2017/04/umgretainerbox.html UE4 Widgetで使用しているマテリアルにエフェクトをつける http://mozpaca.hatenablog.com/entry/20181108/1541660490
  93. 93. PostProcessのON/OFFをBPで制御する方法 ポストプロセスの有効/無効を切り替える値 この数値を動的に扱いたい場合
  94. 94. PostProcessのON/OFFをBPで制御する方法 PostProcessVolumeの場合 (レベルブループリント) PostProcessVolumeに適応している 任意のMaterial In Weight 0…無効 1…有効
  95. 95. PostProcessのON/OFFをBPで制御する方法 PostProcessComponentの場合 Get
  96. 96. PostProcessのON/OFFをBPで制御する方法 ターゲットが違うノードが出てくることもあるので注意。 上手く繋がらないときはここが原因かも?
  97. 97. 小ネタ終わり。
  98. 98. PostProcess Materialは楽しい。
  99. 99. ご清聴ありがとうございました。

×