【Unity】ユニティちゃんトゥーンシェーダを使ってイラスト風に仕上げる【UTS2】

Unity
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
クマ〜〜〜〜〜〜
マイケル
マイケル
今日はトゥーンシェーダを使って、3Dモデルをイラスト風にしてみるよ!
エレキベア
エレキベア
トゥーンシェーダって何クマ?
マイケル
マイケル
よくぞ聞いてくれたね!
それじゃトゥーンシェーダについて見ていこう!
スポンサーリンク

トゥーンシェーダとは

エレキベア
エレキベア
そもそもシェーダって何クマ??
マイケル
マイケル
シェーダは簡単にいうと描画方法を記述したプログラムのことで、
物体の見た目を変えることができるんだ!
エレキベア
エレキベア
物体の表示を決定するプログラムといった感じクマね
マイケル
マイケル
そのとおり!
その中でもトゥーンシェーダは、
平板で境界線のはっきりした陰影をつけることで
イラスト風に表示することができるシェーダ
のことをいうんだ!
トゥーンシェーダとは

モデルをイラスト風に表示するシェーダのこと!

エレキベア
エレキベア
最近のゲームやアニメで見るような、
アニメチックな表現も可能ということクマか・・・
マイケル
マイケル
そう考えたらワクワクするよね!
簡単にシェーダの表示の違いを見ていこう!

Standard Shader

マイケル
マイケル
まずはUnityでマテリアルを作成すると最初に設定される、
スタンダードなシェーダから!
Screenshot 2020 09 12 21 54 44
Screenshot 2020 09 12 21 51 48
マイケル
マイケル
こんな感じでめっちゃ3Dって感じです!
エレキベア
エレキベア
立体感があふれるクマね

Unlit Shader(陰影なし)

マイケル
マイケル
そして次はUnlitシェーダと呼ばれる、陰影処理を行わないシェーダ!
Screenshot 2020 09 12 21 54 47
Screenshot 2020 09 12 21 52 22
マイケル
マイケル
テクスチャで塗りつぶしただけの表示になります!
エレキベア
エレキベア
こっちは立体感があまり感じられないクマね・・・

ユニティちゃんトゥーンシェーダ(UTS2)

マイケル
マイケル
そして最後は今回紹介する、UTS2というトゥーンシェーダです!
Screenshot 2020 09 12 21 54 52
Screenshot 2020 09 13 12 12 49
マイケル
マイケル
立体感もあるイラスト風な仕上がりになりました!
エレキベア
エレキベア
これはすごいクマ〜〜〜!!
なんかリッチな感じがするクマ〜〜〜
マイケル
マイケル
それじゃ早速設定していこう!!

UTS2の導入

マイケル
マイケル
設定していくのは、先ほど紹介した
ユニティちゃんトゥーンシェーダ(UTS2)です!
マイケル
マイケル
Unity社が開発した無料のトゥーンシェーダで、
アニメやゲーム制作など様々な現場で使われている(らしい)です!
エレキベア
エレキベア
これが無料で使えるなんてすごいクマね・・・
マイケル
マイケル
導入方法は簡単で、下記サイトでダウンロードして・・・
Screenshot 2020 09 12 22 03 45


ユニティちゃんトゥーンシェーダー2.0

マイケル
マイケル
「UTS2_ShaderOnly_vX.X.X_Release.unitypackage」をUnityでインポート!
Screenshot 2020 09 12 18 38 22
マイケル
マイケル
以上で導入は完了です!
エレキベア
エレキベア
簡単2ステップクマ〜〜〜

UTS2の各設定

マイケル
マイケル
シェーダを使用するため、マテリアルのシェーダに「UnityChanToonShader/Toon_DoubleShadeWithFeather」を設定し、
BaseMapにテクスチャを設定しましょう!
Screenshot 2020 09 12 21 54 52のコピー
マイケル
マイケル
これで準備は完了!
各項目を設定していきます!
エレキベア
エレキベア
やったるクマ〜〜〜〜

影の設定

マイケル
マイケル
BaseMap隣の「No Shadow」ボタンをクリックし、「With 1st ShadeMap」「With 2nd ShadeMap」を有効にします。
これで影の設定ができるようになりました!
Screenshot 2020 09 13 12 18 42
エレキベア
エレキベア
ここに影の色を設定するクマね
マイケル
マイケル
1影、2影と言われる設定で、2影は1影よりも濃い影を設定するよ!
発色が自然になるように調整して色を設定しましょう!
Screenshot 2020 09 13 12 13 57
エレキベア
エレキベア
テクスチャに影がついた感じクマね
マイケル
マイケル
補足ですが、Scene作成時に追加されるDirectional LightのColorはデフォルトで肌色になっていますが、自然な発色にするため白に設定しておきましょう!
Screenshot 2020 09 13 8 41 03
エレキベア
エレキベア
承知クマ〜〜〜〜

アウトラインの設定

マイケル
マイケル
続いてアウトラインを設定します!
マイケル
マイケル
下記「Outline Width」で線幅、「Outline Color」で線の色を設定します。
Screenshot 2020 09 12 21 55 26
Screenshot 2020 09 13 12 13 41
マイケル
マイケル
するとこのようにオブジェクトの輪郭に線が表示されるようになります!
エレキベア
エレキベア
イラスト感が増したクマ〜〜〜〜

RimLightの設定

マイケル
マイケル
そして最後にリムライトの設定!
下記「RimLight」を有効にします!
Screenshot 2020 09 12 21 55 19
Screenshot 2020 09 13 12 12 49
マイケル
マイケル
するとこのように背後から光が当たったような効果が出て、立体感がでるようになります!
エレキベア
エレキベア
なんかリッチな感じクマ〜〜〜
マイケル
マイケル
「RimLight Mask Level」を下げると透明度があがって、絵に溶け込みやすくなるよ!

おわりに

マイケル
マイケル
というわけで今回はトゥーンシェーダを使ってみました!
どうだったかな??
エレキベア
エレキベア
思ってたより難しくなくて
簡単にクオリティが上がってすごいと思ったクマ〜〜〜
マイケル
マイケル
今回は簡単な3Dモデルに設定したけど、
もっと複雑な3Dモデルに設定すれば更にクオリティが上がりそうだね!
マイケル
マイケル
UTS2は今回紹介した設定以外にもいろいろ設定できるので、
マニュアルもチェックしてみてください!
エレキベア
エレキベア
これが無料はマジですごいクマ・・・
マイケル
マイケル
それでは今日はこの辺で!
アデュー!!

【Unity】ユニティちゃんトゥーンシェーダを使ってイラスト風に仕上げる【UTS2】 〜完〜

コメント