Junpei Qawasaki

博報堂アイ・スタジオという会社でテクノロジーをベースに新規事業とかインタラクティブなものとかを色々とやっております

【30分で出来る】UnityのToonShaderの要点だけ説明とアニメ風モデルのつくり方。

ちょっと直近でVTuberぽいのをやる事があって、unityのToonShaderを触ってました。
使ったのは「UnityChanToonShader ver2(以降UTS2)」で、ドキュメントもサンプルも充実してて大変ありがたいんですが、概要を把握するまでゼロからだとちょっと時間かかるんですね。なので例によって「とりあえず感覚的に知りたい」って人向けにざっくりお試しの手順を書き残していきます。

そもそもToonShaderとは

いわゆる「アニメぽい」表現をする為のUIシェーダー。同じモデルでこんな変化が出せます。
f:id:jkawasaki:20190617135653p:plain
微差に見えるけど、解像度の高いディスプレイとかVR環境とかだと結構な差があります。

で、このUTS2、3Dモデルの見た目を良い感じにする事が出来るだけでなく、自己発光とか光や影の表現も色々出来るので汎用性高いです。
最後にもう一回出てきますが、今回は触った結果は、こちら。

f:id:jkawasaki:20190617155927p:plain
仕上がり例(所要時間1hくらい)

これくらいのカスタム出来るまでの手順を書きたいと思います。

UTS2のDLはUnity-Chanのサイトか、Githubのどちらかから持ってきてくださいませ。
日本語のreadmeはこちら



さっそく、使ってみましょう

1. ShaderOnlyパッケージをダウンロード

今回は最短ルートを行くので、余計なものが入っていないシェーダーだけのパッケージを入れます。
前述したUTS2全体だと色んなものが入っているので、個人のプロジェクトに抜き出すのは結構大変です。シェーダーだけの.packageも落とせるので、それを使います。ここから.packageをダウンロードして適用したいプロジェクトに適宜インポートしましょう。
ここでは空のプロジェクトにユニティちゃんのモデルだけ入れたものを使っていきます。


2 とりあえずマテリアルに全アタッチ

シェーダーは適用したいマテリアルにアタッチして使います。
UTS2はアタッチしただけで劇的に変わるものじゃないのですが、まずはアタッチしましょう。
unity-chanの場合は「body, eye,hair, skin, face」あたりです。Projectフォルダで検索して右クリックして場所を探ればたどり着けるので、全部選択状態にして一括で「UnityChan ToonShader/Toon_DoubleShadeWithFeather」を適用します。

f:id:jkawasaki:20190617141330p:plain
適用するとまずはぐちゃぐちゃになる

今は、これでokです。次の手順で誤った部分を直していきます。

3 間違えてるパラメーターを直す

3-1. ”BasicColorStep”を0に
まず白く出てる影を消します「body, face, skin, hair」のマテリアルを選んでBasic LookDevsの”BasicColorStep”を0にします

f:id:jkawasaki:20190617141230g:plain
余計な影を一旦除去

3-2. 「Body」と「Hair」のCullingModeを”Culling Off”にします

3-3. 「mat_cheek」のシェーダーをUnityChanToonShader/NoOutline/ToonColor_DoubleShadeWithFeather_Transparentに変更して、"Use baseMap α as Clipping Mask”をONにします(透過の云々で必要なので)
ONするとチークが消えますが、”ClippingLevel"を動かすと浮き出てきます。これと”Tranaparency Level”でチークを良い感じに設定します

f:id:jkawasaki:20190617141838g:plain
値を変えるとチークの濃度が変わる

3-4. 「eye」のマテリアルにUnityChanToonShader/NoOutline/ToonColor_DoubleShadeWithFeather_TransClippingに変更して、"Use baseMap α as Clipping Mask”をONにします。cheekと微妙に違うのでご注意を。これで黒目と白目がちゃんと分かれます。

f:id:jkawasaki:20190617145346g:plain

ここまでで大まかな設定は完了

ToonらしいUIを調整していく

以下の3点をいじると良い感じになります。

①影の当たり具合(body,hair,skin,face)
Basic Liikdevs:Shading Step and Feather SettingsのBasicColor Stepで影の当たり具合を調整。ShadeFeatherで影をなじませる
f:id:jkawasaki:20190617164902g:plain
ほんとはMesh分割してそれぞれにマテリアルつけて調整する方が良くなるぽいですが、今回は割愛。

②RimLight(body,hair)
RimLightSettingのColorでオーラ色を調整。Powerのスライダでオーラの出具合を調整


③アウトライン(body,hair,skin,face)
OutlineSettingのWidthとColorで調整
f:id:jkawasaki:20190617170444g:plain

もっと細かいことを知りたい、という方はこちらのチュートリアル動画が良いです。
字幕も入ってて細かく解説されてるのですが初見だとちょいちょい止めながらセッティングしなきゃなので、時間はかかります。

出来上がり

で、上記の調整をコツコツと仕上げたらこんな感じになります。
f:id:jkawasaki:20190617161120g:plain

良く見ると顔の裏面がピンクがかってますね。これはfaceのマテリアルの影をちゃんと微調整出来てないのが原因です。
UTS2はInspectorでいじりながらリアルタイムに調整出来るのが良さで、カメラを回すスクリプトを適用すればこんな背面もちゃんと確認しながらやれるのでおすすめです。

そんなこんなで汎用的にするために自己発光のプロトタイプも書ければと思ったけど、思いの外長くなってしまったのでまた次回に。


では。