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

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

• 1.
  #出張ヒストリア2018#出張ヒストリア2018 猫でも分かる UE4のポストプロセスを使った演出・絵作り Epic Games Japan岡田和也 - 出張ヒストリア！ゲーム開発勉強会 2018 -
• 2.
  #出張ヒストリア2018#出張ヒストリア2018 自己紹介 Epic Games Japanサポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) ライセンシのサポートしたり 講演したり なんかいろいろしてたり
• 3.
  #出張ヒストリア2018#出張ヒストリア2018 本日のお題 猫でも分かる UE4の ポストプロセス を使った 演出・絵作り
• 4.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス( Post Process)って？ レンダリング結果に対して行う 画像処理
• 5.
  #出張ヒストリア2018#出張ヒストリア2018 「Unreal Engine 4のレンダリングフロー総おさらい」より
• 6.
  #出張ヒストリア2018#出張ヒストリア2018 映像業界でいう 「撮影」「コンポジット」にあたる部分 ← この本良かった！
• 7.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用前
• 8.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用後
• 9.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセス適用前 ポストプロセス適用後
• 10.
  #出張ヒストリア2018#出張ヒストリア2018 直近のUE4タイトルにおける活用例 OCTOPATH TRAVELER
• 11.
  #出張ヒストリア2018#出張ヒストリア2018 先日話題になった 水彩Post ProcessMaterial あく ( @Aqu_ )さん
• 12.
  #出張ヒストリア2018#出張ヒストリア2018 https://aqu.hatenablog.com/ entry/2018/07/09/000805
• 13.
  #出張ヒストリア2018#出張ヒストリア2018 何故このお題を 選んだのか？
• 14.
  #出張ヒストリア2018#出張ヒストリア2018 そのポストプロセス あなたの作品に合っていますか？
• 15.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスのデフォルト設定 コントラストきつめ！ うお、まぶし！
• 16.
  #出張ヒストリア2018#出張ヒストリア2018 なんとなく調整したはいいけど… ぱっと見きれいだけど 画面見づらい… ホラーゲームじゃないのに 画面がずっと暗い…
• 17.
  #出張ヒストリア2018#出張ヒストリア2018
• 18.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスは 作品の画作りだけでなく 内容にも影響する重要な要素！
• 19.
  #出張ヒストリア2018#出張ヒストリア2018 でもデフォルト設定のままに なっている方を見かける… なんで！？
• 20.
  #出張ヒストリア2018#出張ヒストリア2018 できることが多すぎ ○ 大量の謎のパラメータ… ○ どこから手を付けたらいいのか分からない…
• 21.
  #出張ヒストリア2018#出張ヒストリア2018 ドキュメントがパラメータの紹介だけ ○ しかも内容が微妙に古い…( ｺﾞﾒﾝﾅｻｲ ○具体的にどんな活用例があるか分かりづらい
• 22.
  #出張ヒストリア2018#出張ヒストリア2018 今日話すこと 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3.ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
• 23.
  #出張ヒストリア2018#出張ヒストリア2018 今日話さないこと ● 各パラメータの詳細な解説 ● ポストプロセスマテリアルについて ●NPR系の実装について
• 24.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスの使い方
• 25.
  #出張ヒストリア2018#出張ヒストリア2018 ポストプロセスを使用・調整する方法 ● プロジェクト設定 ● PostProcess Volume ● Camera Component ● Blueprint ● Sequencer
• 26.
  #出張ヒストリア2018#出張ヒストリア2018 プロジェクト設定
• 27.
  #出張ヒストリア2018#出張ヒストリア2018 プロジェクト設定 ポストプロセスのデフォルト設定 ○ 標準で各機能が有効になっているので 意図しないポストプロセスがかかっていることも
• 28.
  #出張ヒストリア2018#出張ヒストリア2018 不要なポストプロセスが走らないようにするには ● プロジェクト設定の チェックボックスをOFFっておく ● PostProcess Volumeや Camera Component側で無効化する
