猫でも分かるUE4のポストプロセスを使った演出・絵作り【出張ヒストリア！ ゲーム開発勉強会2018】

猫でも分かる UE4のポストプロセスを使った演出・絵作り - 出張ヒストリア！ゲーム開発勉強会 2018 Epic Games Japan 岡田和也 #出張ヒストリア2018

自己紹介 Epic Games Japan サポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) ライセンシのサポートしたり 講演したり なんかいろいろしてたり #出張ヒストリア2018

本日のお題 猫でも分かる UE4の ポストプロセス を使った 演出・絵作り #出張ヒストリア2018

ポストプロセス( Post Process )って？ レンダリング結果に対して行う 画像処理 #出張ヒストリア2018

「Unreal Engine 4のレンダリングフロー総おさらい」より #出張ヒストリア2018

映像業界でいう 「撮影」「コンポジット」にあたる部分 ← この本良かった！ #出張ヒストリア2018

#出張ヒストリア2018 ポストプロセス適用前

#出張ヒストリア2018 ポストプロセス適用後

ポストプロセス適用前 #出張ヒストリア2018 ポストプロセス適用後

直近のUE4タイトルにおける活用例 OCTOPATH TRAVELER #出張ヒストリア2018

先日話題になった 水彩Post Process Material あく ( @Aqu_ )さん #出張ヒストリア2018

https://aqu.hatenablog.com/ entry/2018/07/09/000805 #出張ヒストリア2018

何故このお題を 選んだのか？ #出張ヒストリア2018

そのポストプロセス あなたの作品に合っていますか？ #出張ヒストリア2018

ポストプロセスのデフォルト設定 コントラストきつめ！ #出張ヒストリア2018 うお、まぶし！

なんとなく調整したはいいけど… ぱっと見きれいだけど 画面見づらい… #出張ヒストリア2018 ホラーゲームじゃないのに 画面がずっと暗い…

#出張ヒストリア2018

ポストプロセスは 作品の画作りだけでなく 内容にも影響する重要な要素！ #出張ヒストリア2018

でもデフォルト設定のままに なっている方を見かける… なんで！？ #出張ヒストリア2018

できることが多すぎ ○ ○ 大量の謎のパラメータ… どこから手を付けたらいいのか分からない… #出張ヒストリア2018

