---
title: 【Unity道場スペシャル 2017大阪】トゥーンシェーダー・マニアクス2 〜ユニティちゃんトゥーンシェーダー2.0徹底解説〜
tags:  #unity #unity3d #unity道場 #toon shader #トゥーンシェーダー #unitydojo #ユニティちゃん  
author: [Unity Technologies Japan](https://www.docswell.com/user/UnityJapan)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5DEY3VQ57M.jpg?width=480
description: 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
published: September 07, 17
canonical: https://www.docswell.com/s/UnityJapan/Z14YPZ-unity-2-20
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5DEY3VQ57M.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/2VJNVMK478.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GYE96NV4E3.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5GE8ZKPV7D.jpg)

ユニティちゃんトゥーンシェーダー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で提供中！


# Page. 5

![Page Image](https://bcdn.docswell.com/page/MLELDZ1R7R.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/54JMPVWPJW.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/ZPJR12YYJ9.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/NPEXYDG47X.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/63EK3X4PED.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4L73G5L4E5.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/V87D1DN5EG.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4VJPQX5DE8.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L2EV5LPGEQ.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/Z57G6XQDJL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/V4EQ48KX7P.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/PLE1PM9K7G.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/8GEW23QPJ2.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/W47ZDVW6E3.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/KYJ615GLEV.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/5GJ54YVM74.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4LE3G5D9J5.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/V8ED1DP8JG.jpg)

File>Build Settings>Player Settings


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4V7PQXNWJ8.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/L2JV5LK9JQ.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/Z5EG6XQ47L.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/V4JQ48KREP.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/DK74Q2PQE1.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/PLJ1PM9LEG.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/8GJW23QQ72.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/W4EZDVW3J3.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/KY7615GZJV.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/5G754YV9E4.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/V9J2VG35JR.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/5DEY3V167M.jpg)

ハイカラーを強くする


# Page. 35

![Page Image](https://bcdn.docswell.com/page/2VJNVMQ178.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/GYE96NDYE3.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/5GE8ZK3K7D.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/MLELDZVP7R.jpg)

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環境では、「カリングなし」の設定を使わないように、
注意を追加しました


# Page. 39

![Page Image](https://bcdn.docswell.com/page/54JMPVG2JW.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/ZPJR12Z5J9.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/NPEXYD9X7X.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/63EK3XP9ED.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/4L73G5X9E5.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/V87D1D28EG.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4VJPQX1WE8.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/L2EV5LY9EQ.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/Z57G6X94JL.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/V4EQ48WR7P.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/DKJ4Q2KQ71.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/PLE1PMXL7G.jpg)

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


# Page. 51

![Page Image](https://bcdn.docswell.com/page/8GEW23NQJ2.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/W47ZDV33E3.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/KYJ615XZEV.jpg)

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


# Page. 54

![Page Image](https://bcdn.docswell.com/page/5GJ54YX974.jpg)

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


# Page. 55

![Page Image](https://bcdn.docswell.com/page/V9E2VGX5ER.jpg)

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


# Page. 56

![Page Image](https://bcdn.docswell.com/page/5D7Y3V86JM.jpg)

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


# Page. 57

![Page Image](https://bcdn.docswell.com/page/2VENVM91J8.jpg)

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


# Page. 58

![Page Image](https://bcdn.docswell.com/page/GY796N2Y73.jpg)

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


# Page. 59

![Page Image](https://bcdn.docswell.com/page/5G78ZK5KJD.jpg)

Thank You!