Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

この記事はUnreal Engine 4 (UE4) Advent Calendar 2016の7日目の記事です。

UE4はPBR(Physically Based Rendering)でリアルなレンダリングが凄く簡単に実現できますよね?
2016-12-07_10-55-41.png
うん、綺麗だ。(ちなみにこのマップはテンプレートからスターターコンテンツを含める設定にすると/StarterContent/Maps/StarterMapにあります)

(UE4のPBR関連ドキュメントはこちら

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

ということでやってみました。
2016-12-07_10-56-10.png
いかがでしょう?もちろん空の画像をどこかから拝借等はしていませんヨ。(゚∀゚)
※今回のスクリーンショット群のAAはデフォルトのTemporalAAではなくFXAAを利用しています
(TemporalAAではなくFXAAを利用したいという方もいらっしゃり、その辺の見栄えもテストするため)

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

NPR_Materials_20161207.CelAnim.ver0.5.zip
以前のものに少し改造したものも入れたのでこちらでシェアさせていただきます。

ScreenShot00012.png
まずはStarterMapにManequinモデルを置いてみます。

アウトライナでGlobalPostProcessVolumeを選んで、Post Process VolumeのSettingsのBlendablesを追加してPP_NPRマテリアルを設定します。
2016-12-07_11-37-00.png
あと、Auto Exposureが効いていると、画面の明るさに応じて全体のトーンが動的に変化してしまうので、効かないようにしつつ(Min BrightnessとMax Brightnessを同じ値にする)Exposure Biasを調整してシーン全体の明るさが良い感じなるようにします。(今回のシーンでは1.0で調整しました)
image

ScreenShot00013.png
輪郭線とセル塗り風のルックになりましたが…う~ん、まだまだ物足りないですね。

そらがリアルすぎるので、アニメ調の背景を拝しゃ…ではなく、空の彩度を上げることでなんとかならないかなと。(もちろんご自身でアニメ調の背景を用意できるようでしたら、それを空に置いた方がさらに良い感じにできるかと思います)
PP_NPRをちょっと改造してPP_NPR_CelAnimを作ってみました、空のUnlitなマテリアルの彩度を上げる処理を入れてみました。
2016-12-07_11-43-54.png
これを使うことで空の色味が濃くなりましたね。
ScreenShot00014.png
デフォルトでSkyDesaturationというパラメータを-1にしてありますが、(-2等)もっと下げて行くともっと色味が濃くなります。

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

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

(UE4のカラーグレーディングのドキュメントはこちら
(Robのカラーグレーディングのチュートリアル動画

かなり色味が濃くなりましたね。これは濃すぎかなぁとも思えますが、ディフュージョン風のエフェクトも掛けることでいい感じにできます。
PostProcessVolumeのBloom項目でそれっぽくできます。
2016-12-07_12-05-46.png
Intensityの値を大きくすることで光っている部分を溢れさせる事ができます。
Thresholdを小さくすると暗い部分にもBloomの効果を適用できますのでディフュージョン風に全体的にBloom効果を掛けるために-0.5としてみました。
ScreenShot00016.png

動画はtwitterの方に投稿しておきました。


そのた参考画像を何枚か置いておきますね。(画面の左半分がPP_NPR_CelAnimの効果が掛かっていない部分、右半分が効果ありになります)
ScreenShot00004.png
ScreenShot00006.png
ScreenShot00007.png
ScreenShot00008.png
ScreenShot00009.png

8日目はyashinutさん(@yashinut)の「BP_SkySphereで遊びます」です。

junyash
Z80と6502に育てられ、スーパーFXチップとOpenGLとMesaとDirectXに鍛えられました。好奇心旺盛につきイロイロなネタにも食いつきます。Amazonからゲーム開発のサポートや普及活動がんばります。 https://aws.amazon.com/jp/gamedev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした