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

猫でも分かるUE4のポストプロセスを使った演出・絵作り
#出張ヒストリア2018#出張ヒストリア2018 猫でも分かる UE4のポストプロセスを使った演出・絵作り Epic Games Japan 岡田和也 - 出張ヒストリア！ゲーム開発勉強会 2018 -
#出張ヒストリア2018#出張ヒストリア2018 自己紹介 Epic Games Japan サポートエンジニア岡田和也 ( おかず @pafuhana1213 ) ライセンシのサポートしたり講演したりなんかいろいろしてたり
#出張ヒストリア2018#出張ヒストリア2018 本日のお題猫でも分かる UE4のポストプロセスを使った演出・絵作り
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセス( Post Process )って？レンダリング結果に対して行う画像処理
#出張ヒストリア2018#出張ヒストリア2018 「Unreal Engine 4のレンダリングフロー総おさらい」より
#出張ヒストリア2018#出張ヒストリア2018 映像業界でいう「撮影」「コンポジット」にあたる部分 ← この本良かった！
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用前
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用後
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用前ポストプロセス適用後
#出張ヒストリア2018#出張ヒストリア2018 直近のUE4タイトルにおける活用例 OCTOPATH TRAVELER
#出張ヒストリア2018#出張ヒストリア2018 先日話題になった水彩Post Process Material あく ( @Aqu_ )さん
#出張ヒストリア2018#出張ヒストリア2018 https://aqu.hatenablog.com/ entry/2018/07/09/000805
#出張ヒストリア2018#出張ヒストリア2018 何故このお題を選んだのか？
#出張ヒストリア2018#出張ヒストリア2018 そのポストプロセスあなたの作品に合っていますか？
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスのデフォルト設定コントラストきつめ！うお、まぶし！
#出張ヒストリア2018#出張ヒストリア2018 なんとなく調整したはいいけど… ぱっと見きれいだけど画面見づらい… ホラーゲームじゃないのに画面がずっと暗い…
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスは作品の画作りだけでなく内容にも影響する重要な要素！
#出張ヒストリア2018#出張ヒストリア2018 でもデフォルト設定のままになっている方を見かける… なんで！？
#出張ヒストリア2018#出張ヒストリア2018 できることが多すぎ ○ 大量の謎のパラメータ… ○ どこから手を付けたらいいのか分からない…
#出張ヒストリア2018#出張ヒストリア2018 ドキュメントがパラメータの紹介だけ ○ しかも内容が微妙に古い…( ｺﾞﾒﾝﾅｻｲ ○ 具体的にどんな活用例があるか分かりづらい
#出張ヒストリア2018#出張ヒストリア2018 今日話すこと 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3. ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
#出張ヒストリア2018#出張ヒストリア2018 今日話さないこと ● 各パラメータの詳細な解説 ● ポストプロセスマテリアルについて ● NPR系の実装について
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスの使い方
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスを使用・調整する方法 ● プロジェクト設定 ● Post Process Volume ● Camera Component ● Blueprint ● Sequencer
#出張ヒストリア2018#出張ヒストリア2018 プロジェクト設定
#出張ヒストリア2018#出張ヒストリア2018 プロジェクト設定ポストプロセスのデフォルト設定 ○ 標準で各機能が有効になっているので意図しないポストプロセスがかかっていることも
#出張ヒストリア2018#出張ヒストリア2018 不要なポストプロセスが走らないようにするには ● プロジェクト設定のチェックボックスをOFFっておく ● Post Process Volumeや Camera Component側で無効化する
#出張ヒストリア2018#出張ヒストリア2018 付録： Post Process Volumeによる設定上書き例：Project SettingsでBloomが有効
#出張ヒストリア2018#出張ヒストリア2018 付録： Post Process Volumeによる編集の判定例：Project SettingsでBloomが無効
#出張ヒストリア2018#出張ヒストリア2018 Post Process Volume 使用するポストプロセスの設定、ポストプロセスの適用範囲を設定するボリューム
#出張ヒストリア2018#出張ヒストリア2018 Post Process Volumeが適用される条件 ● ボリューム内にカメラがある場合 ○ 使用例：水中専用のポストプロセス ● Infinite Extentを有効にしている場合
#出張ヒストリア2018#出張ヒストリア2018 Camera Component カメラ毎にポストプロセス設定を行うことが可能 ○ SceneCapture系も同様
#出張ヒストリア2018#出張ヒストリア2018 Blueprintからポストプロセスを制御する方法 Post Process Volumeや Camera Componentのポストプロセス設定を編集可能 https://api.unrealengine.com/JPN/Engine/Bluepri nts/UserGuide/Variables/Structs/index.html
#出張ヒストリア2018#出張ヒストリア2018 Sequencerからポストプロセスを制御する方法レベル上のPost Process Volume, Camera Componentが持つパラメータを制御
#出張ヒストリア2018#出張ヒストリア2018 おまけ：Preview Scene Settings Persona, Material, Niagaraエディタではプレビュー用のポストプロセスを設定可能
#出張ヒストリア2018#出張ヒストリア2018 おまけ：ポストプロセスを無効化する方法 ● 表示メニューから各ポストプロセスの表示ON/OFF ● “ShowFlag.PostProcessing 0”
#出張ヒストリア2018#出張ヒストリア2018 ここまでのまとめ UE4のポストプロセスは様々な方法で設定・制御することができる！ ○ プロジェクト設定 ○ Post Process Volume ○ Camera Component ○ Blueprint ○ Sequencer
#出張ヒストリア2018#出張ヒストリア2018 今日話す内容 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3. ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
#出張ヒストリア2018#出張ヒストリア2018 UE4が用意しているポストプロセス機能の紹介
#出張ヒストリア2018#出張ヒストリア2018 PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペースリフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラーポストプロセスマテリアル
#出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセス処理カメラレンズの光学特性の疑似再現
#出張ヒストリア2018#出張ヒストリア2018 被写界深度によるボケレンズフレア
#出張ヒストリア2018#出張ヒストリア2018 以降のスライドではレンズの特性について軽く解説している箇所があるのですが… あくまで初心者向けなので「あえて」簡略化してる箇所があります！ですので…何卒…なにとぞ…！！！
#出張ヒストリア2018#出張ヒストリア2018 被写界深度 ( Depth of Field )
#出張ヒストリア2018#出張ヒストリア2018 被写界深度とは？カメラの被写界深度の再現 ○ フォーカス、ピント、ボケ( Bokeh )
#出張ヒストリア2018#出張ヒストリア2018 視線誘導、奥行き感の表現など様々な演出に活用できるすごいやつ！
#出張ヒストリア2018#出張ヒストリア2018 UE４が用意している被写界深度の手法 (UE4.20時点) Gaussian DoF ○ 最も高速かつ簡易的な手法 ○ 今後はモバイル専用になる予定 Bokeh DoF ○ 高品質だけど処理負荷高い手法 ○ 今後は非推奨になる予定
#出張ヒストリア2018#出張ヒストリア2018 Gaussian DoF Bokeh DoF
#出張ヒストリア2018#出張ヒストリア2018 UE４が用意している被写界深度の手法 (UE4.20時点) Cinematic DoF new! ○ Bokeh並の品質かつ高速な手法 ○ UE4.19以前のCircle DoFを置き換え
#出張ヒストリア2018#出張ヒストリア2018 Cinematic DoF はいいぞ！ DoFおじさん
#出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには手法① Post Process Volume / Camera Componentで設定する方法手法② Cine Camera Actorの Current Camera Settingsを設定する方法
#出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには手法① Post Process Volume / Camera Componentで設定する方法手法② Cine Camera Actorの Current Camera Settingsを設定する方法
#出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使うには手法①
#出張ヒストリア2018#出張ヒストリア2018 被写界深度を制御する要素 ● Focus Distance ( 被写体までの距離 ) ● Focal Region ( 絞り, F値 ) ● Focal Length (焦点距離) or FoV ( 画角 ) Focus Distance
#出張ヒストリア2018#出張ヒストリア2018 付録
#出張ヒストリア2018#出張ヒストリア2018 めんどくさ！！！
#出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには手法① Post Process Volume / Camera Componentで設定する方法手法② Cine Camera Actorの Current Camera Settingsを設定する方法 (個人的オススメは断然こっち！)
#出張ヒストリア2018#出張ヒストリア2018 Cine Camera Actorとは実在するカメラの挙動を再現するために詳細な設定項目が用意されたCamera Actor
#出張ヒストリア2018#出張ヒストリア2018 超絶簡単！！！ Cine Camera サイコー！
#出張ヒストリア2018#出張ヒストリア2018 被写界深度のデバッグ機能 ShowFlag.VisualizeDOF 1
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 ブルーム ( Bloom )
#出張ヒストリア2018#出張ヒストリア2018 ブルームとは発光現象を表現する機能
#出張ヒストリア2018#出張ヒストリア2018 ブルームのパラメータ Intensity ○ ブルームの強さ・掛かり度合い ○ 値を上げるほど、より眩しく、より広くブルームが掛かるように
#出張ヒストリア2018#出張ヒストリア2018 ブルームのパラメータ Threshold ○ ブルームを発生する明るさのしきい値 ○ 初期値(-1)の場合画面全体にブルームが掛かる…
#出張ヒストリア2018#出張ヒストリア2018 付録 Threshold 大事！人肌は…発光しないのだ…！ディフュージョン効果があるけども… 背景オブジェクトとの兼ね合いを考えるとちゃんと人肌用にフィルタ用意したほうがいいと思う… https://www.4gamer.net/games/216/ G021678/20140714079/
#出張ヒストリア2018#出張ヒストリア2018 ブルームの汚れマスクレンズの汚れや傷の表現
#出張ヒストリア2018#出張ヒストリア2018 汚れマスク：なし
#出張ヒストリア2018#出張ヒストリア2018 汚れマスク：あり
#出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能 ( Bloom Convolution ) 畳み込み機能を使うことでブルームの形状を変更・調整できる
#出張ヒストリア2018#出張ヒストリア2018 男の子が好きなやつができるぞ！
#出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能のパラメータ MetodをConvolutionに変更すると専用パラメータが編集可能に
#出張ヒストリア2018#出張ヒストリア2018 調整しないと悪目立ちすることも… 圧倒的 J・J・◯イブラムス感
#出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能の注意点 ① 負荷高い！！！映像作品やハイエンドコンテンツ向け
#出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能の注意点 ② この機能用のデフォルトテクスチャのファイルサイズがバカでかい！ ( 32MB ショック！ ) ○ パフォーマンスやパッケージサイズに影響… ○ モバイル, HTML5は畳み込み機能が使えないのでパッケージに含まれないようになっている /Engine/EngineMaterials/ DefaultBloomKernel
#出張ヒストリア2018#出張ヒストリア2018 畳み込み機能使わないなら解像度下げてファイルサイズ落としたほうが無難テクスチャの圧縮設定より 2048 x 2048 -> 4 x 4 に ○ 32MB -> 1KB以下に
#出張ヒストリア2018#出張ヒストリア2018 https://www.youtube.com/watch?v=0Ge7ykxDTIQ
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 レンズフレア ( Lens Flare )
#出張ヒストリア2018#出張ヒストリア2018 レンズフレアとは光源の散乱をシミュレート
#出張ヒストリア2018#出張ヒストリア2018 引用：WEBアニメスタイル「第5回エフェクトを考える」 http://animestyle.jp/2016/03/07/9837/
#出張ヒストリア2018#出張ヒストリア2018 レンズフレアの調整 Intensity ○ 明るさ Tint ○ レンズフレアの色調整 BokehSize ○ ボケの大きさ Threshold ○ レンズフレアを発生する明るさのしきい値 BokehShape ○ ボケの形
#出張ヒストリア2018#出張ヒストリア2018 レンズフレアのボケの形状デフォルトは６角形 ○ エンジンコンテンツに他の形状が用意されている
#出張ヒストリア2018#出張ヒストリア2018 レンズフレアのユースケース使い所難しい… ○ 頻繁に出ているとうざったい ○ 演出としてピンポイントで使うのがいいのでは？逆光とか
#出張ヒストリア2018#出張ヒストリア2018 付録レンズフレアに関する公式ドキュメント ● Lens Flare ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/LensFlare
#出張ヒストリア2018#出張ヒストリア2018 自動露光 ( Eye Adaptation, Auto-Exposure )
#出張ヒストリア2018#出張ヒストリア2018 自動露光とは画面の明るさの自動調整 ○ 「白飛びしないように」「画面が暗すぎないように」
#出張ヒストリア2018#出張ヒストリア2018 暗順応 -Wikipedia- ○ 可視光量の多い環境から少ない環境へ急激に変化した場合に、時間経過とともに徐々に視力が確保される、動物の自律機能である ○ https://ja.wikipedia.org/wiki/%E6%9A%97%E9%A0%86% E5%BF%9C
#出張ヒストリア2018#出張ヒストリア2018 自動露光の調整明るさの自動調整は各パラメータとシーンの色のヒストグラムに基づいて行われる ● Min/Max Brightness ○ 明るさの最小/最大値 ● Speed Up / Down ○ 明るさの調整速度 ● Histogram Log Min / Max ○ 使用するヒストグラムの範囲
#出張ヒストリア2018#出張ヒストリア2018 自動露光の調整用機能 ShowFlag.VisualizeHDR 1
#出張ヒストリア2018#出張ヒストリア2018 自動露光の注意点デフォルトで有効かつ Min / Max Brightnessの値が異なる画面の明るさを勝手に変えられてしまう！
#出張ヒストリア2018#出張ヒストリア2018 自動露光の注意点 Min, Max Brightnessを同じ値にしておく自動露光による明るさ調整が無効に
#出張ヒストリア2018#出張ヒストリア2018 自動露光に関する公式ドキュメント ● Eye Adaption [ Auto-Exposure ] ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/AutomaticExposure
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果 ( Vignette )
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果とはカメラレンズの周辺減光の再現
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果の調整 Vignette Intensity ○ 掛かり度合いの調整 ○ 直接入力で1以上に設定可能
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果の注意点デフォルト(0.4)だと、薄く掛かってしまうので注意！
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果のユースケース画面中心への視線誘導 ○ トンネル効果
#出張ヒストリア2018#出張ヒストリア2018 標準で用意されているビネット効果の欠点掛かり度合いの調整しかできない… 色を変えたり… 横長にしたり…
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果をより細かく調整したい場合後述のポストプロセスマテリアルで対応することに https://forums.unrealengine.com/development- discussion/rendering/40562-colored-vignette
#出張ヒストリア2018#出張ヒストリア2018 ビネット効果に関する公式ドキュメント ● Vignette ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/Vignette
#出張ヒストリア2018#出張ヒストリア2018 グレイン効果 ( Grain )
#出張ヒストリア2018#出張ヒストリア2018 グレイン効果とはフィルム特有のノイズの再現
#出張ヒストリア2018#出張ヒストリア2018 グレイン効果の調整 Grain Jitter ○ 画面のジラつき度合い Grain Intensity ○ ノイズのかけ具合
#出張ヒストリア2018#出張ヒストリア2018 グレイン効果のユースケース ● フィルム感を出したいとき ● 映像に質感や雰囲気を出したい場合…らしい… ○ 単なるノイズに見えてしまう可能性があるので注意
#出張ヒストリア2018#出張ヒストリア2018 色収差 ( Scene Fringe, Chromatic Aberration )
#出張ヒストリア2018#出張ヒストリア2018 色収差外側になるほど色がずれるレンズの特性を再現 ○ 画面全体に均一にRGBがズレてるのは正しい色収差ではないのだ！
#出張ヒストリア2018#出張ヒストリア2018 色収差外側になるほど色がずれるレンズの特性を再現
#出張ヒストリア2018#出張ヒストリア2018 色収差のパラメータ Intensity ○ 色収差の掛かり度合い Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 )
#出張ヒストリア2018#出張ヒストリア2018 色収差のパラメータ ● Intensity ○ 色収差の掛かり度合い ● Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 )
#出張ヒストリア2018#出張ヒストリア2018 色収差のユースケースヒット・ダメージ・爆発演出時に使われている印象 ○ 衝撃や異常の表現に使えるかも
#出張ヒストリア2018#出張ヒストリア2018 色収差使用時の注意点 ● 色収差を気持ち悪く感じる人もいるので注意！ ○ 長時間画面全体に強めに掛かっていると顕著 ● 効果的に使うためには絵的なセンスが必要な印象… 短時間だけ表示してエフェクト的な用途が無難かも
#出張ヒストリア2018#出張ヒストリア2018 色収差に関する公式ドキュメント ● Scene Fringe [Choromatic Aberration] ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/SceneFringe
#出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセスの注意点現実世界のレンズは、「ビネット」「グレイン」「色収差」を抑える方向に改善 ○ 全体の絵作りをする上で多用すると違和感を覚える人もしばしば…
#出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセスの注意点逆に言うと、「ビネット」「グレイン」「色収差」は昔のカメラレンズの特性を表現している回想シーンなどの過去を強調したい場面で有効かも
#出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセスに関しては実際のカメラで色々試してみると各パラメータの理解が深まるのでオススメ！
#出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング ( Color Grading ) & トーンマッピング ( Tone Mapping )
#出張ヒストリア2018#出張ヒストリア2018 以降の内容はあくまでイメージとして考えて下さい！ ”この分野あまり詳しくないですが…勢”は何卒…なにとぞ…！
#出張ヒストリア2018#出張ヒストリア2018 トーンマッピング ( Tone Mapping )とは HDR LDR ↑ これ
#出張ヒストリア2018#出張ヒストリア2018 UE4におけるカラーグレーディング ( Color Grading )とは HDR LDR トーンマッピング色調補正 ↑これ
#出張ヒストリア2018#出張ヒストリア2018 もっとちゃんとした話はこちらで！ UE4の色について v1.1 https://www.slideshare.net/ EpicGamesJapan/ue4-v11
#出張ヒストリア2018#出張ヒストリア2018 ここでお伝えしたいこと画面に表示するまでに 2種類の色補正処理が入ることトーンマッピング ○ HDR -> LDR 変換処理カラーグレーディング ○ 色補正
#出張ヒストリア2018#出張ヒストリア2018 トーンマッピングの効果画面のコントラスト（明暗）の調整 ○ Slope ：全体の調整 ○ Toe ：暗い箇所の調整 ○ Shoulder ：明るい箇所の調整
#出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング調整項目ひとまず… このパラメータをいじってみましょう！
#出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング - ホワイトバランス - 光の影響で色が変わってしまった「白」を「白」に見えるようにする補正機能色合いの調整として使用可能！
#出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング - ホワイトバランス - 画面の雰囲気・印象が大きく変わるのでオススメ！
#出張ヒストリア2018#出張ヒストリア2018 https://cs.olympus-imaging.jp/jp/support/cs/DI/QandA/Basic/s0012.html
#出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング – 色対応表(LUT) - Photoshopなどで作成した LUTテクスチャを使って色調補正をすることも可能！
#出張ヒストリア2018#出張ヒストリア2018 カラーグレーディング – 色対応表(LUT) - マーケットプレイスで販売されている LUTテクスチャを使うという手も ○ 「LUT」または「grading」で検索！検索！
#出張ヒストリア2018#出張ヒストリア2018 LUT使用時の注意点 LUTで色調補正した場合モニタによって見え方が変わる可能性がある LUTはリファレンスとして使用 Color Gradingの各パラメータで最終調整
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 アンチエイリアシング（ Anti-Aliasing ）
#出張ヒストリア2018#出張ヒストリア2018 アンチエイリアシングの効果ジャギー（ピクセルのギザギザ）やスペキュラ・エイリアシング（チラツキ）を抑制
#出張ヒストリア2018#出張ヒストリア2018 AA未使用 Temporal AA
#出張ヒストリア2018#出張ヒストリア2018 AA未使用 Temporal AA
#出張ヒストリア2018#出張ヒストリア2018 UE4が用意しているアンチエイリアシング手法 ● FXAA ○ モバイルでは使えず ● Temporal AA ( TAA ) ○ UE4のデフォルトはこれ ○ モバイルでも使用可能 ( ただし簡易版 ) ● MSAA ○ Forward Rendering (モバイル含む) のみ使用可能
#出張ヒストリア2018#出張ヒストリア2018 アンチエイリアシング手法の切り替え ● プロジェクト設定のRenderingカテゴリにある Anti-Aliasing Method ● ゲーム中に動的に変更したい場合 r.DefaultFeature.AntiAliasing ○ 0 : None ○ 1：FXAA ○ 2：TemporalAA ○ 3：MSAA
#出張ヒストリア2018#出張ヒストリア2018 https://www.4gamer.net/games/120/G012093/20121125002/
#出張ヒストリア2018#出張ヒストリア2018 No AA FXAA TAA MSAA
#出張ヒストリア2018#出張ヒストリア2018 ポリゴンの輪郭ポリゴンの表面（テクスチャ・スペキュラ）負荷 FXAA 効果：中効果：小小 TAA 効果：大効果：大中 MSAA 効果：大効果：なし大 FXAA TAA MSAA
#出張ヒストリア2018#出張ヒストリア2018 注意 TAAは万能な手法ではありません！！！
#出張ヒストリア2018#出張ヒストリア2018 TAAのデメリット ● 画面変化が多いとゴースト（残像）が発生 ● 輪郭・アウトラインがボケて見える ○ 特にVRの場合、カメラ( =頭 )の位置・向きが常に変化するため、顕著にこの問題が現れる
#出張ヒストリア2018#出張ヒストリア2018 TAAのデメリット ● ディティールが潰れて消える ○ 特に遠景 ● スペキュラ・高周波成分が消える ○ のっぺりした感じに
#出張ヒストリア2018#出張ヒストリア2018 結構デメリットある！これを避けるために FXAAを採用しているタイトルもある
#出張ヒストリア2018#出張ヒストリア2018 TAAのデメリット緩和向けのパラメータ ● r.TemporalAAFilterSize ○ デフォルト：1.0 ○ 0.0に近づけるほど、ボケなくなる（絵がくっきりする）しかし、エイリアシングが発生しやすくなる… ● r.TemporalAACurrentFrameWeight ○ デフォルト：0.04 ○ 1.0に近づけるほど、ボケ・ゴーストが発生しなくなるしかし、エイリアシングが発生しやすくなる…
#出張ヒストリア2018#出張ヒストリア2018 スペキュラエイリアシングを起こさない工夫ノーマルマップ・ラフネスマップの調整 ○ マテリアルのプロパティ Normal Curvature to Roughness を有効にすることでノーマル情報からラフネスを調整可能ラフネス値0 1
#出張ヒストリア2018#出張ヒストリア2018 スペキュラエイリアシングを起こさない工夫スペキュラが不要ならマテリアルのプロパティ“Full Rough”を有効に ● ラフネス値を強制的に1に ● シェーダ数が削減されるのでパフォーマンス的にもメリットあり！
#出張ヒストリア2018#出張ヒストリア2018 その他 ● LOD機能で遠景のメッシュの形状を平坦にすることで、小さいポリゴンからのエイリアシングを回避 ○ Static Meshならエンジンの標準機能でLOD作成可能 ● TAAによる遠景のテクスチャのボケ対策 r.MipMapLODBias -1 ○ 強制的にテクスチャのミップレベルを上げる
#出張ヒストリア2018#出張ヒストリア2018 その他映像業界ならSSAAを使う選択肢も ○ 例：4Kでレンダリングして、フルHDに縮小 ○ 処理負荷はかなり高いが、綺麗にエイリアシングを排除できる
#出張ヒストリア2018#出張ヒストリア2018 https://www.slideshare.net/siliconstudio/ss-38733183
#出張ヒストリア2018#出張ヒストリア2018 スクリーンスペースアンビエントオクルージョン（ Screen Space Ambient Occulsion, SSAO ）
#出張ヒストリア2018#出張ヒストリア2018 SSAOとは環境光の遮蔽度合いを計算し、その結果を元に陰影を表現する手法 ○ 画面が引き締まったり、設置感が出るなどの効果がある
#出張ヒストリア2018#出張ヒストリア2018 SSAOの効果キャラクタの陰影を強調したりも ○ ノンフォト寄りのキャラクタとは相性悪い場合も…
#出張ヒストリア2018#出張ヒストリア2018 おまけ「Contact Shadow」スクリーンスペースのシャドウイング手法 ○ http://api.unrealengine.com/JPN/Engine/Rendering/Lightin gAndShadows/ContactShadows/ Contact Shadow：OFF Contact Shadow：ON
#出張ヒストリア2018#出張ヒストリア2018 SSAOの調整パラメータ ● Intensity ○ 陰影の濃さ ○ 上げすぎると濃すぎるので注意 ● 半径 ○ 陰影の範囲・大きさ ○ 値が大きいとノイズが目立つので注意 ● Quality ○ 品質 (そのまんま)
#出張ヒストリア2018#出張ヒストリア2018 SSAOの注意点 ① 負荷高い！！！
#出張ヒストリア2018#出張ヒストリア2018 SSAOの負荷を緩和するには… ● 半径、Quality、負荷調整パラメータで調整 SSAOの負荷調整パラメータ ○ r.AmbientOcclusionMipLevelFactor ○ r.AmbientOcclusionMaxQuality ○ r.AmbientOcclusionLevels ○ r.AmbientOcclusionRadiusScale
#出張ヒストリア2018#出張ヒストリア2018 SSAOの負荷を緩和するには… ● 特定の環境の場合、非同期でSSAOを動作させることが可能 ○ r.AmbientOcclusion.Compute 2 or 3 ○ ただし、ノーマルに対して適用されなくなるので注意 ● SSAOは使用しない！ ○ 画作りの方向次第ではむしろ不要なケースも
#出張ヒストリア2018#出張ヒストリア2018 「反射？なにそれ？おいしいの？」なシーンの例
#出張ヒストリア2018#出張ヒストリア2018 SSAOの注意点 ② Quality設定を下げた場合パターンノイズが目立ってしまう
#出張ヒストリア2018#出張ヒストリア2018 SSAOのノイズを緩和するには ● Quality設定を上げる ● Temporal AAを使用する
#出張ヒストリア2018#出張ヒストリア2018 スクリーンスペースリフレクション（ Screen Space Reflection, SSR ）
#出張ヒストリア2018#出張ヒストリア2018 SSRとはレンダリング結果を用いて反射を擬似的に表現する手法動的なオブジェクトも反射に含まれるのがメリット！
#出張ヒストリア2018#出張ヒストリア2018 SSR：OFF
#出張ヒストリア2018#出張ヒストリア2018 SSR：ON
#出張ヒストリア2018#出張ヒストリア2018 UE4っぽい！！！
#出張ヒストリア2018#出張ヒストリア2018 SSR調整用パラメータ Intensity ○ 掛かり度合い ○ 0にすると、SSRが無効に Quality ○ 品質（そのまま） Max Roughness ○ どの程度の粗さの床にまで SSRによる反射を適用するか
#出張ヒストリア2018#出張ヒストリア2018 SSRの注意点 ① 負荷高い！！！
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 SSRの注意点 ② 画面に映っていないオブジェクトは反射に反映することができない ○ レンダリング結果を使用しているため
#出張ヒストリア2018#出張ヒストリア2018 画面に写っていない部分を反射に含めるためには… ● Reflection Capture ● Planar Reflection ● レイトレーシング
#出張ヒストリア2018#出張ヒストリア2018 Reflection Captureを使う場合 ● 動的なオブジェクトは反射に含まれない ● SSRに比べて品質が低いため ○ SSRと併用すると違和感が発生する可能性がある
#出張ヒストリア2018#出張ヒストリア2018 SSR vs Planar Reflection
#出張ヒストリア2018#出張ヒストリア2018 Planar Reflectionのメリット・デメリットメリット ○ SSRでは不可能だった画面外のオブジェクトも反射に含められるデメリット ○ 反射に含めるためにはオブジェクトを再度をレンダリングする必要がある → SSRに比べて処理負荷が大きい…
#出張ヒストリア2018#出張ヒストリア2018 レイトレーシング年末をお楽しみに！以上！ https://www.unrealengine.com/ja/blog/technology- sneak-peek-real-time-ray-tracing-with-unreal-engine
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 グローバルイルミネーション（ Global Illuminiation ）
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにあるグローバルイルミネーションとは？ UE4のLightmassによって事前計算された間接光の強さ・色を補正する機能 http://api.unrealengine.com/JPN/Engine/Rendering/LightingA ndShadows/VolumetricLightmaps/index.html
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにあるグローバルイルミネーションとは？ UE4のLightmassによって事前計算された間接光の強さ・色を補正する機能 Lightmassを使ってない( = 全ライトがMovable ) 場合は効果ないのでご注意を
#出張ヒストリア2018#出張ヒストリア2018 モーションブラー（ Motion Blur ）
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにおけるモーションブラーとは動きの軌跡の表現… ではなくて！
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにおけるモーションブラーとはシャッタースピードを遅くした際の「被写体ブレ」「手ブレ」を再現する仕組み被写体ブレ手ブレ http://www.nikon- image.com/enjoy/phototech/manual/04/03.html
#出張ヒストリア2018#出張ヒストリア2018 モーションブラーの仕組みフレーム間の移動ベクトルを保存しその情報をもとにブラー効果を適用
#出張ヒストリア2018#出張ヒストリア2018 ShowFlag.VisualizeMotionBlur 1 で可視化
#出張ヒストリア2018#出張ヒストリア2018 モーションブラーを調整する上で重要なパラメータ Amount：ブラー効果の掛け度合い ≒ ブラー効果を掛けるか否かの閾値
#出張ヒストリア2018#出張ヒストリア2018 動きの流れが表現されていい感じ！なんかかっこいいし！モーションブラー最高！！！ちょっとまって！
#出張ヒストリア2018#出張ヒストリア2018 モーションブラーの注意点 ① カメラを移動・回転した際に画面全体にブラー効果がかかる（手ブレの再現）酔う…(´；ω；｀) 敵が見えん…(# ﾟДﾟ)
#出張ヒストリア2018#出張ヒストリア2018 モーションブラーの注意点 ① どんなコンテンツで問題になるのか？ ○ カメラ（画面）が大きく動く可能性がある ○ 視認性が重要なゲーム性モーションブラーは切るか、 Amountは小さい方が無難… ○ デフォルト値:0.5なので注意
#出張ヒストリア2018#出張ヒストリア2018 モーションブラーの注意点 ② 画面の一部だけにモーションブラーを適用することは不可能ポストプロセスマテリアルを使って自作又は、ポストプロセス以外の手法で実現
#出張ヒストリア2018#出張ヒストリア2018 [FREE] Smear Frame effect - Download Project from GitHub!
#出張ヒストリア2018#出張ヒストリア2018 ワールドポジションオフセットを用いたモーションブラーについての解説もある神参考書！皆買おう！！！
#出張ヒストリア2018#出張ヒストリア2018 武器の軌跡の場合は円形状のモデルを用意した方が都合が良いケースも…
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル（ Post Process Material ）
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスにマテリアルを使うことで色々できるぞ！
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル de できること画面にテクスチャを貼り付け・ブレンドしたり… マーケットプレイス「Damage and Shield Effects」
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル de できることマテリアルを活用した複雑な演出ができたり… マーケットプレイス「Sci-Fi and Glitch Post-Process」
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスマテリアル de できることみんな大好きトゥーン表現ができたり… Post Processing Based Anime and Manga Stylistic Rendering Pack Cel Shading Outline Post Process w Transparency
#出張ヒストリア2018#出張ヒストリア2018 水彩 Post Process Material ( あく @Aqu 様) https://aqu.hatenablog.com/entry/2018/07/09/000805
#出張ヒストリア2018#出張ヒストリア2018 PP Cel Shader ( alwei @aizen76 様 ) https://github.com/alwei/PPCelShader
#出張ヒストリア2018#出張ヒストリア2018 SNNフィルタ ( moko @moko_03 _25 様 ) http://effect.hatenablog.com/entry/2018/04/01/054909
#出張ヒストリア2018#出張ヒストリア2018 某S氏( @junyash )のトゥーンシェーダー https://qiita.com/junyash/items/0e528e1f291a710cf04f
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 SphereMask ( MozPaca @MozPaca398 様) http://mozpaca.hatenablog.com/entry/20180516/1526453541
#出張ヒストリア2018#出張ヒストリア2018 Radial Blur PostProcess Material https://forums.unrealengine.com/community/community-content-tools-and-tutorials/28458- radial-blur-postprocess-material
#出張ヒストリア2018#出張ヒストリア2018 おすすめのポストプロセスアセット https://www.unrealengine.com/marketplace/chameleon
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018 ポストプロセスでヒット感を強めてみた
#出張ヒストリア2018#出張ヒストリア2018 スタート
#出張ヒストリア2018#出張ヒストリア2018 ブルーム追加
#出張ヒストリア2018#出張ヒストリア2018 ビネット追加
#出張ヒストリア2018#出張ヒストリア2018 色収差追加
#出張ヒストリア2018#出張ヒストリア2018 モーションブラー追加
#出張ヒストリア2018#出張ヒストリア2018 適切なヒットストップやカメラ揺れを追加したらさらに良くなるはず… ○ 趣旨と反するので試さず… ゲスト出演 ○ “ReDroid MeKa-Ko”ちゃん！ ○ 作者：なん @tarava777 様！ ○ マーケットプレイスにて近日販売予定！
#出張ヒストリア2018#出張ヒストリア2018 デフォルト
#出張ヒストリア2018#出張ヒストリア2018 色々調整
#出張ヒストリア2018#出張ヒストリア2018 さいごに ● UE4標準のポストプロセスは非常に強力で組み合わせることで様々な表現を実現できます！ ● 非アーティストでも、少し調整するだけで絵や表現のクオリティを格段に上げられます！ ● デフォルト設定のままは非常にもったいない！是非色々弄って遊んでみてください！
#出張ヒストリア2018#出張ヒストリア2018 http://historia.co.jp/ue4petitcon10
#出張ヒストリア2018#出張ヒストリア2018 http://www.unrealengine.jp/unrealfest/

Check these out next

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

Recommended

More Related Content

Slideshows for you(20)

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

More from エピック・ゲームズ・ジャパン Epic Games Japan(20)

Recently uploaded(20)

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