【教材用UnityPackage】 https://drive.google.com/file/d/0B3oaXWaXwfzOc3lxYUdnZ0V6eE0/view?usp=sharing Unity Asset Storeで大人気のShader Forgeを使って、シェーダーを学んでみませんか？ 本コースでは、前回の基本操作編（8/28実施）に続き、CEDEC2016などでも人気のありましたトゥーンシェーダーに焦点を当てて、Shader Forgeを使った実装の仕方を解説します。またトゥーンシェーダーを作成する際に必要なカスタムライティングについても解説を行います。 本コースは、後続のクラスを受講することで、順次シェーダーについて学んでいく予定です。

1. Unity道場 14
Shader Forge 102
～ShaderForgeをつかって学ぶシェーダー入門～
カスタムライティング/トゥーンシェーダー編
Unity Technologies Japan合同会社
コミュニティエバンジェリスト
小林信行
2016/10/30

2. 本コースを受講することで得られる知見
• 本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、
ＳｈａｄｅｒＦｏｒｇｅの全機能を紹介するものではありません。
• 本コースでは、ShaderForgeを使ってカスタムライティングについて学びます。
• 実際にシェーダーを組んでいく上で、よく使われるノードの機能や、しばしば
使われるパターンを見ていきましょう。最後にそれらの知識を元に、トゥーン
シェーダーのサンプルをいくつか組んでみましょう。
• ShaderForgeの基本的な操作については、『ShaderForge 101』のスライドを
参照してください。

3. カスタムライティングを
ノードで組んでみよう

4. シェーダーの準備
新規作成するとサンプル
ノードが設定されている
ので、不要なものを削除
する。
Custom Lightingを選択する

5. ライトとライトカラーのみが反映するシェーダー

6. ライトとライトカラーのみが反映するシェーダー
Light Colorノード
レンダリング対象となるカレント
ライトのカラーを取得する。
Light Attenuationノード
ライトの減衰を取得する。
このノードはライトのフォールオフ
とシャドウを同時に取得する。

7. ライトとライトカラーのみが反映するシェーダー

8. 最も単純なLambertシェーダーを作ってみよう

9. 最も単純なLambertシェーダーを作ってみよう
Normal Directionノード
ワールド空間でのメッシュの法線
方向を出力する。チェックをつけ
るとノーマルマップを考慮する。
Light Directionノード
レンダリング対象となるカレント
ライトの方向を出力する。
Dot Productノード
AとBの２つのベクトルの内積を
とる。

10. 内積（Dot Product）とは？
A
→
B
→
θ
A
→
｜
｜
B
→
｜
｜
cosθ
A
→
B
→
・
=
このオレンジ部の長さは、
A
→
｜
｜
cosθ
特に、 が長さ1の時、オレンジ部の長さはcosθとなる。
A
→
内積とは、２つのベクトルがなす角度の状態を示すスカラー値のこと。
特に2つのベクトルがノーマライズされている場合には、内積が即、
２つのベクトルの内角のcosθの値となっている。

11. 内積（Dot Product）とは？
上図のように、ライトベクトルと
法線ベクトルの内積を取ること
で、光の当たり具合を０～１で
表現することができる！
内積がマイナスは、
「光が当たっていない」
ことを示している。

12. 内積（Dot Product）とは？
Dot Productノード内の設定で、出力される値域が変わるので注意！

13. 「法線方向との内積」でよく使われるベクトル

14. 「法線方向との内積」でよく使われるパターン
Light Directionノードと内積
をとって、ライティングの状
態を得る。
View Directionノードと内積をとっ
て、One Minusで反転し、リムライト
の状態を得る。
Half Directionノードと内積をとって、
Powerノードで絞り込み、スペキュラ
（グロッシイ)反射の状態を得る。

15. Half Lambertを作ってみよう
l Half Lambertとは、通常-1～１の範囲で示されるライティングの状態を、0～１の範囲にリマップし直
すことです。結果、陰影の入り方が柔らかめになります。
l Half Lambertの作成はいくつかありますが、ここでは「ライティング結果に、0.5を掛けて、0.5を足す」
という手法をとります。
Half Lambertの場合
Lambertの場合

16. Half Lambertを作ってみよう

17. Blinn-Phongモデルを作ってみよう
l Lambertモデルに、スペキュラ反射を足すことで、Blinn-Phongスペキュラ反射モデルが作成できます。
l Blinn-Phongモデルの場合、スペキュラ反射の計算は、ハーフベクトルとノーマルベクトルの内積より
求めます。
Blinn-Phongの場合
Lambertの場合

18. Blinn-Phongモデルを作ってみよう
スペキュラの計算

19. Blinn-Phongモデルを作ってみよう
Powerノード
値の累乗を求める。
この例の様に、明るい部分を絞り込むのに使われる。

20. Blinn-Phongモデルを改造してみよう
l Blinn-Phongモデルに、ノーマルマップとキューブマップによる環境マッピングを追加してみましょう。

21. Blinn-Phongモデルを改造してみよう
ノーマルマップ
キューブマップによる
環境マッピング

22. Half Lambertで明るくする
l 陰が強くかかり過ぎているようなので、Half Lambertに切り替えることで明るくしてみましょう。
今回は別のやり方でやってみます。

23. Half Lambertで明るくする
Normalized に変えることで、
Half Lambertに変更できる。

24. トゥーンシェーダーを
作ってみよう！

25. トゥーンシェーダーとは？
l トゥーンシェーダーは、ライティングモデルを元に、光が当たっている場所と当たってない場所を段階
を追って変化させるのではなく、明色と陰色のふたつにカラーを別けてしまう技法のことです。
l DCCツールでは、主にランプシェーダーから作りますが、今回はHalf Lambertモデルから作ってみま
しょう。
Shading Map
Ramp Shader

26. Half Lambertを用意し、不要なノードを消す
不要なノードは
消してしまいます
不要なノードは
消してしまいます

27. Shading Map用のテクスチャを割り当てる
マスクの反転
マスクをUVとして、テクスチャを貼る

28. Shading Map用のテクスチャを割り当てる
One Minusノードでマスクを反転します。
テクスチャ座標系では、左が０で、右が１です
が、ライティングモデルの値そのままだと、
明るい方が１で、暗いほうが０となってますの
で、マスク反転することでテクスチャ座標系
と合わせます
Component MaskノードでRRの数値を取り
出し、UV座標とします。
マスクからは、スカラーで各頂点の明るさの
レベルが来ていますので、それをベクトルの
各要素に見立て、RRとして取り出すことで、
UV座標とします。
取り出したUV座標を元に、各頂点のカラー
をシェーディングマップより割り出します。

30. ランプシェーダーを作ってみよう！
l ランプシェーダーも、Half Lambertモデルから作ることができます。
l その際、StepノードとLerpノードの２つのノードを使用します。
Stepノードで２値のマスクを作成し、そのマスクに従って、明色と陰色を塗り分けます。
Step (A<=B)ノード
AがBと同じかそれ以下の場合、
１を出力。それ以外は０を出力する。
２値化の閾値を設定するノード
Lerpノード
マスク値として与えられるTに応じて、
A、Bを混ぜるノード

31. ランプシェーダーを作ってみよう！

33. アンビエントカラーに反応するようにしよう
l シェーダーをアンビエントカラーに反応するようにしておくと、シーン全体にカラーを馴染ませるのが
やりやすくなります。
l アンビエントカラーの設定は、LightingウィンドウのSceneタブでおこないます。
Ambient Lightノード
シェーダーがレンダリングされるシーン
のアンビエントライトを出力する
アンビエントカラーの設定

34. アンビエントカラーに反応するようにしよう
例では、Switchノードを使って、
アンビエントライトの影響を
ON/OFFできるようにした。

35. アンビエントカラーに反応するようにしよう
アンビエントライトの影響
をONにした場合

36. ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう
l FallOffをランプシェーダーのマスクとして使うことで、さらに複雑な明色と陰色のブレンドが可能に
なります。
l ＦａｌｌＯｆｆ用のテクスチャはＰｈｏｔｏｓｈｏｐなどで簡単に作ることが出来ますので、いろいろと試してみると
いいでしょう。
FallOff用のテクスチャの例
グレースケールで作成する

37. ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう

38. ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう
FallOffをランプシェーダーの
マスクにしてみた例
この面が明色と
陰色の中間に
なっている

39. FallOffをマスクに使う時のTips
このような場合は、FallOffに
使用しているテクスチャの
WrapモードをClampにする
とよい。
FallOffを使っている時に、
へそがでる場合

40. トゥーンライン（アウトライン）
を設定してみよう

41. ​ アウトラインを設定するのは、とても簡単です。
​ Mainノードの Outline Width に数値を入力すると、
Outline Color にカラーが接続できるようになります。
​ これだけで、基本のアウトラインが表示されます。
マテリアルベースのアウトラインを表示する

