関連教材：https://drive.google.com/file/d/0B3oaXWaXwfzOTXBYUE13RTNXYkU/view?usp=sharing 内容： 本資料は2016/08/28におこなわれたUnity道場11で使用したスライドです。 Unity Asset Storeで大人気のShader Forgeを使って、シェーダーを学んでみませんか？ 本コースでは、Shader Forgeの基本的なオペレーションと、よく使うノードについて学びます。 よく使うノードの機能を学んだ後は、実際にシェーダーを組んでいく上で、しばしば使われるパターンを見ていきましょう。 本コースは、後続のクラスを受講することで、順次シェーダーについて学んでいく予定です。 Unity道場：https://kenjin.unity3d.jp/dojos

1. Unity道場 11
Shader Forge 101
～ShaderForgeをつかって学ぶシェーダー入門～
基本操作とよく使われるノード編
Unity Technologies Japan合同会社
コミュニティエバンジェリスト
小林信行
2016/08/28

2. 自己紹介 ： 小林 信行
ユニティテクノロジーズジャパン合同会社
コミュニティエバンジェリスト
UnityやMayaをはじめとする各種3Dツールの研究、
ゲーム制作のノウハウの普及をしてます。
その前は『涼宮ハルヒの追想』『涼宮ハルヒの約束』
『とらドラ・ポータブル！』などの原作付きキャラクター
ゲームの企画＆監督。

3. 本コースを受講することで得られる知見
• 本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、
ＳｈａｄｅｒＦｏｒｇｅの全機能を紹介するものではありません。
• 本コースでは、ShaderForgeの基本的なオペレーションと、よく使うノードにつ
いて学びます。
• よく使うノードの機能を学んだ後は、実際にシェーダーを組んでいく上で、し
ばしば使われるパターンを実際に見ていきましょう。

4. シェーダーを学んでみよう！

5. シェーダーは、
「独自の絵づくりのためには必要だ」
とよく言われているけれど…

6. そもそも「シェーダー」って、なに？
• 「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定
した、小さめのスクリプトのことを指します。
• Unityの場合には、サーフェイスシェーダー、バーテックスシェーダー、フラグメ
ントシェーダー、コンピュートシェーダーの４種類があります。
• サーフェイスシェーダーは、Unity独自のシェーダー言語であるShaderLabで
通常は書きます。さらにそれ以外のシェーダーは、ShaderLabにCgやHLSLな
どのより一般的なシェーダー言語を組み合わせて書かれます。
• 「Shader Forge」は、その内のサーフェイスシェーダーをノードベースでエ
ディットできるように、エディタ拡張で作られたツールです。
http://docs.unity3d.com/ja/current/Manual/SL-Reference.html

7. 絵画における「質感」を構成するもの
• 色 （材質およびそれに当たる光の色の表現）
• 陰影 （光が当たっている面の陰影の出方による立体表現）
• タッチ （材質の表面状態の表現）
⇒絵画は、「色＋陰影＋タッチ」の組み合わせで、様々な「質感」を表現する。
Ｕｎｉｔｅ 2016 Tokyo 『Unityとアセットツールで学ぶ「絵づくり」の基礎～ライト、シェーダー、イメージエフェクト～』
シェーダーはこの全てに
関わっている

8. 3DCGにおいて「質感」に影響を与えるもの
• マテリアル （マップおよびシェーダー）
• ライト （直接光と間接光、ホワイトバランス、ソフトネス、アングル）
• カメラ （HDRとフォーカス、スクリーンスペースでのイメージエフェクト）
⇒絵画における「色＋陰影＋タッチ」の組み合わせは、3DCGの場合には、
「マテリアル×ライト×カメラ」の各設定として、設計される。
Ｕｎｉｔｅ 2016 Tokyo 『Unityとアセットツールで学ぶ「絵づくり」の基礎～ライト、シェーダー、イメージエフェクト～』
シェーダーを使った絵づくりを学ぶためには、これら要素を切り分けて理解することが大切。
各々の役割をごっちゃにしないこと！

9. 特に、「マテリアル ＝ マップ × シェーダー」
u 物理ベースシェーダー（Ｓｔａｎｄａｒｄシェーダーなど）の場合
• 「物理ベースシェーダー」としての機能面は、Ｓｔａｎｄａｒｄシェーダーなどのゲームエンジンがデフォルトで提
供しているシェーダーが受け持っている。
• 従って、絵づくりはシェーダーに割り当てる、各ワークフローに則ったマップ（テクスチャ）の作り込みとライ
ティングが中心となる。
• マップ（テクスチャ）は、Substance DesignerやSubstance Painterなどで制作する。
u ＳｈａｄｅｒForgeが担当するのは、「シェーダーの機能面の作成」で、マップの作り込みではない
• ＳｈａｄｅｒＦｏｒｇｅを使いこなすことで、自分だけのカスタムシェーダーを作成することができる。
• カスタムシェーダーは、自分だけの独自の絵づくりの一翼を担うもの。
ここに様々なマップやライティングを組み合わせることで、最終的な絵づくりが完成する。
目的に合わせて、ツールも使い分けましょう！

10. ShaderForgeなどの
ノードベースエディタで
シェーダーを学ぶメリットって
どんなところ？

11. ノードベースのシェーダーエディタでシェーダー
を学ぶ利点
l シェーダーのコード記述特有の「めんどくささ」が回避できる。
• シェーダーのコード記述には、お約束のルールが結構ある。
• 同じことを繰り返して書かなければいけないことが結構ある。
⇒ShaderForgeなどのノードベースエディタでは、この辺りの「めんどくささ」を意識しないでよい
l 通常のプログラミングよりは、ノードのバリエーションが圧倒的に少ない。
⇒ビジュアルプログラミングの場合、ノードが複雑になると、ロジックが見づらくなるが、
シェーダーはグラフィック処理に特化している分、それほど複雑にならないですむ
l 一度憶えると、他のDCCツールやゲームエンジンでも同じようなノードやセマンティクス（シェーダー
入力/出力に付加される指定文字列のこと）があるので、相互運用がしやすくなる。
l ShaderForgeの場合、「変更が即、グラフィックに反映される」ので、イタレーションがしやすい。
⇒「トライアンドエラーがしやすい」ということは、「学びやすい」ということでもある

12. ShaderForgeの画面構成

18. マテリアルの新規作成
マテリアルに割り振られている
シェーダーの変更

19. ノードエディタの基本操作

20. ノードエディタの基本操作
l ノードリンクの削除：Alt/Option + RMB。リンクのまとめ切断も可能
l Macでノードを削除：Command + X （切り取り）で（WindowsならDeleteキーで）
l ノードのクイックサーチ：ノードの頭文字を入れて、マウススクロール。
左クリックで決定
l ノードの範囲選択指定：Alt/Optionを押しながら、LMBドラック
l ノードの範囲選択中は、ヒエラルキー状態を保ちながらノードを移動できる
l ノード上でRMBでコメント挿入ができる他、各ノードの機能をＷＥＢから検索できる

21. 用途別に見る
基本的なノードの機能

22. テクスチャを貼る
UV Coordinates
Texture 2D
Main

23. テクスチャを貼る
Emissionに接続すると、ライトの影響を受け
なくなる（Unlitの状態になる）。
Diffuse/Base Colorに接続すると、ライトの影
響を受けるようになる。

24. テクスチャにカラーを重ねる
Color
Multiply
Add

25. テクスチャにカラーを重ねる
Multiplyでカラーを重ねると、輝度は下がる。
（「白」なら変わらない）
Addでカラーを重ねると、輝度は上がる。
（「黒」なら変わらない）

26. テクスチャにカラーを重ねる
Multiply/Addノードには、２つ以上のノードを
入力することが可能

27. ２つのテクスチャやカラーを混ぜる
Lerp（線形補間）
Value
Blend（Photoshop的）

28. ２つのテクスチャやカラーを混ぜる
Lerpは、２つのテクスチャやカラーをＶａｌｕｅの値
に従って、線形補間（Linear interpolation）
することで混ぜる。
Blendは、２つのテクスチャやカラーを
Photoshopのレイヤー合成的に混ぜる。

29. ノーマルマップを貼る、合成する
Texture 2D /
Normal map
Main / Normal
Normal Blend
Lerp / Value / Normalize

30. ノーマルマップを貼る、合成する
ノーマルマップを、MainノードのNormalに接続
するとノーマルマップが適用される。
2つのノーマルマップを合成する時は、
Normal Blendノードを使う。

31. ノーマルマップを貼る、合成する
Lerpを使用して、Valueで指定した
強度で２つのノーマルマップを合成
することもできる。
その場合、合成したノーマルマップを
Normalizeノードで正規化しておく。

32. カラーやマスクを反転する
One Minus

33. カラーやマスクを反転する
カラーや白黒のマスクなど、「０～１」の範囲にあるベクトルや画像を
反転させる際に、One Minusノードを使用する。
特にカスタムライティングをする際に、良く使われるノードである。

34. ＵＶマッピングをタイリング（スケール）する
UV Coordinates / Multiply / Value / Vector2

35. ＵＶマッピングをタイリング（スケール）する
UV CoordinatesノードをMultiplyノードに接続することで、ＵＶマッピング
を任意にタイリング（スケール）することができる。
MultiplyノードにVector2ノードを接続すると、UV方向に違ったスケール
をかけられる。

36. ＵＶマッピングをタイリング（スケール）する
Value = 1
の時
Value = 0.25
の時
Value = -0.25
の時

37. ＵＶマッピングをオフセット（スクロール）する
UV Coordinates / Add / Value / Vector2

