猫でも分かるUE4のポストプロセスを使った演出・絵作り【出張ヒストリア! ゲーム開発勉強会2018】

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/

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

猫でも分かる UE4のポストプロセスを使った演出・絵作り - 出張ヒストリア!ゲーム開発勉強会 2018 Epic Games Japan 岡田和也 #出張ヒストリア2018

2.

自己紹介 Epic Games Japan サポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) ライセンシのサポートしたり 講演したり なんかいろいろしてたり #出張ヒストリア2018

3.

本日のお題 猫でも分かる UE4の ポストプロセス を使った 演出・絵作り #出張ヒストリア2018

4.

ポストプロセス( Post Process )って? レンダリング結果に対して行う 画像処理 #出張ヒストリア2018

5.

「Unreal Engine 4のレンダリングフロー総おさらい」より #出張ヒストリア2018

6.

映像業界でいう 「撮影」「コンポジット」にあたる部分 ← この本良かった! #出張ヒストリア2018

7.

#出張ヒストリア2018 ポストプロセス適用前

8.

#出張ヒストリア2018 ポストプロセス適用後

9.

ポストプロセス適用前 #出張ヒストリア2018 ポストプロセス適用後

10.

直近のUE4タイトルにおける活用例 OCTOPATH TRAVELER #出張ヒストリア2018

11.

先日話題になった 水彩Post Process Material あく ( @Aqu_ )さん #出張ヒストリア2018

12.

https://aqu.hatenablog.com/ entry/2018/07/09/000805 #出張ヒストリア2018

13.

何故このお題を 選んだのか? #出張ヒストリア2018

14.

そのポストプロセス あなたの作品に合っていますか? #出張ヒストリア2018

15.

ポストプロセスのデフォルト設定 コントラストきつめ! #出張ヒストリア2018 うお、まぶし!

16.

なんとなく調整したはいいけど… ぱっと見きれいだけど 画面見づらい… #出張ヒストリア2018 ホラーゲームじゃないのに 画面がずっと暗い…

17.

#出張ヒストリア2018

18.

ポストプロセスは 作品の画作りだけでなく 内容にも影響する重要な要素! #出張ヒストリア2018

19.

でもデフォルト設定のままに なっている方を見かける… なんで!? #出張ヒストリア2018

20.

できることが多すぎ ○ ○ 大量の謎のパラメータ… どこから手を付けたらいいのか分からない… #出張ヒストリア2018

21.

ドキュメントがパラメータの紹介だけ ○ ○ しかも内容が微妙に古い…( ゴメンナサイ 具体的にどんな活用例があるか分かりづらい #出張ヒストリア2018

22.

今日話すこと 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

23.

今日話さないこと ● ● ● 各パラメータの詳細な解説 ポストプロセスマテリアルについて NPR系の実装について #出張ヒストリア2018

24.

ポストプロセスの使い方 #出張ヒストリア2018

25.

ポストプロセスを使用・調整する方法 ● ● ● ● ● プロジェクト設定 Post Process Volume Camera Component Blueprint Sequencer #出張ヒストリア2018

26.

プロジェクト設定 #出張ヒストリア2018

27.

プロジェクト設定 ポストプロセスのデフォルト設定 ○ 標準で各機能が有効になっているので 意図しないポストプロセスがかかっていることも #出張ヒストリア2018

28.

不要なポストプロセスが走らないようにするには ● ● プロジェクト設定の チェックボックスをOFFっておく Post Process Volumeや Camera Component側で無効化する #出張ヒストリア2018

29.

付録: Post Process Volumeによる設定上書き 例:Project SettingsでBloomが 有効 #出張ヒストリア2018

30.

付録: Post Process Volumeによる編集の判定 例:Project SettingsでBloomが 無効 #出張ヒストリア2018

31.

Post Process Volume 使用するポストプロセスの設定、 ポストプロセスの適用範囲を設定するボリューム #出張ヒストリア2018

32.

Post Process Volumeが適用される条件 ● ボリューム内にカメラがある場合 ○ ● 使用例:水中専用のポストプロセス Infinite Extentを有効にしている場合 #出張ヒストリア2018

33.

Camera Component カメラ毎にポストプロセス設定を行うことが可能 ○ SceneCapture系も同様 #出張ヒストリア2018

34.

Blueprintからポストプロセスを制御する方法 Post Process Volumeや Camera Componentのポストプロセス設定を編集可能 #出張ヒストリア2018 https://api.unrealengine.com/JPN/Engine/Bluepri nts/UserGuide/Variables/Structs/index.html

35.

Sequencerからポストプロセスを制御する方法 レベル上のPost Process Volume, Camera Componentが持つパラメータを制御 #出張ヒストリア2018

36.

おまけ:Preview Scene Settings Persona, Material, Niagaraエディタでは プレビュー用のポストプロセスを設定可能 #出張ヒストリア2018

37.

おまけ:ポストプロセスを無効化する方法 ● ● 表示メニューから 各ポストプロセスの表示ON/OFF “ShowFlag.PostProcessing 0” #出張ヒストリア2018

38.

ここまでのまとめ UE4のポストプロセスは 様々な方法で設定・制御することができる! ○ ○ ○ ○ ○ プロジェクト設定 Post Process Volume Camera Component Blueprint Sequencer #出張ヒストリア2018

39.

今日話す内容 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

40.

UE4が用意している ポストプロセス機能の紹介 #出張ヒストリア2018

41.

PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング #出張ヒストリア2018 ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル

42.

レンズ系のポストプロセス処理 カメラレンズの光学特性の疑似再現 #出張ヒストリア2018

43.

被写界深度によるボケ #出張ヒストリア2018 レンズフレア

44.

以降のスライドではレンズの特性について 軽く解説している箇所があるのですが… あくまで初心者向けなので 「あえて」簡略化してる箇所があります! ですので…何卒…なにとぞ…!!! #出張ヒストリア2018

45.

被写界深度 ( Depth of Field ) #出張ヒストリア2018

46.

被写界深度とは? カメラの被写界深度の再現 ○ フォーカス、ピント、ボケ( Bokeh ) #出張ヒストリア2018

47.

視線誘導、奥行き感の表現など 様々な演出に活用できるすごいやつ! #出張ヒストリア2018

48.

#出張ヒストリア2018

49.

#出張ヒストリア2018

50.

#出張ヒストリア2018

51.

#出張ヒストリア2018

52.

UE4が用意している被写界深度の手法 (UE4.20時点) Gaussian DoF ○ ○ 最も高速かつ簡易的な手法 今後はモバイル専用になる予定 Bokeh DoF ○ ○ 高品質だけど処理負荷高い手法 今後は非推奨になる予定 #出張ヒストリア2018

53.

Gaussian DoF #出張ヒストリア2018 Bokeh DoF

54.

UE4が用意している被写界深度の手法 (UE4.20時点) Cinematic DoF new! ○ ○ Bokeh並の品質 かつ 高速な手法 UE4.19以前のCircle DoFを置き換え #出張ヒストリア2018

55.

Cinematic DoF は いいぞ! DoFおじさん #出張ヒストリア2018

56.

Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 #出張ヒストリア2018

57.

Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 #出張ヒストリア2018

58.

Cinematic DoFを使うには 手法① #出張ヒストリア2018

59.

被写界深度を制御する要素 ● Focus Distance ( 被写体までの距離 ) ● Focal Region ( 絞り, F値 ) ● Focal Length (焦点距離) or FoV ( 画角 ) Focus Distance #出張ヒストリア2018

60.

付録 #出張ヒストリア2018

61.

めんどくさ!!! #出張ヒストリア2018

62.

Cinematic DoFを使う・調整するには 手法① Post Process Volume / Camera Componentで 設定する方法 手法② Cine Camera Actorの Current Camera Settingsを設定する方法 (個人的オススメは断然こっち!) #出張ヒストリア2018

63.

Cine Camera Actorとは 実在するカメラの挙動を再現するために 詳細な設定項目が用意されたCamera Actor #出張ヒストリア2018

64.

超絶簡単!!! Cine Camera サイコー! #出張ヒストリア2018

65.

被写界深度のデバッグ機能 ShowFlag.VisualizeDOF 1 #出張ヒストリア2018

66.

付録:被写界深度に関する公式ドキュメント ● 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

67.

ブルーム ( Bloom ) #出張ヒストリア2018

68.

ブルームとは 発光現象を表現する機能 #出張ヒストリア2018

69.

ブルームのパラメータ Intensity ○ ○ ブルームの強さ・掛かり度合い 値を上げるほど、 より眩しく、より広くブルームが掛かるように #出張ヒストリア2018

70.

ブルームのパラメータ Threshold ○ ○ ブルームを発生する明るさのしきい値 初期値(-1)の場合 画面全体にブルームが掛かる… #出張ヒストリア2018

71.

#出張ヒストリア2018

72.

付録 Threshold 大事! 人肌は…発光しないのだ…! ディフュージョン効果があるけども… 背景オブジェクトとの兼ね合いを考えると ちゃんと人肌用にフィルタ用意したほうがいいと思う… https://www.4gamer.net/games/216/ G021678/20140714079/ #出張ヒストリア2018

73.

ブルームの汚れマスク レンズの汚れや傷の表現 #出張ヒストリア2018

74.

#出張ヒストリア2018 汚れマスク:なし

75.

#出張ヒストリア2018 汚れマスク:あり

76.

ブルームの畳み込み機能 ( Bloom Convolution ) 畳み込み機能を使うことで ブルームの形状を変更・調整できる #出張ヒストリア2018

77.

男の子が好きなやつができるぞ! #出張ヒストリア2018

78.

ブルームの畳み込み機能のパラメータ MetodをConvolutionに変更すると 専用パラメータが編集可能に #出張ヒストリア2018

79.

調整しないと悪目立ちすることも… 圧倒的 J・J・◯イブラムス感 #出張ヒストリア2018

80.

ブルームの畳み込み機能の注意点 ① 負荷高い!!! 映像作品やハイエンドコンテンツ向け #出張ヒストリア2018

81.

ブルームの畳み込み機能の注意点 ② この機能用のデフォルトテクスチャの ファイルサイズがバカでかい! ( 32MB ショック! ) ○ ○ パフォーマンスやパッケージサイズに影響… モバイル, HTML5は畳み込み機能が使えないので パッケージに含まれないようになっている /Engine/EngineMaterials/ DefaultBloomKernel #出張ヒストリア2018

82.

畳み込み機能使わないなら 解像度下げてファイルサイズ落としたほうが無難 テクスチャの圧縮設定より 2048 x 2048 -> 4 x 4 に ○ 32MB -> 1KB以下に #出張ヒストリア2018

83.

https://www.youtube.com/watch?v=0Ge7ykxDTIQ #出張ヒストリア2018

84.

付録 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

85.

レンズフレア ( Lens Flare ) #出張ヒストリア2018

86.

レンズフレアとは 光源の散乱をシミュレート #出張ヒストリア2018

87.

引用:WEBアニメスタイル「第5回エフェクトを考える」 http://animestyle.jp/2016/03/07/9837/ #出張ヒストリア2018

88.

レンズフレアの調整 Intensity ○ 明るさ Tint ○ レンズフレアの色調整 BokehSize ○ ボケの大きさ #出張ヒストリア2018 Threshold ○ レンズフレアを発生する 明るさのしきい値 BokehShape ○ ボケの形

89.

レンズフレアのボケの形状 デフォルトは6角形 ○ エンジンコンテンツに他の形状が用意されている #出張ヒストリア2018

90.

レンズフレアのユースケース 使い所難しい… ○ ○ 頻繁に出ているとうざったい 演出としてピンポイントで使うのがいいのでは?逆光とか #出張ヒストリア2018

91.

付録 レンズフレアに関する公式ドキュメント ● Lens Flare ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/LensFlare #出張ヒストリア2018

92.

自動露光 ( Eye Adaptation, Auto-Exposure ) #出張ヒストリア2018

93.

自動露光とは 画面の明るさの自動調整 ○ 「白飛びしないように」「画面が暗すぎないように」 #出張ヒストリア2018

94.

暗順応 -Wikipedia○ ○ 可視光量の多い環境から少ない環境へ急激に変化した場合に、時 間経過とともに徐々に視力が確保される、動物の自律機能である https://ja.wikipedia.org/wiki/%E6%9A%97%E9%A0%86% E5%BF%9C #出張ヒストリア2018

95.

自動露光の調整 明るさの自動調整は各パラメータと シーンの色のヒストグラムに基づいて行われる ● Min/Max Brightness ○ ● Speed Up / Down ○ ● 明るさの最小/最大値 明るさの調整速度 Histogram Log Min / Max ○ 使用するヒストグラムの範囲 #出張ヒストリア2018

96.

自動露光の調整用機能 ShowFlag.VisualizeHDR 1 #出張ヒストリア2018

97.

自動露光の注意点 デフォルトで有効 かつ Min / Max Brightnessの値が異なる 画面の明るさを 勝手に変えられてしまう! #出張ヒストリア2018

98.

自動露光の注意点 Min, Max Brightnessを 同じ値にしておく 自動露光による 明るさ調整が無効に #出張ヒストリア2018

99.

自動露光に関する公式ドキュメント ● Eye Adaption [ Auto-Exposure ] ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/AutomaticExposure #出張ヒストリア2018

100.

ビネット効果 ( Vignette ) #出張ヒストリア2018

101.

ビネット効果とは カメラレンズの周辺減光の再現 #出張ヒストリア2018

102.

ビネット効果の調整 Vignette Intensity ○ ○ 掛かり度合いの調整 直接入力で1以上に設定可能 #出張ヒストリア2018

103.

ビネット効果の注意点 デフォルト(0.4)だと、薄く掛かってしまうので注意! #出張ヒストリア2018

104.

#出張ヒストリア2018

105.

#出張ヒストリア2018

106.

ビネット効果のユースケース 画面中心への視線誘導 ○ トンネル効果 #出張ヒストリア2018

107.

標準で用意されているビネット効果の欠点 掛かり度合いの調整しかできない… 色を変えたり… #出張ヒストリア2018 横長にしたり…

108.

ビネット効果をより細かく調整したい場合 後述のポストプロセスマテリアルで対応することに #出張ヒストリア2018 https://forums.unrealengine.com/developmentdiscussion/rendering/40562-colored-vignette

109.

ビネット効果に関する公式ドキュメント ● Vignette ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/Vignette #出張ヒストリア2018

110.

グレイン効果 ( Grain ) #出張ヒストリア2018

111.

グレイン効果とは フィルム特有のノイズの再現 #出張ヒストリア2018

112.

グレイン効果の調整 Grain Jitter ○ 画面のジラつき度合い Grain Intensity ○ ノイズのかけ具合 #出張ヒストリア2018

113.

グレイン効果のユースケース ● フィルム感を出したいとき ● 映像に質感や雰囲気を出したい場合…らしい… ○ 単なるノイズに見えてしまう 可能性があるので注意 #出張ヒストリア2018

114.

色収差 ( Scene Fringe, Chromatic Aberration ) #出張ヒストリア2018

115.

色収差 外側になるほど色がずれるレンズの特性を再現 ○ 画面全体に均一にRGBがズレてるのは正しい色収差ではないのだ! #出張ヒストリア2018

116.

色収差 外側になるほど色がずれるレンズの特性を再現 #出張ヒストリア2018

117.

色収差のパラメータ Intensity ○ 色収差の掛かり度合い Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 ) #出張ヒストリア2018