• 29.
  #出張ヒストリア2018#出張ヒストリア2018 付録： Post ProcessVolumeによる設定上書き 例：Project SettingsでBloomが 有効
• 30.
  #出張ヒストリア2018#出張ヒストリア2018 付録： Post ProcessVolumeによる編集の判定 例：Project SettingsでBloomが 無効
• 31.
  #出張ヒストリア2018#出張ヒストリア2018 Post Process Volume 使用するポストプロセスの設定、 ポストプロセスの適用範囲を設定するボリューム
• 32.
  #出張ヒストリア2018#出張ヒストリア2018 Post Process Volumeが適用される条件 ●ボリューム内にカメラがある場合 ○ 使用例：水中専用のポストプロセス ● Infinite Extentを有効にしている場合
• 33.
  #出張ヒストリア2018#出張ヒストリア2018 Camera Component カメラ毎にポストプロセス設定を行うことが可能 ○ SceneCapture系も同様
• 34.
  #出張ヒストリア2018#出張ヒストリア2018 Blueprintからポストプロセスを制御する方法 Post Process Volumeや CameraComponentのポストプロセス設定を編集可能 https://api.unrealengine.com/JPN/Engine/Bluepri nts/UserGuide/Variables/Structs/index.html
• 35.
  #出張ヒストリア2018#出張ヒストリア2018 Sequencerからポストプロセスを制御する方法 レベル上のPost Process Volume, CameraComponentが持つパラメータを制御
• 36.
  #出張ヒストリア2018#出張ヒストリア2018 おまけ：Preview Scene Settings Persona,Material, Niagaraエディタでは プレビュー用のポストプロセスを設定可能
• 37.
  #出張ヒストリア2018#出張ヒストリア2018 おまけ：ポストプロセスを無効化する方法 ● 表示メニューから 各ポストプロセスの表示ON/OFF ● “ShowFlag.PostProcessing0”
• 38.
  #出張ヒストリア2018#出張ヒストリア2018 ここまでのまとめ UE4のポストプロセスは 様々な方法で設定・制御することができる！ ○ プロジェクト設定 ○ PostProcess Volume ○ Camera Component ○ Blueprint ○ Sequencer
• 39.
  #出張ヒストリア2018#出張ヒストリア2018 今日話す内容 1. ポストプロセスの使い方 2. UE4標準ポストプロセス機能の紹介 3.ネットで公開されているサンプルやTipsの紹介 4. ポストプロセスを使った演出・絵作りの例
• 40.
  #出張ヒストリア2018#出張ヒストリア2018 UE4が用意している ポストプロセス機能の紹介
• 41.
  #出張ヒストリア2018#出張ヒストリア2018 PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル
• 42.
  #出張ヒストリア2018#出張ヒストリア2018 レンズ系のポストプロセス処理 カメラレンズの光学特性の疑似再現
• 43.
  #出張ヒストリア2018#出張ヒストリア2018 被写界深度によるボケ レンズフレア
• 44.
  #出張ヒストリア2018#出張ヒストリア2018 以降のスライドではレンズの特性について 軽く解説している箇所があるのですが… あくまで初心者向けなので 「あえて」簡略化してる箇所があります！ ですので…何卒…なにとぞ…！！！
• 45.
  #出張ヒストリア2018#出張ヒストリア2018 被写界深度 ( Depth ofField )
• 46.
  #出張ヒストリア2018#出張ヒストリア2018 被写界深度とは？ カメラの被写界深度の再現 ○ フォーカス、ピント、ボケ( Bokeh)
• 47.
  #出張ヒストリア2018#出張ヒストリア2018 視線誘導、奥行き感の表現など 様々な演出に活用できるすごいやつ！
• 48.
  #出張ヒストリア2018#出張ヒストリア2018
• 49.
  #出張ヒストリア2018#出張ヒストリア2018
• 50.
  #出張ヒストリア2018#出張ヒストリア2018
