本記事は2018年6月2日に VR アカデミーで講演した内容のブログ版になります。(本稿は Unity2018.1.4 を使用しています。)

はじめに

みなさん Unity でポストプロセスエフェクト使ってますか？業務でゲーム開発してる方々は勿論使ってると思いますが、結構使ったことがない人も多いのではないかなと思います。

そもそもポストプロセスエフェクトって何？と言う方も多いと思います。

簡単にいってしまうと SNS アプリで画像を投稿する際に写真を綺麗に見せる機能有りますよね？それです。最近はスマホのカメラアプリ自体にも搭載されてることが多いですよね。

実は Unity でも似たような事がもっと高品質に行えます。下記がポストプロセスエフェクト使用前、使用後の比較画像です。

どうですか？モデルデータ、テクスチャ、影など変えていないのにそれはもう PS2を PS4に買い換えたかのような違いが出ていると思います。

実はこのポストプロセスエフェクトというのは、ゲームの品質をあげるための "作業効率" がとても良いという特徴があります(個人の感想です)。例えば凄く面白い凝ったゲームロジックを作ったとしてその良さが伝わる人はそのゲームをプレイした人だけという問題があります。最近は実況動画を見るなどの方法もありますが、どちらにしてもそのゲームの面白さというものを口コミなどで知らないと購入層にならないということです。

一方、ルックデヴというのはゲームをプレイしなくても PV やスクリーンショットで伝わります。これは展示会などで特に有用で綺麗な見た目をすればそれだけでマスコミは取材してくれますしお客さんも試遊してくれます。(これも個人的な主観であり、さらには同人ゲー主体とかそういう展示会でないなら大企業が圧倒的な資本のパワーでルックを作るので勝てませんが)

さてそれで何故、作業効率がいいかと言いますと、先ほどの使用前使用後の画像はコード行数0行で数時間あれば作れます。膨大な時間を掛けて考えたゲームを莫大なバグと戦ったゲームをたった数時間で見た目のクオリティを上げてより多くの人が試遊、購入してくれるようになればとても作業効率が良いと思いませんか。

というわけで今回は、前回のライトシャドウ編から引き続き、 Unity で簡単かつ綺麗にポストプロセスエフェクトを使える大御所の機能「 Post Processing Stack 」について解説していきます。

Post Processing Stack v1

本記事タイトルにあるのは「 Post Processing Stack v2」ですが、 v2があるということは v1もあります。

更に歴史をひもとけば、元々は StandardAssets の ImageEffect(ポストプロセスエフェクトの Unity 的な言い方)に各種エフェクトがバラバラで入っていました。その後「 Cinematic Image Effects 」という名前になり機能が増えたのが Unity5中期までの話です。

ただ、各種エフェクトがバラバラに入っていたので、エフェクトを掛ける順番(Component の順番)が違うと絵が変わったり、うまく描画できなかったり同じ様な処理を複数回実行していたりといった問題がありました。

そこで各種エフェクトを Stack して処理順番や複数回処理の問題を解決しようぜ！といったのが「 Post Processing Stack v1」です。これは Unity5.5.0から使えるようになりました。

今から使い始めるなら「 Post Processing Stack v2」を使った方が良いと私は思いますが、まだ Preview 版という点や Unity2017以上でないと全てのエフェクトが使えなかったりするのでプロジェクトに応じて使い分けが必要です。

ちなみに Post Processing Stack v1の紹介は Unite2017のこの講義がとても良いのでおすすめです。

Post Processing Stack v2

ここまでが長い導入で、ここから本編です!!

インストール

Post Processing Stack v2(以下 PPS2)をインポートする方法は2種類あります。

• PackageManager を使用してインポート
• Githubから落としてきてインポート

前者の方法が一般的で今回は前者の方法で解説していきます。後者の方法は AssetStore で PPS2対応の追加エフェクトを導入するときは必要だったりしますが、導入手順としては普通にインポートするだけなので割愛します。

PackageManager での PPS2インストール方法

「 Windows 」→「 Package Manager 」から「 Postprocessing 」を追加する。

MainCamera に「 Post Process Layer 」 Component を追加する。

Unity の Layer 設定で「 PostProcessing 」など PPS と解りやすい名前の Layer を追加する。

Post Process Layer に先ほど作成した Layer を設定する。

• 空のオブジェクトを作成して Layer を先ほど作成した Layer に設定。
• Post Process Volume Component を追加する。
• Is Global を有効に
• New のボタンをクリック

以上で準備完了です。

エフェクトの説明

Anti-aliasing を除いて Post Process Volume の Component で使いたいエフェクトを「 Add Effect …」で追加していき設定を行います。(Anti-aliasing のみ別の場所に設定があります。)

以降の各種エフェクトの説明ですが、元原稿が VR アカデミーでの講義用なので VR コンテンツでの利用を目的とした内容になっています。