42. 「トゥーンライン」に見る、処理系による線表示の違い
ノーマル反転によるマテリアルベースのトゥーンライン（アウ
トライン）表示は軽い分、クリース線や交差線は出ない。
またハードエッジに弱い等の弱点があるが、処理は軽く、
線の入り抜きなどの制御もしやすい。
古いハードウェアでも対応できるので、互換性が高い。
イメージエフェクトによるトゥーンラインの表示では、
アウトラインだけでなく、クリース線や交差線も表示
できる一方で、線の入り抜きなどの制御はしにくい。
またポストエフェクトとして処理される分、モバイル
では負荷が高くなる可能性がある。
ノーマル反転によるマテリアルベースのトゥーンライン表示
カメラベースのポストエフェクトによるトゥーンライン表示

43. トゥーンシェーダーの実例として
「ユニティちゃんトゥーンシェーダー」
を見てみよう！
• トゥーンシェーダーとは、NPR系シェーダーの系譜としては、「あるオブジェクトへの光の当たり具合に
基づいて、そのオブジェクトを指定のカラーで塗り分けるシェーダー」にあたります。
ここでは「ユニティちゃんトゥーンシェーダー」を例に、その仕組みを見てみましょう。

44. ユニティちゃんトゥーンシェーダーとは？
​ 「ユニティちゃんトゥーンシェーダー」は、セル風3DCG
アニメーションの制作現場での要望に応えるような形で
設計された、映像志向のトゥーンシェーダーです。
​ 特に影の制御に重点が置かれた設計になっています。
• アウトラインの入り抜き調整は、テクスチャで指定可能
• 必ず影にしたい場所をテクスチャで指定可能
• ノーマル色と影色の混合部のぼけ足を調整可能
• ライトの位置を変えずに影色の支配域を変更可能
• モバイル環境/WebGLでも動作します
• Shader Forgeで確認できる、ノードベースで実装されています
⇒目的に合わせて、カスタマイズができます！
http://unity-chan.com/download/index.php

45. ユニティちゃんトゥーンシェーダーのノードグラフ
トゥーンシェーダーとは、
「あるオブジェクトへの光の当たり
具合に基づいて、そのオブジェクト
を指定のカラーで塗り分ける
シェーダー」である。
陰部分のマスクの調整
アウトラインの調整
光の当たり具合を元に、
通常色と陰色を割り当てる
光の当たり具合を求める

46. 光の当たり具合を求めるノードパターン
Normal Directionノード
ワールド空間でのメッシュの法線方向
を出力する。チェックをつけるとノーマ
ルマップを考慮する。
Light Directionノード
レンダリング対象となるカレントライト
の方向を出力する。
Dot Productノード
AとBの２つのベクトルの内積をとる。
「内積」は、２つのベクトルが構成する
角度の開き具合を表している。
上図のように、ライトベクトルと法線ベクトルの内積を取ることで、
光の当たり具合を、
０（光が全く当たっていない）～１（光が真正面から当たっている）
の範囲で表現することができる！

47. マスク値を元に通常色と陰色を割り当てるノードパターン
Lerpノード
マスク値として与えられるTに
応じて、A、Bを混ぜるノード
「光の当たり具合」が
マスク値Tとして接続される
※「光の当たり具合」をどのように
マスク値として評価するかによって
トゥーンカラーシェーダーごとの特徴が出る。
通常色
陰色

48. トゥーンシェーダーの本質は、
光の当たり方を元に、オブジェクトを
通常色と陰色の２種類のテクスチャで
塗り分けることだから、
両者に違うタッチのテクスチャを割り当て、
カメラ側でカラーを乗せることもできる。
unity-chan! In 《Tank!》

49. 参考文献
l SHADER FORGE Nodes http://acegikmo.com/shaderforge/nodes/
l SA09 Realtime education - Try Real-time Shader for artist – Kazuhiro Fumoto, http://
www.slideshare.net/SIGTART/sa09-realtime-education
l Kansai cedec 2015_fumoto ノードベースリアルタイムシェーダ表現学習, Kazuhiro Fumoto,
http://www.slideshare.net/SIGTART/kansai-cedec-2015fumoto
l 『ゲームを動かす数学・物理』 堂前 嘉樹 / SBクリエイティブ / 2015
l 『DirectX シェーダプログラミング 仕組みからわかるゲームエフェクトテクニック』
N2Factory / SBクリエイティブ / 2007
l 「アーティストのアーティストによるアーティストのためのリアルタイムシェーダー入門
～トゥーンシェーダーを書こう！～」 本村・C・純也 / GTMF2016 Tokyo Session C-7