118.

色収差のパラメータ ● Intensity ○ ● 色収差の掛かり度合い Start Offset ○ 色収差が掛かり始める距離( 画面中心からの距離 ) #出張ヒストリア2018

119.

色収差のユースケース ヒット・ダメージ・爆発演出時に使われている印象 ○ 衝撃 や 異常 の表現に使えるかも #出張ヒストリア2018

120.

色収差 使用時の注意点 ● 色収差を気持ち悪く感じる人もいるので注意! ○ ● 長時間 画面全体に 強めに 掛かっていると顕著 効果的に使うためには 絵的なセンスが必要な印象… 短時間だけ表示して エフェクト的な用途が無難かも #出張ヒストリア2018

121.

色収差に関する公式ドキュメント ● Scene Fringe [Choromatic Aberration] ○ https://docs.unrealengine.com/enus/Engine/Rendering/PostProcessEffects/SceneFringe #出張ヒストリア2018

122.

レンズ系のポストプロセスの注意点 現実世界のレンズは、「ビネット」「グレイン」「色収差」 を抑える方向に改善 ○ 全体の絵作りをする上で多用すると 違和感を覚える人もしばしば… #出張ヒストリア2018

123.

レンズ系のポストプロセスの注意点 逆に言うと、 「ビネット」「グレイン」「色収差」は 昔のカメラレンズの特性を表現している 回想シーンなどの 過去を強調したい場面で有効かも #出張ヒストリア2018