ドキュメントがパラメータの紹介だけ ○ ○ しかも内容が微妙に古い…( ｺﾞﾒﾝﾅｻｲ 具体的にどんな活用例があるか分かりづらい #出張ヒストリア2018

今日話すこと 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

今日話さないこと ● ● ● 各パラメータの詳細な解説 ポストプロセスマテリアルについて NPR系の実装について #出張ヒストリア2018

ポストプロセスの使い方 #出張ヒストリア2018

ポストプロセスを使用・調整する方法 ● ● ● ● ● プロジェクト設定 Post Process Volume Camera Component Blueprint Sequencer #出張ヒストリア2018

プロジェクト設定 #出張ヒストリア2018

プロジェクト設定 ポストプロセスのデフォルト設定 ○ 標準で各機能が有効になっているので 意図しないポストプロセスがかかっていることも #出張ヒストリア2018

不要なポストプロセスが走らないようにするには ● ● プロジェクト設定の チェックボックスをOFFっておく Post Process Volumeや Camera Component側で無効化する #出張ヒストリア2018

付録： Post Process Volumeによる設定上書き 例：Project SettingsでBloomが 有効 #出張ヒストリア2018

付録： Post Process Volumeによる編集の判定 例：Project SettingsでBloomが 無効 #出張ヒストリア2018

Post Process Volume 使用するポストプロセスの設定、 ポストプロセスの適用範囲を設定するボリューム #出張ヒストリア2018

Post Process Volumeが適用される条件 ● ボリューム内にカメラがある場合 ○ ● 使用例：水中専用のポストプロセス Infinite Extentを有効にしている場合 #出張ヒストリア2018

Camera Component カメラ毎にポストプロセス設定を行うことが可能 ○ SceneCapture系も同様 #出張ヒストリア2018

Blueprintからポストプロセスを制御する方法 Post Process Volumeや Camera Componentのポストプロセス設定を編集可能 #出張ヒストリア2018 https://api.unrealengine.com/JPN/Engine/Bluepri nts/UserGuide/Variables/Structs/index.html

Sequencerからポストプロセスを制御する方法 レベル上のPost Process Volume, Camera Componentが持つパラメータを制御 #出張ヒストリア2018

おまけ：Preview Scene Settings Persona, Material, Niagaraエディタでは プレビュー用のポストプロセスを設定可能 #出張ヒストリア2018

おまけ：ポストプロセスを無効化する方法 ● ● 表示メニューから 各ポストプロセスの表示ON/OFF “ShowFlag.PostProcessing 0” #出張ヒストリア2018

ここまでのまとめ UE4のポストプロセスは 様々な方法で設定・制御することができる！ ○ ○ ○ ○ ○ プロジェクト設定 Post Process Volume Camera Component Blueprint Sequencer #出張ヒストリア2018

今日話す内容 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

UE4が用意している ポストプロセス機能の紹介 #出張ヒストリア2018

PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング #出張ヒストリア2018 ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル

レンズ系のポストプロセス処理 カメラレンズの光学特性の疑似再現 #出張ヒストリア2018

被写界深度によるボケ #出張ヒストリア2018 レンズフレア

以降のスライドではレンズの特性について 軽く解説している箇所があるのですが… あくまで初心者向けなので 「あえて」簡略化してる箇所があります！ ですので…何卒…なにとぞ…！！！ #出張ヒストリア2018

被写界深度 ( Depth of Field ) #出張ヒストリア2018

被写界深度とは？ カメラの被写界深度の再現 ○ フォーカス、ピント、ボケ( Bokeh ) #出張ヒストリア2018

視線誘導、奥行き感の表現など 様々な演出に活用できるすごいやつ！ #出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

UE４が用意している被写界深度の手法 (UE4.20時点) Gaussian DoF ○ ○ 最も高速かつ簡易的な手法 今後はモバイル専用になる予定 Bokeh DoF ○ ○ 高品質だけど処理負荷高い手法 今後は非推奨になる予定 #出張ヒストリア2018

Gaussian DoF #出張ヒストリア2018 Bokeh DoF

UE４が用意している被写界深度の手法 (UE4.20時点) Cinematic DoF new! ○ ○ Bokeh並の品質 かつ 高速な手法 UE4.19以前のCircle DoFを置き換え #出張ヒストリア2018

Cinematic DoF は いいぞ！ DoFおじさん #出張ヒストリア2018

Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 #出張ヒストリア2018

Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 #出張ヒストリア2018

Cinematic DoFを使うには 手法① #出張ヒストリア2018

被写界深度を制御する要素 ● Focus Distance ( 被写体までの距離 ) ● Focal Region ( 絞り, F値 ) ● Focal Length (焦点距離) or FoV ( 画角 ) Focus Distance #出張ヒストリア2018

付録 #出張ヒストリア2018

めんどくさ！！！ #出張ヒストリア2018

Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 (個人的オススメは断然こっち！) #出張ヒストリア2018

Cine Camera Actorとは 実在するカメラの挙動を再現するために 詳細な設定項目が用意されたCamera Actor #出張ヒストリア2018

超絶簡単！！！ Cine Camera サイコー！ #出張ヒストリア2018

被写界深度のデバッグ機能 ShowFlag.VisualizeDOF 1 #出張ヒストリア2018

付録：被写界深度に関する公式ドキュメント ● Depth of Field ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/DepthOfField ● Cinematic Depth of Field Method ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/DepthOfField/CinematicDOFMeth ods ● Mobile Depth of Dield Method ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/DepthOfField/MobileDOFMethods #出張ヒストリア2018

ブルーム ( Bloom ) #出張ヒストリア2018

ブルームとは 発光現象を表現する機能 #出張ヒストリア2018

ブルームのパラメータ Intensity ○ ○ ブルームの強さ・掛かり度合い 値を上げるほど、 より眩しく、より広くブルームが掛かるように #出張ヒストリア2018

ブルームのパラメータ Threshold ○ ○ ブルームを発生する明るさのしきい値 初期値(-1)の場合 画面全体にブルームが掛かる… #出張ヒストリア2018

#出張ヒストリア2018

付録 Threshold 大事！ 人肌は…発光しないのだ…！ ディフュージョン効果があるけども… 背景オブジェクトとの兼ね合いを考えると ちゃんと人肌用にフィルタ用意したほうがいいと思う… https://www.4gamer.net/games/216/ G021678/20140714079/ #出張ヒストリア2018

ブルームの汚れマスク レンズの汚れや傷の表現 #出張ヒストリア2018

#出張ヒストリア2018 汚れマスク：なし

#出張ヒストリア2018 汚れマスク：あり

ブルームの畳み込み機能 ( Bloom Convolution ) 畳み込み機能を使うことで ブルームの形状を変更・調整できる #出張ヒストリア2018

男の子が好きなやつができるぞ！ #出張ヒストリア2018

ブルームの畳み込み機能のパラメータ MetodをConvolutionに変更すると 専用パラメータが編集可能に #出張ヒストリア2018

調整しないと悪目立ちすることも… 圧倒的 J・J・◯イブラムス感 #出張ヒストリア2018

ブルームの畳み込み機能の注意点 ① 負荷高い！！！ 映像作品やハイエンドコンテンツ向け #出張ヒストリア2018

ブルームの畳み込み機能の注意点 ② この機能用のデフォルトテクスチャの ファイルサイズがバカでかい！ ( 32MB ショック！ ) ○ ○ パフォーマンスやパッケージサイズに影響… モバイル, HTML5は畳み込み機能が使えないので パッケージに含まれないようになっている /Engine/EngineMaterials/ DefaultBloomKernel #出張ヒストリア2018

畳み込み機能使わないなら 解像度下げてファイルサイズ落としたほうが無難 テクスチャの圧縮設定より 2048 x 2048 -> 4 x 4 に ○ 32MB -> 1KB以下に #出張ヒストリア2018

https://www.youtube.com/watch?v=0Ge7ykxDTIQ #出張ヒストリア2018

付録 Bloomに関する公式ドキュメント ● Bloom ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/Bloom ● Unreal Engine - Image-Based (FFT) Convolution for Bloom ○ https://www.youtube.com/watch?v=SkJgopq-JQA #出張ヒストリア2018

レンズフレア ( Lens Flare ) #出張ヒストリア2018

レンズフレアとは 光源の散乱をシミュレート #出張ヒストリア2018

引用：WEBアニメスタイル「第5回エフェクトを考える」 http://animestyle.jp/2016/03/07/9837/ #出張ヒストリア2018

レンズフレアの調整 Intensity ○ 明るさ Tint ○ レンズフレアの色調整 BokehSize ○ ボケの大きさ #出張ヒストリア2018 Threshold ○ レンズフレアを発生する 明るさのしきい値 BokehShape ○ ボケの形

レンズフレアのボケの形状 デフォルトは６角形 ○ エンジンコンテンツに他の形状が用意されている #出張ヒストリア2018

レンズフレアのユースケース 使い所難しい… ○ ○ 頻繁に出ているとうざったい 演出としてピンポイントで使うのがいいのでは？逆光とか #出張ヒストリア2018

付録 レンズフレアに関する公式ドキュメント ● Lens Flare ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/LensFlare #出張ヒストリア2018

自動露光 ( Eye Adaptation, Auto-Exposure ) #出張ヒストリア2018

自動露光とは 画面の明るさの自動調整 ○ 「白飛びしないように」「画面が暗すぎないように」 #出張ヒストリア2018

暗順応 -Wikipedia○ ○ 可視光量の多い環境から少ない環境へ急激に変化した場合に、時 間経過とともに徐々に視力が確保される、動物の自律機能である https://ja.wikipedia.org/wiki/%E6%9A%97%E9%A0%86% E5%BF%9C #出張ヒストリア2018

自動露光の調整 明るさの自動調整は各パラメータと シーンの色のヒストグラムに基づいて行われる ● Min/Max Brightness ○ ● Speed Up / Down ○ ● 明るさの最小/最大値 明るさの調整速度 Histogram Log Min / Max ○ 使用するヒストグラムの範囲 #出張ヒストリア2018

自動露光の調整用機能 ShowFlag.VisualizeHDR 1 #出張ヒストリア2018

自動露光の注意点 デフォルトで有効 かつ Min / Max Brightnessの値が異なる 画面の明るさを 勝手に変えられてしまう！ #出張ヒストリア2018

自動露光の注意点 Min, Max Brightnessを 同じ値にしておく 自動露光による 明るさ調整が無効に #出張ヒストリア2018

自動露光に関する公式ドキュメント ● Eye Adaption [ Auto-Exposure ] ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/AutomaticExposure #出張ヒストリア2018

ビネット効果 ( Vignette ) #出張ヒストリア2018

ビネット効果とは カメラレンズの周辺減光の再現 #出張ヒストリア2018

ビネット効果の調整 Vignette Intensity ○ ○ 掛かり度合いの調整 直接入力で1以上に設定可能 #出張ヒストリア2018

ビネット効果の注意点 デフォルト(0.4)だと、薄く掛かってしまうので注意！ #出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

ビネット効果のユースケース 画面中心への視線誘導 ○ トンネル効果 #出張ヒストリア2018

標準で用意されているビネット効果の欠点 掛かり度合いの調整しかできない… 色を変えたり… #出張ヒストリア2018 横長にしたり…

ビネット効果をより細かく調整したい場合 後述のポストプロセスマテリアルで対応することに #出張ヒストリア2018 https://forums.unrealengine.com/developmentdiscussion/rendering/40562-colored-vignette

ビネット効果に関する公式ドキュメント ● Vignette ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/Vignette #出張ヒストリア2018

グレイン効果 ( Grain ) #出張ヒストリア2018

グレイン効果とは フィルム特有のノイズの再現 #出張ヒストリア2018

グレイン効果の調整 Grain Jitter ○ 画面のジラつき度合い Grain Intensity ○ ノイズのかけ具合 #出張ヒストリア2018

グレイン効果のユースケース ● フィルム感を出したいとき ● 映像に質感や雰囲気を出したい場合…らしい… ○ 単なるノイズに見えてしまう 可能性があるので注意 #出張ヒストリア2018

色収差 ( Scene Fringe, Chromatic Aberration ) #出張ヒストリア2018

色収差 外側になるほど色がずれるレンズの特性を再現 ○ 画面全体に均一にRGBがズレてるのは正しい色収差ではないのだ！ #出張ヒストリア2018

色収差 外側になるほど色がずれるレンズの特性を再現 #出張ヒストリア2018

色収差のパラメータ Intensity ○ 色収差の掛かり度合い Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 ) #出張ヒストリア2018

