UE4でセルシェーディング
UE4でアニメルックな絵を出すためにやったことをまとめておきます。
いろいろな試行錯誤にプロ生ちゃんを使いました。なお使用にあたっては利用ガイドライン、ライセンスを確認しましょう。
UE4でアニメルックな絵を出す
アニメ的な絵を再現するうえで、以下のことをUE4で実現する必要があります。
- アウトライン
- 陰影が二値化されたライティング（セルシェーディング）
- 髪の毛のハイライト・輪郭を覆うリムライト
左がアウトライン+セルシェーディング+髪の毛ハイライト+局所的なリムライトを適用したもの、右がテクスチャを自己発光につないだだけのもの。
アウトライン
アウトラインの描画にはポストプロセスでラプラシアンフィルタをかけます。
ラプラシアンフィルタの仕組みに関する説明はこちらなど。
UIImageにラプラシアンフィルタをかけてエッジ検出をする - きたくち
まずは下準備としていくつかマテリアル関数を作ります。以下の記事を参考にさせていただきました。
開発日誌: 【UE4】セルっぽいルックを頑張ってみる その４（エッジ）
MF_GetPixNormal(あるピクセルの法線を取得するマテリアル関数)
MF_GetPixDepth(あるピクセルのデプスを取得するマテリアル関数)
MF_LaplaceNormal(ノーマルによる四近傍ラプラシアンフィルタ)
MF_LaplaceDepth(デプスによる四近傍ラプラシアンフィルタ)
次にこれらを使用してポストプロセスマテリアルを作ります。
PP_ToonEdge
Normal_EdgeValは1に近づくほど、Depth_EdgeValは小さくなればなるほど、エッジが検出されやすくなります。また、デプス情報を用いて、カメラから離れれば離れるほどアウトラインの色を薄くする処理も入っています。
これをポストプロセスとして適用させ、アウトラインを表示したいもののカスタムデプスステンシルを1以上に設定すると、アウトラインが表示されます。
奥がエッジあり、手前がエッジなし。
アンチエイリアスがTemporal AAだと線がぶれてしまうので、FXAA、200%に設定すると綺麗になりますが非常に重いのでここはさらに何か工夫が必要です。。。
セルシェーディング
参考にさせていただいたのはこちら
Cel Shading Post Process - Epic Wiki
とこちら
UE4 比較的安価な手法でトゥーン（セル）シェーディングをやってみる - Let's Enjoy Unreal Engine
ポストプロセス用にマテリアルを作ります。
PP_CelShader
PostProcessInput0を拡散色で割ってライティングを取り出し、それを二値化させています（これによる弊害として、反射やブルーム効果が使えなくなります）。
フォトショで以下のような1x128のテクスチャを作り、上のマテリアルに設定します。
スカイスフィアがセルシェーディングされて真っ黒になるのを防ぐために、距離が極端に遠いものはデプス情報を用いてマスクしてあります。また、以下の記事ではカスタムデプスを用いて選んだものだけセルシェーディングをやっています。
UE4 トゥーン（セル）シェーディングをしたいものに対してのみかける方法 - Let's Enjoy Unreal Engine
これもポストプロセスとして適用させるとこれが、
こうなります。どちらもマテリアルはすべてテクスチャを基本色につないだだけのものです。影がグラデーションから二値化されています。
これからさらに、テクスチャを単色ベタ塗にしてアニメらしさを上げます。ポストプロセスでコントラストを上げてさらにメリハリをつけてもいいと思います。
今回ジャケットやシャツ、肌、髪の毛、ヘアピンなどは単色のマテリアルを作り、スカートやソックスはテクスチャを以下のように加工してベタ塗にしたものを使いました。
スカート加工前
スカート加工後
テクスチャ加工前とテクスチャ加工後の比較
髪の毛のハイライト・輪郭を覆うリムライト
次は髪の毛にアニメでよくあるハイライトを乗せます。また輪郭にそってうっすらと色を乗せてリムライトもつけます。
またまた参考にさせていただきました↓
開発日誌: 【UE4】セルっぽいルックを頑張ってみる その３（ハイライト）
髪の毛のハイライトとリムライト用のマテリアル関数を作ります。どちらの関数も、カメラの向きベクトルとピクセルの法線の向きベクトルの内積を計算し、ある一定の角度のピクセルにハイライト色を加算しています。
MF_HairSpecular
MF_ToonRimLight
これらを合わせたマテリアルを作ります。スイッチパラメータを使い、ハイライト・リムライト両方とリムライト単体を切り替えできるようにしています。また、顔には影を落とさないほうが自然に見えるので、これもスイッチパラメータを使って自己発光に入力できるようにしています。
M_Toon
これを親としてマテリアルインスタンスを作り、パラメータを調節してお好みのハイライトを乗せてください。
下の髪の毛は
HairSpec_Alpha: 0.183
HairSpec_Power: 2.320
HairSpec_TargetDot: 0.492
HairSoec_TargetDotRange: 0.1
RimLight_Alpha: 0.2
RimLight_Power: 1.0
というパラメータになっています。また顔はCastShadowをfalseにして影を受けないようにしています。
アウトラインの強調
これらをすべて適用させるとこんな感じです。これでだいたいは終わりですが、最後にモデルに手を加えて、細かなアウトラインを出していきたいと思います。
アウトラインを強調したいところの近くに辺を追加していきます。
これによって、
Before
After
エッジが強調されました。ただしこの方法は場合によっては爆発的に頂点数が増えることもあるので、特にアニメーションするキャラクターなどは要注意です。テクスチャにエッジを書き込むという方法もいいかもしれません。
これで完成です！
これから試してみたいこと・課題など
- 目や口などの顔のパーツをよりアニメらしく改良する
- 服のしわを何らかの方法で増やす
- FXAA200%は重いので何か考える
- 色調などを調節してよりアニメに近づける
- ブルームと共存させる方法を考える
質問等あればツイッターでどうぞ。