デバッグモード

PPS には各種エフェクトの設定を行うときに便利なデバッグモードがあります。使い方は Post Process Volume のコンポーネントがついた GameObject に Post Process Debug コンポーネントをつけるだけです。

Debug Overlay

これから説明する各種エフェクトの調整に便利な「確認用の表示」を Game 画面をオーバーレイできます。

Monitors

Game 画面上にヒストグラムやウェーブホームなどを表示することができます。写真や動画の編集になれた人であれば使い慣れているものと同じものを見ながら調整できるのでわかりやすいと思います。

Anti-aliasing

オブジェクトの縁に出てしまうギザギザやジャギジャギ感を取り除く機能です。

Anti-aliasing の設定のみ Post Process Layer の Component に設定がありますので注意してください。

Anti-aliasing のモードは3種類あります。 PPS1から一個増えました。

FXAA

近傍のピクセルから輝度差を測定してなじませる方法です。とても軽いのでモバイル VR におすすめ。

SMAA

FXAA の改良版、 FXAA では縁以外にもボケてしまうという欠点が改善されています。それなりに負荷があるので PC 向けハイエンド VR におすすめ。

TAA

前フレームを参考にしてアンチエイリアスを掛ける方法です。それなりに精度は良いのですが調整がし辛いのと激しく動くとゴーストが出たりするので VR ではあまり使わない方がいいと思います。

Ambient Occlusion(AO)

オブジェクトの角に影を落として現実っぽくする機能です。 Static オブジェクト主体の Scene であれば Unity の Lighting タブからベイクしてしまう方が負荷が軽くて良いと思います。リアルタイムで処理するならコチラを使いましょう。

ただ影の色を強くしすぎるとキャラクターの顔などが異様に暗くなったりして特にノンフォトリアル系ではおかしく見える事もあるので適材適所で使用しましょう。

Intensity

影色の強さです。好きな見た目になるように自由に調整してください。

Radius

影を出す影響範囲の設定です。大きくすると影の範囲が広がります。あまり大きいと違和感がでてくるので小さめが良いと思います。

Quality

1px 辺りのサンプル数が変わります。上げれば上げるほど綺麗になりますが、計算が重いので見た目に違和感がなければ下げましょう。

Mode

「 Scalable Ambient Obscurance 」であれば概ねどの端末でも動作します。

「 Multi-scale Volumetric Occlusion 」は最新 PC 向けですが、 VR が動く PC であれば概ねサポートされているので、 PC 向け VR であればオススメです。重いですが綺麗です。

デバッグ表示で AO のみ描画するモードがあるのですが、これはこれで結構絵になっていると思うんですよね。 白色のオブジェクトと影だけで表現した空間というのも面白いのかもしれません。

Screen Space Reflection(SSR)

リアルタイムで割と良い感じの反射を描画してくれます。画像ではピカピカに磨かれた机の上のカバンが机に反射してる様子が分かると思います。これくらいの反射であればわざわざ ReflectionProbe を焼かなくてもこれで品質的に良いかなと思えてきます。ですが、使用する上で2つほど注意点があります。

• Deferred Rendering でないと使えない
• 画面に映っていない物は反射しない

画面に映っていない物は反射しない、というのはどういう意味かというと例えば、スカートを履いた人の下に反射属性のオブジェクトを設置して SSR を設定してもスカートの中を見通すことはできないという事です。なぜなら画面上にスカートの中は描画されていないので描画のしようがないのです。

これは鏡や水面の反射などあらゆるところで問題になることが多いので SSR と ReflectionProbe の各々の長所を理解して使い分けていきましょう。

Preset

基本的な設定が既にあるので大体の場合はここから選べば OK です。最上位設定の名前が「 Overkill 」なので負荷は察してください。

Maximum Iteration Count(Custom 設定のみ)

反射の最大反復数設定です。上げれば上げるほど反射していきますが勿論処理が重くなります。

Thickness(Custom 設定のみ)

反射するレイの大きさです。小さいほど品質が上がりますが勿論重くなります。

Resolution(Custom 設定のみ)

