【Unity道場スペシャル 2017京都】トゥーンシェーダー・マニアクス2

トゥーンシェーダー・マニアクス ２ ―ユニティちゃんトゥーンシェーダー2.0徹底解説― ユニティ・テクノロジーズ・ジャパン合同会社／コミュニティエバンジェリスト 小林信行 2017/11/18

自己紹介 小林信行 Nobuyuki Kobayashi ユニティ・テクノロジーズ・ジャパン所属の コミュニティエバンジェリスト。 UnityやMayaをはじめとする各種3Dツール の研究、ゲーム制作、企画書の書き方や シナリオディレクションのノウハウの普及を 通じて、Unityデベロッパーコミュニティの 支援活動をしています。

「アーカイブを落としてみたけど、 ユニティちゃんトゥーンシェーダー2.0 難しそう…」 と思って、そのままプロジェクトを 閉じてしまった人、いませんか？

今回は、マニュアルには載っていない ユニティちゃんトゥーンシェーダー2.0 の使いこなしや、ゼロからシェーダー を設定する時のコツを紹介します！ ユニティちゃんトゥーンシェーダー2.0の技術的側面は、 Unite 2017 Tokyoの 「トゥーンシェーダー・マニアクス」をどうぞ！

本セッションの内容に関して、ご質問等 ございましたら、Twitterハッシュタグ #Unity道場 まで、お問い合わせください！

1. ユニティちゃんトゥーンシェーダー2.0 の紹介

ユニティちゃんトゥーンシェーダー2.0とは？ Unity5.6.x以上で利用 できる映像指向の本格派 トゥーンシェーダー。 セルシェーディングから イラスト風シェーディング まで、幅広い絵づくりが 楽しめます。 リニアカラーが使える環境 ならば、Windows/Mac/iOS/ Android/PlayStation 4/ Xbox One/Switchなどの 幅広いプラットフォーム上で 共通の絵づくりができます。 ユニティちゃんトゥーンシェーダー2.0 iOS/METAL/Linear Colorでの表示 http://unity-chan.com/ ダウンロードコーナーより UCL2.0で提供中！

• http://unity-chan.com/

プリレンダー作例 ユニティちゃんトゥーン シェーダー2.0 +

ユニティちゃんトゥーンシェーダー2.0 リアルタイムレンダー作例： C92 「 The Phantom Knowledge 」

【VR✕HEARTalk】 Catch Unity-chan's HEART!

【VR✕HEARTalk】 Catch Unity-chan's HEART!

2. シェーダーとそのセッティングによる 見え方の違い

Unityでは、PBRからNPRまで、幅広い絵づくりが可能 PBR NPR Physically Based Rendering NON-Photo Realistic

Unityでは、ハイエンドからカジュアルまで、幅広い絵づくりが可能 High end DARK AVENGERⅢ / ネクソン Casual 神巫女 / フライハイワークス

シェーダーキャリブレーションシーンのセットアップ まずは共通のライティング条件下にあるシェーダー キャリブレーションシーンを作ることから始める。 今回は、物理ベースレンダリング環境下で、 リニアカラースペースにプロジェクトを設定した他は、 近距離での影の精度をなるべく高くする設定にして ある。 リニアカラーへの セッティングは、 Build Settings内 のPlayerSettings から行う。

ユニティちゃんシェーダー SDユニティちゃんモデルに付 属する「ユニティちゃんシェー ダー」 PBR環境下でも、手描きのディ フューズマップのカラーを素直 に表示する。 スポットライトやシステムGIな どの影響は受けない。 手で高品質のマップを描くこと ができれば、PBR環境でもキャ ラクター用シェーダーとして、 十分に活用できる。

スタンダードシェーダー （フルセットアップ） PBR向けにすべてのマップを 作成してセッティングしてみた 例。 PBRの定義に則って、アルベド、 メタリック、スムーズネス、ノー マル、オクルージョンの各マッ プを割り当てた他、エミッション マップも追加で割り当ててみた。 ディズニーやピクザーなどの CGアニメ風のルックになる。 よくできたフィギュアやビスクド ールのような質感。

ユニティちゃんトゥーン シェーダー2.0 （イラスト風ルック） セルシェーディングに対応でき るように、なるべくシンプルな通 常色マップと影色用マップを用 意して、シェーディング影の部 分はユニティちゃんトゥーンシ ェーダー2.0に任せた作例。 シェーダープロパティを調整す ることで、ブラシ風のシェーディ ング影を入れることができる。

ユニティちゃんトゥーン シェーダー2.0 （セル風ルック） まったく同じマップを使ってい ても、シェーダープロパティの 調整で、完全なセルルックにす ることもできる。

3. ゼロから始める ユニティちゃんトゥーンシェーダー2.0

ユニティちゃんトゥーンシェーダー2.0をダウンロードする 最新版のアーカイブは、ユニティちゃんオフィシャルホームページの ダウンロードコーナーより利用できます。