色収差のパラメータ ● Intensity ○ ● 色収差の掛かり度合い Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 ) #出張ヒストリア2018

色収差のユースケース ヒット・ダメージ・爆発演出時に使われている印象 ○ 衝撃 や 異常 の表現に使えるかも #出張ヒストリア2018

色収差 使用時の注意点 ● 色収差を気持ち悪く感じる人もいるので注意！ ○ ● 長時間 画面全体に 強めに 掛かっていると顕著 効果的に使うためには 絵的なセンスが必要な印象… 短時間だけ表示して エフェクト的な用途が無難かも #出張ヒストリア2018

色収差に関する公式ドキュメント ● Scene Fringe [Choromatic Aberration] ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/SceneFringe #出張ヒストリア2018

レンズ系のポストプロセスの注意点 現実世界のレンズは、「ビネット」「グレイン」「色収差」 を抑える方向に改善 ○ 全体の絵作りをする上で多用すると 違和感を覚える人もしばしば… #出張ヒストリア2018

レンズ系のポストプロセスの注意点 逆に言うと、 「ビネット」「グレイン」「色収差」は 昔のカメラレンズの特性を表現している 回想シーンなどの 過去を強調したい場面で有効かも #出張ヒストリア2018

レンズ系のポストプロセスに関しては 実際のカメラで色々試してみると 各パラメータの理解が深まるのでオススメ！ #出張ヒストリア2018

PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング #出張ヒストリア2018 ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル

カラーグレーディング ( Color Grading ) & トーンマッピング ( Tone Mapping ) #出張ヒストリア2018

以降の内容は あくまでイメージとして考えて下さい！ ”この分野あまり詳しくないですが…勢”は 何卒…なにとぞ…！ #出張ヒストリア2018

トーンマッピング ( Tone Mapping )とは HDR #出張ヒストリア2018 ↑ これ LDR

UE4における カラーグレーディング ( Color Grading )とは HDR トーンマッピング 色調補正 #出張ヒストリア2018 ↑これ LDR

もっとちゃんとした話はこちらで！ UE4の色について v1.1 https://www.slideshare.net/ EpicGamesJapan/ue4-v11 #出張ヒストリア2018

ここでお伝えしたいこと 画面に表示するまでに 2種類の色補正処理が入ること トーンマッピング ○ HDR -> LDR 変換処理 カラーグレーディング ○ 色補正 #出張ヒストリア2018

トーンマッピングの効果 画面のコントラスト（明暗）の 調整 ○ ○ ○ Slope Toe Shoulder #出張ヒストリア2018 ：全体 の 調整 ：暗い箇所 の 調整 ：明るい箇所 の 調整

カラーグレーディング 調整項目 ひとまず… このパラメータをいじってみましょう！ #出張ヒストリア2018