124.

レンズ系のポストプロセスに関しては 実際のカメラで色々試してみると 各パラメータの理解が深まるのでオススメ! #出張ヒストリア2018

125.

PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング #出張ヒストリア2018 ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル

126.

カラーグレーディング ( Color Grading ) & トーンマッピング ( Tone Mapping ) #出張ヒストリア2018

127.

以降の内容は あくまでイメージとして考えて下さい! ”この分野あまり詳しくないですが…勢”は 何卒…なにとぞ…! #出張ヒストリア2018

128.

トーンマッピング ( Tone Mapping )とは HDR #出張ヒストリア2018 ↑ これ LDR

129.

UE4における カラーグレーディング ( Color Grading )とは HDR トーンマッピング 色調補正 #出張ヒストリア2018 ↑これ LDR

130.

もっとちゃんとした話はこちらで! UE4の色について v1.1 https://www.slideshare.net/ EpicGamesJapan/ue4-v11 #出張ヒストリア2018

131.

ここでお伝えしたいこと 画面に表示するまでに 2種類の色補正処理が入ること トーンマッピング ○ HDR -> LDR 変換処理 カラーグレーディング ○ 色補正 #出張ヒストリア2018

132.

トーンマッピングの効果 画面のコントラスト(明暗)の 調整 ○ ○ ○ Slope Toe Shoulder #出張ヒストリア2018 :全体 の 調整 :暗い箇所 の 調整 :明るい箇所 の 調整