ダウンロードしたら、真っ先にやるべきこと ユニティちゃんトゥーンシェーダー2.0のアーカイブを解凍し、 中のマニュアルを読む ⇒マニュアルには、日本語版と英語版があります。 使用上の注意やTipsなどが、マニュアルに書かれています。 Assets/Sample フォルダ内には、 シェーダー設定の サンプルがある。

ゼロからシェーダーを設定する際のUnity Editor側の準備 1. カラースペースをリニアにする 2. シーン内のディレクショナルライトのカラーを白系にする 3. シェーダーキャリブレーション用のシーンを作っておくとよい ⇒カラーの階調変化が正確に捉えられる。 ⇒新規に作成したシーン内のディレクショナルライトは、 太陽の色を反映して黄みがかっているため。 ⇒Lightingウィンドウの設定も含めて、シェーダーキャリブレーション用のシーン を前もって作っておくと、何かと捗る。 ハイメッシュのスフィアもしくはシェーダーボールのモデルがシーン内に 配置されているとなおよい。

File>Build Settings>Player Settings

ディレクショナルライトのカラーを白系にする

UTS2.0の特長 カラー設定が直接指定 できる ユニティちゃん 髪の毛カラー設定 Hiカラー 通常（ノーマル） １号影（１影） ２号影（２影） アニメーション制作では、 各シーン単位でパーツごとに カラー設計がなされる。 これらのカラー設計をする、 色彩設計の専門スタッフが いるのが普通。

UTS2.0の特長 光源方向を考慮しつつ、強力なカラー塗り分けの制御が可能

UTS2.0の特長 専用マップによる明色/影色の制御

UTS2.0のシェーダープロパティの数を見て、 そのままプロジェクトを閉じてしまった人向けのTips 1. シェーダープロパティは、すべて設定する必要はない ⇒最後までまったく触れないプロパティがあってもかまわない 2. 最低限必要なのは、通常色と１影色の指定のみ ⇒まずは、シェーダーボール上で、通常色と１影色を配置してみることから設定を 始めるとよい。他の多くのパラメタは、上の２つがほぼ決まってから、設定し始め ると効率がよい。 3. 沢山あるシェーダープロパティは、トライ＆エラーを繰り返し ながら、どんなルックがありえるのか、探索するためにある

光源方向とライトカラー、 およびシェーダーによっ て決まる要素 GI（グローバルイルミ ネーション）のカラー で決まる要素 ライトのシャドウタイプ で決まる要素。 （キャストシャドウのカラ ーは、GIとシェーダーに 依存する。） ポストエフェクトで 設定する要素

基本的なシェーダー設定の手順 左のようなシェーダーボールを 新規に設定してみましょう。 実際に設定したシェーダーは、 キャラクターの肌表現などに使 えます。 肌色の設計は、結構難しいので、 NPR系のシェーダーの実力をみ るのにはちょうどよい課題です。

新規にマテリアルを作成し、UTS2.0を割り当てる 新規にマテリアルを作成して、 ユニティちゃんトゥーンシェーダー2.0 （UTS2.0）を割り当てます。 ここでは、 Toon_DoubleShadeWithFeatherを 使います。 次に作成したマテリアルをシェーダー ボールに割り当てます。

ざっくりと通常色と１影色で塗り分ける

１影色の領域をいい感じに調整する

通常色と１影色の境界をぼかす

メリハリをつけるために２影色を足す

２影色をぼかし、立体感を強調する

反射表現として、ハイカラーを足す

ハイカラーを強くする

リムライトを追加してエッジを強調する

アウトラインを追加し、下地のカラーに馴染ませる

4. Unite 2017 Tokyo以降に強化された 機能の紹介

UTS2.0.1〜2.0.3で搭載された機能 u リムライトの機能強化（2.0.1〜2.0.2） u ハイカラーマスクおよびリムライトマスクの搭載（2.0.3） ⇒これらの機能は、主にハイライトとして使われる、リムライトやハイカラーを より細かく制御するために搭載されました。 u モバイル版の搭載とiOS/OSX METAL使用時の注意の追加（2.0.2） ⇒複数ライトなど、モバイルでは重い機能を省くことで、大幅に軽減しました。 ⇒iOS/OSX METAL環境では、「カリングなし」の設定を使わないように、 注意を追加しました

イラストに含まれる各マスク効果をさらに調整する 通常色/影色の 塗り分けマスク リムライト ハイカラー （スペキュラ） アーティストは、絵を仕上げるまでの過程で、 様々な効果を入れるために、手でマスクを 切っていきます。左のイラストにも塗り分け用 のマスクの他、ハイカラーやリムライト等の 効果をみることができます。 これらの多くは、光源とそれへの向きを考慮 しつつ設計されるものです。