カラーグレーディング - ホワイトバランス - 光の影響で色が変わってしまった 「白」を「白」に見えるようにする補正機能 色合いの調整として使用可能！ #出張ヒストリア2018

カラーグレーディング - ホワイトバランス - 画面の雰囲気・印象が大きく変わるのでオススメ！ #出張ヒストリア2018

https://cs.olympus-imaging.jp/jp/support/cs/DI/QandA/Basic/s0012.html #出張ヒストリア2018

カラーグレーディング – 色対応表(LUT) - Photoshopなどで作成した LUTテクスチャを使って色調補正をすることも可能！ #出張ヒストリア2018

#出張ヒストリア2018

カラーグレーディング – 色対応表(LUT) - マーケットプレイスで販売されている LUTテクスチャを使うという手も ○ 「LUT」または「grading」で検索！検索！ #出張ヒストリア2018

LUT使用時の注意点 LUTで色調補正した場合 モニタによって見え方が変わる可能性がある LUTはリファレンスとして使用 Color Gradingの各パラメータで最終調整 #出張ヒストリア2018

カラーグレーディング・トーンマッピングに関する 公式ドキュメント ● Color Grading and Filmic Tonemapper ○ ● https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/ColorGrading Using Lookup Tables( LUTs ) for Color Grading ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/UsingLUTs #出張ヒストリア2018

PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング #出張ヒストリア2018 ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル

アンチエイリアシング （ Anti-Aliasing ） #出張ヒストリア2018

アンチエイリアシングの効果 ジャギー（ピクセルのギザギザ）や スペキュラ・エイリアシング（チラツキ）を 抑制 #出張ヒストリア2018

AA未使用 #出張ヒストリア2018 Temporal AA

AA未使用 #出張ヒストリア2018 Temporal AA

UE4が用意しているアンチエイリアシング手法 ● FXAA ○ ● Temporal AA ( TAA ) ○ ○ ● モバイルでは使えず UE4のデフォルトはこれ モバイルでも使用可能 ( ただし簡易版 ) MSAA ○ Forward Rendering (モバイル含む) のみ使用可能 #出張ヒストリア2018

アンチエイリアシング手法の切り替え ● ● プロジェクト設定のRenderingカテゴリにある Anti-Aliasing Method ゲーム中に動的に変更したい場合 r.DefaultFeature.AntiAliasing ○ ○ ○ ○ 0 : None 1：FXAA 2：TemporalAA 3：MSAA #出張ヒストリア2018

https://www.4gamer.net/games/120/G012093/20121125002/ #出張ヒストリア2018

No AA #出張ヒストリア2018 FXAA TAA MSAA

ポリゴンの輪郭 FXAA TAA MSAA ポリゴンの表面 （テクスチャ・スペキュラ） 負荷 効果：中 効果：大 効果：小 効果：大 小 中 効果：大 効果：なし 大 FXAA #出張ヒストリア2018 TAA MSAA

注意 TAAは 万能な手法では ありません！！！ #出張ヒストリア2018

TAAのデメリット ● 画面変化が多いとゴースト（残像）が発生 ● 輪郭・アウトラインがボケて見える ○ 特にVRの場合、 カメラ( =頭 )の位置・向きが 常に変化するため、顕著にこの問題が現れる #出張ヒストリア2018

TAAのデメリット ● ディティールが潰れて消える ○ ● 特に遠景 スペキュラ・高周波成分が消える ○ のっぺりした感じに #出張ヒストリア2018

結構デメリットある！ これを避けるために FXAAを採用しているタイトルもある #出張ヒストリア2018