133.

カラーグレーディング 調整項目 ひとまず… このパラメータをいじってみましょう! #出張ヒストリア2018

134.

カラーグレーディング - ホワイトバランス - 光の影響で色が変わってしまった 「白」を「白」に見えるようにする補正機能 色合いの調整として使用可能! #出張ヒストリア2018

135.

カラーグレーディング - ホワイトバランス - 画面の雰囲気・印象が大きく変わるのでオススメ! #出張ヒストリア2018

136.

https://cs.olympus-imaging.jp/jp/support/cs/DI/QandA/Basic/s0012.html #出張ヒストリア2018

137.

カラーグレーディング – 色対応表(LUT) - Photoshopなどで作成した LUTテクスチャを使って色調補正をすることも可能! #出張ヒストリア2018

138.

#出張ヒストリア2018

139.

カラーグレーディング – 色対応表(LUT) - マーケットプレイスで販売されている LUTテクスチャを使うという手も ○ 「LUT」または「grading」で検索!検索! #出張ヒストリア2018

140.

LUT使用時の注意点 LUTで色調補正した場合 モニタによって見え方が変わる可能性がある LUTはリファレンスとして使用 Color Gradingの各パラメータで最終調整 #出張ヒストリア2018

141.

カラーグレーディング・トーンマッピングに関する 公式ドキュメント ● 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

142.

PostProcessVolumeが持つパラメータ ● レンズ系 ○ 被写界深度 ○ ブルーム ○ レンズフレア ○ 自動露光 ○ ビネット効果 ○ グレイン効果 ○ 色収差 ● カラーグレーディング ○ トーンマッピング #出張ヒストリア2018 ● レンダリング系 ○ アンチエイリアシング ○ アンビエントオクルージョン ( SSAO ) ○ スクリーンスペース リフレクション( SSR ) ○ グローバルイルミネーション ○ モーションブラー ポストプロセスマテリアル

143.

アンチエイリアシング ( Anti-Aliasing ) #出張ヒストリア2018

144.

アンチエイリアシングの効果 ジャギー(ピクセルのギザギザ)や スペキュラ・エイリアシング(チラツキ)を 抑制 #出張ヒストリア2018

145.

AA未使用 #出張ヒストリア2018 Temporal AA

146.

AA未使用 #出張ヒストリア2018 Temporal AA

147.

UE4が用意しているアンチエイリアシング手法 ● FXAA ○ ● Temporal AA ( TAA ) ○ ○ ● モバイルでは使えず UE4のデフォルトはこれ モバイルでも使用可能 ( ただし簡易版 ) MSAA ○ Forward Rendering (モバイル含む) のみ使用可能 #出張ヒストリア2018

148.

アンチエイリアシング手法の切り替え ● ● プロジェクト設定のRenderingカテゴリにある Anti-Aliasing Method ゲーム中に動的に変更したい場合 r.DefaultFeature.AntiAliasing ○ ○ ○ ○ 0 : None 1:FXAA 2:TemporalAA 3:MSAA #出張ヒストリア2018

149.

https://www.4gamer.net/games/120/G012093/20121125002/ #出張ヒストリア2018

150.

No AA #出張ヒストリア2018 FXAA TAA MSAA

151.

ポリゴンの輪郭 FXAA TAA MSAA ポリゴンの表面 (テクスチャ・スペキュラ) 負荷 効果:中 効果:大 効果:小 効果:大 小 中 効果:大 効果:なし 大 FXAA #出張ヒストリア2018 TAA MSAA

152.

注意 TAAは 万能な手法では ありません!!! #出張ヒストリア2018