• 51.
  #出張ヒストリア2018#出張ヒストリア2018
• 52.
  #出張ヒストリア2018#出張ヒストリア2018 UE４が用意している被写界深度の手法 (UE4.20時点) Gaussian DoF ○最も高速かつ簡易的な手法 ○ 今後はモバイル専用になる予定 Bokeh DoF ○ 高品質だけど処理負荷高い手法 ○ 今後は非推奨になる予定
• 53.
  #出張ヒストリア2018#出張ヒストリア2018 Gaussian DoF BokehDoF
• 54.
  #出張ヒストリア2018#出張ヒストリア2018 UE４が用意している被写界深度の手法 (UE4.20時点) Cinematic DoFnew! ○ Bokeh並の品質 かつ 高速な手法 ○ UE4.19以前のCircle DoFを置き換え
• 55.
  #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoF は いいぞ！ DoFおじさん
• 56.
  #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには 手法① Post ProcessVolume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法
• 57.
  #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには 手法① Post ProcessVolume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法
• 58.
  #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使うには 手法①
• 59.
  #出張ヒストリア2018#出張ヒストリア2018 被写界深度を制御する要素 ● Focus Distance( 被写体までの距離 ) ● Focal Region ( 絞り, F値 ) ● Focal Length (焦点距離) or FoV ( 画角 ) Focus Distance
• 60.
  #出張ヒストリア2018#出張ヒストリア2018 付録
• 61.
  #出張ヒストリア2018#出張ヒストリア2018 めんどくさ！！！
• 62.
  #出張ヒストリア2018#出張ヒストリア2018 Cinematic DoFを使う・調整するには 手法① Post ProcessVolume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 (個人的オススメは断然こっち！)
• 63.
  #出張ヒストリア2018#出張ヒストリア2018 Cine Camera Actorとは 実在するカメラの挙動を再現するために 詳細な設定項目が用意されたCameraActor
• 64.
  #出張ヒストリア2018#出張ヒストリア2018 超絶簡単！！！ Cine Camera サイコー！
• 65.
  #出張ヒストリア2018#出張ヒストリア2018 被写界深度のデバッグ機能 ShowFlag.VisualizeDOF 1
• 66.
  #出張ヒストリア2018#出張ヒストリア2018 付録：被写界深度に関する公式ドキュメント ● Depth ofField ○ 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.
  #出張ヒストリア2018#出張ヒストリア2018 ブルーム ( Bloom )
• 68.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームとは 発光現象を表現する機能
• 69.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームのパラメータ Intensity ○ ブルームの強さ・掛かり度合い ○ 値を上げるほど、 より眩しく、より広くブルームが掛かるように
• 70.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームのパラメータ Threshold ○ ブルームを発生する明るさのしきい値 ○ 初期値(-1)の場合 画面全体にブルームが掛かる…
• 71.
  #出張ヒストリア2018#出張ヒストリア2018
• 72.
  #出張ヒストリア2018#出張ヒストリア2018 付録 Threshold 大事！ 人肌は…発光しないのだ…！ ディフュージョン効果があるけども… 背景オブジェクトとの兼ね合いを考えると ちゃんと人肌用にフィルタ用意したほうがいいと思う… https://www.4gamer.net/games/216/ G021678/20140714079/
• 73.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームの汚れマスク レンズの汚れや傷の表現
• 74.
  #出張ヒストリア2018#出張ヒストリア2018 汚れマスク：なし
• 75.
  #出張ヒストリア2018#出張ヒストリア2018 汚れマスク：あり
• 76.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能 ( BloomConvolution ) 畳み込み機能を使うことで ブルームの形状を変更・調整できる
• 77.
  #出張ヒストリア2018#出張ヒストリア2018 男の子が好きなやつができるぞ！
• 78.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能のパラメータ MetodをConvolutionに変更すると 専用パラメータが編集可能に
• 79.
  #出張ヒストリア2018#出張ヒストリア2018 調整しないと悪目立ちすることも… 圧倒的 J・J・◯イブラムス感
