トゥーンシェーディングを使った3Dアニメ表現

勉強したいので、残して起きます。

元 http://qiita.com/MuRo_CG/items/c417ef6d6cbeed3dd42b

はじめに


Unity5のトゥーンシェーディングを使った3Dアニメ表現(セルルック表現)の解説です。
b3a4f3fe-55e4-06a3-3c51-c45866d79e51.jpeg
左画像:変更前
右画像:変更後

Toon Shaderを使ってみる


Assets > Import Package > Effects のアセットをインポートをします。
ToonShaderとImageEffectが使えるようになりますので、まずはToon/Lit Outlineを使いながらマテリアルの調整を行います。
ポイントは3つ。
・影の付け方
・テクスチャの単純化
・色のバランス

影の設定


トゥーンシェーダーの設定を行う際に[ Toon Ramp ]の設定でシェーディングが大きく変わります。
4d5b6844-4192-4dcb-e0fd-60a6cc15219f.jpeg

こんな感じで変わります↓
5b8b33b1-07f6-a5f6-987f-0c5db7ab88c7.jpeg

今回はセルアニメ風な雰囲気で作ろうと思いますので、左から2番目のタイプで調整していきます。

テクスチャの設定


シェーダーの変更だけでは まだセルアニメっぽくないのでテクスチャの変更を行います。
テクスチャをグラデーション使った塗り方ではなくベタ塗りのタイプにしていきます。
5cddbbd6-7644-4e8c-a93d-253a0c535bfb.jpeg
ベタ塗りにするだけでなく、線を描き足すなどを入れるとより良くなります。

f6ec24e4-daa6-2d31-c8ca-3830ed08583e.jpeg
色のバランスなどを含めて調整を行った結果が右端の絵になります。
これでマテリアル設定は終わりです。

ライティングで影の調整


トゥーンシェーディングを使った時に「なんか3Dっぽい」とか「安っぽい」と感じることが多々あります。
それはなぜか?

ずばり影の付け方です。

影の付け方で印象が変わりますので、影が綺麗に入るようにライティングで調整します。
特に顔の影は違和感を感じやすいので、調整が難しければ顔には影が落ちないようした方が良いです。
76af35ff-b6cb-73fa-a774-afcbac111ccf.jpeg
左画像:Directional light 1つ
右画像:顔、服、体など別々のDirectional lightで調整

Image Effectを使ってみる


つぎはImageEffectを使って画面全体に雰囲気を作ります。いわゆる撮影処理と呼ばれる工程を入れていきます。
この処理を入れることでグッと空気感が出てきます。
主に [Bloom] と [Color Correction Curves] を使って調整します。

dce504fc-215f-4033-c8fb-ebf5983e8151.jpeg
ImageEffectなし
f76a060c-1daa-72a6-2fff-9fc85a95c4de.jpeg
Bloom(柔らかい光が入るように画面全体を馴染ませます)
a3a652d4-a533-fed9-f790-cdcb9541912e.jpeg
Color Correction Curves(画面全体の色バランスを整えます。ちょっとしたことで印象が変わるので繊細に調整する)

光源に合わせて光を入れる(アニメ用語で言うところのフレアです)


光源の向きにあわせてグラデーションを入れていきます。
撮影処理に関しては撮影虎之穴に色々とまとめられているので参考にすると良いです。スゴく勉強になります。

フレア用のテクスチャ素材↓
3e0787e1-118a-179b-d66f-c95f1528f467.jpeg
このテクスチャを板ポリゴンに貼り付けて使用します。
マテリアルはParticles/Additiveなどを使用。

e1abf1ea-7244-854b-3cec-1f66445bba55.jpeg
このようにカメラに対してフレア画像を空間に配置します。

e1110bbc-f82f-a560-5252-06bd43d52e1e.jpeg

光源を意識してフレアを入れたら完了です。

終わりに


今回はUnityを使った調整内容になっていますが、UE4など別のエンジンであろうと考え方は同じですので、自分の使いやすいツールで試してみてください。

0 Comments

Add your comment