153.

TAAのデメリット ● 画面変化が多いとゴースト(残像)が発生 ● 輪郭・アウトラインがボケて見える ○ 特にVRの場合、 カメラ( =頭 )の位置・向きが 常に変化するため、顕著にこの問題が現れる #出張ヒストリア2018

154.

TAAのデメリット ● ディティールが潰れて消える ○ ● 特に遠景 スペキュラ・高周波成分が消える ○ のっぺりした感じに #出張ヒストリア2018

155.

結構デメリットある! これを避けるために FXAAを採用しているタイトルもある #出張ヒストリア2018

156.

TAAのデメリット緩和向けのパラメータ ● r.TemporalAAFilterSize ○ ○ ● デフォルト:1.0 0.0に近づけるほど、ボケなくなる(絵がくっきりする) しかし、エイリアシングが発生しやすくなる… r.TemporalAACurrentFrameWeight ○ ○ デフォルト:0.04 1.0に近づけるほど、ボケ・ゴーストが発生しなくなる しかし、エイリアシングが発生しやすくなる… #出張ヒストリア2018

157.

スペキュラエイリアシングを起こさない工夫 ノーマルマップ・ラフネスマップの調整 ○ マテリアルのプロパティ Normal Curvature to Roughness を有効にすることで ノーマル情報からラフネスを調整可能 0 ラフネス値 #出張ヒストリア2018 1

158.

スペキュラエイリアシングを起こさない工夫 スペキュラが不要なら マテリアルのプロパティ“Full Rough”を有効に ● ● ラフネス値を強制的に1に シェーダ数が削減されるので パフォーマンス的にもメリットあり! #出張ヒストリア2018

159.

その他 ● LOD機能で遠景のメッシュの形状を平坦にすることで、 小さいポリゴンからのエイリアシングを回避 ○ ● Static Meshならエンジンの標準機能でLOD作成可能 TAAによる遠景のテクスチャのボケ対策 r.MipMapLODBias -1 ○ 強制的にテクスチャのミップレベルを上げる #出張ヒストリア2018

160.

その他 映像業界ならSSAAを使う選択肢も ○ ○ 例:4Kでレンダリングして、フルHDに縮小 処理負荷はかなり高いが、綺麗にエイリアシングを排除できる #出張ヒストリア2018

161.

https://www.slideshare.net/siliconstudio/ss-38733183 #出張ヒストリア2018

162.

スクリーンスペース アンビエント オクルージョン ( Screen Space Ambient Occulsion, SSAO ) #出張ヒストリア2018

163.

SSAOとは 環境光の遮蔽度合いを計算し、 その結果を元に陰影を表現する手法 ○ 画面が引き締まったり、設置感が出るなどの効果がある #出張ヒストリア2018

164.

#出張ヒストリア2018

165.

#出張ヒストリア2018

166.

SSAOの効果 キャラクタの陰影を強調したりも ○ ノンフォト寄りのキャラクタとは相性悪い場合も… #出張ヒストリア2018

167.

おまけ 「Contact Shadow」 スクリーンスペースのシャドウイング手法 ○ http://api.unrealengine.com/JPN/Engine/Rendering/Lightin gAndShadows/ContactShadows/ Contact Shadow:OFF #出張ヒストリア2018 Contact Shadow:ON

168.

SSAOの調整パラメータ ● Intensity ○ ○ ● 半径 ○ ○ ● 陰影の濃さ 上げすぎると濃すぎるので注意 陰影の範囲・大きさ 値が大きいと ノイズが目立つので注意 Quality ○ 品質 (そのまんま) #出張ヒストリア2018

169.

#出張ヒストリア2018

170.

#出張ヒストリア2018

171.

#出張ヒストリア2018

172.

SSAOの注意点 ① 負荷高い!!! #出張ヒストリア2018

173.

SSAOの負荷を緩和するには… ● 半径、Quality、 負荷調整パラメータで調整 SSAOの負荷調整パラメータ ○ ○ ○ ○ r.AmbientOcclusionMipLevelFactor r.AmbientOcclusionMaxQuality r.AmbientOcclusionLevels r.AmbientOcclusionRadiusScale #出張ヒストリア2018

174.

SSAOの負荷を緩和するには… ● 特定の環境の場合、 非同期でSSAOを動作させることが可能 ○ ○ ● r.AmbientOcclusion.Compute 2 or 3 ただし、ノーマルに対して適用されなくなるので注意 SSAOは使用しない! ○ 画作りの方向次第ではむしろ不要なケースも #出張ヒストリア2018