• 80.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能の注意点 ① 負荷高い！！！ 映像作品やハイエンドコンテンツ向け
• 81.
  #出張ヒストリア2018#出張ヒストリア2018 ブルームの畳み込み機能の注意点 ② この機能用のデフォルトテクスチャの ファイルサイズがバカでかい！ (32MB ショック！ ) ○ パフォーマンスやパッケージサイズに影響… ○ モバイル, HTML5は畳み込み機能が使えないので パッケージに含まれないようになっている /Engine/EngineMaterials/ DefaultBloomKernel
• 82.
  #出張ヒストリア2018#出張ヒストリア2018 畳み込み機能使わないなら 解像度下げてファイルサイズ落としたほうが無難 テクスチャの圧縮設定より 2048 x 2048-> 4 x 4 に ○ 32MB -> 1KB以下に
• 83.
  #出張ヒストリア2018#出張ヒストリア2018 https://www.youtube.com/watch?v=0Ge7ykxDTIQ
• 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.
  #出張ヒストリア2018#出張ヒストリア2018 レンズフレア ( Lens Flare)
• 86.
  #出張ヒストリア2018#出張ヒストリア2018 レンズフレアとは 光源の散乱をシミュレート
• 87.
  #出張ヒストリア2018#出張ヒストリア2018 引用：WEBアニメスタイル「第5回エフェクトを考える」 http://animestyle.jp/2016/03/07/9837/
• 88.
  #出張ヒストリア2018#出張ヒストリア2018 レンズフレアの調整 Intensity ○ 明るさ Tint ○ レンズフレアの色調整 BokehSize ○ボケの大きさ Threshold ○ レンズフレアを発生する 明るさのしきい値 BokehShape ○ ボケの形
• 89.
  #出張ヒストリア2018#出張ヒストリア2018 レンズフレアのボケの形状 デフォルトは６角形 ○ エンジンコンテンツに他の形状が用意されている
• 90.
  #出張ヒストリア2018#出張ヒストリア2018 レンズフレアのユースケース 使い所難しい… ○ 頻繁に出ているとうざったい ○ 演出としてピンポイントで使うのがいいのでは？逆光とか
• 91.
  #出張ヒストリア2018#出張ヒストリア2018 付録 レンズフレアに関する公式ドキュメント ● LensFlare ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/LensFlare
• 92.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光 ( Eye Adaptation,Auto-Exposure )
• 93.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光とは 画面の明るさの自動調整 ○ 「白飛びしないように」「画面が暗すぎないように」
• 94.
  #出張ヒストリア2018#出張ヒストリア2018 暗順応 -Wikipedia- ○ 可視光量の多い環境から少ない環境へ急激に変化した場合に、時 間経過とともに徐々に視力が確保される、動物の自律機能である ○https://ja.wikipedia.org/wiki/%E6%9A%97%E9%A0%86% E5%BF%9C
• 95.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光の調整 明るさの自動調整は各パラメータと シーンの色のヒストグラムに基づいて行われる ● Min/Max Brightness ○明るさの最小/最大値 ● Speed Up / Down ○ 明るさの調整速度 ● Histogram Log Min / Max ○ 使用するヒストグラムの範囲
• 96.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光の調整用機能 ShowFlag.VisualizeHDR 1
• 97.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光の注意点 デフォルトで有効 かつ Min /Max Brightnessの値が異なる 画面の明るさを 勝手に変えられてしまう！
• 98.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光の注意点 Min, Max Brightnessを 同じ値にしておく 自動露光による 明るさ調整が無効に
• 99.
  #出張ヒストリア2018#出張ヒストリア2018 自動露光に関する公式ドキュメント ● Eye Adaption[ Auto-Exposure ] ○ https://docs.unrealengine.com/en- us/Engine/Rendering/PostProcessEffects/AutomaticExposure
• 100.
  #出張ヒストリア2018#出張ヒストリア2018 ビネット効果 ( Vignette )