TAAのデメリット緩和向けのパラメータ ● r.TemporalAAFilterSize ○ ○ ● デフォルト：1.0 0.0に近づけるほど、ボケなくなる（絵がくっきりする） しかし、エイリアシングが発生しやすくなる… r.TemporalAACurrentFrameWeight ○ ○ デフォルト：0.04 1.0に近づけるほど、ボケ・ゴーストが発生しなくなる しかし、エイリアシングが発生しやすくなる… #出張ヒストリア2018

スペキュラエイリアシングを起こさない工夫 ノーマルマップ・ラフネスマップの調整 ○ マテリアルのプロパティ Normal Curvature to Roughness を有効にすることで ノーマル情報からラフネスを調整可能 0 ラフネス値 #出張ヒストリア2018 1

スペキュラエイリアシングを起こさない工夫 スペキュラが不要なら マテリアルのプロパティ“Full Rough”を有効に ● ● ラフネス値を強制的に1に シェーダ数が削減されるので パフォーマンス的にもメリットあり！ #出張ヒストリア2018

その他 ● LOD機能で遠景のメッシュの形状を平坦にすることで、 小さいポリゴンからのエイリアシングを回避 ○ ● Static Meshならエンジンの標準機能でLOD作成可能 TAAによる遠景のテクスチャのボケ対策 r.MipMapLODBias -1 ○ 強制的にテクスチャのミップレベルを上げる #出張ヒストリア2018

その他 映像業界ならSSAAを使う選択肢も ○ ○ 例：4Kでレンダリングして、フルHDに縮小 処理負荷はかなり高いが、綺麗にエイリアシングを排除できる #出張ヒストリア2018

https://www.slideshare.net/siliconstudio/ss-38733183 #出張ヒストリア2018

スクリーンスペース アンビエント オクルージョン （ Screen Space Ambient Occulsion, SSAO ） #出張ヒストリア2018

SSAOとは 環境光の遮蔽度合いを計算し、 その結果を元に陰影を表現する手法 ○ 画面が引き締まったり、設置感が出るなどの効果がある #出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

SSAOの効果 キャラクタの陰影を強調したりも ○ ノンフォト寄りのキャラクタとは相性悪い場合も… #出張ヒストリア2018

おまけ 「Contact Shadow」 スクリーンスペースのシャドウイング手法 ○ http://api.unrealengine.com/JPN/Engine/Rendering/Lightin gAndShadows/ContactShadows/ Contact Shadow：OFF #出張ヒストリア2018 Contact Shadow：ON

SSAOの調整パラメータ ● Intensity ○ ○ ● 半径 ○ ○ ● 陰影の濃さ 上げすぎると濃すぎるので注意 陰影の範囲・大きさ 値が大きいと ノイズが目立つので注意 Quality ○ 品質 (そのまんま) #出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

#出張ヒストリア2018

SSAOの注意点 ① 負荷高い！！！ #出張ヒストリア2018

SSAOの負荷を緩和するには… ● 半径、Quality、 負荷調整パラメータで調整 SSAOの負荷調整パラメータ ○ ○ ○ ○ r.AmbientOcclusionMipLevelFactor r.AmbientOcclusionMaxQuality r.AmbientOcclusionLevels r.AmbientOcclusionRadiusScale #出張ヒストリア2018

SSAOの負荷を緩和するには… ● 特定の環境の場合、 非同期でSSAOを動作させることが可能 ○ ○ ● r.AmbientOcclusion.Compute 2 or 3 ただし、ノーマルに対して適用されなくなるので注意 SSAOは使用しない！ ○ 画作りの方向次第ではむしろ不要なケースも #出張ヒストリア2018

「反射？なにそれ？おいしいの？」なシーンの例 #出張ヒストリア2018

SSAOの注意点 ② Quality設定を下げた場合 パターンノイズが目立ってしまう #出張ヒストリア2018

SSAOのノイズを緩和するには ● ● Quality設定を上げる Temporal AAを使用する #出張ヒストリア2018

スクリーンスペースリフレクション （ Screen Space Reflection, SSR ） #出張ヒストリア2018

SSRとは レンダリング結果を用いて 反射を擬似的に表現する手法 動的なオブジェクトも 反射に含まれるのがメリット！ #出張ヒストリア2018

#出張ヒストリア2018 SSR：OFF

