Edited at

【Unite2017】Post-Processing Stackによるポストプロセス入門 講演の複写 【随時更新】

More than 1 year has passed since last update.


はじめに

2017年5月8日(月)・9日(火)に行われた Unite 2017 Tokyoの二日目の講演 高橋啓治郎氏 ゲームの見た目も盛ったら変わる!!!!ヤバい!!ポストプロセス!!入門!!!!!!!!!  講演の資料が動画しかなかったので複写する感じの記事になっています 

https://www.youtube.com/watch?v=r5mNmH68KPQ&t=295s

それぞれの機能別タイムライン付き


ポストプロセスとは

レンダリング結果に対して後処理で見た目の調整を行う事

(フルスクリーンエフェクト)

ポストプロセス処理前

スクリーンショット 2017-06-27 19.01.40.png

ポストプロセス処理後

スクリーンショット 2017-06-27 19.02.08.png

ポストプロセス処理前

スクリーンショット 2017-06-27 19.15.18.png

ポストプロセス処理後

スクリーンショット 2017-06-27 19.15.34.png

ポストプロセス処理前

スクリーンショット 2017-06-27 19.15.49.png

ポストプロセス処理後

スクリーンショット 2017-06-27 19.16.08.png

ポストプロセスを使う事で

見た目を豪華にできる/雰囲気を変える/揃える事ができる/カメラ レンズ フィルムの味を出す事ができる


Post-Processing Stackの配布場所

1,AssetsStore

2,gitHub

AssetsStoreの方がおすすめ!


Post-Processing Stack 使用時のおすすめ設定

PlayerSettings

・ColorSpaceをLinearに変更

カメラ設定

・RenderingPathをDeferredに変更

・HDRをONに変更

この設定で100%ポストプロセスが使えるようになる、必ず設定しないと使えないわけではない


Post-Processing Stackセットアップ

1,カメラにPost-Processing Behaviourコンポーネントを追加

2,ProjectViewからPost-Processing Profileアセットを作成

3,今作ったPost-Processing ProfileをカメラにアタッチしたPost-Processing BehaviourのProfileにアタッチする

Post-Processing Profileを開くと設定画面が出る ここでポストプロセスの設定を行う

スクリーンショット 2017-06-27 20.31.11.png

ちなみに

今まで使っていたイメージエフェクトはAssetsStoreから落とせるが今後更新を行わないのでPost-Processing Stackを使ってほしい

一応URL

https://www.assetstore.unity3d.com/jp/#!/content/83913

https://www.assetstore.unity3d.com/jp/#!/content/51515


機能紹介


Antialiasing (アンチエイリアシング)

ジャギーを取りエッジを滑らかにする

適応前

bandicam 2017-06-27 20-01-25-926.jpg

適応後

bandicam 2017-06-27 20-01-32-363.jpg

・2種類の方式を実装しました

Fast Approximate Anti-aliasing (FXAA)

 軽量で簡易的なアンチエイリアス

 品質は低いが気軽に使える

Temporal Anti-aliasing (TAA)

 複数フレームにわたってジワっとジャギーを無くす

 使い方は難しいが品質は高い

AA適応前

スクリーンショット 2017-06-27 20.33.29.png

FXAA適応後 完璧にはジャギーがとれない

スクリーンショット 2017-06-27 20.33.39.png

TAA適応後 完璧にとれる

スクリーンショット 2017-06-27 20.35.50.png

・FXAAの仕組み

スクリーンショット 2017-06-27 20.38.00.png

元のジャギっている輪郭線を抽出して それを元にいい感じにぼやっとしたエフェクトをかけている

・パラメーター

スクリーンショット_2017-06-27_20_44_08.png

好みで選んでもいただいてもOK

TAAの仕組み

・FXAAとTAAのもう一つの違い

 FXAA ジャギーはある程度消えるが、ジラジラ感は消えにくい

 TAA ジラジラ感を消すのも得意

 ジラジラ感とは カメラが動いた時にピクセルが飛ぶようにみえる事

・パラメーター

Jitter

-Spread ランダムの点をずらす量 高くすると絵がガクガクする

Blending 前のフレームとの合成値 なめらか度合い

-Stationary 動いていないピクセルのブレンド量  0.8~0.9の設定がよい

-Motion 動いているピクセルのブレンド量 0.8~0.9の設定がよい