リムライト ハイカラー （スペキュラ） 通常色/影色の 塗り分けマスク ユニティちゃんトゥーン シェーダー2.0では、左の ような部分にそれぞれの マスク効果が出ています。 これらのマスク効果は リアルタイムに計算されて いますので、光やモーション の変化に応じて違和感なく 表示されます。

リムライトに追加された、光源方向マスク 光源方向 別カラーの リムライト が追加 リムライト がカット 通常のリムライト （リムライトは光源とは関係 なく、エッジ部分に出る） 通常のリムライト ＋ 光源方向マスク 通常のリムライト ＋ 光源方向マスク ＋ 光源反対方向リムライト

光源方向から のリムライト 光源方向とは 反対側のリムライト

ハイカラーマスク＆リムライトマスクの効果 肌のハイカラーやリムラ イトがカメラの角度によっ ては、ひどくテカってしまう のをマスクで抑えている

5. ところで、 って知ってます？

ntnyさんが、 放送やってるよ！ 京野 光平 a.k.a. ntny unityjp

「UnitychanShader2.0の使い方」で紹介されたTips u u u u ２影色を「照り返し」として使う ライトカラーの影響をON/OFFする 板ポリを使ったパキッとした影の入れ方 Canvas/Imageを使ったフレア効果 ⇒詳しくは、 をみるべし！ ここでは、ちょっとだけ紹介…

ライトカラーの 反映なし 影色にのみ ライトカラーを 反映 ライトカラーの 反映を各色で ON/OFFできる 影色にのみ、淡い紫色の ライトカラーを反映させている。 『もえたん』©三才ブックス ©カラー

こういう影はどうやって作る？ こういうスパンと切ったような影は どう作るのか？

左図のように、Shadow Onlyのプレーンを被写 体に差し込むことで、簡 単にスパンと切ったよう な影を落とすことがで きます。 ただし、このプレーンは、 カメラには写りません が、背景にも同時に影 を落とすので注意！ カメラアングルを選び ますが、顔のアップなど、 背景をほぼ飛ばせるカ ットでは、効果的な演出 ができます。

２影色を照り返し的に使う ユニティちゃんトゥーンシェーダー2.0 は、光源方向を考慮しつつ自由にカラ ーがおけますので、本来なら一番暗い 部分の２影のところにも明るいカラー を置くことできます。 このようなカラー配置をすることで、２ 影色を環境からの照り返しのように使 うことができます。

6. ステージライティングにみる、 ライトプローブの配置

「ステージの環境光がキャラに反映する」ことで、「キャラが空間内を移動している感覚」がより強くなる。

システムGIによる環境光をキャラクターに反映するには？ u シェーダー側とLightingウィンドウ側の設定 「GI_Intensity」と「Indirect Intensity」 u ベイク用ポイントライトの配置 u ライトプローブの配置

シェーダー側： GI_Intensity Lighting設定側： Indirect_Intensity ０以上に設定すること で、UnityのLightingウ ィンドウ内で管理され ているGIシステムに対 応する。 GI_Intensityが１の時、 GIの強度が100％とな る。 リアルタイムライトおよ び焼き付けられたライト マップに保存された Indirectライトの明るさ を変化させる。1より大き な値はIndirectライトの 強度を増加させ、１よりも 小さい値はIndirectライ ト強度を減少させる。 この２つのパラメタの掛け算として、シェーダー側で指定 するキャラクターのカラーに「環境からの補助光（カラー）」 として最終的に加えられる、GIの強度が決まる。

ポイントライトの配置。 ステージ上のプロップの配置を参考に、 各カラーライトの位置を決めていく。

u ベイク用ポイントライトは、左図 のように、各ライトの領域が互い に重なり合いながら、ステージ 上をまんべんなく、 カラーで空 間を分割するように配置する。 u 配置する高さも、カラーライトご とに変えることで、リズムを付け る。 u 各ライトのインテンシティは、青 系のライトは強めに、黄〜緑系 のライトは抑えめにする。

ライトプローブの高さは、ユニティちゃんの背の高さ を参考に、広さはユニティちゃんの動き回る範囲を 参考に、ステージ上に配置していく。

ポイントライトの明るさとカラー 情報が、ライトプローブにベイ クされたステージ。この中をキ ャラが移動することで、キャラ シェーダーにGIが反映される。 メイン光源のリアルタイムディ レクショナルライト側にも、Y軸 の首振りとインテンシティ変化 のアニメーションが付いている ので、ライトプローブによる事前 計算のGIと組み合わさって、リ アルタイムが１灯しかなくても、 様々なライティング状況を楽 しめる。

最後に よい作例ができたら、#unitychanで ツィートしてください！

暁ゆ～き @AkatsukiWorks さんの作例 UTS2.0.3で搭載された「リムライトマスク」 なども使いこなしていて、各パーツの質感も きちんと出ているステキな作例です。 https://twitter.com/i/moments/856781628466528257

• https://twitter.com/i/moments/856781628466528257

Thank You!