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

# **はじめに**
Unity5のトゥーンシェーディングを使った3Dアニメ表現（セルルック表現）の解説です。

![アニメ処理解説_表紙.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/b3a4f3fe-55e4-06a3-3c51-c45866d79e51.jpeg)
左画像：変更前
右画像：変更後


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

## 影の設定
トゥーンシェーダーの設定を行う際に[ Toon Ramp ]の設定でシェーディングが大きく変わります。
![Toon設定.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/4d5b6844-4192-4dcb-e0fd-60a6cc15219f.jpeg)
こんな感じで変わります↓
![Toonグラデーション設定.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/5b8b33b1-07f6-a5f6-987f-0c5db7ab88c7.jpeg)
今回はセルアニメ風な雰囲気で作ろうと思いますので、**左から2番目のタイプ**で調整していきます。



## テクスチャの設定
シェーダーの変更だけでは まだセルアニメっぽくないのでテクスチャの変更を行います。
テクスチャを**グラデーション使った塗り方**ではなく**ベタ塗り**のタイプにしていきます。
![テクスチャ変更.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/5cddbbd6-7644-4e8c-a93d-253a0c535bfb.jpeg)
ベタ塗りにするだけでなく、**線を描き足す**などを入れるとより良くなります。
<br>

![トゥーン設定まとめ.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/f6ec24e4-daa6-2d31-c8ca-3830ed08583e.jpeg)
色のバランスなどを含めて調整を行った結果が**右端の絵**になります。
これでマテリアル設定は終わりです。



## ライティングで影の調整
トゥーンシェーディングを使った時に「なんか３Dっぽい」とか「安っぽい」と感じることが多々あります。
それはなぜか？

 ずばり**影の付け方**です。

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


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

![ImageEffect解説_01.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/dce504fc-215f-4033-c8fb-ebf5983e8151.jpeg)
ImageEffectなし


![ImageEffect解説_02.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/f76a060c-1daa-72a6-2fff-9fc85a95c4de.jpeg)
**Bloom**（柔らかい光が入るように画面全体を馴染ませます）

![ImageEffect解説_03.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/a3a652d4-a533-fed9-f790-cdcb9541912e.jpeg)
**Color Correction Curves**（画面全体の色バランスを整えます。ちょっとしたことで印象が変わるので繊細に調整する）


## 光源に合わせて光を入れる（アニメ用語で言うところの**フレア**です）
光源の向きにあわせてグラデーションを入れていきます。
撮影処理に関しては[撮影虎之穴](http://www.gainax.co.jp/anime/gurren-lagann/tora.html)に色々とまとめられているので参考にすると良いです。スゴく勉強になります。


フレア用のテクスチャ素材↓
![Flare.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/3e0787e1-118a-179b-d66f-c95f1528f467.jpeg)
このテクスチャを**板ポリゴン**に貼り付けて使用します。
マテリアルは**Particles/Additive**などを使用。

![フレア図.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/e1abf1ea-7244-854b-3cec-1f66445bba55.jpeg)
このようにカメラに対してフレア画像を**空間に配置**します。

![フレア挿入.jpg](https://qiita-image-store.s3.amazonaws.com/0/100182/e1110bbc-f82f-a560-5252-06bd43d52e1e.jpeg)
光源を意識してフレアを入れたら完了です。
今までの工程を踏まえて制作したものを【YouTube版】と【WebPlayer版】でアップしてあります。興味があれば見てください。
[YouTube版](https://youtu.be/2nrVDDusxQ0 )、[WebPlayer版](http://urx2.nu/oY4f)　
※WebPlayerはGoogle Chromeで見れないのでInternet Explorer、Firefox、Safari などで視聴してください。


# **終わりに**
今回はUnityを使った調整内容になっていますが、UE4など別のエンジンであろうと考え方は同じですので、自分の使いやすいツールで試してみてください。
<br>
<div><img src="http://unity-chan.com/images/imageLicenseLogo.png" alt="ユニティちゃんライセンス"><p>このコンテンツは、『<a href="http://unity-chan.com/contents/license_jp/" target="_blank">ユニティちゃんライセンス</a>』で提供されています</p></div>