38. ＵＶマッピングをオフセット（スクロール）する
「赤１」に着目すると
右に１コマ、下に２コマ
オフセットしている
左に１コマ、下に1コマ
オフセットしている
UV CoordinatesノードをAddノードに接続することで、ＵＶマッピングをオフセット（スクロール）
することができる。

39. ＵＶマッピングをアニメーションさせる
Timeノードから取得した時間変化分を、AddノードでUV Coordinatesノードに接続
することで、ＵＶマッピングがスクロールアニメーションをする。
UV Coordinates / Time / Add

40. ＵＶマッピングをアニメーションさせる
Timeノードから取得した時間変化分に、MultiplyノードでVector2を掛けることで、
スクロールの移動方向と速度の調整ができる。

41. 専用ノードでＵＶマッピングをアニメーションさせる
Pannerノードで、ＵＶマッピン
グをスクロールアニメーショ
ンすることもできる。
Distanceに値を接続すると、
Ｔｉｍｅノードから値を取得し
ない限り、ＵＶマッピングのオ
フセットとして機能する。
PannerノードのUVで、スク
ロールの速度と方向を指定
できる。

42. ＵＶマッピングを回転アニメーションさせる
Rotatorノードを使うことで、
ＵＶマッピングを回転アニ
メーションさせることがで
きる。

43. 実際にシェーダーを
組んでみよう！

44. UVタイルアニメーションを作ってみよう

45. シェーダーとテクスチャアトラスの準備

46. テクスチャアトラスの表示

47. １コマサイズで表示する

48. Divideノード
A/Bを計算するノード

49. 時間でスクロールさせる

50. 時間でスクロールさせる
Fracノード
０から１まで、小数点以下のみを繰り返す関数。
0～1の繰り返しタイマーなどに使う。

51. コマ単位でアニメーションさせる

52. コマ単位でアニメーションさせる
Floorノード
小数点以下を切り捨てて、整数にする関数。
ステップ進行などに使う。

53. +X方向に進行して、-Y方向にジャンプする
UnityやMayaのUV座標系は上図。
DirectXでは、原点が左上になり、
かつV軸が反転する。

54. +X方向に進行して、-Y方向にジャンプする

55. Component Maskノード
ベクトルの各要素を分解するノード。
ベクトルの各要素から数値を取り出すのに使う。
他、Vector3からXY要素（UV要素）のみを取り出す
のに使用したりする。

56. Appendノード
数値を合成して、ベクトルを新規に作り出す
ノード。
各数値をベクトルの構成要素にして、
新規にベクトルを作り出すのに使う。

57. 「苔むした岩」(環境ブレンディング)
を作ってみよう

58. ２つのテクスチャを合成するための準備

59. Lerpノード
２つのテクスチャやカラーを、０～１の範囲内のTの値に
従って、線形補間（Linear interpolation）することで混ぜる。
Tとして、Valueの他にマスクノードなどを接続できる。

60. 共に50%の比率で、Lerp合成する

61. ベースマテリアルの「上側」を示すマスクを作る
岩の上方ほど、苔がより生えて
いる状態を表現したい…。
岩の表面の凹凸でも、上方ほど、
苔がより生えている…。
ノーマルマップが使えないか？

62. ベースマテリアルの「上側」を示すマスクを作る
タンジェントスペースから
ワールドスペースに変換
Y方向（上方向）の情報
のみ取得
UnityやMayaでは、ワールド座標での上方向はY軸方向（Y-up）。
一方、3ds Maxや他のゲームエンジンではZ軸方向が上(Z-up)
になるので注意。

63. Transformノード
ワールド/ローカル/タンジェント/ビューの各座標
空間に、ベクトルを変換するノード。
タンジェントスペースの概念
ローカル座標にあるUVZ座標（空間）を
「タンジェントスペース（接空間）」という
ノーマルマップのカラーと法線の傾きの関係のイメージ
http://marupeke296.com/DXPS_S_No5_NormalMap.html
(L)Normal
(L)Tangent
(L)Binormal
UV座標

64. マスクの濃度調整をする

65. Clamp 0-1ノード
0以下、または1以上の値を切り捨てるノード。
マスクなど、 0～1の範囲内にある必要がある
数値の調整用に用いられる。

66. マスクをシャープにする

67. Subtractノード
A-Bを計算するノード。

68. マスクで、２つのテクスチャのLerp合成をする

70. 参考文献
l SHADER FORGE Nodes http://acegikmo.com/shaderforge/nodes/
l Shaders 101 – Foundational Shader Concepts for Tech Artists
Ben Cloward (CG Supervisor Bioware) / GDC Vault
http://www.gdcvault.com/play/1023152/Technical-Artist-Bootcamp-Shaders-101
l プログラマブルシェーダーについては、
『ゲームつくろー！』「プログラマブルシェーダ編」
http://marupeke296.com/ProShader_main.html