読者です 読者をやめる 読者になる 読者になる

Transition

プログラミング・数学の学習の記録

UE4でセルシェーディング

UE4

UE4でアニメルックな絵を出すためにやったことをまとめておきます。

いろいろな試行錯誤にプロ生ちゃんを使いました。なお使用にあたっては利用ガイドライン、ライセンスを確認しましょう。

pronama.azurewebsites.net

UE4でアニメルックな絵を出す

アニメ的な絵を再現するうえで、以下のことをUE4で実現する必要があります。

  • アウトライン
  • 陰影が二値化されたライティング(セルシェーディング)
  • 髪の毛のハイライト・輪郭を覆うリムライト

f:id:idetatsu:20160531222038p:plain

左がアウトライン+セルシェーディング+髪の毛ハイライト+局所的なリムライトを適用したもの、右がテクスチャを自己発光につないだだけのもの。

アウトライン

 アウトラインの描画にはポストプロセスでラプラシアンフィルタをかけます。

ラプラシアンフィルタの仕組みに関する説明はこちらなど。

UIImageにラプラシアンフィルタをかけてエッジ検出をする - きたくち


まずは下準備としていくつかマテリアル関数を作ります。以下の記事を参考にさせていただきました。

開発日誌: 【UE4】セルっぽいルックを頑張ってみる その4(エッジ)

MF_GetPixNormal(あるピクセルの法線を取得するマテリアル関数)

f:id:idetatsu:20160531181340p:image

MF_GetPixDepth(あるピクセルのデプスを取得するマテリアル関数)

f:id:idetatsu:20160531181320p:image

MF_LaplaceNormal(ノーマルによる四近傍ラプラシアンフィルタ)

f:id:idetatsu:20160531222119p:plain

MF_LaplaceDepth(デプスによる四近傍ラプラシアンフィルタ)

f:id:idetatsu:20160531222145p:plain

 

次にこれらを使用してポストプロセスマテリアルを作ります。
PP_ToonEdge

f:id:idetatsu:20160531220218p:image

Normal_EdgeValは1に近づくほど、Depth_EdgeValは小さくなればなるほど、エッジが検出されやすくなります。また、デプス情報を用いて、カメラから離れれば離れるほどアウトラインの色を薄くする処理も入っています。

 これをポストプロセスとして適用させ、アウトラインを表示したいもののカスタムデプスステンシルを1以上に設定すると、アウトラインが表示されます。

f:id:idetatsu:20160531181832p:image

奥がエッジあり、手前がエッジなし。
アンチエイリアスがTemporal AAだと線がぶれてしまうので、FXAA、200%に設定すると綺麗になりますが非常に重いのでここはさらに何か工夫が必要です。。。

f:id:idetatsu:20160531183051p:image

セルシェーディング

参考にさせていただいたのはこちら

Cel Shading Post Process - Epic Wiki

とこちら

UE4 比較的安価な手法でトゥーン(セル)シェーディングをやってみる - Let's Enjoy Unreal Engine

 

ポストプロセス用にマテリアルを作ります。
PP_CelShader

f:id:idetatsu:20160531222212p:plain

PostProcessInput0を拡散色で割ってライティングを取り出し、それを二値化させています(これによる弊害として、反射やブルーム効果が使えなくなります)。
フォトショで以下のような1x128のテクスチャを作り、上のマテリアルに設定します。

f:id:idetatsu:20160531185927p:image

 スカイスフィアがセルシェーディングされて真っ黒になるのを防ぐために、距離が極端に遠いものはデプス情報を用いてマスクしてあります。また、以下の記事ではカスタムデプスを用いて選んだものだけセルシェーディングをやっています。

UE4 トゥーン(セル)シェーディングをしたいものに対してのみかける方法 - Let's Enjoy Unreal Engine

これもポストプロセスとして適用させるとこれが、

f:id:idetatsu:20160531193315p:image

こうなります。どちらもマテリアルはすべてテクスチャを基本色につないだだけのものです。影がグラデーションから二値化されています。

f:id:idetatsu:20160531193401p:image

これからさらに、テクスチャを単色ベタ塗にしてアニメらしさを上げます。ポストプロセスでコントラストを上げてさらにメリハリをつけてもいいと思います。

今回ジャケットやシャツ、肌、髪の毛、ヘアピンなどは単色のマテリアルを作り、スカートやソックスはテクスチャを以下のように加工してベタ塗にしたものを使いました。

スカート加工前

f:id:idetatsu:20160531194404p:image

スカート加工後

f:id:idetatsu:20160531194426p:image

テクスチャ加工前とテクスチャ加工後の比較

f:id:idetatsu:20160531195000p:image

髪の毛のハイライト・輪郭を覆うリムライト

次は髪の毛にアニメでよくあるハイライトを乗せます。また輪郭にそってうっすらと色を乗せてリムライトもつけます。

またまた参考にさせていただきました↓

開発日誌: 【UE4】セルっぽいルックを頑張ってみる その3(ハイライト)

 

髪の毛のハイライトとリムライト用のマテリアル関数を作ります。どちらの関数も、カメラの向きベクトルとピクセルの法線の向きベクトルの内積を計算し、ある一定の角度のピクセルにハイライト色を加算しています。

MF_HairSpecular

f:id:idetatsu:20160531222251p:plain

MF_ToonRimLight

f:id:idetatsu:20160531222319p:plain

これらを合わせたマテリアルを作ります。スイッチパラメータを使い、ハイライト・リムライト両方とリムライト単体を切り替えできるようにしています。また、顔には影を落とさないほうが自然に見えるので、これもスイッチパラメータを使って自己発光に入力できるようにしています。

M_Toon

f:id:idetatsu:20160531222334p:plain

これを親としてマテリアルインスタンスを作り、パラメータを調節してお好みのハイライトを乗せてください。

下の髪の毛は
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にして影を受けないようにしています。

f:id:idetatsu:20160531203002p:image

アウトラインの強調

f:id:idetatsu:20160531204534p:image

これらをすべて適用させるとこんな感じです。これでだいたいは終わりですが、最後にモデルに手を加えて、細かなアウトラインを出していきたいと思います。

モデルをBlenderなどのモデリングツールで開きます。

f:id:idetatsu:20160531205526p:image

アウトラインを強調したいところの近くに辺を追加していきます。

f:id:idetatsu:20160531205736p:image

これによって、
Before

f:id:idetatsu:20160531205807p:image

After

f:id:idetatsu:20160531205843p:image

エッジが強調されました。ただしこの方法は場合によっては爆発的に頂点数が増えることもあるので、特にアニメーションするキャラクターなどは要注意です。テクスチャにエッジを書き込むという方法もいいかもしれません。

これで完成です!

f:id:idetatsu:20160531210324p:image

これから試してみたいこと・課題など

  • 目や口などの顔のパーツをよりアニメらしく改良する
  • 服のしわを何らかの方法で増やす
  • FXAA200%は重いので何か考える
  • 色調などを調節してよりアニメに近づける
  • ブルームと共存させる方法を考える

質問等あればツイッターでどうぞ。

twitter.com