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.
#出張ヒストリア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.unreal...
#出張ヒストリア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
○ ...
#出張ヒストリア2018#出張ヒストリア2018
今日話す内容
1. ポストプロセスの使い方
2. UE4標準ポストプロセス機能の紹介
3. ネットで公開されているサンプルやTipsの紹介
4. ポストプロセスを使った演出・絵作りの例
#出張ヒストリア2018#出張ヒストリア2018
UE4が用意している
ポストプロセス機能の紹介
#出張ヒストリア2018#出張ヒストリア2018
PostProcessVolumeが持つパラメータ
● レンズ系
○ 被写界深度
○ ブルーム
○ レンズフレア
○ 自動露光
○ ビネット効果
○ グレイン効果
○ 色収差
● カラーグレーデ...
#出張ヒストリア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の...
#出張ヒストリア2018#出張ヒストリア2018
Cinematic DoFを使う・調整するには
手法①
Post Process Volume / Camera Componentで
設定する方法
手法②
Cine Camera Actorの...
#出張ヒストリア2018#出張ヒストリア2018
Cinematic DoFを使うには 手法①
#出張ヒストリア2018#出張ヒストリア2018
被写界深度を制御する要素
● Focus Distance ( 被写体までの距離 )
● Focal Region ( 絞り, F値 )
● Focal Length (焦点距離) or FoV...
#出張ヒストリア2018#出張ヒストリア2018
付録
#出張ヒストリア2018#出張ヒストリア2018
めんどくさ!!!
#出張ヒストリア2018#出張ヒストリア2018
Cinematic DoFを使う・調整するには
手法①
Post Process Volume / Camera Componentで
設定する方法
手法②
Cine Camera Actorの...
#出張ヒストリア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/Pos...
#出張ヒストリア2018#出張ヒストリア2018
ブルーム
( Bloom )
#出張ヒストリア2018#出張ヒストリア2018
ブルームとは
発光現象を表現する機能
#出張ヒストリア2018#出張ヒストリア2018
ブルームのパラメータ
Intensity
○ ブルームの強さ・掛かり度合い
○ 値を上げるほど、
より眩しく、より広くブルームが掛かるように
#出張ヒストリア2018#出張ヒストリア2018
ブルームのパラメータ
Threshold
○ ブルームを発生する明るさのしきい値
○ 初期値(-1)の場合
画面全体にブルームが掛かる…
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
付録
Threshold 大事!
人肌は…発光しないのだ…!
ディフュージョン効果があるけども…
背景オブジェクトとの兼ね合いを考えると
ちゃんと人肌用にフィルタ用意したほうがいいと思う…
ht...
#出張ヒストリア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 ショック! )
○ パフォーマンスやパッケージサイズに影響…
○ モバイル, ...
#出張ヒストリア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/PostProcessE...
#出張ヒストリア2018#出張ヒストリア2018
レンズフレア
( Lens Flare )
#出張ヒストリア2018#出張ヒストリア2018
レンズフレアとは
光源の散乱をシミュレート
#出張ヒストリア2018#出張ヒストリア2018
引用:WEBアニメスタイル「第5回エフェクトを考える」
http://animestyle.jp/2016/03/07/9837/
#出張ヒストリア2018#出張ヒストリア2018
レンズフレアの調整
Intensity
○ 明るさ
Tint
○ レンズフレアの色調整
BokehSize
○ ボケの大きさ
Threshold
○ レンズフレアを発生する
明るさのしきい値
B...
#出張ヒストリア2018#出張ヒストリア2018
レンズフレアのボケの形状
デフォルトは6角形
○ エンジンコンテンツに他の形状が用意されている
#出張ヒストリア2018#出張ヒストリア2018
レンズフレアのユースケース
使い所難しい…
○ 頻繁に出ているとうざったい
○ 演出としてピンポイントで使うのがいいのでは?逆光とか
#出張ヒストリア2018#出張ヒストリア2018
付録 レンズフレアに関する公式ドキュメント
● Lens Flare
○ https://docs.unrealengine.com/en-
us/Engine/Rendering/PostPr...
#出張ヒストリア2018#出張ヒストリア2018
自動露光
( Eye Adaptation, Auto-Exposure )
#出張ヒストリア2018#出張ヒストリア2018
自動露光とは
画面の明るさの自動調整
○ 「白飛びしないように」「画面が暗すぎないように」
#出張ヒストリア2018#出張ヒストリア2018
暗順応 -Wikipedia-
○ 可視光量の多い環境から少ない環境へ急激に変化した場合に、時
間経過とともに徐々に視力が確保される、動物の自律機能である
○ https://ja.wikipe...
#出張ヒストリア2018#出張ヒストリア2018
自動露光の調整
明るさの自動調整は各パラメータと
シーンの色のヒストグラムに基づいて行われる
● Min/Max Brightness
○ 明るさの最小/最大値
● Speed Up / Dow...
#出張ヒストリア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/R...
#出張ヒストリア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-
discussi...
#出張ヒストリア2018#出張ヒストリア2018
ビネット効果に関する公式ドキュメント
● Vignette
○ https://docs.unrealengine.com/en-
us/Engine/Rendering/PostProcess...
#出張ヒストリア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/Eng...
#出張ヒストリア2018#出張ヒストリア2018
レンズ系のポストプロセスの注意点
現実世界のレンズは、「ビネット」「グレイン」「色収差」
を抑える方向に改善
○ 全体の絵作りをする上で多用すると
違和感を覚える人もしばしば…
#出張ヒストリア2018#出張ヒストリア2018
レンズ系のポストプロセスの注意点
逆に言うと、 「ビネット」「グレイン」「色収差」は
昔のカメラレンズの特性を表現している
回想シーンなどの
過去を強調したい場面で有効かも
#出張ヒストリア2018#出張ヒストリア2018
レンズ系のポストプロセスに関しては
実際のカメラで色々試してみると
各パラメータの理解が深まるのでオススメ!
#出張ヒストリア2018#出張ヒストリア2018
PostProcessVolumeが持つパラメータ
● レンズ系
○ 被写界深度
○ ブルーム
○ レンズフレア
○ 自動露光
○ ビネット効果
○ グレイン効果
○ 色収差
● カラーグレーデ...
#出張ヒストリア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.unrealengin...
#出張ヒストリア2018#出張ヒストリア2018
PostProcessVolumeが持つパラメータ
● レンズ系
○ 被写界深度
○ ブルーム
○ レンズフレア
○ 自動露光
○ ビネット効果
○ グレイン効果
○ 色収差
● カラーグレーデ...
#出張ヒストリア2018#出張ヒストリア2018
アンチエイリアシング
( Anti-Aliasing )
#出張ヒストリア2018#出張ヒストリア2018
アンチエイリアシングの効果
ジャギー(ピクセルのギザギザ)や
スペキュラ・エイリアシング(チラツキ)を 抑制
#出張ヒストリア2018#出張ヒストリア2018
AA未使用 Temporal AA
#出張ヒストリア2018#出張ヒストリア2018
AA未使用 Temporal AA
#出張ヒストリア2018#出張ヒストリア2018
UE4が用意しているアンチエイリアシング手法
● FXAA
○ モバイルでは使えず
● Temporal AA ( TAA )
○ UE4のデフォルトはこれ
○ モバイルでも使用可能
( ただし...
#出張ヒストリア2018#出張ヒストリア2018
アンチエイリアシング手法の切り替え
● プロジェクト設定のRenderingカテゴリにある
Anti-Aliasing Method
● ゲーム中に動的に変更したい場合
r.DefaultFea...
#出張ヒストリア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に近づけるほど、ボケなくなる(絵がくっきりする)
しかし、エイリアシン...
#出張ヒストリア2018#出張ヒストリア2018
スペキュラエイリアシングを起こさない工夫
ノーマルマップ・ラフネスマップの調整
○ マテリアルのプロパティ
Normal Curvature to Roughness を有効にすることで
ノーマ...
#出張ヒストリア2018#出張ヒストリア2018
スペキュラエイリアシングを起こさない工夫
スペキュラが不要なら
マテリアルのプロパティ“Full Rough”を有効に
● ラフネス値を強制的に1に
● シェーダ数が削減されるので
パフォーマン...
#出張ヒストリア2018#出張ヒストリア2018
その他
● LOD機能で遠景のメッシュの形状を平坦にすることで、
小さいポリゴンからのエイリアシングを回避
○ Static Meshならエンジンの標準機能でLOD作成可能
● TAAによる遠景...
#出張ヒストリア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/Light...
#出張ヒストリア2018#出張ヒストリア2018
SSAOの調整パラメータ
● Intensity
○ 陰影の濃さ
○ 上げすぎると濃すぎるので注意
● 半径
○ 陰影の範囲・大きさ
○ 値が大きいと
ノイズが目立つので注意
● Quality...
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
#出張ヒストリア2018#出張ヒストリア2018
SSAOの注意点 ①
負荷高い!!!
#出張ヒストリア2018#出張ヒストリア2018
SSAOの負荷を緩和するには…
● 半径、Quality、
負荷調整パラメータで調整
SSAOの負荷調整パラメータ
○ r.AmbientOcclusionMipLevelFactor
○ r....
#出張ヒストリア2018#出張ヒストリア2018
SSAOの負荷を緩和するには…
● 特定の環境の場合、
非同期でSSAOを動作させることが可能
○ r.AmbientOcclusion.Compute 2 or 3
○ ただし、ノーマルに対し...
#出張ヒストリア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
○ どの程度の粗さの床にまで
SS...
#出張ヒストリア2018#出張ヒストリア2018
SSRの注意点 ①
負荷高い!!!
#出張ヒストリア2018#出張ヒストリア2018
SSRのパフォーマンス調整
Qualityプロパティ、
または、”r.SSR.Quality” で調整
○ 低い方の値が適用される
● “r.SSR.Quality 0” :SSR無効
● “r...
#出張ヒストリア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では不可能だった
画面外のオブジェクトも反射に含められる
デメリット
○ 反射に含めるためには
オブジェクトを再度を...
#出張ヒストリア2018#出張ヒストリア2018
レイトレーシング
年末をお楽しみに!以上!
https://www.unrealengine.com/ja/blog/technology-
sneak-peek-real-time-ray-t...
#出張ヒストリア2018#出張ヒストリア2018
SSR, 反射に関する公式ドキュメント
● Screen Space Reflections
○ https://docs.unrealengine.com/en-
us/Engine/Rend...
#出張ヒストリア2018#出張ヒストリア2018
グローバルイルミネーション
( Global Illuminiation )
#出張ヒストリア2018#出張ヒストリア2018
ポストプロセスにあるグローバルイルミネーションとは?
UE4のLightmassによって事前計算された
間接光の強さ・色を補正する機能
http://api.unrealengine.com/J...
#出張ヒストリア2018#出張ヒストリア2018
ポストプロセスにあるグローバルイルミネーションとは?
UE4のLightmassによって事前計算された
間接光の強さ・色を補正する機能
Lightmassを使ってない( = 全ライトがMovab...
#出張ヒストリア2018#出張ヒストリア2018
モーションブラー
( Motion Blur )
#出張ヒストリア2018#出張ヒストリア2018
ポストプロセスにおけるモーションブラーとは
動きの軌跡の表現…
ではなくて!
#出張ヒストリア2018#出張ヒストリア2018
ポストプロセスにおけるモーションブラーとは
シャッタースピードを遅くした際の
「被写体ブレ」「手ブレ」を再現する仕組み
被写体ブレ 手ブレ
http://www.nikon-
image.com...
#出張ヒストリア2018#出張ヒストリア2018
モーションブラーの仕組み
フレーム間の移動ベクトルを保存し
その情報をもとにブラー効果を適用
#出張ヒストリア2018#出張ヒストリア2018
ShowFlag.VisualizeMotionBlur 1 で可視化
#出張ヒストリア2018#出張ヒストリア2018
モーションブラーを調整する上で重要なパラメータ
Amount:ブラー効果の掛け度合い
≒ ブラー効果を掛けるか否かの閾値
#出張ヒストリア2018#出張ヒストリア2018
動きの流れが表現されていい感じ!
なんかかっこいいし!
モーションブラー最高!!!
ちょっとまって!
#出張ヒストリア2018#出張ヒストリア2018
モーションブラーの注意点 ①
カメラを移動・回転した際に
画面全体にブラー効果がかかる(手ブレの再現)
酔う…(´;ω;`)
敵が見えん…(# ゚Д゚)
#出張ヒストリア2018#出張ヒストリア2018
モーションブラーの注意点 ①
どんなコンテンツで問題になるのか?
○ カメラ(画面)が大きく動く可能性がある
○ 視認性が重要なゲーム性
モーションブラーは切るか、
Amountは小さい方が無難...
#出張ヒストリア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
Renderin...
#出張ヒストリア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%D...
#出張ヒストリア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-tool...
#出張ヒストリア2018#出張ヒストリア2018
おすすめのポストプロセスアセット
https://www.unrealengine.com/marketplace/chameleon
#出張ヒストリア2018#出張ヒストリア2018
その他 有益資料
● Unreal Engineを使用した商用タイトルで のノンフォトリアルレン
ダリング(NPR)事例
○ https://www.slideshare.net/Tatsuhi...
#出張ヒストリア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/
Upcoming SlideShare
Loading in …5
×

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

47,962 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/

×