#出張ヒストリア2018 SSR：ON

UE4っぽい！！！ #出張ヒストリア2018

SSR調整用パラメータ Intensity ○ ○ 掛かり度合い 0にすると、SSRが無効に Quality ○ 品質（そのまま） Max Roughness ○ どの程度の粗さの床にまで SSRによる反射を適用するか #出張ヒストリア2018

SSRの注意点 ① 負荷高い！！！ #出張ヒストリア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 #出張ヒストリア2018

SSRの注意点 ② 画面に映っていないオブジェクトは 反射に反映することができない ○ レンダリング結果を使用しているため #出張ヒストリア2018

画面に写っていない部分を反射に含めるためには… ● Reflection Capture ● Planar Reflection ● レイトレーシング #出張ヒストリア2018

Reflection Captureを使う場合 ● 動的なオブジェクトは反射に含まれない ● SSRに比べて品質が低いため ○ SSRと併用すると違和感が発生する可能性がある #出張ヒストリア2018

SSR vs Planar Reflection #出張ヒストリア2018

Planar Reflectionのメリット・デメリット メリット ○ SSRでは不可能だった 画面外のオブジェクトも反射に含められる デメリット ○ 反射に含めるためには オブジェクトを再度をレンダリングする必要がある → SSRに比べて処理負荷が大きい… #出張ヒストリア2018

レイトレーシング 年末をお楽しみに！以上！ https://www.unrealengine.com/ja/blog/technologysneak-peek-real-time-ray-tracing-with-unreal-engine #出張ヒストリア2018

SSR, 反射に関する公式ドキュメント ● Screen Space Reflections ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/ScreenSpaceReflection ● Reflections ○ https://docs.unrealengine.com/en-us/Resources/Showcases/Reflections ● Reflection Environment ○ https://docs.unrealengine.com/enus/Engine/Rendering/LightingAndShadows/ReflectionEnvironment ● Planar Reflections ○ https://docs.unrealengine.com/enus/Engine/Rendering/LightingAndShadows/PlanarReflections #出張ヒストリア2018

グローバルイルミネーション （ Global Illuminiation ） #出張ヒストリア2018

ポストプロセスにあるグローバルイルミネーションとは？ UE4のLightmassによって事前計算された 間接光の強さ・色を補正する機能 #出張ヒストリア2018 http://api.unrealengine.com/JPN/Engine/Rendering/LightingA ndShadows/VolumetricLightmaps/index.html

ポストプロセスにあるグローバルイルミネーションとは？ UE4のLightmassによって事前計算された 間接光の強さ・色を補正する機能 Lightmassを使ってない( = 全ライトがMovable ) 場合 は 効果ないのでご注意を #出張ヒストリア2018

モーションブラー （ Motion Blur ） #出張ヒストリア2018

ポストプロセスにおけるモーションブラーとは 動きの軌跡の表現… ではなくて！ #出張ヒストリア2018

ポストプロセスにおけるモーションブラーとは シャッタースピードを遅くした際の 「被写体ブレ」「手ブレ」を再現する仕組み 被写体ブレ #出張ヒストリア2018 手ブレ http://www.nikonimage.com/enjoy/phototech/manual/04/03.html

モーションブラーの仕組み フレーム間の移動ベクトルを保存し その情報をもとにブラー効果を適用 #出張ヒストリア2018

ShowFlag.VisualizeMotionBlur 1 で可視化 #出張ヒストリア2018

モーションブラーを調整する上で重要なパラメータ Amount：ブラー効果の掛け度合い ≒ ブラー効果を掛けるか否かの閾値 #出張ヒストリア2018

動きの流れが表現されていい感じ！ なんかかっこいいし！ モーションブラー最高！！！ ちょっとまって！ #出張ヒストリア2018

