Unity道場スペシャル Amplify Shader Editor 101の資料です。

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

2. 自己紹介 ： 小林 信行
ユニティテクノロジーズジャパン合同会社
コミュニティエバンジェリスト
UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウの普及
をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一人でもあります。
前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブル！』などの
原作付きキャラクターゲームの企画＆監督（クリエィティブ・ディレクター）。
結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、多くの
コンシューマゲームに導入されるきっかけを作りました。
最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。
元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入る
きっかけがGAINAXに入ったことだったので、アニメーションの制作技術に関して
もむやみに詳しいです。

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

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

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

6. そもそも「シェーダー」って、なに？
• 「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定
した、小さめのスクリプトのことを指します。
• Unityの場合、シェーダーを書くアプローチとしては、「サーフェイスシェー
ダー」、「バーテックス/フラグメントシェーダー」、「コンピュートシェーダー」、
「固定関数シェーダー」の４種類があります。
• シェーダーそれ自体はCgやHLSLなどのより一般的なシェーダー言語によっ
て書かれますが、上のいずれのアプローチを使っても最終的にはUnity独
自のシェーダー言語であるShaderLabによってラップされます。
• 「Amplify Shader Editor」は、その内のサーフェイスシェーダーをノードベース
でエディットできるように、エディタ拡張で作られたツールです。
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 Amplify Shader Editorが担当するのは、「シェーダーの機能面の作成」で、マップの作り込み
ではない
• Amplify Shader Editorを使いこなすことで、自分だけのカスタムシェーダーを作成することができる。
• カスタムシェーダーは、自分だけの独自の絵づくりの一翼を担うもの。
ここに様々なマップやライティングを組み合わせることで、最終的な絵づくりが完成する。
目的に合わせて、ツールも使い分けましょう！

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

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

12. Amplify Shader Editor
のインストール

13. Unityエディタへのインストール １
• Amplify Shader Editorは、Asset
Storeから購入することができます。
• すでに購入が済んでいる時には、
UnityエディタのAsset Storeウィンド
ウからImportボタンをクリックするこ
とで、各プロジェクトにインストール
することができます。

14. Unityエディタへのインストール ２
• Import Unity Packageウィンドウが
開いたら、右下のImportボタンを押
してください。パッケージがUnityエ
ディタにインポートされます。
• インポートが無事終了すると、ツー
ルバー>Windowメニューに新規に
Amplify Shader Editor項目が追加
されます。
• またProjectウィンドウのAssetsフォ
ルダの直下にAmplifyShaderEditor
フォルダが生成され、中に必要な
ファイルがインストールされます。

15. Unityエディタへのインストール ３
• ProjectウィンドウのAssetsフォルダの直下に生成されるAmplifyShaderEditorフォルダ内には、
Amplify Shader Editorで使用される様々なファイルが入っています。
• 特に、AmplifyShaderEditor/Examples以下にある、OfficialおよびCommunityフォルダ内には、
すぐに使えるシェーダーのサンプルが入っていますので、シェーダー制作の参考にするとよ
いでしょう。
• なお、Amplify Shader Editorで作成した各シェーダーファイルは、Amplify Shader Editorがイ
ンストールされていないUnity環境でも動作します。従って、エディタ環境に関しては、シェー
ダーファイルを直接編集する可能性のあるスタッフのみが所持すれば、問題ありません。

16. Amplify Shader Editor
の画面構成と基本操作

17. 新規にシェーダーファイルを作成する １
• ProjectフォルダのCreateメニューより、Shader>Amplify Surface Shaderを選択すると、右上のようなノードエディタ（CANVAS）が開きます。
• 新規にシェーダーファイルを作成した場合、左側メニューのShader Nameを指定します。
この名前は、Inspectorのマテリアル内で使用されるシェーダー名になります。
• さらにメニューバー上の右から１つめのボタンをクリックし、緑色になると、シェーダーノードがファイルに保存されます。

18. 新規にシェーダーファイルを作成する ２
• ノードエディタを閉じると、新規にMyEmptyShaderというファイルができていますので、
こちらをリネームしておきます。前のページで指定したShader Nameと同じにするのがよいでしょう。
• リネームしたシェーダーファイルをInspectorで見ると、「Open in Shader Editor」というボタンがあります。
こちらをクリックすると、再びノードエディタが開きます。
• Amplify Shader Editorをインストールすると、 Amplify Shader Editor以外で作成したシェーダーファイルの場合でも、Inspector上で
は「Open in Shader Editor」ボタンが現れます。その時、このボタンを押すと、空っぽの初期状態のノードエディタが立ち上がります。
この場合、セーブ処理をしなければ元のシェーダーファイルは壊れませんので、そのままノードエディタを閉じてください。
もしこの時にセーブ処理をしてしまうと、シェーダーファイルが上書きされてしまいますので、注意してください。

