【Unity道場スペシャル 2017大阪】トゥーンシェーダー・マニアクス2 〜ユニティちゃんトゥーンシェーダー2.0徹底解説〜

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

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

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

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

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

シェーダーキャリブレー ション用シーンの例。 シェーダーボールが自 然に見えるように設定し ておく。必要に応じて、 カメラにポストエフェク トをつけてもよい。

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

スタンダードシェーダー （未調整） 「ユニティちゃんシェーダー」用 のディフューズマップをそのま まアルベドマップとして使用し た例。 PBR環境に最も適したシェーダ ーではあるが、キャラクター表 示用に適用すると、不自然な点 が目立つ。 ハイライト部分や、肌の部分な どが全体に白っぽく飛んでいる のが気になるなど、十分にカラ ーが出ていない点が気になる。

スタンダードシェーダー （調整後） アルベドの定義域などに注意し て調整をしたもの。 ディフューズマップに0.75のグ レーを乗算し、それをアルベド として用いている。 また エミッションにも同じマッ プを追加することで、全体にカ ラーをはっきりと表示するように している。シェーディングよりも カラー 表示を重視してみた。 スムーズネスは一律に０とした が、マテリアルに応じて変化を 与えてやると、PBR環境下でも 質感が上がってくる。 ただエミッションに接続した結 果、ライトが暗くなっても自己 発光をしてしまうことに注意。

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

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

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

各シェーダーの特徴をまとめてみると u 手で高品質のディフューズマップが描ければ、「ユニティちゃんシェーダー」 は、PBR環境でもかなりよい表現ができます。むしろ素直にテクスチャを表示 するシェーダーといえるでしょう。 u 物理ベースシェーダーである「スタンダードシェーダー」は、どのようなマップ をどこに割り当てるかで、大きく絵が変わります。各マップの仕様に関する、 正しい知識が必要になります。 u 「ユニティちゃんトゥーンシェーダー2.0」は、最小限のテクスチャ描き込みで イラスト風のぼかしを表現できますし、シェーダープロパティの設定次第で、 完全なセルルックから、ブラシを多用したイラスト風ルックまで、幅広い表現 に対応できます。

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

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

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

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

File>Build Settings>Player Settings

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

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

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

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

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

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

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

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

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

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

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

ハイカラーを強くする

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

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

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

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

iOS/METALでも、ステージ上の環境光をユニティちゃんが反映できるのは、ライトプローブを使っているからです。

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

GI_Intensity Indirect_Intensity ０以上に設定すること で、UnityのLightingウ ィンドウ内で管理され ているGIシステムに対 応します。 GI_Intensityが１の時、 GIの強度が100％とな ります。 リアルタイムライトおよ び焼き付けられたライト マップに保存された Indirectライトの明るさ を変化させる。1より大き な値はIndirectライトの 強度を増加させ、１よりも 小さい値はIndirectライ ト強度を減少させる。

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

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

ポイントライトの明るさとカラー情報が ライトプローブにベイクされました。

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

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

Thank You!