UnityChanToonShader2.0をつかって嫁のMMDモデルをセルルックにする

## はじめに

本文書は初めてユニティちゃんシェーダ2.0(以下UTS2)をつかう方向けに、シェーダのセットアップ手順などを説明する目的のものです。例示のためにMMDモデルをUnityにインポートしたモデルを使用します。ただし配布されているMMDモデルは作成者の方がUnityなどMMD以外での使用を許諾されない可能性が大いにありますのでそのあたりはちゃんと確認した上で挑戦しましょう。

## モチベーション

MMDモデラーの[鼈さん](https://twitter.com/supponf2211)が以前
![sp_tweet.png](https://qiita-image-store.s3.amazonaws.com/0/18557/71233091-3515-f70e-0d07-e26ad2c0bd5d.png)
とMMD外での利用に前向きな発言をされていたので、モデルをお借りしてユニティちゃんシェーダ2.0の学習のために利用させていただこうとおもいました。

なにより長門はカッコかわいいからな！！
![ngt_dl0.png](https://qiita-image-store.s3.amazonaws.com/0/18557/d7692f4c-1f52-dfef-c473-0018d8fbda80.png)

## 必要なアセットを用意する

### モデルを用意する

まずはモデルを用意しましょう。なによりまず嫁をお迎えすることでモチベーションがあがります。今回は[ニコニ立体](http://3d.nicovideo.jp/works/td20821)よりダウンロードしてきました。許諾を確認すると著作権表示が必要で改変はOKなようです。Unityでの利用は改変にはいるのか微妙なラインですがご本人のTweetを根拠として今回の使用は許諾されると解釈します。

というわけで本家
![cr_kadokawa.png](https://qiita-image-store.s3.amazonaws.com/0/18557/bde19b83-d22b-7ecf-45a1-c1a0fe0b91eb.png)
(C)KADOKAWA/DMM
今回のはゲームシステムはないのでOK。。。なはず

[モデル](http://3d.nicovideo.jp/works/td20821)の権利は[鼈氏](https://twitter.com/supponf2211)が有します。

これで仁義は通せたはず。。

### ユニティちゃんシェーダを用意する

つぎにUnityちゃん[公式配布ページ](http://unity-chan.com/download/)よりユニティちゃんシェーダ2.0をダウンロードします。

![utc.png](https://qiita-image-store.s3.amazonaws.com/0/18557/9e7a0b40-d265-c4a4-71e1-29e281055145.png)
© Unity Technologies Japan/UCL

本アセットはユニティちゃんライセンス( http://unity-chan.com/contents/license_jp/ )のもと提供されます。

### (オプション)モーションを用意する

今回は個人的な好みで[A]ddictionモーション( https://bowlroll.net/file/135518 )を使用させていただこうと思います。ちゃんとREADMEを確認。。

>■使用条件
>データを自分の責任で改造して使ってもかまいません。
ご利用は自己責任で権利者の方々の迷惑にならないよう常識の範囲内でお願いします。
商業利用は禁止です。

データ変換は許諾されている。。。と思う。

>■免責事項
>各自の責任においてご使用ください

大丈夫です。。

### MMDインポーターを用意する

Nora様( http://stereoarts.jp/ )が配布されている「MMD4Mecanim」を使用します。
バージョンは20170911のものをダウンロードしました。内包されているREADMEを確認しておきます。

> ■ 本ソフトウェア（またはコンポーネント）の商用でのウェブや雑誌掲載について

商用ではありません！

>■ 変換モデルとモーションの使用について
>（キャラクターイメージを損なう使用は避けてください。）

ベストをつくします！！

>商用・非商用問わず、他者の著作物（モデル・モーション・楽曲など）が含まれている場合は、原則として公開・配布しないでください。

ここまでのアセットについては許諾範囲内...なはず
長々となりましたが、権利まわりはちゃんと確認しました。
今回の利用では権利者さまの権利を侵害することはないはずです。

## プロジェクトをセットアップする

まず普通にUnityプロジェクトを作成します。それでは用意したアセットを順次インポートしていきましょう。

### MMD4Mecanimをインポート

ダウンロードしたzipを解凍し、中にあるMMD4MechanimをUnityのProjectビューより [Import Package]＞[Custom Package...]でインポートします。

### モデルのインポート

MMD4Mechanimをインポートしてからモデル＆モーションをインポートします

![pmx.png](https://qiita-image-store.s3.amazonaws.com/0/18557/ab301be4-e64f-9569-c256-56b1d8a21b3a.png)

解凍した内容をフォルダごとUnityのProjectビューに投げ込んでインポートします。
インポートがおわったら(モデル名).MMD4Mecanimアセットを選択します。インスペクターに使用にあたってのライセンス条項が表示されるので全部ちゃんと確認した上で「同意する」ボタンをおします。

![pmdimport.png](https://qiita-image-store.s3.amazonaws.com/0/18557/69581bb3-1601-56b4-c9b3-ce98ef2bcf95.png)

![selectvmd.png](https://qiita-image-store.s3.amazonaws.com/0/18557/c9c9d35a-d750-e662-e1a1-0a3f6af764ed.png)

一緒にインポートしてきたモーションをVMDとして設定します。棒立ちでいいなら不要です。

設定できたらProcessをおします。黒窓がでてしばらく処理が走るはずです。
処理がおわるまで全裸待機しましょう。

完了したらFBXファイル（青い箱）ができているはずなのでこれをヒエラルキーにつるして、カメラを嫁がよく見える位置に移動させましょう。

![initial.png](https://qiita-image-store.s3.amazonaws.com/0/18557/7b333ab5-1452-597c-1af4-603c6bec77d5.png)

ビフォアーを確認しておきましょう。

![before2.png](https://qiita-image-store.s3.amazonaws.com/0/18557/0a4e86f7-e567-d7fe-94e8-c51e81737789.png)

![before.png](https://qiita-image-store.s3.amazonaws.com/0/18557/4558f796-c26a-637b-6b5e-f23eb01f6640.png)

いやもう十分かわいいからこれでゴールでいいんじゃないか？という気持ちを抑えて先にすすみます。

### UTS2のインポート

ダウンロードした内容のうち「UTS2_ShaderOnly_v2.0.3」をクリックしてインポートします。
とりあえず全部にチェックついた状態でインポートしましょう。
![utsimport.png](https://qiita-image-store.s3.amazonaws.com/0/18557/962b0cc8-9263-4752-9d7b-5e54b41de719.png)

## 顔をUTS2マテリアルにする

さあやっとUTSの話にはいります。やはりお顔のお化粧あたりがやる気がでるのでそのあたりからやりましょう。

![facemat.jpg](https://qiita-image-store.s3.amazonaws.com/0/18557/4ef4e0a4-7dbd-234b-aaf2-c2528d42df40.jpeg)

ヒエラルキーのU_Char_Xから顔っぽいマテリアルをつきとめます。
どうやら「2.kao」のようです。

![beforemat.png](https://qiita-image-store.s3.amazonaws.com/0/18557/db6e2043-1ba2-b077-3bc6-f65c443b6df7.png)

### シェーダをさしかえる

まずシェーダをUTSのものにさしかえます

![changeshader.png](https://qiita-image-store.s3.amazonaws.com/0/18557/b258bccd-373d-8ae8-7c06-c7bd3a11a5d6.png)

とりあえず処理の軽そうなMobileの中からToon_ShadingGradeMapを選択します。
ぶっちゃけ使いこなせてないのでどれつかっても一緒な気はします。が今回は


![initialshader.png](https://qiita-image-store.s3.amazonaws.com/0/18557/917c9535-2fbc-8610-21f3-6f3f6080a6ba.png)

選択すると上図のようにテクスチャがはがれて真っ白になってしまうかとおもいます。テクスチャをはってあげましょう。

... の前にひと手間必要です。

### テクスチャをフラットな塗りにかえる

アニメっぽくするにはもとから塗ってある影を排除したほうが、それっぽくなります。ペイントでもひらいてフラットな塗りのテクスチャに変更しましょう。図画工作の点数が低くたって大丈夫です愛さえあれば最低限には塗れます。

ビフォー
![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/18557/f18c22f3-b9f8-7d9a-16b2-0bcefcf8a8b1.jpeg)
アフター
![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/18557/b9edf125-ac3c-7b6c-b4da-3c3ab0a45e4e.jpeg)

モデラーが苦心して塗ったテクスチャを塗りつぶすのはかなり罪悪感があります。ですが「改変可」の許諾があったことを心の支えに塗りましょう。愛ゆえなのだ。。。

### テクスチャをはる

![kaotex.png](https://qiita-image-store.s3.amazonaws.com/0/18557/291a32b4-6dd0-54ba-4b28-4244403a1aea.png)

BaseMap、1st_ShadeMap、2nd_ShadeMapに先ほどつくったフラットぬりなテクスチャを張りましょう。（テクスチャをD&Dするだけ）

### 影色を指定する

![setshadowcolor.png](https://qiita-image-store.s3.amazonaws.com/0/18557/68d12c06-7a01-25e4-5f43-25a8e77e89d4.png)

テクスチャをはったら1st_ShadeColor、2nd_ShadeColorに適当ないろをいれましょう。なるべく派手な色がいいです。おそらく嫁の顔に派手な色が塗られて卒倒しかけるとおもいます。耐えましょう。

### 影の調整をする

インスペクタを少しスクロールするとXXX_ShadeColor_Step&XXX_ShadeColor_Featherの項目があるかと思いますのでこれをいじります。

まず1st_Color_Stepを陰っぽいところを覆うくらいにし、そのあと2nd_Color_Stepをその陰っぽいところの中でも影っぽそうなところを覆うくらいまで大きくしてみるといいんじゃないでしょうか。

Featherの項目はそれぞれの影の境界のボケなので適当に調整します。

![setshadowparam.png](https://qiita-image-store.s3.amazonaws.com/0/18557/30038b02-c90c-da2a-a258-5135ffc99d7c.png)

### 影色の調整をする

最初に派手な色にしてしまっていたShadeColorを自然な色にします。自然ってなんでしょう、僕にはわかりません。

![adjustcolor.png](https://qiita-image-store.s3.amazonaws.com/0/18557/02e863c3-aca3-ab2e-82f0-2c9a13f1e45d.png)

## 髪の毛のマテリアルをUTS2マテリアルにかえる

顔に続いて乙女の命、髪を調整します。顔と同じようにマテリアルを確認しましょう。

![heaircheet0.png](https://qiita-image-store.s3.amazonaws.com/0/18557/ac0553b5-02f8-51cb-d264-84a6a97f9437.png)

多い！！！さすがに一個一個調整すると心が折れてしまいそうなので、今回は全部同じマテリアルにさせてもらいます。個別のマテリアルが設定されている項目をすべて同じマテリアル「21.maegami1」に変更させてもらってから編集を開始します

![heaircheet.png](https://qiita-image-store.s3.amazonaws.com/0/18557/22f05b92-c512-7ebd-ce1d-a08bfc972630.png)


### 影色の設定＆調整をする

手順は顔とおなじように影色、影範囲、影色調整...をおこないます。髪みたいに単色でもそこそこわかる場合はテクスチャを指す前に髪色範囲とか調整すると楽な気がします。気がします。。

![haircolor.png](https://qiita-image-store.s3.amazonaws.com/0/18557/d15453d9-fc09-6719-7843-09ffef212cac.png)

### つやをつける

さらに下のほうにスクロールしていき、MatCapの項目をいじります

MatCap_Samplerにこんなかんじのtextureをはってあげます。髪の色で塗ったあとに半透明でこうスッと線を引いてあげる感じです。

![ngt_HiLight_Matcap.png](https://qiita-image-store.s3.amazonaws.com/0/18557/b9f4035a-d738-b09a-d4e0-c6adf1ed4318.png)

MatCapにチェックをつけてMatCap_Samplerにtextureをさしてあげると髪につやがでるかとおもいます。もう少し丁寧にいじらないとなんかプラスチックぽい見た目になってしまうので、お気に召さない場合ははずしましょう。

その少し下にアウトライン、いわゆる線画の項目があるのでいい感じに線を調整しましょう。
線を結構太目にしてもきれいに線が引かれます。実際スゴイ。

![hair.png](https://qiita-image-store.s3.amazonaws.com/0/18557/4e99fab8-5405-9767-acd0-e6cb0847a13d.png)

## 残りを頑張る

![materials.png](https://qiita-image-store.s3.amazonaws.com/0/18557/2be4689e-78fc-2cc0-8bfa-cfaea4e38b68.png)

いくつかマテリアルをまとめるとだいたい残りが10個ほど・・がんばりましょう。。

## 完成？

たまにプレイしてみて嫁の具合を確認しましょう。再生中に一時停止して光源の向きなどを調整して自分の好みになっているか確認しましょう。

![after_2.png](https://qiita-image-store.s3.amazonaws.com/0/18557/4b15fbc9-c5d0-1c24-030e-21668cc74e74.png)

かわいい。。

![after_3.png](https://qiita-image-store.s3.amazonaws.com/0/18557/06b1a3f0-e541-636f-e0f5-5d987c91eb6c.png)

かっこいい。。。

![after_4.png](https://qiita-image-store.s3.amazonaws.com/0/18557/ccd5d10d-c710-a9c5-90a1-daf2f9245f6f.png)

しゅき。。

リアルタイムに確認しながら塗り味を調整できると捗りますね。自分が満足するまでやりましょう。

Mobile向けのシェーダですらまだつかってない項目がいっぱいあるのがお分かりいただけてるかとおもいますが、この沼はすごく深いです。満足するまでやりましょう。

## まとめ

UTS2は簡単ないくつかの項目をいじるだけで、元テクスチャ、トゥーンテクスチャやスフィアなどをいじりながら調整していたのがだいぶん楽に、しかもリアルタイムに確認しながらできるのでとても楽しいです。(許可されているならば)お手元の嫁モデルと戯れてみてはいかがでしょうか。

## 参考
- [Unity Chan!]( http://unity-chan.com/ )
- [長門＋艤装 - ニコニ立体](http://3d.nicovideo.jp/works/td20821)
- [Stereoarts Homepage](http://stereoarts.jp/)
- [Unityでのアニメ表現まとめ]( https://twitter.com/i/moments/781667626942603265 )