ゲームの質を劇的に上げる描画の5つの手法解説【AA, DoF, Bloom, AO, Motion Blur】

# はじめに

こんにちは、個人ゲーム開発だけで生きて行きたいと願っている[@yoship1639](https://twitter.com/yoship1639)です。

皆様は自分のゲームの見た目が虚しくて絶望した経験はありませんでしょうか。
絶望はしなくてももっと良いシーンを表現したいと思っている方も多いのではないかと思います。

以前、この様な記事を書かせていただき、想像以上に反響がありました。

* [ゲームの質を劇的に上げるカメラワークの3つの手法解説【減衰・FoV・手ブレ】](https://qiita.com/yoship1639/items/9bf6f8ad080b3c496b12)

上記に因んで、今回はカメラワークではなく、描画に関する様々な手法を用いてゲームの質を高めてみようと思います。前回のカメラワークと組み合わせることで更なるゲームの質の向上が期待できますので、ぜひ今回の手法を我が物としていただければと思います。環境はタグにある通り当然Unityですが、UEでも自作でも非常に使える手法です。

それでは実際に見てみましょう。

## どの程度見た目が違うのか

このくらい違います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">描画を高品質化したもの(左)と通常のもの(右)です。<br>アンチエイリアス、被写界深度、ブルーム、モーションブラー、アンビエントオクルージョンありとなしです。<br>動画だと分かりずらいかもしれませんが、適当なシーンでもこれだけ見栄えが変わります。 <a href="https://t.co/AsV8zCCegf">pic.twitter.com/AsV8zCCegf</a></p>&mdash; yoship@コミケ日曜東メ20a (@yoship1639) <a href="https://twitter.com/yoship1639/status/1069433738193301509?ref_src=twsrc%5Etfw">December 3, 2018</a></blockquote>

違いが分かっていただけたでしょうか？迫力やリアリティのあるゲームを作りたい場合、なくてはならないレベルの違いかと思います。

実際にどの様な手法が用いられてこの違いが出ているのか見てみましょう。

# ゲームの質を上げる5つの手法

今回は、ゲームの質を向上させるために誰も教えてくれなかった**5つの手法**をご紹介したいと思います。
その全てが**ポストプロセス**と呼ばれる既に描画された画面に後処理を加える描画手法です。通常、3Dの描画にはシェーダと呼ばれるGPUプログラムが用いられるのですが、そのシェーダがすべて動き終わった後に動かされるシェーダ処理という意味でポストプロセスと呼ばれています。実はゲームの見た目はここで決まるといっても過言ではありません。

### アンチエイリアス - Anti-Aliasing

アンチエイリアス(AA)とは、エイリアシングと呼ばれるピクセル間で起こるギザギザ(ジャギー)が起こらない様に滑らかにする処理の事です。イラスト系でもよく聞く言葉なので、知っている方も多いかと思います。実はこの処理ゲームの描画にもリアルタイムで適用できます。それはFXAA(Fast Approximate Anti-Aliasing)と呼ばれるポストプロセスで、描画された画面を高速でアンチエイリアシングする事が出来ます。FXAAは比較的軽い処理であるのに見た目が簡単によくなるので非常にお勧めです。

### 被写界深度 - Depth of Field

被写界深度(DoF)とは、今見ているもの以外の視界がぼやけて見える現象のことです。カメラで近くのものを撮影すると回りがぼやけて見えるのが分かりやすいかと思います。最近の洋ゲーとかの会話シーンとかだと会話している人たちはくっきりしていて壁など周りのものがぼやけて見えていることが多いですよね。こちらの処理も、ポストプロセスとしてUnityで適用する事が出来ます。F値もちゃんと設定できますよ！

### ブルーム - Bloom

ブルームとは、明るさが一定以上に達したところの周りがうっすら光って見える現象のことです。暗いところでろうそくを点けると赤い光がぼやーと見えますよね。あれです。この効果もゲームに適用すると見た目の印象が凄く変わります。似たような効果にフレアというものがあります。樹の下から太陽を見上げた時の星や十字の様に見える光の漏れみたいなやつです。ブルームもフレアもポストプロセスです。今回はブルームのみ紹介します。

### アンビエントオクルージョン - Ambient Occlusion

アンビエントオクルージョン(AO)とは、環境光(Ambient)の光が遮られる(Occlusion)ことを言います。わかりやすく言うと、モノとモノの間や角などに光が届かなくて暗く影になる現象の事です。通常の描画処理では影は出来ても濃い影は出来ないので、その濃い影をアンビエントオクルージョンは担当します。例のごとくポストプロセスです。名前がかっこいいですね。

### モーションブラー - Motion Blur

モーションブラーとは、モノが大きく動く時に動く逆方向にブラー(ぼかし)をかけることで物体が高速で動いているように見せる手法の事です。電車に乗って近くのものが早すぎて残像しか見えない状態と全く同じです。モノがいかにも高速で動いているのを効果的に見せたい場合は必須のポストプロセスになります。

様々な手法を紹介させていただきました。そのすべてがポストプロセスと呼ばれる後処理によってゲームでは実現可能であると認識できたのではないかと思います。

さあ、それではこれらを実際に実装していきます！

# コーディングかと思いきや

実際にゴリゴリ実装かと思いきや、実はコーディングしません。なぜなら、実際にコーディングすると1000行は軽くくだらないからです。私は実際にこれらの手法を自作エンジンでコーディングしたことあるので確実に超えるでしょう(実際のシェーダコードが見たい方は[Github](https://github.com/yoship1639/MikuMikuWorld/tree/master/MikuMikuWorldLib/Assets/Shaders)をご覧ください)。そんなことをしているとすごく時間もかかりますしプロジェクトの中身が複雑になってしまいます。

実は、今回紹介した5つの手法、**すべてUnityの公式で公開・配布されています**。しかも**すべて無料**で。ですので、D&Dとパラメータ設定を行うだけで**非常に簡単に実現できてしまいます**。すごい時代になったものです。

さあ、ポストプロセスを実装してみましょう。

Unityで[Ctrl + 9]を押してAsset Storeを開いてください。
そして検索ワードで「Post Processing Stack」と入力し、Post Processing Stackをインポートしてください。
![010.png](https://qiita-image-store.s3.amazonaws.com/0/113595/e0782bd8-f624-a022-bb21-f950c851c93d.png)
インポートが出来たら、Assetsで[Create]->[Post-Processing Profile]を追加してください。
次にメインカメラに[Add Component]->[Effects]->[Post-Processing Behaviour]でポストプロセス用スクリプトを追加し、先ほど作成したPost-Processing ProfileをProfileに設定してください。
![011.png](https://qiita-image-store.s3.amazonaws.com/0/113595/bf33f673-cede-af85-d9f1-332f5e328853.png)
先ほど作成したPost-Processing Profileをインスペクタ表示してください。
![012.png](https://qiita-image-store.s3.amazonaws.com/0/113595/93e53af3-e6e5-78d0-7a8e-7cf00d2731ec.png)
これで準備は完了です。Post Processing Stackには今回紹介した**5つの手法すべてが含まれています**。あとは、パラメータ設定だけで5手法の効果を表現可能です。

## 5手法を適用させる
インスペクタの「Antialiasing」「Ambient Occlusion」「Depth of Field」「Motion Blur」「Bloom」にチェックを入れてください。これだけで今回紹介した手法全てがゲームに適用されます。

チェックの横の名称の部分をクリックすると詳細なパラメータ設定画面が表示されます。一応軽く解説したいと思います。

### Antialiasing

これでジャギーをなくし解像度が上がったかのような効果が得られます。ON/OFFして良く確認してみてください。
設定項目が二つありますが特に変更はしなくても大丈夫です。
![013.png](https://qiita-image-store.s3.amazonaws.com/0/113595/6e275dd2-c9b9-c77e-6747-4ed388dc6f9c.png)

### Ambient Occlusion

ONにすると詳細な影が見えるようになるはずです。分かりずらい場合は*Intensity*のスライダを左右に大きく動かしてシーンを確認してみてください。その違いがよくわかるはずです。もし、もっと広く影を生成したい場合は*Radius*の値を大きくしてください。それ以外の項目は特にいじらなくても大丈夫です。
![014.png](https://qiita-image-store.s3.amazonaws.com/0/113595/9e1a9cfc-44c1-79ca-2aac-1b5663427f29.png)

### Depth of Field

ONにしても最初は変化が見られないか焦点が合っていないかと思われます。ですので、カメラからターゲット(プレイヤーなど)までの距離を*Focus Distance*に合わせてください。そしてぼかしを強くしたい場合はF値である*Aperture(f-stop)*を小さくしてください。私の場合だと距離が4.5、F値が0.96で丁度良くなりました。また、私のカメラの場合はFOVが変化するので*Use Camera FOV*にもチェックを入れました。
![015.png](https://qiita-image-store.s3.amazonaws.com/0/113595/de4fa4ab-471d-45ea-453f-3cc2d6b715b1.png)

### Motion Blur

ONにしてシーン上のモノ(カメラの向きでも)を大きく動かしてみてください。綺麗に残像が見えるはずです。もし見えない場合は*Frame Blending*の値を大きくしてください。逆に強すぎる場合は小さくしてください。基本的には*Frame Blending*は0で大丈夫のはずですが、例えばレースゲームで加速している時だけこの値を上げると、いかにも加速している感が出せます。
![016.png](https://qiita-image-store.s3.amazonaws.com/0/113595/f15ebc25-c95d-9f95-d94a-b181abc82b78.png)

### Bloom

最後にBloomです。これをONにすると綺麗になったシーンが見られるはずです。綺麗にならない場合は、*Intensity*を上げてみるか、*Threshold(Gamma)*を下げてみてください、私の環境だと、下図の設定で綺麗なシーンになりました。ブルームはシーンがほわぁと綺麗になるので私は一番好きです。
![017.png](https://qiita-image-store.s3.amazonaws.com/0/113595/00d7b326-1348-362f-4e07-a0416af8449d.png)

これで5手法すべてを紹介しましたが、他にも様々な項目があるかと思います。これらは是非とも皆様で設定して確認してみてください。個人的には、あと*Color Grading*と呼ばれるトーンマッピング手法がお勧めです。*Tone Mapping(Color Grading)*では、明るすぎる色と暗すぎる色を両方うまく見える様に調整してくれる処理を担当します。今回は詳細は割愛します。

これらの詳細はUnity公式リファレンスに載っていますので、もっと細かいことを知りたい方は是非確認してみてください。

* [Post Processing Stack - Unity マニュアル](https://docs.unity3d.com/ja/2018.2/Manual/PostProcessing-Stack.html)
* [ポストプロセスを理解する - Unity マニュアル](https://docs.unity3d.com/ja/current/Manual/BestPracticeMakingBelievableVisuals8.html)

# まとめ

ゲームの質をさらに向上させる描画の手法を5つ紹介いたしました。紹介した5手法はすべてUnityの公式アセットとして配布されており、非常に簡単に設定できる優れものです。3Dゲームを作る方は利用しない手はないかと思われます。

本来ならばコーディングをしたかったのですが、1000行超えるようなプログラムでは説明する気にもなれませんし皆様は読む気にもなりませんよね。なので、Post Processing Stackという優れものをご紹介させてく形で記述させていただきました。

さあ、皆さんもポストプロセス沼にはまってみてはいかがでしょうか？
最後までご覧いただきありがとうございました。