175.

「反射?なにそれ?おいしいの?」なシーンの例 #出張ヒストリア2018

176.

SSAOの注意点 ② Quality設定を下げた場合 パターンノイズが目立ってしまう #出張ヒストリア2018

177.

SSAOのノイズを緩和するには ● ● Quality設定を上げる Temporal AAを使用する #出張ヒストリア2018

178.

スクリーンスペースリフレクション ( Screen Space Reflection, SSR ) #出張ヒストリア2018

179.

SSRとは レンダリング結果を用いて 反射を擬似的に表現する手法 動的なオブジェクトも 反射に含まれるのがメリット! #出張ヒストリア2018

180.

#出張ヒストリア2018 SSR:OFF

181.

#出張ヒストリア2018 SSR:ON

182.

UE4っぽい!!! #出張ヒストリア2018

183.

SSR調整用パラメータ Intensity ○ ○ 掛かり度合い 0にすると、SSRが無効に Quality ○ 品質(そのまま) Max Roughness ○ どの程度の粗さの床にまで SSRによる反射を適用するか #出張ヒストリア2018

184.

SSRの注意点 ① 負荷高い!!! #出張ヒストリア2018

185.

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

186.

SSRの注意点 ② 画面に映っていないオブジェクトは 反射に反映することができない ○ レンダリング結果を使用しているため #出張ヒストリア2018

187.

画面に写っていない部分を反射に含めるためには… ● Reflection Capture ● Planar Reflection ● レイトレーシング #出張ヒストリア2018

188.

Reflection Captureを使う場合 ● 動的なオブジェクトは反射に含まれない ● SSRに比べて品質が低いため ○ SSRと併用すると違和感が発生する可能性がある #出張ヒストリア2018

189.

SSR vs Planar Reflection #出張ヒストリア2018

190.

Planar Reflectionのメリット・デメリット メリット ○ SSRでは不可能だった 画面外のオブジェクトも反射に含められる デメリット ○ 反射に含めるためには オブジェクトを再度をレンダリングする必要がある → SSRに比べて処理負荷が大きい… #出張ヒストリア2018

191.

レイトレーシング 年末をお楽しみに!以上! https://www.unrealengine.com/ja/blog/technologysneak-peek-real-time-ray-tracing-with-unreal-engine #出張ヒストリア2018

192.

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

193.

グローバルイルミネーション ( Global Illuminiation ) #出張ヒストリア2018

194.

ポストプロセスにあるグローバルイルミネーションとは? UE4のLightmassによって事前計算された 間接光の強さ・色を補正する機能 #出張ヒストリア2018 http://api.unrealengine.com/JPN/Engine/Rendering/LightingA ndShadows/VolumetricLightmaps/index.html

195.

ポストプロセスにあるグローバルイルミネーションとは? UE4のLightmassによって事前計算された 間接光の強さ・色を補正する機能 Lightmassを使ってない( = 全ライトがMovable ) 場合 は 効果ないのでご注意を #出張ヒストリア2018

196.

モーションブラー ( Motion Blur ) #出張ヒストリア2018

197.

ポストプロセスにおけるモーションブラーとは 動きの軌跡の表現… ではなくて! #出張ヒストリア2018

198.

ポストプロセスにおけるモーションブラーとは シャッタースピードを遅くした際の 「被写体ブレ」「手ブレ」を再現する仕組み 被写体ブレ #出張ヒストリア2018 手ブレ http://www.nikonimage.com/enjoy/phototech/manual/04/03.html

199.

モーションブラーの仕組み フレーム間の移動ベクトルを保存し その情報をもとにブラー効果を適用 #出張ヒストリア2018

200.

ShowFlag.VisualizeMotionBlur 1 で可視化 #出張ヒストリア2018

201.

モーションブラーを調整する上で重要なパラメータ Amount:ブラー効果の掛け度合い ≒ ブラー効果を掛けるか否かの閾値 #出張ヒストリア2018

202.

動きの流れが表現されていい感じ! なんかかっこいいし! モーションブラー最高!!! ちょっとまって! #出張ヒストリア2018

203.