19. 既存のシェーダーファイルをオープンする
• Amplify Shader Editorで作成した既存の
シェーダーファイルを、ノードエディタで開く
場合には、シェーダーファイル本体もしくは、
それから作成したマテリアルをProject上で
指定し、Inspector上の「Open in Shader
Editor」ボタンをクリックします。
• なお「 Open in Shader Editor」ボタンは、
Amplify Shader EditorをUnityエディタにイン
ストールしていないと表示されません。

20. ノードメニューの表示の仕方、ノードの探し方
ノードメニューの出し方は、いくつ
かあります。
① ノードエディタ上の適当な場
所で右クリックする。
② マスターノードのInputから左
ドラッグでワイヤを伸ばし、
適当なところで離す。
③ 画面右側にあるノードメ
ニューを利用する。
ノードメニューからはSearchボッ
クスが利用できるので、ノード名
を入れてサーチしてもよいです
し、プルダウンから使用するノー
ドを選択してもよいです。
1
2
3

21. 良く使うノードは「ショートカット＋左クリック」
ノードメニューの中に、ノード名の
横に[ ]が付いているものがあり
ます。[ ]内の数字や１文字のアル
ファベットは、該当するノードの
ショートカットです。
ショートカットを利用する時には、
何もないCANVAS上で、ショート
カットに当たるキーを押しながら、
左クリックします。
良く使うノードのショートカットは
憶えてしまいましょう。

22. ノードのInput側とOutput側について
• 基本的に、ノードの左側には、
ノードへデータをInput（入力）
する端子があり、ノードの右側
にはそれらのノードで加工さ
れたデータをOutput（出力）す
る端子があります。
• ノードの中には、Output側にし
か端子を持たないもの、両方
に端子を持っているものがあ
ります。Input側しか端子を持
たないものは、マスターノード
のみです。
• 基本的なデータの流れとして
は、左から右へとデータが流
れていくことになります。
全てのデータはマスターノード
に接続されることで、初めて
画面に表示されます。

23. ノードの接続の仕方、切断の仕方
• ノードの接続の仕方
接続するノード同士の
Input/Output側のいずれかの
ノードの端子を左ドラッグして
ワイヤを伸ばし、相手ノードの
端子に接続します。
左の図なら、①⇒②で接続し
ます。逆に②⇒①でも接続で
きます。
• ノードの切断の仕方
Input側のノードの端子を左ド
ラッグして外します。
左の図なら、③/④の端子を
左ドラッグしてワイヤを外し、
途中で離します。
または、Altキーを押しながら、
接続中のノードの端子を左ク
リックします。
1
2
3
4

24. ノードをまとめて選択する、コメントをつける
• 複数ノードの選択の仕方
画面の何もない場所から左ド
ラッグして領域指定すること
で、中に含まれる複数ノード
を選択できます。
選択状態のノードは、そのま
ま左ドラッグで移動できます。
• コメントのつけ方
複数ノードを選択状態にした
まま、キーボードから「C」を入
力するとコメントとして囲ま
れます。
不要になったコメントは
「Delete」キーで削除します。
コメント化されているノードは、
まとめて動かすことができま
す。
コメントウィンドウ内にノード
をドロップすると、追加されま
す。同様にコメント外にノード
をドロップすると外れます。
• 各コメントはネスト可能です。

25. ノードのプロパティを設定する
• 変更したいノードを左クリック
で選択すると、ノードエディタ
左側のNode Propertiesがノー
ドごとに切り替わります。
• Node Properties内の各要素
を変更することで、各ノードの
プロパティが変更できます。
• ノードのプロパティをマテリア
ル側で外部に出すか等の設
定ができます。変数やテクス
チャなどのノードについては、
シェーダープロパティ内で使
用する名称を変更できます。

26. マスターノードのプロパティについて
• 特にMaster Nodeが選択され
ている時、Node Propertiesに
は、シェーダーの基本的な機
能を決める重要な設定が現
れます。
• またマテリアルを作成した時
に、Inspector上に表示される
外部プロパティの順番などは、
このNode Propertiesから設定
します。
• ここでは特に、Shader Nameと
Available Propertiesをきちんと
設定しておきましょう。また
シェーダーの基本的な機能を
設定するものとして、使用す
るLight Modelも確認しておき
ましょう。
• 他にもカリング設定や計算精
度、影の設定などができます。
詳しくはUnityのシェーダーリ
ファレンスを確認してください。

27. Light Modelについて
• Light Modelは、Master Node
のMain Propertiesから選択で
きます。
• 選択したLight Modelに応じて、
Master NodeのInput側の端子
が変化しますので、注意して
ください。
• 「Smoothness」と呼ばれる値
は、「1-Roughness」のことを指
しています。
• Input側のノードの端子に繋が
れるマップの仕様は、おのお
ののライトモデルのそれに応
じます。従って、Standard
Specularに使われるPBR用の
SpecularマップとBlinn Phongに
使われるSpecularマップは、名
前は同じでもマップ自体の定
義が違うことに注意してくだ
さい。
Standard
(PBR)
Standard
Specular
(PBR)
Lambert /
Blinn Phong
(Legacy)