Sharpen 輪郭線強調フィルターをかけて輪郭線を復活させるエフェクト 0.1〜0.2の設定がよい

FXAAとTAAのもう一つの違いとパラメーター

・TAAの注意ポイント

スクリーンショット 2017-06-27 21.27.28.png

ゴーストとは?


Ambient Occlusion (アンビエントオクルージョン)

窪み部分を暗く、細かな明暗を足す

スクリーンショット_2017-06-27_21_39_51.png

デバッグする際は DebugViewのAmbient Occlusionを選ぶとわかりやすい

適用前

スクリーンショット 2017-06-27 21.50.32.png

適用後

スクリーンショット 2017-06-27 21.53.39.png

パラメーター

-Intensity 窪みの深さ

-Radius サーチ半径 できるだけ小さい値がいい 大きすぎると不自然な見た目になりやすいし、パフォーマンスが落ちる可能性がある

スクリーンショット_2017-06-27_22_06_50.png

見た目あまりかわらず だがオススメの設定は ONにしてLowestかLowがよい

スクリーンショット 2017-06-27 22.09.45.png

あまり使わないかもだが

スクリーンショット 2017-06-27 22.12.47.png

重要!

スクリーンショット 2017-06-27 22.15.33.png

どんな見た目になるかとゆうと正解的には右端だが、見た目で決めてもいいかも

スクリーンショット_2017-06-27_22_17_31.png


ScreenSpaceReflection(スクリーンスペース反射)

画面の情報だけでなんとか反射を近似する

スクリーンショット_2017-06-28_16_13_06.png

原理

・弱点

 その1 画面上に無いものは映らない

スクリーンショット_2017-06-28_16_21_13.png

防ぎようがないので床をぼかしたりノーマルマップを使ってごまかす

スクリーンショット 2017-06-28 16.24.55.png

その2 かなり負荷が高い

ためしにPS4でFPS60のゲームを作った場合 IteretionCount=256 1フレーム 16msぐらいしかないので1/4使ってしまう

スクリーンショット 2017-06-28 16.27.42.png

IteretionCount=32の場合

スクリーンショット 2017-06-28 16.31.20.png

設定を調整してパフォーマンスを出すのが肝

パラメーター

重要! 調整することによってパフォーマンスがあがる

スクリーンショット 2017-06-28 16.34.53.png

ReflectionQuality ほとんど見た目が変わらないので できるだけLowにする

スクリーンショット 2017-06-28 16.36.53.png

IterationCount 下げると負荷が下がる上げると負荷が高くなるので なるべく低く設定する

StepSize IterationCountを下げても補う機能 反射範囲を伸ばす事が可能になる

スクリーンショット 2017-06-28 16.48.02.png

荒くなるので床をぼかしたりやノーマルマップを使ってごまかす

スクリーンショット_2017-06-28_16_49_16.png

スクリーンショット 2017-06-28 16.54.36.png

MaxDistance FadeDitanceを設定しないと反射の部分がパツンときれる

FadeDitance 入れる事によってだんだん薄まる

重要!

スクリーンショット 2017-06-28 17.02.59.png

Width Modifierとはどうゆうことか?

ここからはあまり使わないかも

Reflection Blur リフレクションしているものに対してブラーをかける

Reflection Multiplier リフレクションの明るさ

Frenel Fade フレネル係数? とくにいじる必要はなさそう

Screen Edge Mask - Intensity スクリーンの際のフェードをかけれる 特に使うことはなさそう

・SSRの制約

スクリーンショット 2017-06-28 18.49.54.png


Depth of Field (被写界深度)

レンズのボケをシュミレートする

実際どのようになるか

確認の仕方 Focus Planeを選ぶと便利 フォーカスがあっている場所は赤くなる

スクリーンショット 2017-06-28 19.06.27.png

スクリーンショット 2017-06-28 19.21.24.png

パラメーター

スクリーンショット_2017-06-28_19_23_24.png

スクリーンショット 2017-06-28 19.30.29.png

スクショ取る時はLargeでよい

スクリーンショット 2017-06-28 19.43.46.png


Motion Bluer (モーションブラー)

シャッタースピードのシュミレート

・パラメーター

 

Shutter Angle - ブラーの深さ

Sample Count - 何回サンプルを行うか 高ければ高いほど 映像がスムーズになるが負荷が高くなるのでなるべく小さな値にする 小さくてもばれない

Frame Blending - 役に立たないので基本使わないでください