モーションブラーの注意点 ① カメラを移動・回転した際に 画面全体にブラー効果がかかる(手ブレの再現) 酔う…(´;ω;`) 敵が見えん…(# ゚Д゚) #出張ヒストリア2018

204.

モーションブラーの注意点 ① どんなコンテンツで問題になるのか? ○ ○ カメラ(画面)が大きく動く可能性がある 視認性が重要なゲーム性 モーションブラーは切るか、 Amountは小さい方が無難… ○ デフォルト値:0.5なので注意 #出張ヒストリア2018

205.

モーションブラーの注意点 ② 画面の一部だけに モーションブラーを適用することは不可能 ポストプロセスマテリアルを使って自作 又は、ポストプロセス以外の手法で実現 #出張ヒストリア2018

206.

[FREE] Smear Frame effect - Download Project from GitHub! #出張ヒストリア2018

207.

ワールドポジションオフセットを用いた モーションブラー についての解説もある神参考書! 皆買おう!!! #出張ヒストリア2018

208.

武器の軌跡の場合は 円形状のモデルを用意した方が都合が良いケースも… #出張ヒストリア2018

209.

ポストプロセスマテリアル ( Post Process Material ) #出張ヒストリア2018

210.

ポストプロセスに マテリアルを使うことで 色々できるぞ! #出張ヒストリア2018

211.

ポストプロセスマテリアル de できること 画面にテクスチャを貼り付け・ブレンドしたり… #出張ヒストリア2018 マーケットプレイス「Damage and Shield Effects」

212.

ポストプロセスマテリアル de できること マテリアルを活用した複雑な演出ができたり… #出張ヒストリア2018 マーケットプレイス「Sci-Fi and Glitch Post-Process」

213.

ポストプロセスマテリアル de できること みんな大好きトゥーン表現ができたり… Post Processing Based Anime and Manga Stylistic Rendering Pack #出張ヒストリア2018 Cel Shading Outline Post Process w Transparency

214.

今日話す内容 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

215.

水彩 Post Process Material ( あく @Aqu 様) https://aqu.hatenablog.com/entry/2018/07/09/000805 #出張ヒストリア2018

216.

PP Cel Shader ( alwei @aizen76 様 ) https://github.com/alwei/PPCelShader #出張ヒストリア2018

217.

SNNフィルタ ( moko @moko_03 _25 様 ) http://effect.hatenablog.com/entry/2018/04/01/054909 #出張ヒストリア2018

218.

某S氏( @junyash )のトゥーンシェーダー https://qiita.com/junyash/items/0e528e1f291a710cf04f #出張ヒストリア2018

219.

クロスフィルタ ( 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

220.

SphereMask ( MozPaca @MozPaca398 様) http://mozpaca.hatenablog.com/entry/20180516/1526453541 #出張ヒストリア2018

221.

Radial Blur PostProcess Material https://forums.unrealengine.com/community/community-content-tools-and-tutorials/28458radial-blur-postprocess-material #出張ヒストリア2018

222.

おすすめのポストプロセスアセット #出張ヒストリア2018 https://www.unrealengine.com/marketplace/chameleon

223.

その他 有益資料 ● 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

224.

今日話す内容 1. 2. 3. 4. ポストプロセスの使い方 UE4標準ポストプロセス機能の紹介 ネットで公開されているサンプルやTipsの紹介 ポストプロセスを使った演出・絵作りの例 #出張ヒストリア2018

225.

ポストプロセスで ヒット感を強めてみた #出張ヒストリア2018

226.

#出張ヒストリア2018 スタート

227.

#出張ヒストリア2018 ブルーム追加

228.

#出張ヒストリア2018 ビネット追加

229.

#出張ヒストリア2018 色収差追加

230.

#出張ヒストリア2018 モーションブラー追加

231.

適切なヒットストップや カメラ揺れを追加したらさらに良くなるはず… ○ 趣旨と反するので試さず… ゲスト出演 ○ ○ ○ “ReDroid MeKa-Ko”ちゃん! 作者:なん @tarava777 様! マーケットプレイスにて 近日販売予定! #出張ヒストリア2018

232.

#出張ヒストリア2018 デフォルト

233.

#出張ヒストリア2018 色々調整

234.

さいごに ● ● ● UE4標準のポストプロセスは非常に強力で 組み合わせることで様々な表現を実現できます! 非アーティストでも、少し調整するだけで 絵や表現のクオリティを格段に上げられます! デフォルト設定のままは非常にもったいない! 是非色々弄って遊んでみてください! #出張ヒストリア2018

235.

http://historia.co.jp/ue4petitcon10 #出張ヒストリア2018

236.

http://www.unrealengine.jp/unrealfest/ #出張ヒストリア2018