28. 作業時のエディタレイアウトについて
左のようにレイアウトす
ると作業が捗ります。
① オートセーブモードにす
る。
② Project上より作成中の
シェーダーを割り当てた
マテリアルを選択する。
③ ノードエディタがマテリ
アルモードであるか確
認する。
④ Inspector上で作業中の
マテリアルのプロパティ
を確認する。
⑤ マテリアルのプロパティ
を変更することで、
Sceneビュー内のシェー
ダーボールも自動的に
変更される。
1
2
3
4
5

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

30. テクスチャを貼る 1
Texture Coordinates [U] Texture Sample [T]
ノード名は変更可能
注意：Texture SamplerノードにはUVポートがありますが、このポートに
は必ずしもTexture Coordinatesノードを接続する必要はありません。
もし接続しない場合には、Texture SamplerノードプロパティのUV Set
設定に合わせて、最適なUVが設定されます。
Texture Coordinatesノードは、
Texture SamplerノードのUVポートに接続す
ることで、複数のTexture Coordinatesノード
間でUVを共有する場合に使います。

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

32. テクスチャを貼る 3 Material/Default設定
Materialベースでの設定 Shaderファイルベースでの設定

33. テクスチャにカラーを重ねる 1
Color [5]
Multiply [M] Add [A]
Propertyに変更することで、
シェーダープロパティとして、
Inspector上に表示できます。
Constantに設定すると、
シェーダー内で固定値になり
ます。

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

35. ２つのテクスチャやカラーを混ぜる 1
Lerp [L]
Float [1]
Blend Operations
（Photoshop的）

36. ２つのテクスチャやカラーを混ぜる 2
Lerpは、２つのテクスチャやカラーをAlphaに接続された値
に従って、線形補間（Linear interpolation）することで混ぜ
る。
Blend Operationsは、２つのテクスチャやカラーをPhotoshopの
レイヤー合成的に混ぜる。
合成オプションはNode Properties内のBlend Opで設定する。
サンプルはColor Burn

37. ノーマルマップを貼る、合成する 1
Blend Normals
Lerp [L] / Float [1] /
Normalize [N]
Texture Sample [T]
/ Normal = ON

38. ノーマルマップを貼る、合成する 2
Texture SampleノードのNormal Map
オプションをONにした上でノーマル
マップを、マスターノードのNormalに
接続するとノーマルマップが適用さ
れる。

39. ノーマルマップを貼る、合成する 3
2つのノーマルマップを合成
する時は、Blend Normals
ノードを使う。

40. ノーマルマップを貼る、合成する 4
Lerpを使用して、Floatで
指定した強度で２つの
ノーマルマップを合成す
る例。
さらに合成したノーマル
マップをNormalizeノード
で正規化しておく。
Alphaの値：Float
（Mixed_Power）を変え
るとブレンド具合が変化
する。

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

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

43. ＵＶマッピングをタイリング（スケール）する 1
Texture Coordinates [T] / Multiply [M] / Float [1] / Vector [2]

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

45. ＵＶマッピングをタイリング（スケール）する 3
Texture CoordinatesノードのTiling端子に直接Float/Vectorノードを接続しても、同じ結果が得られる。

46. ＵＶマッピングをタイリング（スケール）する 4
Float = 1Float = 0.25 Float = -0.25

47. ＵＶマッピングをオフセット（スクロール）する 1
Texture Coordinates [T] / Add [A] / Float [1] / Vector [2]

48. ＵＶマッピングをオフセット（スクロール）する 2
「赤１」に着目すると 右に１コマ、下に２コマ
オフセットしている
左に１コマ、下に1コマ
オフセットしている
Texture CoordinatesノードをAddノードに接続することで、ＵＶマッピングをオフセット（スクロール）することができる。
Addノードを使わずに、Float/VectorノードをTexture CoordinatesのOffset端子に直接接続しても同じ。
-0.125,0.25
0.125

49. ＵＶマッピングをアニメーションさせる 1
Timeノードから取得した時間変化分を、AddノードでTexture Coordinatesノードに接続することで、
ＵＶマッピングがスクロールアニメーションをする。
直接Texture CoordinatesノードのOffset端子に接続してもよい。
Texture Coordinates [T] / Time / Add [A]

50. ＵＶマッピングをアニメーションさせる 2
Timeノードから取得した時間変化分に、MultiplyノードでVectorを掛けることで、
スクロールの移動方向と速度の調整ができる。
X(U)方向にマイナスの値を
かけているので、スクロール
の方向が前のページの例と
変わっていることに注意

51. PannerノードでＵＶスクロールアニメーションをする
Pannerノードで、ＵＶマッピングをスクロールアニ
メーションすることもできる。
Time端子に値を接続すると、Ｔｉｍｅ Parameters
ノードから値を取得しない限り、ＵＶマッピング
のオフセットとして機能する。
PannerノードのNode PropertiesにあるSpeed X、
Speed Yで、スクロールの規定の速度と方向を
指定できる。
なおスライダーは、FloatノードでMin/Maxを指
定することで得られるインタフェース。