モーションブラーの注意点 ① カメラを移動・回転した際に 画面全体にブラー効果がかかる（手ブレの再現） 酔う…(´；ω；｀) 敵が見えん…(# ﾟДﾟ) #出張ヒストリア2018

モーションブラーの注意点 ① どんなコンテンツで問題になるのか？ ○ ○ カメラ（画面）が大きく動く可能性がある 視認性が重要なゲーム性 モーションブラーは切るか、 Amountは小さい方が無難… ○ デフォルト値:0.5なので注意 #出張ヒストリア2018

モーションブラーの注意点 ② 画面の一部だけに モーションブラーを適用することは不可能 ポストプロセスマテリアルを使って自作 又は、ポストプロセス以外の手法で実現 #出張ヒストリア2018

[FREE] Smear Frame effect - Download Project from GitHub! #出張ヒストリア2018

ワールドポジションオフセットを用いた モーションブラー についての解説もある神参考書！ 皆買おう！！！ #出張ヒストリア2018

武器の軌跡の場合は 円形状のモデルを用意した方が都合が良いケースも… #出張ヒストリア2018

ポストプロセスマテリアル （ Post Process Material ） #出張ヒストリア2018

ポストプロセスに マテリアルを使うことで 色々できるぞ！ #出張ヒストリア2018

ポストプロセスマテリアル de できること 画面にテクスチャを貼り付け・ブレンドしたり… #出張ヒストリア2018 マーケットプレイス「Damage and Shield Effects」

ポストプロセスマテリアル de できること マテリアルを活用した複雑な演出ができたり… #出張ヒストリア2018 マーケットプレイス「Sci-Fi and Glitch Post-Process」

ポストプロセスマテリアル de できること みんな大好きトゥーン表現ができたり… Post Processing Based Anime and Manga Stylistic Rendering Pack #出張ヒストリア2018 Cel Shading Outline Post Process w Transparency

今日話す内容 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

水彩 Post Process Material ( あく @Aqu 様) https://aqu.hatenablog.com/entry/2018/07/09/000805 #出張ヒストリア2018

PP Cel Shader ( alwei @aizen76 様 ) https://github.com/alwei/PPCelShader #出張ヒストリア2018

SNNフィルタ ( moko @moko_03 _25 様 ) http://effect.hatenablog.com/entry/2018/04/01/054909 #出張ヒストリア2018

某S氏( @junyash )のトゥーンシェーダー https://qiita.com/junyash/items/0e528e1f291a710cf04f #出張ヒストリア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 #出張ヒストリア2018

SphereMask ( MozPaca @MozPaca398 様) http://mozpaca.hatenablog.com/entry/20180516/1526453541 #出張ヒストリア2018

Radial Blur PostProcess Material https://forums.unrealengine.com/community/community-content-tools-and-tutorials/28458radial-blur-postprocess-material #出張ヒストリア2018

おすすめのポストプロセスアセット #出張ヒストリア2018 https://www.unrealengine.com/marketplace/chameleon

その他 有益資料 ● Unreal Engineを使用した商用タイトルで のノンフォトリアルレン ダリング（NPR）事例 ○ ● https://www.slideshare.net/TatsuhiroTanaka1/unreal-engine-npr80721783 妹でもわかるUnreal Engine 4 ポストプロセス関連記事 ○ http://imoue.hatenablog.com/entry/advent_calendar_2017 ● 【UE4】被写界深度半透明物体共生戦略手法零式(Type-0) ○ http://darakemonodarake.hatenablog.jp/entry/2014/12/23/0000 34 #出張ヒストリア2018

今日話す内容 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

ポストプロセスで ヒット感を強めてみた #出張ヒストリア2018

#出張ヒストリア2018 スタート

#出張ヒストリア2018 ブルーム追加

#出張ヒストリア2018 ビネット追加

#出張ヒストリア2018 色収差追加

#出張ヒストリア2018 モーションブラー追加

適切なヒットストップや カメラ揺れを追加したらさらに良くなるはず… ○ 趣旨と反するので試さず… ゲスト出演 ○ ○ ○ “ReDroid MeKa-Ko”ちゃん！ 作者：なん @tarava777 様！ マーケットプレイスにて 近日販売予定！ #出張ヒストリア2018

#出張ヒストリア2018 デフォルト

#出張ヒストリア2018 色々調整

さいごに ● ● ● UE4標準のポストプロセスは非常に強力で 組み合わせることで様々な表現を実現できます！ 非アーティストでも、少し調整するだけで 絵や表現のクオリティを格段に上げられます！ デフォルト設定のままは非常にもったいない！ 是非色々弄って遊んでみてください！ #出張ヒストリア2018

http://historia.co.jp/ue4petitcon10 #出張ヒストリア2018

http://www.unrealengine.jp/unrealfest/ #出張ヒストリア2018