SlideShare a Scribd company logo
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
UE4が用意している被写界深度の手法 (UE4.20時点)
Gaussian DoF
○ 最も高速かつ簡易的な手法
○ 今後はモバイル専用になる予定
Bokeh DoF
○ 高品質だけど処理負荷高い手法
○ 今後は非推奨になる予定
#出張ヒストリア2018#出張ヒストリア2018
Gaussian DoF Bokeh DoF
#出張ヒストリア2018#出張ヒストリア2018
UE4が用意している被写界深度の手法 (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
#出張ヒストリア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
レンズフレアのボケの形状
デフォルトは6角形
○ エンジンコンテンツに他の形状が用意されている
#出張ヒストリア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
ビネット効果のユースケース
画面中心への視線誘導
○ トンネル効果
#出張ヒストリア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
PostProcessVolumeが持つパラメータ
● レンズ系
○ 被写界深度
○ ブルーム
○ レンズフレア
○ 自動露光
○ ビネット効果
○ グレイン効果
○ 色収差
● カラーグレーディング
○ トーンマッピング
● レンダリング系
○ アンチエイリアシング
○ アンビエントオクルージョン
( SSAO )
○ スクリーンスペース
リフレクション( SSR )
○ グローバルイルミネーション
○ モーションブラー
ポストプロセスマテリアル
#出張ヒストリア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
#出張ヒストリア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
PostProcessVolumeが持つパラメータ
● レンズ系
○ 被写界深度
○ ブルーム
○ レンズフレア
○ 自動露光
○ ビネット効果
○ グレイン効果
○ 色収差
● カラーグレーディング
○ トーンマッピング
● レンダリング系
○ アンチエイリアシング
○ アンビエントオクルージョン
( SSAO )
○ スクリーンスペース
リフレクション( SSR )
○ グローバルイルミネーション
○ モーションブラー
ポストプロセスマテリアル
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア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
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア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
今日話す内容
1. ポストプロセスの使い方
2. UE4標準ポストプロセス機能の紹介
3. ネットで公開されているサンプルやTipsの紹介
4. ポストプロセスを使った演出・絵作りの例
#出張ヒストリア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
今日話す内容
1. ポストプロセスの使い方
2. UE4標準ポストプロセス機能の紹介
3. ネットで公開されているサンプルやTipsの紹介
4. ポストプロセスを使った演出・絵作りの例
#出張ヒストリア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/

More Related Content

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