52. RotatorノードでＵＶ回転アニメーションをする
Rotatorノードを使うことで、
ＵＶマッピングを回転アニ
メーションさせることができ
る。
Time端子に値を接続すると、
Ｔｉｍｅ Parametersノードから
値を取得しない限り、ＵＶ
マッピングの回転オフセット
として機能する。
一方、Anchor端子には、UV
回転の中心点のUV座標を
指定する。

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

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

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

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

57. １コマサイズで表示する
Divide [D]
A/Bを計算するノード

58. 時間でスクロールさせる
Fract
０から１まで、小数点以下のみを繰り返す関数。
0～1の繰り返しタイマーなどに使う。
この場合、時間が進行
してもUVが0～1の範囲
に収まるようにしている。

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

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

61. +X方向に６つ進行して、-Y方向に１つジャンプする
ここはちょっとわかりにくいので、UV Offset Vectorにタイマー
が進行すると,具体的にどんな値が入るか考えるとよい。
ポイントはX方向に進行するFloorの値を、Y方向にする時、
6(並びの数）で割り、再びFloorを通すことでX方向に６つ進ん
でから、Y方向に１進むようにするところ。
ただしYの開始点が左下なので、チップ１番目を左上にするた
めに１引いた後で、進行方向として-1を掛けている。
タイルテクスチャ自体はループ状態になっていることに注意！
また、Flipbook UV Animationノードも見てみよう。
同様の機能がコンパクトに実装できます。

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

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

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

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

66. 共に50%の比率で、Lerp合成する
Lerp
２つのテクスチャやカラーを、０～１の範囲内のAlphaの値に従って、
線形補間（Linear interpolation）することで混ぜる。
Alpha=0⇒A=100% / Alpha=1⇒B=100%になる。
Alphaとして、float値の他にマスクノードなどを接続できる。

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

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

69. タンジェントスペースの概念
ローカル座標にあるUVZ座標（空間）を
「タンジェントスペース（接空間）」という
ノーマルマップのカラーと法線の傾きの関係のイメージ
http://marupeke296.com/DXPS_S_No5_NormalMap.html
（ローカル座標では、Normal）
(ローカル座標では、Tangent）
(ローカル座標では、Binormal）
UV座標
World Normal
ノーマルマップを
タンジェントスペースから
ワールドスペースに変換

70. マスクの濃度調整をする
Clamp 0-1の代わりに、Saturate
ノードを使ってもよい。

71. Clamp 0-1 / Saturate
0以下、または1以上の値を切り捨てるノード。
マスクなど、 0～1の範囲内にある必要がある数値の調整用
に用いられる。
使用時に、Node PropertiesのMin=0、Max=1を入れること。
この使い方をする限り、Saturateノードと同じ機能になる。
※Shader ForgeのClump 0-1ノードは、
コードではSaturate関数に変換される。

72. マスクをシャープにする
Subtract
A-Bを計算する
※このパターンはシャープ化する
のに良く使われる

73. 作成したマスクで、Lerp合成をする
作成したマスクを各LerpノードのAlphaに
接続して完成です。

75. Amplify Shader Editorに付属する
サンプルシェーダーを見てみよう
Assets/AmplifyShaderEditor/Examples/Official フォルダ内に
様々なサンプルシェーダーが入っています。
それらのサンプルをざっくりと見てみましょう。

76. AnimatedFire
​燃えさかる炎のシェーダー。
​ポイントは、Pannerを使ったテクスチャのUVスク
ロールと、Sin Timeを使った炎の照度変化です。
​この二つのアニメーションを組み合わせることで、
複雑な効果を出しています。

77. Burn
​燃える薪などのシェーダー。
​基本となる発想は、AnimatedFireと同様です。
ポイントとしてはノイズテクスチャとUVスクロール
を組み合わせることで、複雑な変化を出しつつ、
さらにそれらをマスクとして様々な場所でLerp
ノードによる合成を行っています。
​燃えている部分の照度変化は、Sinノードで表現
しています。

78. CubemapReflection
​キューブマップを環境マップとして使用する、
リフレクションマッピングの例。
​CubemapのUVとして、World Reflectionノードを接
続します。World Reflectionノードは、ワールド座標
上の反射ベクトルを生成するノードです。

79. DitheringFade
​カメラが近づくと、ディザリングしながら消えてい
くシェーダー。
​Opacity Maskに接続されているノードに注目して
ください。
​左側の大きなブロックは、カメラとオブジェクトの
距離に合わせて調整をしている部分です。そこ
で得られた値を元に、Ditheringノードが作成したα
マスクでカットオフをします。
Ditheringノードのパターンは、Node Propertiesから
２種類選べます。

80. NormalExtrusion
​ノーマル方向に時間で押し出しをするシェーダー。
​波のような一定の動きを作り出しているのは、Sin
ノード。Vertex Positionからの出力は振幅のディス
トーション発生用。Y成分が使われているが、別
の成分でもよい。
​Maxノードで０以上の値が常にVertex Normalの
方向に掛けられて、さらにLocal Vertex Offset経
由で押し出しされる。

81. Matcap
​Matcapと呼ばれるスフィアマップ
を割り当てるシェーダー。Matcapは
Zbrushの作業用シェーディングで
もよく知られている。
​ポイントは、World NormalをView
座標に変換するブロックと、View
座標は（-1,1）で来るので、それを
UV合わせで(0,1)の座標系に変換
するブロック。
ノーマルマップをビュー座標変換し
たらそれをUVとしてテクスチャに
与えてやる。
MatcapはEmissionポートに接続す
るので、Receive Shadowはオフにし
ておくほうがよい。

82. ObjectNormalRefraction
​ガラス玉っぽい雰囲気の屈折シェーダー。ほぼマスターノードの機能でできている。
上のブロックはWorld ReflectionとCubeMapを使った映り込みの部分。
そこにOpacityで透明度と、Refractionで屈折表現を足している。
マスターノードのBlend Modeを必ずTranslucentに設定する。

83. ​複数ハイトマップの繰り返しのある、視差マッピングシェーダーの例。
​基本は、Parallax Mappingノードに必要なノードを接続してオフセット用のUVマップを作成し、それらを各マップのUVとして用いる。
​ハイトマップはモノクロなのでRチャンネルしか使用していなかったり、繰り返しハイトマップの部分にはマテリアルインスタンスを使うことで
メモリを軽量化しているところがポイント。
ParallaxMappingIterations

84. ParallaxOcclusionMaping
​視差遮蔽マッピングシェーダーの例。ハイトマップで表現される凹凸のある物体に対し、表面の見える部分と凹凸に隠れて見えない
部分が区別できるようにマッピングする。基本は、Parallax Occlusion Mappingノードにハイトマップ、ビューベクトル等の必要なノードを
接続してオフセット用のUVマップを作成し、それらを各マップのUVとして用いる。
本サンプルの場合、Roughnessマップを使用しているので、Smoothnessポートに接続する前に、One Minusノードを経由している。

85. ParallaxOffsetFakeInterior
​視差マッピングシェーダーの応用例。カメラを動かすと、窓越しのインテリアが視差で動くのが確認できる。
３つの背景レイヤーと１つのマスク（マスクはRとGチャンネルを使用）、さらに部屋の最奥用レイヤー向けオフセットUVと部屋の
中奥用レイヤー向けオフセットUVを使用することで、一枚の板ポリゴンで「窓越しにインテリアが見える壁」を表現できる。
3Dでビルの窓越しのインテリアのポリゴンを削減するのに使ったり、2.5D表現の背景として使っても面白い。

86. PositionCutOff
​StartPointの位置に応じて、マテリアルが浸水したような効果が得られるシェーダー。
​Vertex PositionノードのY値が使用されている場合、オブジェクト座標での高さが得られるので、マテリアルボールの位置を変化させ
ても浸水効果が発生する位置は変わらない。Toggle Switchノード経由でWorld PositionノードのY値を使用する場合は、ワールド座標
での高さが得られるので、マテリアルボールの位置を引き上げると、マテリアル上で浸水効果が発生する位置が下がる。

87. ReadFromAtlasTiled
​Custom Expressionノードも含むテクスチャアトラスから任意の場所を読み込むシェーダー。
​Min座標にテクスチャアトラスから切り出す左下座標を指定し、Max座標に同じく右上座標を指定する。
最後にTileSizeでマテリアル上に表示するタイルの数を指定する。Frac関数は引数の小数部のみを返す関数。

88. ​質量感のある闇を表現するシェーダー。
​大きく３つのブロックに別れているが、各々のブロック
が作り出すマスクの意味を考えると構成がわかりや
すい。一番上のブロックは、World NormalとViewベクト
ルの内積から縁の部分を検出し反転している。
​中のブロックは、シーンカラーのUVをノーマルマップで
変形し、疑似的な屈折ガラスを表現している。これら
を乗算することで、内側ほど濃くなる闇を表現する。
​最後のブロックはWorld NormalとLightベクトルの内積
より光の当たり方を求め、強さを調整した上で、
Opacityに接続することで、落ち影の透明度を調整し
ている。Blend ModelはTranslucentにすること。
RefractedShadows

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

90. 内積（Dot Product）とは？

91. RimLight
​RimLightシェーダー。最初のブロックは、リムマスクを作り出すブロック。ノーマルベクトルとViewベクトルの内積を反転して、
リムの位置を求めている。（ここで使用しているノーマルベクトルは、タンジェントスペースのノーマルマップなので、Viewベク
トルのほうもタンジェントスペースに合わせていることを注意する） 続くPowerノードは、マスクの明るさを絞る役割をして
いる。

92. ​スクリーンスペース曲率シェーダー。表面上が大きく変位する場所に影入れとハイライトを入れたような効果が得られる。
​実装は、http://madebyevan.com/shaders/curvature/を参考にするとよい。
Crossノードは外積を求めるノードで、２つのベクトルに共に直交するベクトルを出力する。
ScreenSpaceCurvature

93. ​カメラからの距離合わせで、チェッカー柄のテクスチャのマッピングサイズが変化するシェーダー（チェッカーの柄のサイズ
は変化しない）。 Screen Positonノードは、スクリーンスペース上での位置データscreenPosを出力するノード。反射やスクリー
ンスペース系のエフェクトを作るのに用いられる。
​screenPos.xyをwで割ることで、（0,0）～（1,1）に正規化された値で描画先の座標が得られる。
ScreenSpaceDetail
カメラを引く
screenPos上のXY座標を
UVとして利用している

94. SimpleBlur
​シンプルなブラーエフェクトの例。
​ブラーをかけるテクスチャに対して、テクスチャインスタンスのUV座標を少しずつオ
フセットして重ねて作成する。各Floatの値が各サンプルの寄与度になっていて、全
て足すと１になるのがポイント。StepとLerpは、ブラーあり/なしのためのトグル。

95. SimpleGPUInstancing
​GPU Instancingが使えるシェー
ダーの例（？）
​特定のＰａｒａｍｅｔｅｒ TypeをＩｎｓｔａｎｃ
ｅｄ Propertyに変更するようです。
​するとマスターノードの右上に
マークが現れます。
​ＧＰＵ Instancingを使用するため
にはその他にも設定が必要です
ので、リファレンスで確認したほ
うがいいでしょう。

96. SimpleLambert
​本当にシンプルなＬａｍｂｅｒｔモデ
ルのサンプル。
マスターノードのLight Modelを
Lambertに設定するだけです。

97. SimpleNoise
​シンプルなノイズエフェクトの例。
​2Dテクスチャに引き渡すUVマップにノイズジェネレータで作成したノイズを加算し
て、ノイズ効果をテクスチャに加える。
​SizeパラメタとStrengthパラメタの両方でエフェクト効果が変わる。

98. SimpleRefraction
​シーンカラー（Grabテクスチャ）のUVに、ノーマルマップをスクリーンスペースで
加算することで作成するシンプルな屈折表現。
​Distortionの値で、ノーマルマップの影響を調整できる。
Grabテクスチャには、Screen Positionノードではなく、Grab Screen Positionノード
を使う必要がある。
​Blend ModeはTranslucentにすること。

99. SimpleTexture
​UnityのＳｔａｎｄａｒｄ Ｓｈａｄｅｒ（Metallic-Smoothness）と、ほぼ同様の
機能を持つPBRシェーダーの例。
​MetallicとＳｍｏｏｔｈｎｅｓｓの各ポートに使用するテクスチャチャン
ネルは、Ｕｎｉｔｙ標準のものに合わせてみた。
​Ｎｏｄｅ PropertiesのCull ModeをOffにして、Ｓｔａｎｄａｒｄ Shaderでは
できない両面ポリゴン表示のシェーダーを作ってもよいでしょう。
（ただし両面ポリゴン表示の場合、裏側にも表側と同じノーマ
ルマップを当ててライティングすることになるので、裏側のライ
ティング結果がおかしくなる可能性があることに注意してくだ
さい。）

100. ​岩の上に雪が積もる環境マッピング。「苔むした岩」の例と同様の考え方で組まれている。①のＷｏｒｌｄ Normalは、ノーマル
マップの合成用マスクなので、ワールド座標上での高さ(Y)をそのまま使っている。②のWorld Normalは、合成されたノーマ
ルマップ上で評価したワールド座標上での法線ベクトル。こちらもワールド座標上での高さ(Y)をアルベドとスペキュラマッ
プの合成用マスクとして使っているが、こちらはノーマルマップベースなので、個々の岩の凹凸も考慮される。
SnowAccum

101. ​キューブが回転すると、四方に貼られたスクリーン越しに
見えるオブジェクトが変化する不思議なキューブ。
その仕掛けは、ステンシル処理です。
​キューブの四面には、各々スクリーンが貼られていて、手
前の水紋が現れるスクリーンとその後ろに配置されてい
るステンシルマスクがあります。またキューブの内部には、
各マスクのステンシルリファレンス番号に対応したマテリ
アルを持つオブジェクトが配置されています。
​あるステンシルマスクは、同じステンシルリファレンス番号
を持つオブジェクトしか描画しません。従って、このキュー
ブが回転すると、スクリーン越しに見えるオブジェクトが変
化するという仕掛けになっています。
StencilExample 1

102. ​オブジェクトに貼り付けられているマテリアル
は、左図のようなものです。
​マテリアルノードはありふれたものですので、
Stencil Buffer以下の設定を見てください。
​Referenceに設定する番号は、それを表示さ
せるマスクと合わせます。
​Comparisonには、比較関数を割り当てます。
デフォルトはAlwaysですが、今回はEqualを設
定します。
​Equalに設定することで、ピクセルのレファレン
ス値がバッファの値と等しい場合のみレンダ
リングされます。
StencilExample 2

103. ​マスク側には、左図のようなマテリアルを割り当てます。
​ポイントはStencil BufferとQueue Indexの設定です。
​Stencil Buffer側の設定は、まずReferenceに、表示するオブジェクト
とに割り当てたものと同じ番号を割り当てます。この例の場合なら
ば、１になります。
​続いてステンシルテスト通過後のバッファの値をどうするかを設定
する、Passのオペレーションを、Replaceにします。Replaceを設定する
ことで、リファレンス値がバッファに書き込まれます。
​最後に、Queue Indexに-1を割り当てます。現在のRender Queueは
Geometryですので、このマスクのQueueはGeometry-1になります。
StencilExample 3

104. ​最後に一番手前のRefractorに割り当てられている、カラー付きの動く水紋のマテリアルです。
​こちらには特にステンシルの設定はなく、Blend ModeがTransparentのマテリアルになっています。
​マテリアルの設計も、シーンカラー（Grabテクスチャ）のUVにノーマルマップのアニメーションを加算する
という、波ガラス系の屈折マテリアルです。
​なおステンシル系の処理は、影に嘘が出やすいので、注意しましょう。また多くの場合、Forwardレンダリ
ングでしか使うことはできません。
StencilExample 4

105. ​サンプルはカメラからの距離（Distance based）によるテッセレーションの例。
​Tessellationの設定は、マスターノードのNode Properties内にあるTessellation内で行う。ここで行った設定が
Inspector上のマテリアルにも反映される。テッセレーションは現状DX11でないと使用できないので注意。
​Local Vertex Offset ポートにつながっているノードは、ディスプレイスメントマップによる高さ表現。
Tessellation
カメラにより近い側が分割されている

106. ​Texture2DArrayのサンプル。通常、Texture Sampleノードが来る位置に、Texture Arrayノードが配置されている。
​現状、Texture2DArrayをマテリアルに簡単にロードするインタフェースがないので、次のページのようなマテリアルロード用のコードを
オブジェクトにアタッチしてやる必要がある。
TextureArray 1
※新しいASEでは別のサンプルが入っています

107. ​Texture2DArrayとして使うテクスチャは、
同じサイズ、同じ圧縮形式に揃えておく必要がある。
​詳しくはリファレンスを参照。
TextureArray 2
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class SetTextureArray : MonoBehaviour {
public Material _mat;
public Texture[] _Arr = new Texture[4];
void Start () {
//Initialization
//Texture2DArray _texArr
// = new Texture2DArray(sizeX, sizeY, amountOfSlices, textureformat, mipMapsOrNot);
//Graphics.CopyTexture( inputTextureObject, inputSliceIndex, inputMipIndex,
// _texArr, desiredSliceIndex, desiredMipIndex);
Texture2DArray _texArr = new Texture2DArray(512, 512, 4, TextureFormat.DXT5, false);
for (int i = 0; i < 4; i++ ) {
Graphics.CopyTexture(_Arr[i], 0, 0, _texArr, i, 0);
}
_mat.SetTexture("_TextureArray", _texArr);
}
}
Texture2DArrayとして読み込まれている

108. ​擬似SSSとも言える、Translucency（半透明）
シェーダー。
​モデルの裏側のポイントライトが、モデルの
薄い部分を透過して、赤い色がサーフェイス
下で拡散しているように見える。
​Translucencyの設定は、マスターノードの
Translucencyポートにマップを接続すること
で有効になる。右の図内で使用されている
Depthマップは、 Thicknessマップとも言って、
モデルの厚みが薄い部分を白で表現した
もの。Substance Painter等で作成すること
ができる。
Translucency
↓ディレクショナルライトあり
←ポイントライトのみ

109. ​裏側の光に反応してカラーが現れるTransmission
（透過）シェーダー。
マスターノードのTransmissionポートにマップもしく
はカラーを接続することで透過が有効になる。
同じライティング状態で、Translucencyポート側に
ノードを接続すると以下のようになる。
Transmission
Transmission
Translucency

110. ​マスターノードのBlend ModeをTransparentにすることで作る、Transparency（透明）シェーダー
Emissionポートに繋がっている３つのキューブマップは映り込みの効果用だが、RGB別々にUV座標を
動かしたもので新規にカラーベクトルを合成することで、複雑な反射を生み出している。
​Opacityの値で透明度を調整する。
Transparency

111. ​テレインなどのテクスチャー貼り付けに用いられるトリプレイナー（三面）プロジェクションマッピングの例。
概念図のように、XYZの各軸方向からプロジェクションマッピングをおこなう。
​同時に上側（Y軸側）から、草原のテクスチャをプロジェクションマッピングする。
草原のマッピングは、ワールドスペースとオブジェクトスペースで上からのプロジェクションを分けることができる。
TriplanarProjection 1
https://cdn.tutsplus.com/gamedev/uploads/
2013/12/triPlanar-angles.png
ワールドスペースの場合
オブジェクトスペースの場合 回転すると上側がずれる
回転しても上側がずれない

112. TriplanarProjection 2
Object Normal変換
Albedoマップへの
Triplanar Projection
Normalマップへの
Triplanar Projection
ワールドスペース
⇒オブジェクトスペース
切り替え
ワールドスペース
での高さ(Y)
Y軸方向（Top）平面
のNormalマップ
Y軸方向（Top）平面
のAlbedoマップ
AlbedoマップのLerp
NormalマップのLerp
Coverage Amount
Coverage Falloff
Lerp用高さ(Y)マスク
1
1
2
2
2

113. TriplanarProjection 3
Object Normal変換
Albedoマップへの
Triplanar Projection
1

114. TriplanarProjection 4
Normalマップへの
Triplanar Projection
Y軸方向（Top）平面
のNormalマップ
NormalマップのLerp
ワールドスペース
での高さ(Y)
Coverage Amount
Coverage Falloff
1
2

115. TriplanarProjection 5
ワールドスペース
⇒オブジェクトスペース
切り替え
Y軸方向（Top）平面
のAlbedoマップ
AlbedoマップのLerp
Coverage Amount
Coverage Falloff
Lerp用高さ(Y)マスク
2
2
2

116. ​テレイン用の海洋シェーダーのサンプル。
ノーマルマップを２枚重ねる波のアニメーションの他、スクリーン深度に応じて、
水のカラーが変わる仕様になっている。
Water 1

117. Water 2
スライド速度の違う
ノーマルマップアニ
メーションの合成
スクリーンカラーを取得し、
それにノーマルアニメー
ションで屈折表現を入
れる
深さによる水の
カラー変化
スクリーン深度を取得し、それを
テレインとの交差用マスクとする 水表面の泡のアニメー
ションマスク

118. アニメーション付き
UVPanner。
速度が違っている。
アニメーションをする
ノーマルを重ねると波
が発生する
GrabテクスチャのScreen
Positionの正規化
波のノーマルマップをUVと
する疑似的屈折表現
深さに基づく水の
カラー合成
水表面の泡の
合成
水の屈折画像の
合成
Water 3
Albedoマップの作成

119. 泡のアニメーション
マスクは様々な場
所の合成用マスク
として使われている
深さに基づく水の
カラー合成
水表面の泡の
合成
水の屈折画像の
合成
Water 4
アニメーション付き
UVPanner

120. ​マスターノードの基本機能でスライス状のカットアウトをするシェーダー。
Ticknessの幅を変えることで、カットアウト風にマテリアルをクリッピングすることができる。
​DividingStepsを変えると、分割数が変わる。
​Fractノードは、小数点以下の数字を出力する関数。
WorldPosSlices
Thickness = 0.0
Thickness = 0.5
Thickness = 1.0

121. サンプルシェーダーに関してのご注意
​本スライドで取り上げたサンプルシェーダーのノードグラフには、Amplify Shader Editorに付
属するものに、一部バグ修正をしたり、機能をよりよく説明するために独自に追加修正を
加えたものがあります。
​本スライドと同様の結果にならない場合には、付属サンプルをお手元で修正してみること
をお勧めいたします。
​なお、元となっている付属サンプルは、Amplify Shader Editor 0.4.0_dev02に付属するもの
で、Unity5.5.1p4 Windows環境で検証しています。
​
また全てのサンプルは、ASE本体のバージョンアップによっても追加/訂正されますので、
常に新しいバージョンのものを試してみるとよいでしょう。

122. Amplify Shader Editor活用のポイント
l Amplify Shader Editorは、Unity向けのビジュアルシェーダーエディタとしては新しいものですが、すでにその
完成度は高く、安心して使える印象です。
更新頻度も速いので、Unityアセットストア側での更新だけでなく、パブリッシャーのWikiも日頃からチェック
すると、常に最新の情報が得られます。（WikiのURLについては、参考文献リストに載せてあります。）
l 最新バージョン（v0.5.1）では、待望のアウトライン機能も付きました。
これらの機能には、マスターノードのNode Propertiesからアクセスします。
この他にも、「P」キーで各ノード内での処理がビジュアルで見られる「ノードプレビュー」機能が追加されま
した。これは特に初心者が各ノード内でどんな処理が行われているか、直感的に把握するのに優れていま
すので、勉強の際には大変役に立つ機能です。
l 筆者はShader Forgeも使っていますが、SFとASE、両方使ってみての感想として、SFではアクセスのしにくい
機能に簡単にアクセスできる設計になっているのが、ASEの強い点であり特長です。
特にPBR系シェーダーのカスタマイズには、ASEは向いていると思います。
付属するシェーダーサンプルも含めて、ASEは、あなたのUnityでの表現力を間違いなくアップしてくれるこ
とでしょう。

123. 参考文献
l Unity Products:Amplify Shader Editor / Manual
http://wiki.amplify.pt/index.php?title=Unity_Products:Amplify_Shader_Editor/Manual
l ASEの各ノードについては：
http://wiki.amplify.pt/index.php?title=Unity_Products:Amplify_Shader_Editor/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