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

#はじめに
2017年5月8日（月）・9日（火）に行われた　Unite 2017 Tokyoの二日目の講演　高橋啓治郎氏　ゲームの見た目も盛ったら変わる！！！！ヤバい！！ポストプロセス！！入門！！！！！！！！！　　講演の資料が動画しかなかったので複写する感じの記事になっています　
https://www.youtube.com/watch?v=r5mNmH68KPQ&t=295s
それぞれの機能別タイムライン付き
#ポストプロセスとは
レンダリング結果に対して後処理で見た目の調整を行う事
（フルスクリーンエフェクト）
ポストプロセス処理前
![スクリーンショット 2017-06-27 19.01.40.png](https://qiita-image-store.s3.amazonaws.com/0/158441/e6daea3d-c58a-2cf8-a181-a978bdd9d20f.png)
ポストプロセス処理後
![スクリーンショット 2017-06-27 19.02.08.png](https://qiita-image-store.s3.amazonaws.com/0/158441/a421b4d4-9632-a25c-08aa-d54382a42dd1.png)
ポストプロセス処理前
![スクリーンショット 2017-06-27 19.15.18.png](https://qiita-image-store.s3.amazonaws.com/0/158441/b69911df-bb03-9cce-7a60-65f83f3eef92.png)
ポストプロセス処理後
![スクリーンショット 2017-06-27 19.15.34.png](https://qiita-image-store.s3.amazonaws.com/0/158441/5042c144-8310-7467-9cfd-f0c40c007d62.png)
ポストプロセス処理前
![スクリーンショット 2017-06-27 19.15.49.png](https://qiita-image-store.s3.amazonaws.com/0/158441/da4f4c75-5411-f055-47cc-281e5896e693.png)
ポストプロセス処理後
![スクリーンショット 2017-06-27 19.16.08.png](https://qiita-image-store.s3.amazonaws.com/0/158441/2a3e8c37-a7e3-c09a-3981-b712eef5b543.png)

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

#Post-Processing Stackの配布場所
1,[AssetsStore](https://www.assetstore.unity3d.com/jp/#!/content/83912)
2,[gitHub](https://github.com/Unity-Technologies/PostProcessing)
 AssetsStoreの方がおすすめ！

#[Post-Processing Stack　使用時のおすすめ設定](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=140&end=175)
PlayerSettings
・ColorSpaceをLinearに変更
カメラ設定
・RenderingPathをDeferredに変更
・HDRをONに変更
この設定で１００％ポストプロセスが使えるようになる、必ず設定しないと使えないわけではない

#[Post-Processing Stackセットアップ](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=175&end=200)

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](https://qiita-image-store.s3.amazonaws.com/0/158441/3313563a-7bbe-ccdb-4426-4e7dfed6279c.png)

ちなみに
今まで使っていたイメージエフェクトはAssetsStoreから落とせるが今後更新を行わないのでPost-Processing Stackを使ってほしい
一応URL
https://www.assetstore.unity3d.com/jp/#!/content/83913
https://www.assetstore.unity3d.com/jp/#!/content/51515

#機能紹介
#[Antialiasing (アンチエイリアシング)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=226&end=611)
ジャギーを取りエッジを滑らかにする
適応前
![bandicam 2017-06-27 20-01-25-926.jpg](https://qiita-image-store.s3.amazonaws.com/0/158441/240c7e92-2751-e80d-a84c-16f84c91ce69.jpeg)
適応後
![bandicam 2017-06-27 20-01-32-363.jpg](https://qiita-image-store.s3.amazonaws.com/0/158441/66b4c1e3-195c-d7cb-145d-f5a873265a2c.jpeg)

・２種類の方式を実装しました
Fast Approximate Anti-aliasing (FXAA)
　軽量で簡易的なアンチエイリアス
　品質は低いが気軽に使える
Temporal Anti-aliasing (TAA)
　複数フレームにわたってジワっとジャギーを無くす
　使い方は難しいが品質は高い

AA適応前
![スクリーンショット 2017-06-27 20.33.29.png](https://qiita-image-store.s3.amazonaws.com/0/158441/499c0525-ff53-024f-405b-8172186a153d.png)
FXAA適応後　完璧にはジャギーがとれない
![スクリーンショット 2017-06-27 20.33.39.png](https://qiita-image-store.s3.amazonaws.com/0/158441/1e2b1e07-661a-7361-95b3-7b51a6c16887.png)
TAA適応後 完璧にとれる
![スクリーンショット 2017-06-27 20.35.50.png](https://qiita-image-store.s3.amazonaws.com/0/158441/f549088d-1974-c850-a982-128c4492be88.png)

・FXAAの仕組み
![スクリーンショット 2017-06-27 20.38.00.png](https://qiita-image-store.s3.amazonaws.com/0/158441/0796447b-aa06-10d6-4342-1016298140c6.png)
元のジャギっている輪郭線を抽出して　それを元にいい感じにぼやっとしたエフェクトをかけている
・パラメーター
![スクリーンショット_2017-06-27_20_44_08.png](https://qiita-image-store.s3.amazonaws.com/0/158441/ac3547af-f07b-d421-7f1c-91f87afe35ec.png)
好みで選んでもいただいてもOK

・[TAAの仕組み](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=350&end=410)

・FXAAとTAAのもう一つの違い
　FXAA　ジャギーはある程度消えるが、ジラジラ感は消えにくい
　TAA ジラジラ感を消すのも得意
　ジラジラ感とは　カメラが動いた時にピクセルが飛ぶようにみえる事

・パラメーター
Jitter
-Spread ランダムの点をずらす量　高くすると絵がガクガクする

Blending 前のフレームとの合成値　なめらか度合い
-Stationary 動いていないピクセルのブレンド量　　0.8~0.9の設定がよい
-Motion　動いているピクセルのブレンド量　0.8~0.9の設定がよい

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

・[FXAAとTAAのもう一つの違いとパラメーター](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=410&end=506)

・TAAの注意ポイント
![スクリーンショット 2017-06-27 21.27.28.png](https://qiita-image-store.s3.amazonaws.com/0/158441/d8cf9cd6-f354-1dc7-2441-eb21d0483588.png)
[ゴーストとは？](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=584&end=610)

#[Ambient Occlusion (アンビエントオクルージョン)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=611&end=849)
窪み部分を暗く、細かな明暗を足す
![スクリーンショット_2017-06-27_21_39_51.png](https://qiita-image-store.s3.amazonaws.com/0/158441/60c3b4d3-b51f-ab0b-eda4-0038cc3f4f11.png)

デバッグする際は　DebugViewのAmbient Occlusionを選ぶとわかりやすい
適用前
![スクリーンショット 2017-06-27 21.50.32.png](https://qiita-image-store.s3.amazonaws.com/0/158441/fd8c5a31-8370-71c3-4701-16f084617f2c.png)
適用後
![スクリーンショット 2017-06-27 21.53.39.png](https://qiita-image-store.s3.amazonaws.com/0/158441/9a9e735e-3bbc-4c14-5790-78a0b1626d2f.png)

[パラメーター](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=634&end=687)

-Intensity 窪みの深さ

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

![スクリーンショット_2017-06-27_22_06_50.png](https://qiita-image-store.s3.amazonaws.com/0/158441/1d50ec58-4242-83ff-1b19-4530a71b2424.png)
見た目あまりかわらず　だがオススメの設定は　ONにしてLowestかLowがよい
![スクリーンショット 2017-06-27 22.09.45.png](https://qiita-image-store.s3.amazonaws.com/0/158441/18e157cf-beaf-bb8b-05e6-ca982f1355c1.png)

あまり使わないかもだが
![スクリーンショット 2017-06-27 22.12.47.png](https://qiita-image-store.s3.amazonaws.com/0/158441/7485f4d6-3eb5-243e-c860-4d9601f3864c.png)

重要！
![スクリーンショット 2017-06-27 22.15.33.png](https://qiita-image-store.s3.amazonaws.com/0/158441/23a01f8c-33cb-3d92-4fe7-0666312aa0af.png)

どんな見た目になるかとゆうと正解的には右端だが、見た目で決めてもいいかも
![スクリーンショット_2017-06-27_22_17_31.png](https://qiita-image-store.s3.amazonaws.com/0/158441/4c7603aa-7e2f-5e01-4047-dc5c29aa6cc4.png)

#[ScreenSpaceReflection(スクリーンスペース反射)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=849&end=1316)
画面の情報だけでなんとか反射を近似する
![スクリーンショット_2017-06-28_16_13_06.png](https://qiita-image-store.s3.amazonaws.com/0/158441/21d089cb-6b47-d07e-0cde-958142618ee2.png)

・[原理](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=887&end=930)

・弱点
　その１　画面上に無いものは映らない
![スクリーンショット_2017-06-28_16_21_13.png](https://qiita-image-store.s3.amazonaws.com/0/158441/ac2b0791-5def-fd48-e287-323385091c66.png)
防ぎようがないので床をぼかしたりノーマルマップを使ってごまかす
![スクリーンショット 2017-06-28 16.24.55.png](https://qiita-image-store.s3.amazonaws.com/0/158441/e0d1e775-b21d-b3f9-cb82-e8230a7f5708.png)

その２　かなり負荷が高い
ためしにPS４でFPS６０のゲームを作った場合　IteretionCount=256 １フレーム　１６msぐらいしかないので1/4使ってしまう
![スクリーンショット 2017-06-28 16.27.42.png](https://qiita-image-store.s3.amazonaws.com/0/158441/1f9f3124-38a9-ab92-dae5-a706031df8c7.png)
IteretionCount=32の場合
![スクリーンショット 2017-06-28 16.31.20.png](https://qiita-image-store.s3.amazonaws.com/0/158441/88f71387-722e-cd8a-de11-5b45c9f1678a.png)
設定を調整してパフォーマンスを出すのが肝

・[パラメーター](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1025&end=1305)
重要！　調整することによってパフォーマンスがあがる
![スクリーンショット 2017-06-28 16.34.53.png](https://qiita-image-store.s3.amazonaws.com/0/158441/c5d34587-7fa7-659a-ae4b-5b383aeec7d3.png)

ReflectionQuality ほとんど見た目が変わらないので　できるだけLowにする
![スクリーンショット 2017-06-28 16.36.53.png](https://qiita-image-store.s3.amazonaws.com/0/158441/8d34e882-a0ea-4372-d0a7-537a67088a71.png)

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

StepSize IterationCountを下げても補う機能 反射範囲を伸ばす事が可能になる
![スクリーンショット 2017-06-28 16.48.02.png](https://qiita-image-store.s3.amazonaws.com/0/158441/0dbfe6fa-3cb1-aa9c-13d6-b7a3ce612af4.png)
荒くなるので床をぼかしたりやノーマルマップを使ってごまかす
![スクリーンショット_2017-06-28_16_49_16.png](https://qiita-image-store.s3.amazonaws.com/0/158441/71ba76de-1419-851f-01c5-511ec1421999.png)

![スクリーンショット 2017-06-28 16.54.36.png](https://qiita-image-store.s3.amazonaws.com/0/158441/765a2369-5b49-cdfd-2f8f-17a9e2721fa1.png)

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

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

重要!
![スクリーンショット 2017-06-28 17.02.59.png](https://qiita-image-store.s3.amazonaws.com/0/158441/92a63584-7951-4b52-1cda-6bd456baaf91.png)
[Width Modifierとはどうゆうことか？](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1207&end=1258)

ここからはあまり使わないかも
Reflection Blur リフレクションしているものに対してブラーをかける
Reflection Multiplier リフレクションの明るさ
Frenel Fade フレネル係数？　とくにいじる必要はなさそう
Screen Edge Mask - Intensity スクリーンの際のフェードをかけれる　特に使うことはなさそう

・SSRの制約
![スクリーンショット 2017-06-28 18.49.54.png](https://qiita-image-store.s3.amazonaws.com/0/158441/6a22aa28-e0ae-80b6-0b0c-b4f5586e7d1c.png)

#[Depth of Field (被写界深度)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1316&end=1566)
 レンズのボケをシュミレートする
[実際どのようになるか](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1320&end=1350)

確認の仕方　Focus Planeを選ぶと便利　フォーカスがあっている場所は赤くなる
![スクリーンショット 2017-06-28 19.06.27.png](https://qiita-image-store.s3.amazonaws.com/0/158441/9ec0b559-f41c-f352-fc02-bafb485eb3eb.png)

![スクリーンショット 2017-06-28 19.21.24.png](https://qiita-image-store.s3.amazonaws.com/0/158441/ce3f755d-8904-0c3c-2ede-3505968810ab.png)


・[パラメーター](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1380&end=1566)
![スクリーンショット_2017-06-28_19_23_24.png](https://qiita-image-store.s3.amazonaws.com/0/158441/433009e0-0a4e-a7b9-65b8-9318dd02f3f2.png)

![スクリーンショット 2017-06-28 19.30.29.png](https://qiita-image-store.s3.amazonaws.com/0/158441/8e33bfa0-df08-a797-657c-766966c5ccb1.png)

スクショ取る時はLargeでよい
![スクリーンショット 2017-06-28 19.43.46.png](https://qiita-image-store.s3.amazonaws.com/0/158441/2ad720af-c39c-f491-1505-9d46e27c56fe.png)

#[Motion Bluer (モーションブラー)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1567&end=1748)

 [シャッタースピードのシュミレート](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1567&end=1642)
・パラメーター
　
Shutter Angle - ブラーの深さ
Sample Count - 何回サンプルを行うか　高ければ高いほど　映像がスムーズになるが負荷が高くなるのでなるべく小さな値にする　小さくてもばれない
Frame Blending - 役に立たないので基本使わないでください
![スクリーンショット 2017-06-28 19.58.38.png](https://qiita-image-store.s3.amazonaws.com/0/158441/1f2b930d-c5de-7448-3c01-bff3ece08cb1.png)

#[Eye Adaptation (暗順応/明順応)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1748&end=1993)
 [画面の明るさを動的に調整]
(https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1748&end=1806)
![スクリーンショット 2017-06-28 20.50.14.png](https://qiita-image-store.s3.amazonaws.com/0/158441/5545331f-8244-9211-f7ba-a8f1c29b0f79.png)

古いモバイルでは使えない
![スクリーンショット 2017-06-28 20.50.42.png](https://qiita-image-store.s3.amazonaws.com/0/158441/3b7110fd-d28b-9c63-7b4f-c6b3b5e94165.png)


・[パラメーター]
(https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1805&end=1993)
(EV)とは　エクスポジャーバリュー(Exposure Value)の略 カメラでよく使われている明るさを表している値
![スクリーンショット_2017-06-28_21_00_56.png](https://qiita-image-store.s3.amazonaws.com/0/158441/6caac1d4-e396-05b9-cda4-8a76ab147181.png)


設定を行うときの設定　Debug ViewのEye Adaptationを選ぶとヒストグラム表示されそれを基づいてに明るさの調整がされます
![スクリーンショット_2017-06-28_21_03_47.png](https://qiita-image-store.s3.amazonaws.com/0/158441/4b778c89-b6bb-1dc1-fe80-27daa3fb4599.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 (ブルーム)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1993&end=2215)
[光が散乱してる感じを足す](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=1993&end=2057)
![スクリーンショット 2017-06-28 21.38.00.png](https://qiita-image-store.s3.amazonaws.com/0/158441/27df0fd6-8baf-4e5c-254d-d471f05bcf95.png)


・[パラメーター](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2057&end=2215)
Intesity - 明るさ
Threshold(Gamma) - どの程度の明るさのピクセルを反応させるか
Soft Knee - 設定していないとThreshold(Gamma)設定した境目がわかりやすなってしまうのでそれをぼかす為の設定
Radius - 光の半径　最大値にしてIntesityで調整するのがオススメ
Anti Flicker - 小さなピクセルに反応させないのでフリッカーが起きにくい
Dirt レンズの汚れ表現

#[Color Grading (カラーグレーディング)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2215&end=2646)

　明るさと色調の調整
大きく分けてトーンマッピングとカラーグレーディングがある
![スクリーンショット 2017-06-28 21.57.26.png](https://qiita-image-store.s3.amazonaws.com/0/158441/af8cdb01-5cd7-383b-3a8a-67b7e5ba01f1.png)

[トーンマッピングとは？使い方など](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2236&end=2409)
白飛びをいい感じに和らげてくれるフィルター　デフォルト値のままがおすすめ

[カラーグレーディングとは？](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2409&end=2621)
パラメーター
　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](https://qiita-image-store.s3.amazonaws.com/0/158441/f9725bce-6da5-aa3e-1b47-33d3b394188b.png)


#[User LUT (ユーザーパレット)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2649&end=2726)
フォトショのカラコレを適用する

#[Chromatic Aberration (色収差)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2726&end=2797)
レンズの色ズレをシミュレートする
![スクリーンショット 2017-06-28 22.34.50.png](https://qiita-image-store.s3.amazonaws.com/0/158441/1a85abcb-cf57-33e9-dc2b-2cf155d974fb.png)


#[Grain (フィルム粒子)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2797&end=2865)
　フィルム粒子のザラザラ感を足す

・パラメーター
　　Intansity - ザラザラが増える
　　Luminace Contribution - 明るい領域はザラザラが少なく　暗い領域はザラザラが大きくなる
　Size - ザラザラのサイズ
　Colored - offにすると白黒のザラザラ
![スクリーンショット 2017-06-28 22.38.20.png](https://qiita-image-store.s3.amazonaws.com/0/158441/8fcd0830-814b-bb46-80cc-0ed600488336.png)

#[Vignette (ビネット)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2867&end=2928)
　画像の周辺を暗く、カメラ感を出す
・パラメーター
　　Color - カラー
　　Center - 中心座標
　　Intansity - 黒ずみが増える
　　Smoothness - 黒ずみの滑らかさ
　　Roundness - 丸なのか四角なのかを調整できる
　　Rounded - アスペクト比を無視するか
![スクリーンショット 2017-06-28 22.51.09.png](https://qiita-image-store.s3.amazonaws.com/0/158441/b21eb52e-4e23-ca0d-747a-16f7a60d510a.png)

#[Dither (ディザリング)](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2928&end=2956)
ノイズを使ってマッハバンドを消す

スクリーンショット 2017-06-28 22.54.29
![スクリーンショット 2017-06-28 22.54.29.png](https://qiita-image-store.s3.amazonaws.com/0/158441/e5b89bd6-b5ab-9d9b-50dd-c42dc1761c3c.png)

#弱点
　[１、設定をAnimatorでアニメーションできない](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=2957&end=3045)

![スクリーンショット 2017-06-28 23.00.31.png](https://qiita-image-store.s3.amazonaws.com/0/158441/8ecaec07-7298-c74e-83d7-65d4e3835626.png)

![スクリーンショット 2017-06-28 23.02.13.png](https://qiita-image-store.s3.amazonaws.com/0/158441/da4c114c-d6ad-e72f-255a-d395707237cc.png)

グロい方法
https://github.com/keijiro/PostProcessingUtilities

[２、シェーダーバリアントが大量に生成される](https://www.youtube.com/embed/r5mNmH68KPQ?rel=0&start=3046&end=3198)
スクリーンショット 2017-06-28 23.05.44
![スクリーンショット 2017-06-28 23.05.44.png](https://qiita-image-store.s3.amazonaws.com/0/158441/0db044af-ebfb-bc0a-5298-019f8c09e590.png)