356.8K Views
August 06, 18
スライド概要
補足: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日に行われた「出張ヒストリア! ゲーム開発勉強会2018」で登壇した際に使用した資料です。
https://historia.co.jp/archives/14224/
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
猫でも分かる 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
UE4が用意している被写界深度の手法 (UE4.20時点) Gaussian DoF ○ ○ 最も高速かつ簡易的な手法 今後はモバイル専用になる予定 Bokeh DoF ○ ○ 高品質だけど処理負荷高い手法 今後は非推奨になる予定 #出張ヒストリア2018
Gaussian DoF #出張ヒストリア2018 Bokeh DoF
UE4が用意している被写界深度の手法 (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 ○ ボケの形
レンズフレアのボケの形状 デフォルトは6角形 ○ エンジンコンテンツに他の形状が用意されている #出張ヒストリア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