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.

猫でも分かるUE4のポストプロセスを使った演出・絵作り

26,707 views

Published on

補足:p87で指摘しているDefaultBloomKernelですが、完全にパッケージから除外したい場合はブラックリスト機能をご活用ください。
http://api.unrealengine.com/JPN/Platforms/Android/ReducingAPKSize/#%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E5%8C%96%E3%81%99%E3%82%8B

2018年8月5日に行われた「GTMF 2018 TOKYO」で登壇した際に使用した資料です。
https://atnd.org/events/98232

Published in: Engineering
  • Be the first to comment

猫でも分かるUE4のポストプロセスを使った演出・絵作り

  1. 1. #出張ヒストリア2018#出張ヒストリア2018 猫でも分かる UE4のポストプロセスを使った演出・絵作り Epic Games Japan 岡田和也 - 出張ヒストリア!ゲーム開発勉強会 2018 -
  2. 2. #出張ヒストリア2018#出張ヒストリア2018 自己紹介 Epic Games Japan サポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) ライセンシのサポートしたり 講演したり なんかいろいろしてたり
  3. 3. #出張ヒストリア2018#出張ヒストリア2018 本日のお題 猫でも分かる UE4の ポストプロセス を使った 演出・絵作り
  4. 4. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス( Post Process )って? レンダリング結果に対して行う 画像処理
  5. 5. #出張ヒストリア2018#出張ヒストリア2018 「Unreal Engine 4のレンダリングフロー総おさらい」より
  6. 6. #出張ヒストリア2018#出張ヒストリア2018 映像業界でいう 「撮影」「コンポジット」にあたる部分 ← この本良かった!
  7. 7. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用前
  8. 8. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用後
  9. 9. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用前 ポストプロセス適用後
  10. 10. #出張ヒストリア2018#出張ヒストリア2018 直近のUE4タイトルにおける活用例 OCTOPATH TRAVELER
  11. 11. #出張ヒストリア2018#出張ヒストリア2018 先日話題になった 水彩Post Process Material あく ( @Aqu_ )さん
  12. 12. #出張ヒストリア2018#出張ヒストリア2018 https://aqu.hatenablog.com/ entry/2018/07/09/000805
  13. 13. #出張ヒストリア2018#出張ヒストリア2018 何故このお題を 選んだのか?
  14. 14. #出張ヒストリア2018#出張ヒストリア2018 そのポストプロセス あなたの作品に合っていますか?
  15. 15. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスのデフォルト設定 コントラストきつめ! うお、まぶし!
  16. 16. #出張ヒストリア2018#出張ヒストリア2018 なんとなく調整したはいいけど… ぱっと見きれいだけど 画面見づらい… ホラーゲームじゃないのに 画面がずっと暗い…
  17. 17. #出張ヒストリア2018#出張ヒストリア2018
  18. 18. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスは 作品の画作りだけでなく 内容にも影響する重要な要素!
  19. 19. #出張ヒストリア2018#出張ヒストリア2018 でもデフォルト設定のままに なっている方を見かける… なんで!?
  20. 20. #出張ヒストリア2018#出張ヒストリア2018 できることが多すぎ ○ 大量の謎のパラメータ… ○ どこから手を付けたらいいのか分からない…
  21. 21. #出張ヒストリア2018#出張ヒストリア2018 ドキュメントがパラメータの紹介だけ ○ しかも内容が微妙に古い…( ゴメンナサイ ○ 具体的にどんな活用例があるか分かりづらい
  22. 22. #出張ヒストリア2018#出張ヒストリア2018 今日話すこと 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3. ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
  23. 23. #出張ヒストリア2018#出張ヒストリア2018 今日話さないこと ● 各パラメータの詳細な解説 ● ポストプロセスマテリアルについて ● NPR系の実装について
  24. 24. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスの使い方
  25. 25. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスを使用・調整する方法 ● プロジェクト設定 ● Post Process Volume ● Camera Component ● Blueprint ● Sequencer
  26. 26. #出張ヒストリア2018#出張ヒストリア2018 プロジェクト設定
  27. 27. #出張ヒストリア2018#出張ヒストリア2018 プロジェクト設定 ポストプロセスのデフォルト設定 ○ 標準で各機能が有効になっているので 意図しないポストプロセスがかかっていることも
  28. 28. #出張ヒストリア2018#出張ヒストリア2018 不要なポストプロセスが走らないようにするには ● プロジェクト設定の チェックボックスをOFFっておく ● Post Process Volumeや Camera Component側で無効化する
  29. 29. #出張ヒストリア2018#出張ヒストリア2018 付録: Post Process Volumeによる設定上書き 例:Project SettingsでBloomが 有効
  30. 30. #出張ヒストリア2018#出張ヒストリア2018 付録: Post Process Volumeによる編集の判定 例:Project SettingsでBloomが 無効
  31. 31. #出張ヒストリア2018#出張ヒストリア2018 Post Process Volume 使用するポストプロセスの設定、 ポストプロセスの適用範囲を設定するボリューム
  32. 32. #出張ヒストリア2018#出張ヒストリア2018 Post Process Volumeが適用される条件 ● ボリューム内にカメラがある場合 ○ 使用例:水中専用のポストプロセス ● Infinite Extentを有効にしている場合
  33. 33. #出張ヒストリア2018#出張ヒストリア2018 Camera Component カメラ毎にポストプロセス設定を行うことが可能 ○ SceneCapture系も同様
  34. 34. #出張ヒストリア2018#出張ヒストリア2018 Blueprintからポストプロセスを制御する方法 Post Process Volumeや Camera Componentのポストプロセス設定を編集可能 https://api.unrealengine.com/JPN/Engine/Bluepri nts/UserGuide/Variables/Structs/index.html
  35. 35. #出張ヒストリア2018#出張ヒストリア2018 Sequencerからポストプロセスを制御する方法 レベル上のPost Process Volume, Camera Componentが持つパラメータを制御
  36. 36. #出張ヒストリア2018#出張ヒストリア2018 おまけ:Preview Scene Settings Persona, Material, Niagaraエディタでは プレビュー用のポストプロセスを設定可能
  37. 37. #出張ヒストリア2018#出張ヒストリア2018 おまけ:ポストプロセスを無効化する方法 ● 表示メニューから 各ポストプロセスの表示ON/OFF ● “ShowFlag.PostProcessing 0”
  38. 38. #出張ヒストリア2018#出張ヒストリア2018 ここまでのまとめ UE4のポストプロセスは 様々な方法で設定・制御することができる! ○ プロジェクト設定 ○ Post Process Volume ○ Camera Component ○ Blueprint ○ Sequencer
  39. 39. #出張ヒストリア2018#出張ヒストリア2018 今日話す内容 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3. ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
  40. 40. #出張ヒストリア2018#出張ヒストリア2018 UE4が用意している ポストプロセス機能の紹介
  41. 41. #出張ヒストリア2018#出張ヒストリア2018 PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル
  42. 42. #出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセス処理 カメラレンズの光学特性の疑似再現
  43. 43. #出張ヒストリア2018#出張ヒストリア2018 被写界深度によるボケ レンズフレア
  44. 44. #出張ヒストリア2018#出張ヒストリア2018 以降のスライドではレンズの特性について 軽く解説している箇所があるのですが… あくまで初心者向けなので 「あえて」簡略化してる箇所があります! ですので…何卒…なにとぞ…!!!
  45. 45. #出張ヒストリア2018#出張ヒストリア2018 被写界深度 ( Depth of Field )
  46. 46. #出張ヒストリア2018#出張ヒストリア2018 被写界深度とは? カメラの被写界深度の再現 ○ フォーカス、ピント、ボケ( Bokeh )
  47. 47. #出張ヒストリア2018#出張ヒストリア2018 視線誘導、奥行き感の表現など 様々な演出に活用できるすごいやつ!
  48. 48. #出張ヒストリア2018#出張ヒストリア2018
  49. 49. #出張ヒストリア2018#出張ヒストリア2018
  50. 50. #出張ヒストリア2018#出張ヒストリア2018
  51. 51. #出張ヒストリア2018#出張ヒストリア2018
  52. 52. #出張ヒストリア2018#出張ヒストリア2018 UE4が用意している被写界深度の手法 (UE4.20時点) Gaussian DoF ○ 最も高速かつ簡易的な手法 ○ 今後はモバイル専用になる予定 Bokeh DoF ○ 高品質だけど処理負荷高い手法 ○ 今後は非推奨になる予定
  53. 53. #出張ヒストリア2018#出張ヒストリア2018 Gaussian DoF Bokeh DoF
  54. 54. #出張ヒストリア2018#出張ヒストリア2018 UE4が用意している被写界深度の手法 (UE4.20時点) Cinematic DoF new! ○ Bokeh並の品質 かつ 高速な手法 ○ UE4.19以前のCircle DoFを置き換え
  55. 55. #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoF は いいぞ! DoFおじさん
  56. 56. #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法
  57. 57. #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法
  58. 58. #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使うには 手法①
  59. 59. #出張ヒストリア2018#出張ヒストリア2018 被写界深度を制御する要素 ● Focus Distance ( 被写体までの距離 ) ● Focal Region ( 絞り, F値 ) ● Focal Length (焦点距離) or FoV ( 画角 ) Focus Distance
  60. 60. #出張ヒストリア2018#出張ヒストリア2018 付録
  61. 61. #出張ヒストリア2018#出張ヒストリア2018 めんどくさ!!!
  62. 62. #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 (個人的オススメは断然こっち!)
  63. 63. #出張ヒストリア2018#出張ヒストリア2018 Cine Camera Actorとは 実在するカメラの挙動を再現するために 詳細な設定項目が用意されたCamera Actor
  64. 64. #出張ヒストリア2018#出張ヒストリア2018 超絶簡単!!! Cine Camera サイコー!
  65. 65. #出張ヒストリア2018#出張ヒストリア2018 被写界深度のデバッグ機能 ShowFlag.VisualizeDOF 1
  66. 66. #出張ヒストリア2018#出張ヒストリア2018 付録:被写界深度に関する公式ドキュメント ● Depth of Field ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/DepthOfField ● Cinematic Depth of Field Method ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/DepthOfField/CinematicDOFMeth ods ● Mobile Depth of Dield Method ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/DepthOfField/MobileDOFMethods
  67. 67. #出張ヒストリア2018#出張ヒストリア2018 ブルーム ( Bloom )
  68. 68. #出張ヒストリア2018#出張ヒストリア2018 ブルームとは 発光現象を表現する機能
  69. 69. #出張ヒストリア2018#出張ヒストリア2018 ブルームのパラメータ Intensity ○ ブルームの強さ・掛かり度合い ○ 値を上げるほど、 より眩しく、より広くブルームが掛かるように
  70. 70. #出張ヒストリア2018#出張ヒストリア2018 ブルームのパラメータ Threshold ○ ブルームを発生する明るさのしきい値 ○ 初期値(-1)の場合 画面全体にブルームが掛かる…
  71. 71. #出張ヒストリア2018#出張ヒストリア2018
  72. 72. #出張ヒストリア2018#出張ヒストリア2018 付録 Threshold 大事! 人肌は…発光しないのだ…! ディフュージョン効果があるけども… 背景オブジェクトとの兼ね合いを考えると ちゃんと人肌用にフィルタ用意したほうがいいと思う… https://www.4gamer.net/games/216/ G021678/20140714079/
  73. 73. #出張ヒストリア2018#出張ヒストリア2018 ブルームの汚れマスク レンズの汚れや傷の表現
  74. 74. #出張ヒストリア2018#出張ヒストリア2018 汚れマスク:なし
  75. 75. #出張ヒストリア2018#出張ヒストリア2018 汚れマスク:あり
  76. 76. #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能 ( Bloom Convolution ) 畳み込み機能を使うことで ブルームの形状を変更・調整できる
  77. 77. #出張ヒストリア2018#出張ヒストリア2018 男の子が好きなやつができるぞ!
  78. 78. #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能のパラメータ MetodをConvolutionに変更すると 専用パラメータが編集可能に
  79. 79. #出張ヒストリア2018#出張ヒストリア2018 調整しないと悪目立ちすることも… 圧倒的 J・J・◯イブラムス感
  80. 80. #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能の注意点 ① 負荷高い!!! 映像作品やハイエンドコンテンツ向け
  81. 81. #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能の注意点 ② この機能用のデフォルトテクスチャの ファイルサイズがバカでかい! ( 32MB ショック! ) ○ パフォーマンスやパッケージサイズに影響… ○ モバイル, HTML5は畳み込み機能が使えないので パッケージに含まれないようになっている /Engine/EngineMaterials/ DefaultBloomKernel
  82. 82. #出張ヒストリア2018#出張ヒストリア2018 畳み込み機能使わないなら 解像度下げてファイルサイズ落としたほうが無難 テクスチャの圧縮設定より 2048 x 2048 -> 4 x 4 に ○ 32MB -> 1KB以下に
  83. 83. #出張ヒストリア2018#出張ヒストリア2018 https://www.youtube.com/watch?v=0Ge7ykxDTIQ
  84. 84. #出張ヒストリア2018#出張ヒストリア2018 付録 Bloomに関する公式ドキュメント ● Bloom ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/Bloom ● Unreal Engine - Image-Based (FFT) Convolution for Bloom ○ https://www.youtube.com/watch?v=SkJgopq-JQA
  85. 85. #出張ヒストリア2018#出張ヒストリア2018 レンズフレア ( Lens Flare )
  86. 86. #出張ヒストリア2018#出張ヒストリア2018 レンズフレアとは 光源の散乱をシミュレート
  87. 87. #出張ヒストリア2018#出張ヒストリア2018 引用:WEBアニメスタイル「第5回エフェクトを考える」 http://animestyle.jp/2016/03/07/9837/
  88. 88. #出張ヒストリア2018#出張ヒストリア2018 レンズフレアの調整 Intensity ○ 明るさ Tint ○ レンズフレアの色調整 BokehSize ○ ボケの大きさ Threshold ○ レンズフレアを発生する 明るさのしきい値 BokehShape ○ ボケの形
  89. 89. #出張ヒストリア2018#出張ヒストリア2018 レンズフレアのボケの形状 デフォルトは6角形 ○ エンジンコンテンツに他の形状が用意されている
  90. 90. #出張ヒストリア2018#出張ヒストリア2018 レンズフレアのユースケース 使い所難しい… ○ 頻繁に出ているとうざったい ○ 演出としてピンポイントで使うのがいいのでは?逆光とか
  91. 91. #出張ヒストリア2018#出張ヒストリア2018 付録 レンズフレアに関する公式ドキュメント ● Lens Flare ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/LensFlare
  92. 92. #出張ヒストリア2018#出張ヒストリア2018 自動露光 ( Eye Adaptation, Auto-Exposure )
  93. 93. #出張ヒストリア2018#出張ヒストリア2018 自動露光とは 画面の明るさの自動調整 ○ 「白飛びしないように」「画面が暗すぎないように」
  94. 94. #出張ヒストリア2018#出張ヒストリア2018 暗順応 -Wikipedia- ○ 可視光量の多い環境から少ない環境へ急激に変化した場合に、時 間経過とともに徐々に視力が確保される、動物の自律機能である ○ https://ja.wikipedia.org/wiki/%E6%9A%97%E9%A0%86% E5%BF%9C
  95. 95. #出張ヒストリア2018#出張ヒストリア2018 自動露光の調整 明るさの自動調整は各パラメータと シーンの色のヒストグラムに基づいて行われる ● Min/Max Brightness ○ 明るさの最小/最大値 ● Speed Up / Down ○ 明るさの調整速度 ● Histogram Log Min / Max ○ 使用するヒストグラムの範囲
  96. 96. #出張ヒストリア2018#出張ヒストリア2018 自動露光の調整用機能 ShowFlag.VisualizeHDR 1
  97. 97. #出張ヒストリア2018#出張ヒストリア2018 自動露光の注意点 デフォルトで有効 かつ Min / Max Brightnessの値が異なる 画面の明るさを 勝手に変えられてしまう!
  98. 98. #出張ヒストリア2018#出張ヒストリア2018 自動露光の注意点 Min, Max Brightnessを 同じ値にしておく 自動露光による 明るさ調整が無効に
  99. 99. #出張ヒストリア2018#出張ヒストリア2018 自動露光に関する公式ドキュメント ● Eye Adaption [ Auto-Exposure ] ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/AutomaticExposure
  100. 100. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果 ( Vignette )
  101. 101. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果とは カメラレンズの周辺減光の再現
  102. 102. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果の調整 Vignette Intensity ○ 掛かり度合いの調整 ○ 直接入力で1以上に設定可能
  103. 103. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果の注意点 デフォルト(0.4)だと、薄く掛かってしまうので注意!
  104. 104. #出張ヒストリア2018#出張ヒストリア2018
  105. 105. #出張ヒストリア2018#出張ヒストリア2018
  106. 106. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果のユースケース 画面中心への視線誘導 ○ トンネル効果
  107. 107. #出張ヒストリア2018#出張ヒストリア2018 標準で用意されているビネット効果の欠点 掛かり度合いの調整しかできない… 色を変えたり… 横長にしたり…
  108. 108. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果をより細かく調整したい場合 後述のポストプロセスマテリアルで対応することに https://forums.unrealengine.com/development- discussion/rendering/40562-colored-vignette
  109. 109. #出張ヒストリア2018#出張ヒストリア2018 ビネット効果に関する公式ドキュメント ● Vignette ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/Vignette
  110. 110. #出張ヒストリア2018#出張ヒストリア2018 グレイン効果 ( Grain )
  111. 111. #出張ヒストリア2018#出張ヒストリア2018 グレイン効果とは フィルム特有のノイズの再現
  112. 112. #出張ヒストリア2018#出張ヒストリア2018 グレイン効果の調整 Grain Jitter ○ 画面のジラつき度合い Grain Intensity ○ ノイズのかけ具合
  113. 113. #出張ヒストリア2018#出張ヒストリア2018 グレイン効果のユースケース ● フィルム感を出したいとき ● 映像に質感や雰囲気を出したい場合…らしい… ○ 単なるノイズに見えてしまう 可能性があるので注意
  114. 114. #出張ヒストリア2018#出張ヒストリア2018 色収差 ( Scene Fringe, Chromatic Aberration )
  115. 115. #出張ヒストリア2018#出張ヒストリア2018 色収差 外側になるほど色がずれるレンズの特性を再現 ○ 画面全体に均一にRGBがズレてるのは正しい色収差ではないのだ!
  116. 116. #出張ヒストリア2018#出張ヒストリア2018 色収差 外側になるほど色がずれるレンズの特性を再現
  117. 117. #出張ヒストリア2018#出張ヒストリア2018 色収差のパラメータ Intensity ○ 色収差の掛かり度合い Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 )
  118. 118. #出張ヒストリア2018#出張ヒストリア2018 色収差のパラメータ ● Intensity ○ 色収差の掛かり度合い ● Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 )
  119. 119. #出張ヒストリア2018#出張ヒストリア2018 色収差のユースケース ヒット・ダメージ・爆発演出時に使われている印象 ○ 衝撃 や 異常 の表現に使えるかも
  120. 120. #出張ヒストリア2018#出張ヒストリア2018 色収差 使用時の注意点 ● 色収差を気持ち悪く感じる人もいるので注意! ○ 長時間 画面全体に 強めに 掛かっていると顕著 ● 効果的に使うためには 絵的なセンスが必要な印象… 短時間だけ表示して エフェクト的な用途が無難かも
  121. 121. #出張ヒストリア2018#出張ヒストリア2018 色収差に関する公式ドキュメント ● Scene Fringe [Choromatic Aberration] ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/SceneFringe
  122. 122. #出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセスの注意点 現実世界のレンズは、「ビネット」「グレイン」「色収差」 を抑える方向に改善 ○ 全体の絵作りをする上で多用すると 違和感を覚える人もしばしば…
  123. 123. #出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセスの注意点 逆に言うと、 「ビネット」「グレイン」「色収差」は 昔のカメラレンズの特性を表現している 回想シーンなどの 過去を強調したい場面で有効かも
  124. 124. #出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセスに関しては 実際のカメラで色々試してみると 各パラメータの理解が深まるのでオススメ!
  125. 125. #出張ヒストリア2018#出張ヒストリア2018 PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル
  126. 126. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング ( Color Grading ) & トーンマッピング ( Tone Mapping )
  127. 127. #出張ヒストリア2018#出張ヒストリア2018 以降の内容は あくまでイメージとして考えて下さい! ”この分野あまり詳しくないですが…勢”は 何卒…なにとぞ…!
  128. 128. #出張ヒストリア2018#出張ヒストリア2018 トーンマッピング ( Tone Mapping )とは HDR LDR ↑ これ
  129. 129. #出張ヒストリア2018#出張ヒストリア2018 UE4における カラーグレーディング ( Color Grading )とは HDR LDR トーンマッピング 色調補正 ↑これ
  130. 130. #出張ヒストリア2018#出張ヒストリア2018 もっとちゃんとした話はこちらで! UE4の色について v1.1 https://www.slideshare.net/ EpicGamesJapan/ue4-v11
  131. 131. #出張ヒストリア2018#出張ヒストリア2018 ここでお伝えしたいこと 画面に表示するまでに 2種類の色補正処理が入ること トーンマッピング ○ HDR -> LDR 変換処理 カラーグレーディング ○ 色補正
  132. 132. #出張ヒストリア2018#出張ヒストリア2018 トーンマッピングの効果 画面のコントラスト(明暗)の 調整 ○ Slope :全体 の 調整 ○ Toe :暗い箇所 の 調整 ○ Shoulder :明るい箇所 の 調整
  133. 133. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング 調整項目 ひとまず… このパラメータをいじってみましょう!
  134. 134. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング - ホワイトバランス - 光の影響で色が変わってしまった 「白」を「白」に見えるようにする補正機能 色合いの調整として使用可能!
  135. 135. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング - ホワイトバランス - 画面の雰囲気・印象が大きく変わるのでオススメ!
  136. 136. #出張ヒストリア2018#出張ヒストリア2018 https://cs.olympus-imaging.jp/jp/support/cs/DI/QandA/Basic/s0012.html
  137. 137. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング – 色対応表(LUT) - Photoshopなどで作成した LUTテクスチャを使って色調補正をすることも可能!
  138. 138. #出張ヒストリア2018#出張ヒストリア2018
  139. 139. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング – 色対応表(LUT) - マーケットプレイスで販売されている LUTテクスチャを使うという手も ○ 「LUT」または「grading」で検索!検索!
  140. 140. #出張ヒストリア2018#出張ヒストリア2018 LUT使用時の注意点 LUTで色調補正した場合 モニタによって見え方が変わる可能性がある LUTはリファレンスとして使用 Color Gradingの各パラメータで最終調整
  141. 141. #出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング・トーンマッピングに関する 公式ドキュメント ● Color Grading and Filmic Tonemapper ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/ColorGrading ● Using Lookup Tables( LUTs ) for Color Grading ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/UsingLUTs
  142. 142. #出張ヒストリア2018#出張ヒストリア2018 PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル
  143. 143. #出張ヒストリア2018#出張ヒストリア2018 アンチエイリアシング ( Anti-Aliasing )
  144. 144. #出張ヒストリア2018#出張ヒストリア2018 アンチエイリアシングの効果 ジャギー(ピクセルのギザギザ)や スペキュラ・エイリアシング(チラツキ)を 抑制
  145. 145. #出張ヒストリア2018#出張ヒストリア2018 AA未使用 Temporal AA
  146. 146. #出張ヒストリア2018#出張ヒストリア2018 AA未使用 Temporal AA
  147. 147. #出張ヒストリア2018#出張ヒストリア2018 UE4が用意しているアンチエイリアシング手法 ● FXAA ○ モバイルでは使えず ● Temporal AA ( TAA ) ○ UE4のデフォルトはこれ ○ モバイルでも使用可能 ( ただし簡易版 ) ● MSAA ○ Forward Rendering (モバイル含む) のみ使用可能
  148. 148. #出張ヒストリア2018#出張ヒストリア2018 アンチエイリアシング手法の切り替え ● プロジェクト設定のRenderingカテゴリにある Anti-Aliasing Method ● ゲーム中に動的に変更したい場合 r.DefaultFeature.AntiAliasing ○ 0 : None ○ 1:FXAA ○ 2:TemporalAA ○ 3:MSAA
  149. 149. #出張ヒストリア2018#出張ヒストリア2018 https://www.4gamer.net/games/120/G012093/20121125002/
  150. 150. #出張ヒストリア2018#出張ヒストリア2018 No AA FXAA TAA MSAA
  151. 151. #出張ヒストリア2018#出張ヒストリア2018 ポリゴンの輪郭 ポリゴンの表面 (テクスチャ・スペキュラ) 負荷 FXAA 効果:中 効果:小 小 TAA 効果:大 効果:大 中 MSAA 効果:大 効果:なし 大 FXAA TAA MSAA
  152. 152. #出張ヒストリア2018#出張ヒストリア2018 注意 TAAは 万能な手法では ありません!!!
  153. 153. #出張ヒストリア2018#出張ヒストリア2018 TAAのデメリット ● 画面変化が多いとゴースト(残像)が発生 ● 輪郭・アウトラインがボケて見える ○ 特にVRの場合、 カメラ( =頭 )の位置・向きが 常に変化するため、顕著にこの問題が現れる
  154. 154. #出張ヒストリア2018#出張ヒストリア2018 TAAのデメリット ● ディティールが潰れて消える ○ 特に遠景 ● スペキュラ・高周波成分が消える ○ のっぺりした感じに
  155. 155. #出張ヒストリア2018#出張ヒストリア2018 結構デメリットある! これを避けるために FXAAを採用しているタイトルもある
  156. 156. #出張ヒストリア2018#出張ヒストリア2018 TAAのデメリット緩和向けのパラメータ ● r.TemporalAAFilterSize ○ デフォルト:1.0 ○ 0.0に近づけるほど、ボケなくなる(絵がくっきりする) しかし、エイリアシングが発生しやすくなる… ● r.TemporalAACurrentFrameWeight ○ デフォルト:0.04 ○ 1.0に近づけるほど、ボケ・ゴーストが発生しなくなる しかし、エイリアシングが発生しやすくなる…
  157. 157. #出張ヒストリア2018#出張ヒストリア2018 スペキュラエイリアシングを起こさない工夫 ノーマルマップ・ラフネスマップの調整 ○ マテリアルのプロパティ Normal Curvature to Roughness を有効にすることで ノーマル情報からラフネスを調整可能 ラフネス値0 1
  158. 158. #出張ヒストリア2018#出張ヒストリア2018 スペキュラエイリアシングを起こさない工夫 スペキュラが不要なら マテリアルのプロパティ“Full Rough”を有効に ● ラフネス値を強制的に1に ● シェーダ数が削減されるので パフォーマンス的にもメリットあり!
  159. 159. #出張ヒストリア2018#出張ヒストリア2018 その他 ● LOD機能で遠景のメッシュの形状を平坦にすることで、 小さいポリゴンからのエイリアシングを回避 ○ Static Meshならエンジンの標準機能でLOD作成可能 ● TAAによる遠景のテクスチャのボケ対策 r.MipMapLODBias -1 ○ 強制的にテクスチャのミップレベルを上げる
  160. 160. #出張ヒストリア2018#出張ヒストリア2018 その他 映像業界ならSSAAを使う選択肢も ○ 例:4Kでレンダリングして、フルHDに縮小 ○ 処理負荷はかなり高いが、綺麗にエイリアシングを排除できる
  161. 161. #出張ヒストリア2018#出張ヒストリア2018 https://www.slideshare.net/siliconstudio/ss-38733183
  162. 162. #出張ヒストリア2018#出張ヒストリア2018 スクリーンスペース アンビエント オクルージョン ( Screen Space Ambient Occulsion, SSAO )
  163. 163. #出張ヒストリア2018#出張ヒストリア2018 SSAOとは 環境光の遮蔽度合いを計算し、 その結果を元に陰影を表現する手法 ○ 画面が引き締まったり、設置感が出るなどの効果がある
  164. 164. #出張ヒストリア2018#出張ヒストリア2018
  165. 165. #出張ヒストリア2018#出張ヒストリア2018
  166. 166. #出張ヒストリア2018#出張ヒストリア2018 SSAOの効果 キャラクタの陰影を強調したりも ○ ノンフォト寄りのキャラクタとは相性悪い場合も…
  167. 167. #出張ヒストリア2018#出張ヒストリア2018 おまけ 「Contact Shadow」 スクリーンスペースのシャドウイング手法 ○ http://api.unrealengine.com/JPN/Engine/Rendering/Lightin gAndShadows/ContactShadows/ Contact Shadow:OFF Contact Shadow:ON
  168. 168. #出張ヒストリア2018#出張ヒストリア2018 SSAOの調整パラメータ ● Intensity ○ 陰影の濃さ ○ 上げすぎると濃すぎるので注意 ● 半径 ○ 陰影の範囲・大きさ ○ 値が大きいと ノイズが目立つので注意 ● Quality ○ 品質 (そのまんま)
  169. 169. #出張ヒストリア2018#出張ヒストリア2018
  170. 170. #出張ヒストリア2018#出張ヒストリア2018
  171. 171. #出張ヒストリア2018#出張ヒストリア2018
  172. 172. #出張ヒストリア2018#出張ヒストリア2018 SSAOの注意点 ① 負荷高い!!!
  173. 173. #出張ヒストリア2018#出張ヒストリア2018 SSAOの負荷を緩和するには… ● 半径、Quality、 負荷調整パラメータで調整 SSAOの負荷調整パラメータ ○ r.AmbientOcclusionMipLevelFactor ○ r.AmbientOcclusionMaxQuality ○ r.AmbientOcclusionLevels ○ r.AmbientOcclusionRadiusScale
  174. 174. #出張ヒストリア2018#出張ヒストリア2018 SSAOの負荷を緩和するには… ● 特定の環境の場合、 非同期でSSAOを動作させることが可能 ○ r.AmbientOcclusion.Compute 2 or 3 ○ ただし、ノーマルに対して適用されなくなるので注意 ● SSAOは使用しない! ○ 画作りの方向次第ではむしろ不要なケースも
  175. 175. #出張ヒストリア2018#出張ヒストリア2018 「反射?なにそれ?おいしいの?」なシーンの例
  176. 176. #出張ヒストリア2018#出張ヒストリア2018 SSAOの注意点 ② Quality設定を下げた場合 パターンノイズが目立ってしまう
  177. 177. #出張ヒストリア2018#出張ヒストリア2018 SSAOのノイズを緩和するには ● Quality設定を上げる ● Temporal AAを使用する
  178. 178. #出張ヒストリア2018#出張ヒストリア2018 スクリーンスペースリフレクション ( Screen Space Reflection, SSR )
  179. 179. #出張ヒストリア2018#出張ヒストリア2018 SSRとは レンダリング結果を用いて 反射を擬似的に表現する手法 動的なオブジェクトも 反射に含まれるのがメリット!
  180. 180. #出張ヒストリア2018#出張ヒストリア2018 SSR:OFF
  181. 181. #出張ヒストリア2018#出張ヒストリア2018 SSR:ON
  182. 182. #出張ヒストリア2018#出張ヒストリア2018 UE4っぽい!!!
  183. 183. #出張ヒストリア2018#出張ヒストリア2018 SSR調整用パラメータ Intensity ○ 掛かり度合い ○ 0にすると、SSRが無効に Quality ○ 品質(そのまま) Max Roughness ○ どの程度の粗さの床にまで SSRによる反射を適用するか
  184. 184. #出張ヒストリア2018#出張ヒストリア2018 SSRの注意点 ① 負荷高い!!!
  185. 185. #出張ヒストリア2018#出張ヒストリア2018 SSRのパフォーマンス調整 Qualityプロパティ、 または、”r.SSR.Quality” で調整 ○ 低い方の値が適用される ● “r.SSR.Quality 0” :SSR無効 ● “r.SSR.Quality 1” ( = Quality 0~39 ) :low ● “r.SSR.Quality 2” ( = Quality 40~59 ) :medium ● “r.SSR.Quality 3” ( = Quality 60~79 ) :high ● “r.SSR.Quality 4” ( = Quality 80~100 ) :very high
  186. 186. #出張ヒストリア2018#出張ヒストリア2018 SSRの注意点 ② 画面に映っていないオブジェクトは 反射に反映することができない ○ レンダリング結果を使用しているため
  187. 187. #出張ヒストリア2018#出張ヒストリア2018 画面に写っていない部分を反射に含めるためには… ● Reflection Capture ● Planar Reflection ● レイトレーシング
  188. 188. #出張ヒストリア2018#出張ヒストリア2018 Reflection Captureを使う場合 ● 動的なオブジェクトは反射に含まれない ● SSRに比べて品質が低いため ○ SSRと併用すると違和感が発生する可能性がある
  189. 189. #出張ヒストリア2018#出張ヒストリア2018 SSR vs Planar Reflection
  190. 190. #出張ヒストリア2018#出張ヒストリア2018 Planar Reflectionのメリット・デメリット メリット ○ SSRでは不可能だった 画面外のオブジェクトも反射に含められる デメリット ○ 反射に含めるためには オブジェクトを再度をレンダリングする必要がある → SSRに比べて処理負荷が大きい…
  191. 191. #出張ヒストリア2018#出張ヒストリア2018 レイトレーシング 年末をお楽しみに!以上! https://www.unrealengine.com/ja/blog/technology- sneak-peek-real-time-ray-tracing-with-unreal-engine
  192. 192. #出張ヒストリア2018#出張ヒストリア2018 SSR, 反射に関する公式ドキュメント ● Screen Space Reflections ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/ScreenSpaceReflection ● Reflections ○ https://docs.unrealengine.com/en-us/Resources/Showcases/Reflections ● Reflection Environment ○ https://docs.unrealengine.com/en- us/Engine/Rendering/LightingAndShadows/ReflectionEnvironment ● Planar Reflections ○ https://docs.unrealengine.com/en- us/Engine/Rendering/LightingAndShadows/PlanarReflections
  193. 193. #出張ヒストリア2018#出張ヒストリア2018 グローバルイルミネーション ( Global Illuminiation )
  194. 194. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにあるグローバルイルミネーションとは? UE4のLightmassによって事前計算された 間接光の強さ・色を補正する機能 http://api.unrealengine.com/JPN/Engine/Rendering/LightingA ndShadows/VolumetricLightmaps/index.html
  195. 195. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにあるグローバルイルミネーションとは? UE4のLightmassによって事前計算された 間接光の強さ・色を補正する機能 Lightmassを使ってない( = 全ライトがMovable ) 場合 は 効果ないのでご注意を
  196. 196. #出張ヒストリア2018#出張ヒストリア2018 モーションブラー ( Motion Blur )
  197. 197. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにおけるモーションブラーとは 動きの軌跡の表現… ではなくて!
  198. 198. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにおけるモーションブラーとは シャッタースピードを遅くした際の 「被写体ブレ」「手ブレ」を再現する仕組み 被写体ブレ 手ブレ http://www.nikon- image.com/enjoy/phototech/manual/04/03.html
  199. 199. #出張ヒストリア2018#出張ヒストリア2018 モーションブラーの仕組み フレーム間の移動ベクトルを保存し その情報をもとにブラー効果を適用
  200. 200. #出張ヒストリア2018#出張ヒストリア2018 ShowFlag.VisualizeMotionBlur 1 で可視化
  201. 201. #出張ヒストリア2018#出張ヒストリア2018 モーションブラーを調整する上で重要なパラメータ Amount:ブラー効果の掛け度合い ≒ ブラー効果を掛けるか否かの閾値
  202. 202. #出張ヒストリア2018#出張ヒストリア2018 動きの流れが表現されていい感じ! なんかかっこいいし! モーションブラー最高!!! ちょっとまって!
  203. 203. #出張ヒストリア2018#出張ヒストリア2018 モーションブラーの注意点 ① カメラを移動・回転した際に 画面全体にブラー効果がかかる(手ブレの再現) 酔う…(´;ω;`) 敵が見えん…(# ゚Д゚)
  204. 204. #出張ヒストリア2018#出張ヒストリア2018 モーションブラーの注意点 ① どんなコンテンツで問題になるのか? ○ カメラ(画面)が大きく動く可能性がある ○ 視認性が重要なゲーム性 モーションブラーは切るか、 Amountは小さい方が無難… ○ デフォルト値:0.5なので注意
  205. 205. #出張ヒストリア2018#出張ヒストリア2018 モーションブラーの注意点 ② 画面の一部だけに モーションブラーを適用することは不可能 ポストプロセスマテリアルを使って自作 又は、ポストプロセス以外の手法で実現
  206. 206. #出張ヒストリア2018#出張ヒストリア2018 [FREE] Smear Frame effect - Download Project from GitHub!
  207. 207. #出張ヒストリア2018#出張ヒストリア2018 ワールドポジションオフセットを用いた モーションブラー についての解説もある神参考書! 皆買おう!!!
  208. 208. #出張ヒストリア2018#出張ヒストリア2018 武器の軌跡の場合は 円形状のモデルを用意した方が都合が良いケースも…
  209. 209. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル ( Post Process Material )
  210. 210. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスに マテリアルを使うことで 色々できるぞ!
  211. 211. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル de できること 画面にテクスチャを貼り付け・ブレンドしたり… マーケットプレイス「Damage and Shield Effects」
  212. 212. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル de できること マテリアルを活用した複雑な演出ができたり… マーケットプレイス「Sci-Fi and Glitch Post-Process」
  213. 213. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル de できること みんな大好きトゥーン表現ができたり… Post Processing Based Anime and Manga Stylistic Rendering Pack Cel Shading Outline Post Process w Transparency
  214. 214. #出張ヒストリア2018#出張ヒストリア2018 今日話す内容 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3. ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
  215. 215. #出張ヒストリア2018#出張ヒストリア2018 水彩 Post Process Material ( あく @Aqu 様) https://aqu.hatenablog.com/entry/2018/07/09/000805
  216. 216. #出張ヒストリア2018#出張ヒストリア2018 PP Cel Shader ( alwei @aizen76 様 ) https://github.com/alwei/PPCelShader
  217. 217. #出張ヒストリア2018#出張ヒストリア2018 SNNフィルタ ( moko @moko_03 _25 様 ) http://effect.hatenablog.com/entry/2018/04/01/054909
  218. 218. #出張ヒストリア2018#出張ヒストリア2018 某S氏( @junyash )のトゥーンシェーダー https://qiita.com/junyash/items/0e528e1f291a710cf04f
  219. 219. #出張ヒストリア2018#出張ヒストリア2018 クロスフィルタ ( com04 @com04様 ) http://com04.sakura.ne.jp/unreal/wiki/index.php?%A5%DD%A5%B9%A5%C8%A5%D7%A5 %ED%A5%BB%A5%B9-%A5%AF%A5%ED%A5%B9%A5%D5%A5%A3%A5%EB%A5%BF
  220. 220. #出張ヒストリア2018#出張ヒストリア2018 SphereMask ( MozPaca @MozPaca398 様) http://mozpaca.hatenablog.com/entry/20180516/1526453541
  221. 221. #出張ヒストリア2018#出張ヒストリア2018 Radial Blur PostProcess Material https://forums.unrealengine.com/community/community-content-tools-and-tutorials/28458- radial-blur-postprocess-material
  222. 222. #出張ヒストリア2018#出張ヒストリア2018 おすすめのポストプロセスアセット https://www.unrealengine.com/marketplace/chameleon
  223. 223. #出張ヒストリア2018#出張ヒストリア2018 その他 有益資料 ● Unreal Engineを使用した商用タイトルで のノンフォトリアルレン ダリング(NPR)事例 ○ https://www.slideshare.net/TatsuhiroTanaka1/unreal-engine-npr- 80721783 ● 妹でもわかるUnreal Engine 4 ポストプロセス関連記事 ○ http://imoue.hatenablog.com/entry/advent_calendar_2017 ● 【UE4】被写界深度半透明物体共生戦略手法零式(Type-0) ○ http://darakemonodarake.hatenablog.jp/entry/2014/12/23/0000 34
  224. 224. #出張ヒストリア2018#出張ヒストリア2018 今日話す内容 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3. ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
  225. 225. #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスで ヒット感を強めてみた
  226. 226. #出張ヒストリア2018#出張ヒストリア2018 スタート
  227. 227. #出張ヒストリア2018#出張ヒストリア2018 ブルーム追加
  228. 228. #出張ヒストリア2018#出張ヒストリア2018 ビネット追加
  229. 229. #出張ヒストリア2018#出張ヒストリア2018 色収差追加
  230. 230. #出張ヒストリア2018#出張ヒストリア2018 モーションブラー追加
  231. 231. #出張ヒストリア2018#出張ヒストリア2018 適切なヒットストップや カメラ揺れを追加したらさらに良くなるはず… ○ 趣旨と反するので試さず… ゲスト出演 ○ “ReDroid MeKa-Ko”ちゃん! ○ 作者:なん @tarava777 様! ○ マーケットプレイスにて 近日販売予定!
  232. 232. #出張ヒストリア2018#出張ヒストリア2018 デフォルト
  233. 233. #出張ヒストリア2018#出張ヒストリア2018 色々調整
  234. 234. #出張ヒストリア2018#出張ヒストリア2018 さいごに ● UE4標準のポストプロセスは非常に強力で 組み合わせることで様々な表現を実現できます! ● 非アーティストでも、少し調整するだけで 絵や表現のクオリティを格段に上げられます! ● デフォルト設定のままは非常にもったいない! 是非色々弄って遊んでみてください!
  235. 235. #出張ヒストリア2018#出張ヒストリア2018 http://historia.co.jp/ue4petitcon10
  236. 236. #出張ヒストリア2018#出張ヒストリア2018 http://www.unrealengine.jp/unrealfest/

×