Embed Size (px)
Citation preview
トゥーンシェーダー・マニアクス ２―ユニティちゃんトゥーンシェーダー2.0徹底解説―
ユニティ・テクノロジーズ・ジャパン合同会社／コミュニティエバンジェリスト小林信行2017/11/18
ユニティ・テクノロジーズ・ジャパン所属のコミュニティエバンジェリスト。UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作、企画書の書き方やシナリオディレクションのノウハウの普及を通じて、Unityデベロッパーコミュニティの支援活動をしています。
自己紹介
小林信行 Nobuyuki Kobayashi
「アーカイブを落としてみたけど、ユニティちゃんトゥーンシェーダー2.0
難しそう…」と思って、そのままプロジェクトを閉じてしまった人、いませんか？
今回は、マニュアルには載っていないユニティちゃんトゥーンシェーダー2.0の使いこなしや、ゼロからシェーダーを設定する時のコツを紹介します！
ユニティちゃんトゥーンシェーダー2.0の技術的側面は、Unite 2017 Tokyoの
「トゥーンシェーダー・マニアクス」をどうぞ！
本セッションの内容に関して、ご質問等ございましたら、Twitterハッシュタグ
#Unity道場まで、お問い合わせください！
ユニティちゃんトゥーンシェーダー2.0の紹介
1.
ユニティちゃんトゥーンシェーダー2.0とは？
ユニティちゃんトゥーンシェーダー2.0iOS/METAL/Linear Colorでの表示
Unity5.6.x以上で利用できる映像指向の本格派トゥーンシェーダー。セルシェーディングからイラスト風シェーディングまで、幅広い絵づくりが楽しめます。リニアカラーが使える環境ならば、Windows/Mac/iOS/Android/PlayStation 4/Xbox One/Switchなどの幅広いプラットフォーム上で共通の絵づくりができます。
http://unity-chan.com/ダウンロードコーナーよりUCL2.0で提供中！
ユニティちゃんトゥーンシェーダー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まで、幅広い絵づくりが可能
PBRPhysically Based Rendering
NPRNON-Photo Realistic
Unityでは、ハイエンドからカジュアルまで、幅広い絵づくりが可能
High endDARK AVENGERⅢ / ネクソン
Casual神巫女 / フライハイワークス
シェーダーキャリブレーションシーンのセットアップまずは共通のライティング条件下にあるシェーダーキャリブレーションシーンを作ることから始める。今回は、物理ベースレンダリング環境下で、リニアカラースペースにプロジェクトを設定した他は、近距離での影の精度をなるべく高くする設定にしてある。
リニアカラーへのセッティングは、Build Settings内のPlayerSettingsから行う。
ユニティちゃんシェーダー
SDユニティちゃんモデルに付属する「ユニティちゃんシェーダー」PBR環境下でも、手描きのディフューズマップのカラーを素直に表示する。スポットライトやシステムGIなどの影響は受けない。手で高品質のマップを描くことができれば、PBR環境でもキャラクター用シェーダーとして、十分に活用できる。
スタンダードシェーダー（フルセットアップ）
PBR向けにすべてのマップを作成してセッティングしてみた例。PBRの定義に則って、アルベド、メタリック、スムーズネス、ノーマル、オクルージョンの各マップを割り当てた他、エミッションマップも追加で割り当ててみた。ディズニーやピクザーなどのCGアニメ風のルックになる。よくできたフィギュアやビスクドールのような質感。
ユニティちゃんトゥーンシェーダー2.0（イラスト風ルック）
セルシェーディングに対応できるように、なるべくシンプルな通常色マップと影色用マップを用意して、シェーディング影の部分はユニティちゃんトゥーンシェーダー2.0に任せた作例。シェーダープロパティを調整することで、ブラシ風のシェーディング影を入れることができる。
ユニティちゃんトゥーンシェーダー2.0（セル風ルック）
まったく同じマップを使っていても、シェーダープロパティの調整で、完全なセルルックにすることもできる。
ゼロから始めるユニティちゃんトゥーンシェーダー2.0
3.
最新版のアーカイブは、ユニティちゃんオフィシャルホームページのダウンロードコーナーより利用できます。
ユニティちゃんトゥーンシェーダー2.0をダウンロードする
ユニティちゃんトゥーンシェーダー2.0のアーカイブを解凍し、中のマニュアルを読む⇒マニュアルには、日本語版と英語版があります。
使用上の注意やTipsなどが、マニュアルに書かれています。
ダウンロードしたら、真っ先にやるべきこと
Assets/Sampleフォルダ内には、シェーダー設定のサンプルがある。
1. カラースペースをリニアにする⇒カラーの階調変化が正確に捉えられる。
2. シーン内のディレクショナルライトのカラーを白系にする⇒新規に作成したシーン内のディレクショナルライトは、
太陽の色を反映して黄みがかっているため。
3. シェーダーキャリブレーション用のシーンを作っておくとよい⇒Lightingウィンドウの設定も含めて、シェーダーキャリブレーション用のシーン
を前もって作っておくと、何かと捗る。ハイメッシュのスフィアもしくはシェーダーボールのモデルがシーン内に配置されているとなおよい。
ゼロからシェーダーを設定する際のUnity Editor側の準備
File>Build Settings>Player Settings
ディレクショナルライトのカラーを白系にする
Hiカラー
通常（ノーマル）
１号影（１影）
２号影（２影）
ユニティちゃん髪の毛カラー設定
アニメーション制作では、各シーン単位でパーツごとにカラー設計がなされる。
カラー設定が直接指定できる
これらのカラー設計をする、色彩設計の専門スタッフがいるのが普通。
UTS2.0の特長
光源方向を考慮しつつ、強力なカラー塗り分けの制御が可能UTS2.0の特長
専用マップによる明色/影色の制御UTS2.0の特長
1. シェーダープロパティは、すべて設定する必要はない⇒最後までまったく触れないプロパティがあってもかまわない
2. 最低限必要なのは、通常色と１影色の指定のみ⇒まずは、シェーダーボール上で、通常色と１影色を配置してみることから設定を
始めるとよい。他の多くのパラメタは、上の２つがほぼ決まってから、設定し始めると効率がよい。
3. 沢山あるシェーダープロパティは、トライ＆エラーを繰り返しながら、どんなルックがありえるのか、探索するためにある
UTS2.0のシェーダープロパティの数を見て、そのままプロジェクトを閉じてしまった人向けのTips
光源方向とライトカラー、およびシェーダーによって決まる要素
GI（グローバルイルミネーション）のカラーで決まる要素
ライトのシャドウタイプで決まる要素。（キャストシャドウのカラーは、GIとシェーダーに依存する。）
ポストエフェクトで設定する要素
基本的なシェーダー設定の手順左のようなシェーダーボールを新規に設定してみましょう。実際に設定したシェーダーは、キャラクターの肌表現などに使えます。肌色の設計は、結構難しいので、NPR系のシェーダーの実力をみるのにはちょうどよい課題です。
新規にマテリアルを作成し、UTS2.0を割り当てる新規にマテリアルを作成して、ユニティちゃんトゥーンシェーダー2.0（UTS2.0）を割り当てます。ここでは、Toon_DoubleShadeWithFeatherを使います。次に作成したマテリアルをシェーダーボールに割り当てます。
ざっくりと通常色と１影色で塗り分ける
１影色の領域をいい感じに調整する
通常色と１影色の境界をぼかす
メリハリをつけるために２影色を足す
２影色をぼかし、立体感を強調する
反射表現として、ハイカラーを足す
ハイカラーを強くする
リムライトを追加してエッジを強調する
アウトラインを追加し、下地のカラーに馴染ませる
Unite 2017 Tokyo以降に強化された機能の紹介
4.
u リムライトの機能強化（2.0.1〜2.0.2）u ハイカラーマスクおよびリムライトマスクの搭載（2.0.3）
⇒これらの機能は、主にハイライトとして使われる、リムライトやハイカラーをより細かく制御するために搭載されました。
u モバイル版の搭載とiOS/OSX METAL使用時の注意の追加（2.0.2）⇒複数ライトなど、モバイルでは重い機能を省くことで、大幅に軽減しました。⇒iOS/OSX METAL環境では、「カリングなし」の設定を使わないように、
注意を追加しました
UTS2.0.1〜2.0.3で搭載された機能
アーティストは、絵を仕上げるまでの過程で、様々な効果を入れるために、手でマスクを切っていきます。左のイラストにも塗り分け用のマスクの他、ハイカラーやリムライト等の効果をみることができます。これらの多くは、光源とそれへの向きを考慮しつつ設計されるものです。
通常色/影色の塗り分けマスク ハイカラー
（スペキュラ）
リムライト
イラストに含まれる各マスク効果をさらに調整する
通常色/影色の塗り分けマスク
ハイカラー（スペキュラ）
リムライト
ユニティちゃんトゥーンシェーダー2.0では、左のような部分にそれぞれのマスク効果が出ています。これらのマスク効果はリアルタイムに計算されていますので、光やモーションの変化に応じて違和感なく表示されます。
リムライトに追加された、光源方向マスク光源方向
通常のリムライト（リムライトは光源とは関係なく、エッジ部分に出る）
通常のリムライト＋ 光源方向マスク
通常のリムライト＋ 光源方向マスク＋ 光源反対方向リムライト
リムライトがカット
別カラーのリムライトが追加
光源方向からのリムライト
光源方向とは反対側のリムライト
ハイカラーマスク＆リムライトマスクの効果肌のハイカラーやリムライトがカメラの角度によっては、ひどくテカってしまうのをマスクで抑えている
ところで、 って知ってます？5.
ntnyさんが、 放送やってるよ！
京野 光平a.k.a.ntny unityjp
u ２影色を「照り返し」として使うu ライトカラーの影響をON/OFFするu 板ポリを使ったパキッとした影の入れ方u Canvas/Imageを使ったフレア効果
⇒詳しくは、 をみるべし！
「UnitychanShader2.0の使い方」で紹介されたTips
ここでは、ちょっとだけ紹介…
ライトカラーの反映なし
ライトカラーの反映を各色でON/OFFできる
影色にのみライトカラーを反映
『もえたん』©三才ブックス
影色にのみ、淡い紫色のライトカラーを反映させている。
©カラー
こういうスパンと切ったような影はどう作るのか？
こういう影はどうやって作る？
左図のように、Shadow Onlyのプレーンを被写体に差し込むことで、簡単にスパンと切ったような影を落とすことができます。ただし、このプレーンは、カメラには写りませんが、背景にも同時に影を落とすので注意！カメラアングルを選びますが、顔のアップなど、背景をほぼ飛ばせるカットでは、効果的な演出ができます。
２影色を照り返し的に使う
ユニティちゃんトゥーンシェーダー2.0は、光源方向を考慮しつつ自由にカラーがおけますので、本来なら一番暗い部分の２影のところにも明るいカラーを置くことできます。
このようなカラー配置をすることで、２影色を環境からの照り返しのように使うことができます。
ステージライティングにみる、ライトプローブの配置
6.
「ステージの環境光がキャラに反映する」ことで、「キャラが空間内を移動している感覚」がより強くなる。
u シェーダー側とLightingウィンドウ側の設定「GI_Intensity」と「Indirect Intensity」
u ベイク用ポイントライトの配置
u ライトプローブの配置
システムGIによる環境光をキャラクターに反映するには？
シェーダー側：GI_Intensity
０以上に設定することで、UnityのLightingウィンドウ内で管理されているGIシステムに対応する。GI_Intensityが１の時、GIの強度が100％となる。
Lighting設定側：Indirect_Intensity
リアルタイムライトおよび焼き付けられたライトマップに保存されたIndirectライトの明るさを変化させる。1より大きな値はIndirectライトの強度を増加させ、１よりも小さい値はIndirectライト強度を減少させる。この２つのパラメタの掛け算として、シェーダー側で指定
するキャラクターのカラーに「環境からの補助光（カラー）」として最終的に加えられる、GIの強度が決まる。
ポイントライトの配置。ステージ上のプロップの配置を参考に、各カラーライトの位置を決めていく。
u ベイク用ポイントライトは、左図のように、各ライトの領域が互いに重なり合いながら、ステージ上をまんべんなく、 カラーで空間を分割するように配置する。
u 配置する高さも、カラーライトごとに変えることで、リズムを付ける。
u 各ライトのインテンシティは、青系のライトは強めに、黄〜緑系のライトは抑えめにする。
ライトプローブの高さは、ユニティちゃんの背の高さを参考に、広さはユニティちゃんの動き回る範囲を参考に、ステージ上に配置していく。
ポイントライトの明るさとカラー情報が、ライトプローブにベイクされたステージ。この中をキャラが移動することで、キャラシェーダーにGIが反映される。
メイン光源のリアルタイムディレクショナルライト側にも、Y軸の首振りとインテンシティ変化のアニメーションが付いているので、ライトプローブによる事前計算のGIと組み合わさって、リアルタイムが１灯しかなくても、様々なライティング状況を楽しめる。
よい作例ができたら、#unitychanでツィートしてください！
最後に
UTS2.0.3で搭載された「リムライトマスク」なども使いこなしていて、各パーツの質感もきちんと出ているステキな作例です。
暁ゆ～き @AkatsukiWorks さんの作例
https://twitter.com/i/moments/856781628466528257
Thank You!
