2017/11/18に開催されたUnity道場スペシャル 2017京都の講演スライドです。 講師： 小林 信行（ユニティ・テクノロジーズ・ジャパン合同会社） トゥーンシェーダー・マニアクス 2 内容 Unite 2017 Tokyoでご好評をいただきました、『トゥーンシェーダー・マニアクス』の第２弾です。今回は主に、「ユニティちゃんトゥーンシェーダー2.0」の使いこなし面をお話するつもりです。 こんな人におすすめ ・トゥーンシェーダーの開発に関心のあるUnityエンジニア ・アーティストアニメーション＆映像業界のエンジニア ・アーティスト3DCG技術の基礎知識があり、関連する用語に慣れている人 受講者が得られる知見 ・カスタムライティングを利用したフォワードベースのトゥーンシェーダーの開発の実際 ・カスタムライティングとUnityのシステムライティングとのなじませ方 ・ノードベースコードエディタの出力するコードのカスタマイズの仕方 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. File>Build Settings>Player Settings

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

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

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

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

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

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

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

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

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

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

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

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

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

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

39. ハイカラーを強くする

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

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

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

43. 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で搭載された機能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

67. Thank You!