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

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

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. シェーダーとそのセッティングによる
見え方の違い
2.

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

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

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

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

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

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

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

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

19. u 手で高品質のディフューズマップが描ければ、「ユニティちゃんシェーダー」
は、PBR環境でもかなりよい表現ができます。むしろ素直にテクスチャを表示
するシェーダーといえるでしょう。
u 物理ベースシェーダーである「スタンダードシェーダー」は、どのようなマップ
をどこに割り当てるかで、大きく絵が変わります。各マップの仕様に関する、
正しい知識が必要になります。
u 「ユニティちゃんトゥーンシェーダー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. 1. シェーダープロパティは、すべて設定する必要はない
⇒最後までまったく触れないプロパティがあってもかまわない
2. 最低限必要なのは、通常色と１影色の指定のみ
⇒まずは、シェーダーボール上で、通常色と１影色を配置してみることから設定を
始めるとよい。他の多くのパラメタは、上の２つがほぼ決まってから、設定し始め
ると効率がよい。
3. 沢山あるシェーダープロパティは、トライ＆エラーを繰り返し
ながら、どんなルックがありえるのか、探索するためにある
UTS2.0のシェーダープロパティの数を見て、
そのままプロジェクトを閉じてしまった人向けのTips

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

60. 「ライブ」空間の演出に使われている、
視覚効果
7.

61. u ステージの空気感の演出
1. ステージ上に配置されているライトプローブによる「GIの変化」
2. カメラが引いた時に現れる「フォグ」
u 時間経過の演出
1. フレア効果とそのカラー変化のループアニメーション
「ライブ」空間の演出は、「ステージの空気感」と「時間経過」
の演出に分解して考える
⇒オリジナルのCRSの演出を強化して、さらにライブステージ感を高めてみた。

62. フォグは、普段は目立たないが、カメラ
が一番引いた時に効果的にステージの
一番深い部分（画面上側）にかかるよう
な距離に設定されている。
普段は遠景を潰す程度に軽くかかって
いる程度。
「フォグ」による空間の奥行き演出

63. フレア効果と、そのカラー変化のループアニメーション
Canvas/Imageで実現されているフレアには、
一定時間で周期的にカラーが切り替わる
ループアニメーションが付いている。
フレアカラーの周期的な変化が、視覚イメージ
に基づく時間経過や周期リズムを感じさせる。

64. 常に画面の上部には、
紫→青→赤→白、と
一定時間でカラーが
切り替わる、フレア
効果がかかっている。

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

66. Thank You!