Unity3D
Unity
Shader

ユニティちゃんトゥーンシェーダーを触ってみた

はじめに

UniteTokyo2018に参加して、トゥーンシェーダーやって見たいなと思ってましたが、やっと手を出してみたので記事にしました。
シェーダー初心者なので、間違い等あるかも知れません。
こうした方が良いよというアドバイスも募集しています。

やりたかったこと

シェーダーを使った絵作りには、こんな感じにしたいっていう目標ないと、終わりが見えないのでざっとこんな感じにしたいなっていうイメージ共有しておきます。

gg.jpg

こんなアニメ風な感じにしたかったです。

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

Unity標準のトゥーンシェーダーでも良い気がしたのですが、もともと触ってみたかったというのもあり、ユニティちゃんトゥーンシェーダーを採用しました。以下、公式の引用です。

「ユニティちゃんトゥーンシェーダー」は、セル風3DCGアニメーションの制作現場での要望に応えるような形で設計された、映像志向のトゥーンシェーダーです。
セル風3DCGアニメーションの制作現場向けの設計になっていますので、いわゆる「影」は色設計担当者が作成しやすいような「影色設定」を使う方式であり、かつ各パーツの形状(フォルム)を強調する「影」や、キャラクターのデザイン上、光源の位置や強さとは関係なく、必ず必要となる「影」が出しやすいように設計されています。

こちらからDLできます。

参考になりそうなもの

ユニティちゃんトゥーンシェーダーはおろか、シェーダーやUnity詳しくないため、色々参考になりそうなものを集めました。

シェーダーとは何?という方向けの動画。長いですが、最初の方をみればイメージは掴めるはず。
【Unite 2017 Tokyo】シェーダープログラミング入門!カスタムシェーダー、作るで!

マニュアル
DLしたユニティちゃんトゥーンシェーダーのManualフォルダにマニュアルが入っているので読みましょう。

基本的な使い方の動画
ユニティちゃんトゥーンシェーダーの基本的な設定の仕方
トゥーンシェーダー・マニアクス2 〜ユニティちゃんトゥーンシェーダー2.0徹底解説〜

触ってみた流れ

  1. DLしたシェーダーをプロジェクトにインポート
    DLしたユニティちゃんトゥーンシェーダーのToonフォルダをUnityプロジェクトにドラッグ&ドロップしてインポートします。

  2. ColorSpaceをリニアに変更
    File>Build Settings>Player Settingsから
    Color Space⇒Linearを選択。
    ColorSpaceに関する公式ドキュメント
    変更する理由は下記

    ガンマカラースペースでも使用できますが、ガンマカラーの特性上、陰影の階調変化が強めに出る傾向があります

  3. キャラクターモデルのインポート
    何でもいいのでモデルを用意します。今回はど定番のユニティちゃんです。ユニティアセットストアから無料で利用できます。モデルはシーン上に配置しておきましょう。

  4. Directional Lightを白に変更
    プロジェクト作成時のDirectional Lightは黄色っぽくなっているので白色にします。

  5. トゥーンシェーダーの設定
    シーン上に配置したunitychanプレハブ下のcharacter1_Reference及びmesh_rootに格納されているオブジェクトのinspector上でshaderの変更ができます。
    スクリーンショット 2018-07-01 23.50.25.png
    ここでシェーダーの種類が豊富すぎて、何を使えば良いのかわからないと思います。私もぶっちゃけ分かりません。が、ざっと調べた感じでの使い分けを書いておきます。

まず大まかに下記2系統に別れています。

  • Toon_DoubleShadeWithFeather
  • Toon_ShadingGradeMap

上記2つのうち、Toon_DoubleShadeWithFeatherが標準シェーダーです。
Toon_ShadingGradeMapに関しては、下記の説明があります。

通常のトゥーンシェーダーにShading Grade Map(シェーディングの掛かり方傾斜マップ)を足すことで、UV単位で1影および2影の掛かりやすさを制御できます。
このマップを使うことで、部分的に影の出やすさを調整できるので、「ライトに照らされている時にはでない服のしわ」みたいな表現が可能となります。

難しいことはひとまず省きたいため、今回はToon_DoubleShadeWithFeatherを使います。

Toon_DoubleShadeWithFeatherは更にいくつかの種類に別れています。

  • Clipping
  • TransSclipping

Clippingはまんまですがクリッピングマスクが使用できます。
TransSclippingに関しては、下記の説明があります。

_TransClipping系シェーダーは、_Clipping系シェーダーと主な機能は同じですが、クリッピングマスクのグレースケールを元にアルファを考慮します。
短冊状の毛の房の先端をアルファを考慮しつつマスクで抜く場合や、アホ毛などの表現に使います。

  • StecilOut
  • StencilMask
  • OnlyColor

眉毛やまつげ、目のようなパーツは、本来、前髪より後ろにありますが、前の方に描画されているイラストはよく目にすると思います。それらをStecilOut、StencilMaskで表現できます。
上記の例だと、前髪にStecilOut、眉毛やまつげ、目にStencilMaskを設定します。

OnlyColorはよく分かりません...。

ざっと説明を見た感じ、

  • 眉毛、まつげ、目にToon_DoubleShadeWithFeather_StencilMask
  • 前髪にToon_DoubleShadeWithFeather_TransClipping_StencilOut
  • 前髪以外の髪にToon_DoubleShadeWithFeather_TransClipping
  • その他はToon_DoubleShadeWithFeather

上のような設定をすれば良いのかなと思いました。
最初は全部Toon_DoubleShadeWithFeatherでも良い気がします。

Shaderを選択したらカラーやらテクスチャ、各種パラメーターを設定します。

スクリーンショット 2018-07-02 3.11.20.png
設定項目が沢山ありますが、全項目埋める必要はないです。
こちらの動画を見ながら、設定すれば基本的な使い方はわかると思います。

元のユニティちゃんのテクスチャですが、影も加味したテクスチャになってます。
影の描画はトゥーンシェーダーに任せてしまいたかったので、今回はphotoshopで影をベース色で塗り潰しました。

Before
body_01_origin.jpg
After
body_01.jpg
塗り潰しが雑なのは大目に見てください

結果

ごにょごにょした結果がこれだよ
Before
スクリーンショット 2018-07-01 11.48.42.png
After
スクリーンショット 2018-07-02 3.57.36.png

unity.png

この記事のコンテンツは、『ユニティちゃんライセンス』で提供されています。