反射の解像度設定です。「 DownSample 」が低解像度、「 Full Size 」が元解像度、「 SuperSampling 」が元解像度より更に高解像度モードです。勿論(以下略

Maximum March Distance

反射の計算する距離です。増やせば増やすほど反射の計算距離を増やせますが、勿論(以下略

Distance Fade

反射するエリアを制限します。ちょっと見た目おかしいなと思ったときはココを調整しましょう。

Vignette

画面の外周部の反射を弱めることができます。冒頭で書いたとおり画面に映っていない物は反射しないため、画面外周部では描画がおかしくなる傾向があります。その場合はここで外周部は演算しないようにしましょう。

Depth of Field(被写界深度)

現物のカメラで撮影したときのピントがあっていない状態をシミュレーションできる機能です。

なんか背景ボケるだけでプロっぽい絵に見えますよね！ですが、 VR で使う事を考えるとそんなに強いぼかしは必要ないかもしれません。人間の眼で見る時はよほど近い物を見てる時以外は全体にピントが合ってるように見えますから。

プレイヤーが眼鏡キャラで眼鏡を無くした設定なら強めの設定で使えるかも？

Fove とか Tobii とか人の視線が取れる HMD なら視線の場所基準で DoF 設定すれば最良かもしれません。

Focus Distance

ピントをどこに合わせるかの設定です。数値を小さく するとカメラに近く、大きくすると遠くにピントが合います。

Aperture

絞りの設定です。実物のカメラでは F 値と呼ばれてます。数値を小さくするとピントが合う範囲が狭くなり、大きくすると広くなります。

Focal Length

焦点距離の設定です。先ほどの Aperture と合わせてピントが合う範囲を設定出来ます。小さくするとピントが合う範囲が広くなり、大きくすると狭くなります。

Kernel Size

ボケ半径の最大値を設定します。大きければ大きいほど綺麗なボケになりますが、負荷が上がるので Medium くらいで抑えたほうが良いです。

現実のカメラを考慮しつつ纏めるとこんな感じです。

被写界深度	浅い(よくボケる)	深い(あまりボケない)
Aperture	小さい	大きい
Focal Length	大きい(望遠)	小さい(広角)
被写体とカメラの間の距離	短い	長い

参考資料http://www.nikon-image.com/enjoy/phototech/manual/19/05.html

デバッグモードにすればピントがあっているエリアが赤色になるので調整しやすくてとてもおすすめです。

Motion Blur

動いて居る部分にブラーを付ける機能

移動している感・早さを感じさせるには必須の奴ですね。ただ VR でモーションブラーかけ過ぎると気持ち悪くなってくるので用法用量を守って適量でお使い下さい。

Shutter Angle

シャッター角度を調整して露出時間を変更できます。大きくするほどブラーを強くできます。

Sample Count

モーションブラーの精度です。大きな値に設定すると綺麗になりますが処理が重くなります。

デバッグモードにすればどのくらいの移動量があるか見る事ができます。当たり前ですがモーションブラーの特性上、再生中で画面が動いてなければ何も見えません。

Auto Exposure

PPS1の頃は「 Eye Adaptation 」とか呼ばれてた奴です。自動露出調整ができます。高速道路走っていてトンネルを通るときなどに発生する明順応暗順応を再現することが可能です。

Filtering

現在の輝度値を算出する際の対象エリア設定

Minimum 、 Maximum

露出調整を行う最小、最大輝度

Exposure Compensation

中間の輝度値設定、下げると全体的に暗めに、上げると全体的に明るめになる

Adaptation

露出調整を行うとき、 Progressive ならアニメーションしながら、 Fixed であれば即時調整が行われる

Speed Up

明順応のアニメーション時間(速度)

Speed Down

暗順応のアニメーション時間(速度)

Bloom

(私が)大好きブルームです。現実のカメラの露出限界を超えているような見た目を出す機能です。明るい部分をより強く光らせる、光を強調する。そういうような機能です。

人間の眼は色の差よりも光の差をの方が判別つきやすいという仕様になっているので明るい部分はしっかり光らした方が良いです。ピカピカ光る物は綺麗でカッコイイこれが世界の真理です。なお光らせすぎる、明滅させるぎると(特に VR では)人体に悪影響が起こる可能性があるので気をつけましょう。

光らせるにあたって、ライトがあたっている部分は素直によく光りますが、例えばネオンサインのように光らせたい場合は Shader の Emission でちゃんと発光するようにしておきましょう。

Intensity

ブルームの輝度(強さ)が上がります。

Threshold

どの程度の明るさであればエフェクトを掛けるかの閾値設定です。

Soft Knee

Threshold で設定した閾値をなだらかにします。0にしてしまうとパキッとしてしまうので多少値を入れたほうが良いと思います。

Diffusion

光のにじむエリア(強さ)が設定できます。

Fast Mode

品質をある程度犠牲にして動作速度を上げます。見た目で問題なければ ON にしましょう。

Dirtiness

レンズに付着した汚れをシミュレーションする機能です。汚れのテクスチャなどが必要になります。(Sample のテクスチャが Github に合った気がする)

Color Grading

色調補正機能です。ここまで作ってきた絵に対して最後にここで色調整をします。

この機能は文字の説明を読むよりも、実際にパラメーターをいじくり回した方が解りやすいです。なのでよく使う物をかいつまんで説明してきます。

Temperature

色温度の調整です。画面全体を青め(冷ため)にしたり赤め(暖かめ)にしたりを調整します。

Tint

上記色温度の緑、マゼンタベース版です。

Colorf Flter

ここれ設定した色を画面全体に掛けることができます。

Hue Shift

色相を回すことが出来ます。

Saturation

彩度の調整ができます。

Brightness

ブライトネスの調整です。(そのまんま)

Contrast

コントラストの調整です。(そのまんま)

Channel Mixer

触った方が解りやすいと思いますが文字で解説すると、画面のドットの RGB 値に係数を掛けることができます。

例えば Channel Mixer の Red の設定はデフォルトで

• Red 100
• Green 0
• Blue 0

になっていると思います。これを Red 50に変更すると、画面の赤色の強さが半分になります。

更に、 Green 50にすると Pixel の赤色が255の場合、 R 128 G 128 といった色になります。

私が文字で解説できる限界はこんな所ですので実際に弄っていただければ……

Trackballs

画面上に3つ同じような円がありますが

• Lift → 暗い色
• Ganmma → 中間色
• Gain → 明るい色

に対して設定ができます。

画面内の影色部分だけ少し青めのしたいとかそういう時に使える機能です。

スライドバーが明るさの設定です。

中央の○を動かすと動かした方向の色になっていきます。

映像の色調補正やる人とかが使ったことあると思います。 SpeedGrade とか。

Grading Curves

数種類のグラフを表示することができ、そのカーブを曲げることで色調補正ができます。 Photoshop ユーザには馴染みやすいかもしれませんね。

Lookup Texture

LUT ベースで色調補正を行えます。 LookUp Table という奴で PPS2の Github にある下記画像を使って色調補正を行います。

https://github.com/Unity-Technologies/PostProcessing/blob/v2/PostProcessing/Textures/LUTs/NeutralLdrLut.png

使い方としては、

1. Unity の Game ウィンドウのスクリーンショットを取る
2. そのスクリーンショットを Photoshop など色調補正ができる他のツールで開く
3. 先ほどの細長い LUT 画像を貼り付ける(このとき拡縮を行わずにドットバイドットで貼り付ける必要あり)
4. その状態で Photoshop 等で色調補正を行う
5. 色調補正が終わったら LUT の部分だけ切り出して保存する
6. Unity に読み込んで PPS2の LookUp Texture 部分に入れる

これで Photoshop 等で編集した色調補正結果と同じ色になっていると思います。

これは使い慣れているソフトがあればそちらを使えるというメリット、そしてデザイナーと色調整で揉めたときにこれで「色調補正してきてくれぇぇぇ」って言える最終兵器です。

Chromatic Aberration

安物のレンズとかを使うと良く出てしまう色収差を再現する機能です。 VR では人間の眼に合わせるのでまぁ要らないかなと思います。眼鏡越しとかカバー越しとか再現したいなら入れるとそれっぽさ UP 。

Spectral Lut

3×1 px の色収差で出て欲しいカラーを設定するテクスチャを入れる。入れない場合は赤緑青の画像が使われる。

Intensity

色収差の強さ

Fast Mode

画面外周部のブラー効果を省略して負荷を軽くする。

Vignette

画面端に任意のカラーを載せられる機能です。(ビネット(周辺減光))

FPS とかでダメージを受けた時に出るような奴が作れます。あとはインスタとかで Effect 掛けると四隅が暗くなってるのがありますがそれと同じ奴です。

Mode

Classic でデフォルトの円形、 Masked で MaskTexture が設定できるようになります。

Color

そのまま色です。

Center

円の中心位置(基本的には0.5,0.5で中心にくるのでそのままで良いかと)

Intensity

色の強さ

Smoothness

境界線の滑らかさ

Roundness

円形の形が調整

Rounded

綺麗な円形にするか、アス比に応じて円を歪ませるか

Grain

画面にノイズを付与できる機能です。カメラで撮影すると暗い部分にはノイズがのりますし、人間の眼も暗いとノイズ感のある見た目が見えたりします。ほんの少し付与しておけばのっぺり感を抑えたりすることもできて何かと便利な機能です。

Colored

有効にするとノイズがカラーになる

Intensity

ノイズの強さ

Size

ノイズの大きさ

さいごに

以上、 PPSv2デフォルト機能の解説でした！

これらを組み合わせてワンランク上の表現を頑張って作ってみましょう!!

また PPS2はユーザが Effect を自作して追加することが可能です。 AssetStore に何点か PPS2ベースのアセットが配布されているので、そちらを試して見るのも面白いかもしれません。

ポストプロセスエフェクトというのは調味料みたいな物なので、なにもないと寂しいのですがかけ過ぎると味がよく分からなくなってしまうので本当に必要なものだけを吟味して用法用量を守って使っていきましょう。

それではまた(の機会があれば)、アディオス!