(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

ポストプロセス入門(前編)【Unity】【Unite 2017 Tokyo】


このエントリーをはてなブックマークに追加

この記事でのバージョン
Unity 2017.1.0f3


はじめに

今回は『Unite 2017 Tokyo』の講演の動画を見て、要点をまとめたり、追加で調べたり、

実際に手を動かしたりしながら、記事にもしちゃおうという感じの記事です。


そして、題材にする講演は、Unite 2017 Tokyoで「最もよかった講演」一位

「ゲームの見た目も盛ったら変わる!!!!ヤバい!!ポストプロセス!!入門!!!!!!!!!」

です!!!!!!!!!

講演者:高橋 啓治郎(ユニティ・テクノロジーズ・ジャパン合同会社)

こんな人におすすめ
・Unity上でポストプロセスしたいアーティスト
・Unity上のポストプロセスの仕組みを知っておきたい技術者


受講者が得られる知見
・Post-processing Stackの基本的な使い方と活用方法
・Post-processing Stack使用上の落とし穴・注意点


なお、記事中では以下のアセットを使っております。





ポストプロセスとは

まず、ポストプロセス(フルスクリーンエフェクト)とはなんぞやという所からですが、

ポストプロセスとはレンダリング結果に対して、見た目の調整を行う事です。


f:id:kan_kikuchi:20170903172447g:plain


見た目を豪華にする、雰囲気を変える揃える、カメラやレンズ、フィルムの味を出すなど、

端的に言えば見栄えをよくする事が出来ます。


そしてそのポストプロセスをUnityで行う事が出来るアセットがPost-processing Stackです。


なお、今まで使われていた

Image EffectsやCinematic Image Effectsは退役となったので、今後は使わないようにしましょう。
 





Post-processing Stackを使ってみる

Post-processing Stackは現状、デフォルトではプロジェクトに入っていません。

なので、Asset StoreまたはGitHubから入手する必要があります。




Post-processing Stackを入手したら、設定を行いましょう。

以下の様な設定がオススメ(必須ではない)だそうなので、素直に設定してみます。


Player SettingsのOther Settings - Color SpaceをLinearに、


f:id:kan_kikuchi:20170820073031j:plain
f:id:kan_kikuchi:20170820073043j:plain


カメラのRendering PathをDeferred、Allow HDRにチェックを入れる。


f:id:kan_kikuchi:20170820073244j:plain


さて、設定が終わったらPost-processing Stackをセットアップです。

まず、ProjectウィンドウのCreateからPost-ProcessingProfileというファイルを作成します。


f:id:kan_kikuchi:20170820074149j:plain


そしてカメラにPost Processing BehaviourをAddし、先ほど作成したファイルを設定します。


f:id:kan_kikuchi:20170822105257j:plain


これだけでセットアップ完了!

あとはPost-ProcessingProfileの値を弄って、ポストプロセスの効果を調整していくだけです。


次項からはPost-ProcessingProfileの各項目について見ていきます。

かなり簡略化してまとめているので、詳細を知りたい場合は講演の動画を見ましょう。


Fog(霧)

Fogは霧が掛かったような感じにする事が出来ます。

試してみると以下の様な感じ。


f:id:kan_kikuchi:20170903171614g:plain


実はこのFog、講演では唯一触れられていないエフェクトだったりします。

その理由はおそらく以下のメッセージの通り、

実際のFogの設定は今まで通りLightingのパネルで行うからだと思われます。

this effect adds fog compatibility to the deferred rendering path;
enabling it with the forward rendering path won't have any effect.
Actual fog settings should be set in the Lighting panel.

//以下Google翻訳
この効果は、遅延レンダリングパスにフォグの互換性を追加します。
順方向レンダリングパスで有効にしても効果はありません。
実際のフォグ設定は、ライティングパネルで設定する必要があります。

f:id:kan_kikuchi:20170903170811j:plain


なお、LightingのパネルはWindow -> Lighting -> Settingsから開く事が出来ます


f:id:kan_kikuchi:20170903170941j:plain
f:id:kan_kikuchi:20170903170948j:plain


Antialiasing(滑らかにする)

Antialiasingはジャギーを取り、エッジを滑らかにする事ができます。

試してみると以下の様な感じ。(画像をクリックして拡大しないと分からないかも)


f:id:kan_kikuchi:20170822105408g:plain


なお、Antialiasingには以下の2種類があります。

Fast Approximate Anti-aliasingが品質は低いが、軽量で、

Temporal Anti-aliasingが品質は高いが、使い方が難しいそうです。


f:id:kan_kikuchi:20170820075321j:plain


Ambient Occlusion(明暗を付け足す)

Ambient Occlusionは窪み部分を影にすることで、明暗を付け足す事ができます。

試してみると以下の様な感じ。


f:id:kan_kikuchi:20170822105513g:plain


なお、Debug ViewsのModeをAmbient Occlusionにすると、

Ambient Occlusionの結果だけを表示できます。


f:id:kan_kikuchi:20170822105642j:plain


Ambient Occlusionの各設定項目は以下の通りです。


f:id:kan_kikuchi:20170822111950j:plain

  • Intensity

影の濃さを設定。

  • Radius

指定した半径以上の窪みに対して影が出るようになる。

大きくすると負荷が大きくなり、不自然にもなるので、なるべく小さい方が良い。

  • Sample Count

1ピクセルあたりのサンプル数で、高いほど画質も上がるが負荷も上がる。

パッと見、そんなに違いが分からないので低いモノを使う事を推奨。

  • Downsampling

有効にすると、半分の解像度で処理を行うため負荷が劇的に下がるが、画質は下がる。

パッと見、そんなに違いが分からないので使う事を推奨。

  • Force Forward Compatibility

ノーマルマップの影響がなくなる。基本OFF。

  • High Precision(forward)

ちょっと精度が上がって、ちょっと重くなる。基本OFF。

  • Ambient Only

Ambient Occlusionの影響をアンビエント光のみに限定し、

ダイレクトで光が当たってる所が黒くならなくなる(自然になる)。

基本ONだが、カメラがDefeeredおよびHDR使用時しか使えない。(最初に設定したやつ)


Screen Space Reflection(映り込み、反射)

Screen Space Reflectionは映り込み、反射を表現する事ができます。

試してみると以下の様な感じ。


f:id:kan_kikuchi:20170823101720g:plain


Screen Space ReflectionはDeferred Rendring 専用なので、

Deferredが使えない端末では使えません。


また、かなり負荷が高く、設定を適当にする必要があったり、

画面上にないものは映らない(長い建物とかは画面に写ってる部分しか反射しない)ので、

ぼやかしたり、散らしたりして誤魔化す必要があったりと結構難度が高いエフェクトです。


Screen Space Reflectionの各設定項目は以下の通りです。


f:id:kan_kikuchi:20170823095451j:plain

  • Reflection Quality

反射のクオリティを設定する。

Lowにするとクオリティは下がる(パッと見では分からない)が負荷が劇的に下がるので基本Low。

  • Max Distance

反射する距離(範囲)の最大値を設定する。

大きくするほど負荷も上がるので注意。

  • Iteration Count

最大サンプル数を設定する。

多くするほど反射する範囲が増していくが、負荷も上がるので注意。

  • Step Size

サンプルの間隔を設定する。

大きくすると反射範囲が広がるが、荒くなる。

  • Width Modifier

オブジェクトの平均的な重みを設定し、無いはずの反射を防ぐ事が出来る。

ただし、あるはずの反射も消してしまう事もあるので調整が必要。

  • Reflection Blur

反射をどれだけぼかすかの設定。

  • Reflection Multiplier

反射の明るさ、暗さを設定する。

  • Fade Distance

Max Distanceに到達するまでにどれだけフェードさせていくかを設定する。

0だとMax Distanceの所でパツっと切れてしまうため、不自然になる。

  • Fresne Fade

フレネル係数の設定。基本的に使わない。

  • Screen Edge Mask(intensity)

画面端がパツっと切れないにフェードさせる。

そんなに効果がないので、基本的に使わない


Depth Of Field(レンズのボケ)

Depth Of Fieldは円形レンズをシュミュレートし、

フォーカス(ピント)が合っていないものをボケさせる事ができます。


試してみると以下の様な感じ。


f:id:kan_kikuchi:20170823112123g:plain


ただし、カメラの画角(Field of View)が大きすぎるとボケないので、

ボケが欲しい時は10程度にしましょう。


f:id:kan_kikuchi:20170823110938j:plain


なお、Debug ViewsのModeをFocus Planeにすると、

フォーカスが合っている部分を赤く表示できます。


f:id:kan_kikuchi:20170823110525j:plain


Depth Of Fieldの各設定項目は以下の通りです。


f:id:kan_kikuchi:20170823112421j:plain

  • Focus Distance

どの距離にフォーカスを合わせるかを設定する。

  • Aperture

絞り(F値)を設定する。小さいほどよくボケる。

  • Use Camera FOV

次項の焦点距離をカメラから逆算してくれるように出来る。基本的に有効。

  • Focal Length

焦点距離(レンズからフィルムの距離)を設定する。

  • Kernel SIze

ボケの半径を設定する。

高いほど大きなボケを表現出来るが処理は重くなる。

モバイルではSmall、PS4ではMedium、ゲーミングPCではLargeがオススメ。

Very Largeはスクショを取る時とか用との事。


Motion Blue(動きの飛びをなくす)

Motion Blueはシャッタースピードをシュミュレートし、

露光中(シャッターを開けている間)の動きのブレ(動きの軌跡ではない)を表現出来ます。

動きの飛びをなくして、落ち着きを与える事ができます。


試してみると以下の様な感じ。(落下中の1フレーム)


f:id:kan_kikuchi:20170824083054g:plain


なお、VRでは酔いの原因になったり、FPSが高すぎて効果がなかったりするので使えないそうです。


Motion Blueの各設定項目は以下の通りです。


f:id:kan_kikuchi:20170824081113j:plain

  • Shutter Angle

露光の時間を設定する。大きくするほどブラーが深くなる。

  • Sample Count

サンプル数を設定する。大きくするほど画像がスムースになるが負荷は高くなる。

小さくしてもそんなに違いが分からないので、出来るだけ小さくする事を推奨。

  • Multiple Frame Blending

あんまり役に立たないらしいので、基本的に使わない。


Eye Adaptation(明るさを動的に調整)

Eye Adaptationは目の暗順応、明順応みたいなモノ

(カメラのオート露出機能の方が近い?)をシュミュレートし、

画面の明るさを動的に調整し、適切な光量にする事が出来ます。


ただし、Compute Shaderが必須なため古いモバイルやMac等では動きません。


試してみたかったのですが、自分のMacだと使えなかったので、動画からイメージを拝借。

下側がEye Adaptationが有効になっているものです。


f:id:kan_kikuchi:20170830142137g:plain
【Unite 2017 Tokyo】ゲームの見た目も盛ったら変わる!!!!ヤバい!!ポストプロセス!!入門!!!!!!!!! - YouTube


なお、Debug ViewsのModeをEye Adaptationにすると、

画面の左上にヒストグラムが表示されるようになります。


f:id:kan_kikuchi:20170830141817j:plain
【Unite 2017 Tokyo】ゲームの見た目も盛ったら変わる!!!!ヤバい!!ポストプロセス!!入門!!!!!!!!! - YouTube


Eye Adaptationの各設定項目は以下の通りです。

なお、EVはカメラでよく使われているエクスポージャーバリューの略だそうです。


f:id:kan_kikuchi:20170830141327j:plain

  • Luminosity range

サンプル範囲を設定する。

  • Auto exposure

まず、Histogram filteringでどの範囲の平均値を取るかを設定します。

明るい方(右側)の1/3 ~ 1/2に設定するといい感じになるそうです。


次に、MinimumとMaximumで調整する光量の範囲を設定します。


また、Dynamic Key Valueをオフにすると現れるKey Valueという項目で

ちょっと明るくしたり暗くしたりとう調整が出来ます。

  • Adaptation

明るさ、暗さに適応する速度を設定する。

Fixedにするといきなり適応する感じ。


おわりに

記事が長くなり過ぎそうなので、今回はここまで。

残りのエフェクトやPost-Processing Stackの弱点については後編にて!



なお、実際の講演はより分かり易く、かつ、詳細な内容となっているので、

ポストプロセスを使ってみる前にとりあえず一度視聴する事をオススメします!