スクリーンショット 2017-06-28 19.58.38.png


Eye Adaptation (暗順応/明順応)

画面の明るさを動的に調整

スクリーンショット 2017-06-28 20.50.14.png

古いモバイルでは使えない

スクリーンショット 2017-06-28 20.50.42.png

パラメーター

(EV)とは エクスポジャーバリュー(Exposure Value)の略 カメラでよく使われている明るさを表している値

スクリーンショット_2017-06-28_21_00_56.png

設定を行うときの設定 Debug ViewのEye Adaptationを選ぶとヒストグラム表示されそれを基づいてに明るさの調整がされます

スクリーンショット_2017-06-28_21_03_47.png

Luminosity range ヒストグラムのサンプル範囲

 - Minimum(EV) 最小値

 - Maximum(EV) 最大値

Auto exposure ヒストグラムの青い帯の範囲

 - Minimum(EV) 最小値

 - Maximum(EV) 最大値

 - Histogram filtering ヒストグラムの中のどっからどこまでの範囲を集計して平均値をとるか 結構こつがいりそう

 - Dynamic Key Value  OFFにすると使える Autoexposureが働いた後 明るさ調整に使う

Adaptation keyValueの速度の設定 明るい方向、暗い方向の速度別々に設定ができ TypeをFixedにすると補完なしにいきなりもとまった平均値たいしてアダプテーションが発生する


Bloom (ブルーム)

光が散乱してる感じを足す

スクリーンショット 2017-06-28 21.38.00.png

パラメーター

Intesity - 明るさ

Threshold(Gamma) - どの程度の明るさのピクセルを反応させるか

Soft Knee - 設定していないとThreshold(Gamma)設定した境目がわかりやすなってしまうのでそれをぼかす為の設定

Radius - 光の半径 最大値にしてIntesityで調整するのがオススメ

Anti Flicker - 小さなピクセルに反応させないのでフリッカーが起きにくい

Dirt レンズの汚れ表現


Color Grading (カラーグレーディング)

 明るさと色調の調整

大きく分けてトーンマッピングとカラーグレーディングがある

スクリーンショット 2017-06-28 21.57.26.png

トーンマッピングとは?使い方など

白飛びをいい感じに和らげてくれるフィルター デフォルト値のままがおすすめ

カラーグレーディングとは?

パラメーター

 Basic

  - Post Exposure (EV) - 明るさ

  - Temperature - 色温度の調整

  - Tint - 紫と緑の軸で色の調整

  - Hue Shift - 色調をずらす

  - Saturation - 色の強さ

  - Kontrast - コントラストの調整

 Channel Mixer RGBの調整

 Trackballs 動画参照 https://youtu.be/r5mNmH68KPQ?t=2460

スクリーンショット 2017-06-28 22.25.44.png


User LUT (ユーザーパレット)

フォトショのカラコレを適用する


Chromatic Aberration (色収差)

レンズの色ズレをシミュレートする

スクリーンショット 2017-06-28 22.34.50.png


Grain (フィルム粒子)

 フィルム粒子のザラザラ感を足す

・パラメーター

  Intansity - ザラザラが増える

  Luminace Contribution - 明るい領域はザラザラが少なく 暗い領域はザラザラが大きくなる

 Size - ザラザラのサイズ

 Colored - offにすると白黒のザラザラ

スクリーンショット 2017-06-28 22.38.20.png


Vignette (ビネット)

 画像の周辺を暗く、カメラ感を出す

・パラメーター

  Color - カラー

  Center - 中心座標

  Intansity - 黒ずみが増える

  Smoothness - 黒ずみの滑らかさ

  Roundness - 丸なのか四角なのかを調整できる

  Rounded - アスペクト比を無視するか

スクリーンショット 2017-06-28 22.51.09.png


Dither (ディザリング)

ノイズを使ってマッハバンドを消す

スクリーンショット 2017-06-28 22.54.29

スクリーンショット 2017-06-28 22.54.29.png


弱点

 1、設定をAnimatorでアニメーションできない

スクリーンショット 2017-06-28 23.00.31.png

スクリーンショット 2017-06-28 23.02.13.png

グロい方法

https://github.com/keijiro/PostProcessingUtilities

2、シェーダーバリアントが大量に生成される

スクリーンショット 2017-06-28 23.05.44

スクリーンショット 2017-06-28 23.05.44.png