(:3[kanのメモ帳]

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

(:3[kanのメモ帳]

本ブログの運営者kan.kikuchiが個人で開発したゲームです！

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

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


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

Japanese School Buildings Kit | 3D Urban | Unity Asset Store



目次



Bloom(光の散乱)

Bloomは明るいピクセルを散らし、

光が散乱している感じを表現出来ます。


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


f:id:kan_kikuchi:20170830151837g:plain


なお、Bloomは物理現象をシミュレートしたものではなく

使用してもリアルになるわけではなかったり、やたら画面が白っぽくなったりするため、

使いすぎには注意が必要です。


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


f:id:kan_kikuchi:20170830145700j:plain

  • Intensity

どれぐらい明るくするかを設定する。

  • Threshold

どの程度の明るさに反応するか(閾値)を設定する。

  • Soft Knee

どの程度の明るさに反応するかの曲線を設定する。

閾値でスパッと変わるのではなく、滑らかに変える事が出来る。

  • Radius

光の半径を設定する。

最大値で使う(Intensityで調整を行う)事がオススメだそうです。

  • Anti Flicker

小さなピクセルにBloomが反応しないようにでき、

フリッカー(チラつき)を軽減出来る。

  • Dirt

レンズに付いている汚れを設定する。

なお、Post-processing Stackに自由に使えるテクスチャが入っています。


Color Grading(明るさと色調の調整)

Color Gradingはダイミックレンジを圧縮する事で明るさを調整し、

明度に差がある場面で暗すぎて黒潰れする事や、明るすぎて白飛びする事を無くせます。

また、色調やコントラスト等の色を調整する事も出来ます。


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


f:id:kan_kikuchi:20170831131105g:plain


なお、どれだけ使っても負荷はほぼ同じなので、使いたい放題らしいです。(モバイルでも)

ただし、実行中に値を変えるのはキツイとの事。


Color Gradingの各設定項目は以下の通りです。


f:id:kan_kikuchi:20170831130459j:plain

  • Tonmapping(明るさの調整)

明るさの調整をするトーンマッピングを設定する。


TonemapperをNoneにすると無効、

Neuralにすると柔らかい感じのトーンマッピングに、

Flimic(ACES)にするとコントラストが強い感じのトーンマッピングになります。


なお、Neuralにするといくつか項目が追加されますが、

調整が難しいので、デフォルトのままいじらない方が良いらしいです。

  • Post Exposure

全体を明るくしたり、暗くしたりする。

  • Temperature

色温度を調節する。

  • Tint

緑 ~ 紫の軸で色を調節する。

  • Hue Shift

色調を調節する。

  • Saturation

色を強めたり、弱めたりする。

  • Contrast

コントラストを調節する。

  • Channel Mixer

RGBの各チャンネルを調整する。

  • Track Balls

各明るさの範囲内で、色をや明るさを調整する。


基本的にはLinearがオススメで、

ハイダイナミックレンジの時はLogを使うと良いそうです。


また、明るさの範囲は左から(Logの場合は右から)、

シャドウ、ミッドトーン、ハイライトの三種類です。


なお、グラフ上で右クリックを押すとリセットする事が出来ます。

  • Grading Curves

輝度やRGMのカーブを調整する。


User Lut(フォトショのカラコレを適用)

User LutはフォトショのカラコレをそのままUnityに適用する事が出来ます。

フォトショ持ってないので割愛。


Chromatic Aberration(色収差)

Chromatic Aberrationはレンズの色ズレをシュミレートし、色収差を表現出来ます。


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


f:id:kan_kikuchi:20170831210603g:plain


なお、後述するIntensityに比例してちょっとだけ重くなるので注意が必要です。

さらにDepth Of Fieldと組み合わせるとさらにちょっとだけ重くなります。

この重さはPCだと問題ないですが、モバイルだと気にする必要がある感じのものだそうです。


また、使いすぎると絵がチープになるのでこれも注意が必要です。


Chromatic Aberrationの各設定項目は以下の通りです。


f:id:kan_kikuchi:20170831210047j:plain

  • Spectral Texture

どの色が内側、または外側にズレるというのをテクスチャで設定する。

なお、Post-processing Stackに自由に使えるテクスチャが入っています。

  • Intensity

色ズレの大きさを設定する。


Grain(ザラザラ感を足す)

Grainはフィルムの粒子をシミュレートし、ザラザラ感を表現出来ます。


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


f:id:kan_kikuchi:20170831212233g:plain


なお、負荷はあるがモバイルでもいける程度のものだそうです。


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


f:id:kan_kikuchi:20170831210828j:plain

  • Intensity

ザラザラの強さを設定する。

  • Luminance Contribution

明るい場所のザラザラ感を減らし、暗い場所のザラザラ感を増やす設定をする。

数値が0だと暗い場所も明るい場所も等しくザラザラになる。

なお、数値を出来るだけ上げた方がリアルになるそうです。

  • Size

ザラザラのサイズを設定する。

  • Colored

ザラザラに色を付けるかを設定する。


Vignette(周辺を暗くする)

Vignetteは画像の周辺を暗くし、カメラっぽい感じを表現出来ます。


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


f:id:kan_kikuchi:20170831214636g:plain


なお、モバイルでもじゃんじゃん使っていっても問題ないそうです。


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


f:id:kan_kikuchi:20170831212554j:plain

  • Mode

Classicはパラメータで調整し、Maskedはテクスチャで設定します。

なお、後述の設定項目はClassicのものです。

  • Color

周辺に加える色を設定する。

  • Center

色が変わる中心点を設定する。

  • Intensity

加える色の強さを設定する。

  • Smoothness

色の変化の滑らかさを設定する。

  • Roundess

丸 ~ 四角の間で形を設定する。

  • Rounded

アスペクト比を考慮するかを設定する。


Dithering(階調の境界線を消す)

Ditheringはノイズを使って

マッハバンド(グラデーション部分の縞々)を消す事が出来ます。


試してみたかったのですが、良い感じにマッハバンドを出現させられなかったので、

動画からイメージを拝借。


f:id:kan_kikuchi:20170903193800g:plain
https://youtu.be/r5mNmH68KPQ?t=48m53s


なお、モバイルでもじゃんじゃん使っていっても問題ないそうです。


また、Ditheringに設定項目はありません。


設定をAnimatorでアニメーション出来ない。

Unityで簡単にポストプロセスが行えるPost-Processing Stackですが、いくつか弱点もあるそうです。

Post Processing Stack - Asset Store


まず、一つ目はAnimatorではEnabledの切り替えしか出来ず、アニメーションは出来ない事です。


f:id:kan_kikuchi:20170903194453j:plain


なので、アニメーションさせたい場合はスクリプトを経由させる必要があります。

しかし、Profileを直接弄ると元の設定が変わってしまうため、注意が必要です。

また、その辺りを楽に操作出来る便利クラスを公開してくれています。



なお、将来的にはもっとスマートにアニメーション出来るようになるそうです。


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

Post-Processing Stackの弱点、二つ目は、シェーダーバリアントが大量(2592個)に生成される事です。


そもそもシェーダーバリアントとは、各組み合わせに最適化されたシェーダーのバリエーションの事で、

例えばDoFとBloomの二つだけで考えても見ても、以下の4つのシェーダーが生成されるという事です。

  • DoFが無効、Bloomが無効なシェーダー
  • DoFが無効、Bloomが有効なシェーダー
  • DoFが有効、Bloomが無効なシェーダー
  • DoFが有効、Bloomが有効なシェーダー


シェーダーバリアントが増えると、ビルドサイズが増えたり(場合によっては数MB)、

初回のビルドに時間がかかったり(場合によっては20分以上)という問題が発生します。


これの対策として、

事前に組みわせを限定(DoFは常に有効とか、Bloomは常に無効とか)するという事が可能です。


組みわせの指定はPostProcessing/Resources/Shaders/Uber.shaderで行います。


f:id:kan_kikuchi:20170903201437j:plain
f:id:kan_kikuchi:20170903201528j:plain


記述の仕方は、何も記載しなければ常に無効で、#define ナンタラ 1なら常に有効、

#pragma multi_compile __ ナンタラだと無効にも有効にも出来るといった具合です。


実際にDoFは無効にも有効にもでき、Bloomは常に有効、他は常に無効の時は以下のようになります。

//DoFは無効にも有効にも出来る
#pragma multi_compile __ DEPTH_OF_FIELD DEPTH_OF_FIELD_COC_VIEW

//Bloomは常に有効
#define BLOOM 1

//それ以外は常に無効


なお、生成されるシェーダーバリアントの数はInspectroのComiled codeから確認出来ます。


f:id:kan_kikuchi:20170903202412j:plain
f:id:kan_kikuchi:20170903202422j:plain


おわりに

Post-Processing Stackの導入から設定、各エフェクトの仕組みや調整方法、それに諸々の弱点など、

通常なら知るのに多大な時間がかかりそうな事が、効率よく学べる最高の教材といった感じでした。


なお、前回の記事でも書きましたが、

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

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