Unreal Engine 4(UE4)ってPBRでHDRだけどアニメ調のレンダリングもしたいですよね？

この記事は[Unreal Engine 4 (UE4) Advent Calendar 2016](http://qiita.com/advent-calendar/2016/ue4)の7日目の記事です。

UE4はPBR(Physically Based Rendering)でリアルなレンダリングが凄く簡単に実現できますよね？
![2016-12-07_10-55-41.png](https://qiita-image-store.s3.amazonaws.com/0/58485/63963087-9f53-8f31-d8f1-36d7e1c3fb1d.png)
うん、綺麗だ。（ちなみにこのマップはテンプレートからスターターコンテンツを含める設定にすると/StarterContent/Maps/StarterMapにあります）

（UE4のPBR関連ドキュメントは[こちら](https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/PhysicallyBased/index.html)）

でもやっぱり皆さん結構アニメ好きですよね？僕も好きです。
巷でリアルな写真をアニメ調にする某Everfilterが話題ですが、UE4のリアルなレンダリングを逆にアニメ調にしたいという方々もいらっしゃるかと思います。

ということでやってみました。
![2016-12-07_10-56-10.png](https://qiita-image-store.s3.amazonaws.com/0/58485/8dae4ea0-1174-9e28-f612-7330d16689a6.png)
いかがでしょう？もちろん空の画像をどこかから拝借等はしていませんヨ。(ﾟ∀ﾟ)
※今回のスクリーンショット群のAAはデフォルトのTemporalAAではなくFXAAを利用しています
（TemporalAAではなくFXAAを利用したいという方もいらっしゃり、その辺の見栄えもテストするため）

ではやってみましょう。
ベースは、昨年の記事「[アンリアルフェス2015横浜で公開したNPR、トゥーンのアルゴリズムと使い方詳しく解説するよ(*´∀｀)う](http://qiita.com/junyash/items/0e528e1f291a710cf04f)」にあるトゥーンの用のポストプロセスになります。
（2015の記事はアンチエイリアシングの設定にTemporalAAを利用していましたが今回はFXAAを利用しています）

[NPR_Materials_20161207.CelAnim.ver0.5.zip](https://epicgames.box.com/s/2ldnpzuwomyiu19vmjl2fzfp2f100rl0)
以前のものに少し改造したものも入れたのでこちらでシェアさせていただきます。

![ScreenShot00012.png](https://qiita-image-store.s3.amazonaws.com/0/58485/51fd5004-3f08-7268-0f57-d90f22ec5551.png)
まずはStarterMapにManequinモデルを置いてみます。

アウトライナでGlobalPostProcessVolumeを選んで、Post Process VolumeのSettingsのBlendablesを追加してPP_NPRマテリアルを設定します。
![2016-12-07_11-37-00.png](https://qiita-image-store.s3.amazonaws.com/0/58485/6254bb6b-d7a7-5422-57ff-ecea6ef7a647.png)
あと、Auto Exposureが効いていると、画面の明るさに応じて全体のトーンが動的に変化してしまうので、効かないようにしつつ（Min BrightnessとMax Brightnessを同じ値にする）Exposure Biasを調整してシーン全体の明るさが良い感じなるようにします。（今回のシーンでは1.0で調整しました）
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/9aa7212a-2725-3c4e-a866-0c9cd93814ba.png)

![ScreenShot00013.png](https://qiita-image-store.s3.amazonaws.com/0/58485/507fc752-a190-95f6-30d8-6c09bd925010.png)
輪郭線とセル塗り風のルックになりましたが…う～ん、まだまだ物足りないですね。

そらがリアルすぎるので、アニメ調の背景を拝しゃ…ではなく、空の彩度を上げることでなんとかならないかなと。（もちろんご自身でアニメ調の背景を用意できるようでしたら、それを空に置いた方がさらに良い感じにできるかと思います）
PP_NPRをちょっと改造してPP_NPR_CelAnimを作ってみました、空のUnlitなマテリアルの彩度を上げる処理を入れてみました。
![2016-12-07_11-43-54.png](https://qiita-image-store.s3.amazonaws.com/0/58485/a0be8917-5cc7-d1ad-fe8d-14453c85cb28.png)
これを使うことで空の色味が濃くなりましたね。
![ScreenShot00014.png](https://qiita-image-store.s3.amazonaws.com/0/58485/afe43cd6-54b0-ca65-6c1f-665ebd752f8b.png)
デフォルトでSkyDesaturationというパラメータを-1にしてありますが、（-2等）もっと下げて行くともっと色味が濃くなります。

でも、まだまだかなぁ…(*´ω｀*)

PostProcessVolumeのScene Color項目、特にカラーグレーディングでシーン全体の色味を調整してみましょうか。
![2016-12-07_11-55-12.png](https://qiita-image-store.s3.amazonaws.com/0/58485/f1a65e6b-95fc-2e88-ab57-3026a5bbf570.png)
Fringe Intensityを上げていくと、カメラ用語で言うところのパープルフリンジ的な色収差による色ズレ風のエフェクトを掛けられます。（試しに1.0にしてみました）
Vignette Intensityを上げるとカメラの中心から離れた所が暗くなっていくのですが、アニメ作品風にしたいのでここは0にしました。（お好みで上げてみるのも面白いです）
Grain系はノイズを乗せるものなので普段はゼロにしましょう、回想シーン等でフイルムノイズ的なモノを乗せたいときはここが有用かもしれません。
Color GradingにLUT_HighContrastテクスチャを設定すると、シーン全体の色味がハイコントラストになります。効果を落としたり調整したい場合はColor Grading Intensityを下げることで影響を抑える事もできます。
![ScreenShot00015.png](https://qiita-image-store.s3.amazonaws.com/0/58485/b6717c7c-c696-479b-d294-07d2ba79edfc.png)

（UE4のカラーグレーディングのドキュメントは[こちら](https://docs.unrealengine.com/latest/JPN/Engine/Rendering/PostProcessEffects/ColorGrading/index.html)）
（Robのカラーグレーディングの[チュートリアル動画](https://www.youtube.com/watch?v=m1Vv-OSbtvw)）

かなり色味が濃くなりましたね。これは濃すぎかなぁとも思えますが、ディフュージョン風のエフェクトも掛けることでいい感じにできます。
PostProcessVolumeのBloom項目でそれっぽくできます。
![2016-12-07_12-05-46.png](https://qiita-image-store.s3.amazonaws.com/0/58485/e7d92b4f-bb3b-b739-6cdc-ef55a31d0a8d.png)
Intensityの値を大きくすることで光っている部分を溢れさせる事ができます。
Thresholdを小さくすると暗い部分にもBloomの効果を適用できますのでディフュージョン風に全体的にBloom効果を掛けるために-0.5としてみました。
![ScreenShot00016.png](https://qiita-image-store.s3.amazonaws.com/0/58485/4b693553-d00e-631d-d265-ae920ebb4968.png)

動画はtwitterの方に投稿しておきました。
<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">UE4のAdvent Calendar 2016、7日目「Unreal Engine 4(UE4)ってPBRでHDRだけどアニメ調のレンダリングもしたいですよね？」公開させていただきました！<a href="https://t.co/I9cXDOWUvl">https://t.co/I9cXDOWUvl</a> <a href="https://t.co/NmICZw3jPe">pic.twitter.com/NmICZw3jPe</a></p>&mdash; シモダジュンヤ Jun Shimoda (@junyash) <a href="https://twitter.com/junyash/status/806338694856613888">December 7, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

そのた参考画像を何枚か置いておきますね。（画面の左半分がPP_NPR_CelAnimの効果が掛かっていない部分、右半分が効果ありになります）
![ScreenShot00004.png](https://qiita-image-store.s3.amazonaws.com/0/58485/96cc7c71-edeb-f56c-8451-eec3a1f8fd0d.png)
![ScreenShot00006.png](https://qiita-image-store.s3.amazonaws.com/0/58485/0b9d4402-8970-46a5-b327-f9784cd09d02.png)
![ScreenShot00007.png](https://qiita-image-store.s3.amazonaws.com/0/58485/d9dd165b-8340-6293-c18c-745fa828b214.png)
![ScreenShot00008.png](https://qiita-image-store.s3.amazonaws.com/0/58485/612b52e4-26c0-3cbf-cf49-5f0ec7c8ee37.png)
![ScreenShot00009.png](https://qiita-image-store.s3.amazonaws.com/0/58485/12a266f4-adc1-a684-5a13-1435204ae53f.png)


８日目は[yashinut](http://qiita.com/yashinut)さん（[@yashinut](https://twitter.com/yashinut)）の「[BP_SkySphereで遊びます](http://blog.livedoor.jp/yashinut/archives/9999664.html)」です。