Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unity dojo amplifyshadereditor101_jpn-jp

23,759 views

Published on

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

Published in: Engineering

Unity dojo amplifyshadereditor101_jpn-jp

  1. 1. Unity道場 Special Amplify Shader Editor 101 ~Amplify Shader Editorをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編 Unity Technologies Japan合同会社 コミュニティエバンジェリスト 小林信行 2017/03/14
  2. 2. 自己紹介 : 小林 信行 ユニティテクノロジーズジャパン合同会社 コミュニティエバンジェリスト UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウの普及 をしてます。『ユニティちゃんプロジェクト』の言い出しっぺの一人でもあります。 前職は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブル!』などの 原作付きキャラクターゲームの企画&監督(クリエィティブ・ディレクター)。 結果、Motion PortraitやLive2Dに代表される2.5D系キャラクター表現が、多くの コンシューマゲームに導入されるきっかけを作りました。 最近は暇があると、Shader Forgeでいろいろなシェーダーを作ってます。 元々は統計を使った経済学を研究していたのですが、コンテンツ業界に入る きっかけがGAINAXに入ったことだったので、アニメーションの制作技術に関して もむやみに詳しいです。
  3. 3. 本コースを受講することで得られる知見 • 本コースは、「Amplify Shader Editorを使ってシェーダーを学ぶ」のが目的で すので、 Amplify Shader Editorの全機能を紹介するものではありません。 • 本コースでは、 Amplify Shader Editorの基本的なオペレーションと、よく使う ノードについて学びます。 • よく使うノードの機能を学んだ後は、実際にシェーダーを組んでいく上で、し ばしば使われるパターンを実際に見ていきましょう。
  4. 4. シェーダーを学んでみよう!
  5. 5. シェーダーは、 「独自の絵づくりのためには必要だ」 とよく言われているけれど…
  6. 6. そもそも「シェーダー」って、なに? • 「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定 した、小さめのスクリプトのことを指します。 • Unityの場合、シェーダーを書くアプローチとしては、「サーフェイスシェー ダー」、「バーテックス/フラグメントシェーダー」、「コンピュートシェーダー」、 「固定関数シェーダー」の4種類があります。 • シェーダーそれ自体はCgやHLSLなどのより一般的なシェーダー言語によっ て書かれますが、上のいずれのアプローチを使っても最終的にはUnity独 自のシェーダー言語であるShaderLabによってラップされます。 • 「Amplify Shader Editor」は、その内のサーフェイスシェーダーをノードベース でエディットできるように、エディタ拡張で作られたツールです。 http://docs.unity3d.com/ja/current/Manual/SL-Reference.html
  7. 7. 絵画における「質感」を構成するもの • 色 (材質およびそれに当たる光の色の表現) • 陰影 (光が当たっている面の陰影の出方による立体表現) • タッチ (材質の表面状態の表現) ⇒絵画は、「色+陰影+タッチ」の組み合わせで、様々な「質感」を表現する。 Unite 2016 Tokyo 『Unityとアセットツールで学ぶ「絵づくり」の基礎~ライト、シェーダー、イメージエフェクト~』 シェーダーはこの全てに 関わっている
  8. 8. 3DCGにおいて「質感」に影響を与えるもの • マテリアル (マップおよびシェーダー) • ライト (直接光と間接光、ホワイトバランス、ソフトネス、アングル) • カメラ (HDRとフォーカス、スクリーンスペースでのイメージエフェクト) ⇒絵画における「色+陰影+タッチ」の組み合わせは、3DCGの場合には、 「マテリアル×ライト×カメラ」の各設定として、設計される。 Unite 2016 Tokyo 『Unityとアセットツールで学ぶ「絵づくり」の基礎~ライト、シェーダー、イメージエフェクト~』 シェーダーを使った絵づくりを学ぶためには、これら要素を切り分けて理解することが大切。 各々の役割をごっちゃにしないこと!
  9. 9. 特に、「マテリアル = マップ × シェーダー」 u 物理ベースシェーダー(Standardシェーダーなど)の場合 • 「物理ベースシェーダー」としての機能面は、Standardシェーダーなどのゲームエンジンがデフォルトで提 供しているシェーダーが受け持っている。 • 従って、絵づくりはシェーダーに割り当てる、各ワークフローに則ったマップ(テクスチャ)の作り込みとライ ティングが中心となる。 • マップ(テクスチャ)は、Substance DesignerやSubstance Painterなどで制作する。 u Amplify Shader Editorが担当するのは、「シェーダーの機能面の作成」で、マップの作り込み ではない • Amplify Shader Editorを使いこなすことで、自分だけのカスタムシェーダーを作成することができる。 • カスタムシェーダーは、自分だけの独自の絵づくりの一翼を担うもの。 ここに様々なマップやライティングを組み合わせることで、最終的な絵づくりが完成する。 目的に合わせて、ツールも使い分けましょう!
  10. 10. Amplify Shader Editorなどの ノードベースエディタで シェーダーを学ぶメリットって どんなところ?
  11. 11. ノードベースのシェーダーエディタでシェーダー を学ぶ利点 l シェーダーのコード記述特有の「めんどくささ」が回避できる。 • シェーダーのコード記述には、お約束のルールが結構ある。 • 同じことを繰り返して書かなければいけないことが結構ある。 ⇒ノードベースのシェーダーエディタでは、この辺りの「めんどくささ」を意識しないでよい l 通常のプログラミングよりは、ノードのバリエーションが圧倒的に少ない。 ⇒ビジュアルプログラミングの場合、ノードが複雑になると、ロジックが見づらくなるが、 シェーダーはグラフィック処理に特化している分、それほど複雑にならないですむ l 一度憶えると、他のDCCツールやゲームエンジンでも同じようなノードやセマンティクス(シェーダー 入力/出力に付加される指定文字列のこと)があるので、相互運用がしやすくなる。 l リアルタイム向けのノードベースシェーダーエディタの場合、「変更が即、グラフィックに反映される」 ので、イタレーションがしやすい。 ⇒「トライアンドエラーがしやすい」ということは、「学びやすい」ということでもある
  12. 12. Amplify Shader Editor のインストール
  13. 13. Unityエディタへのインストール 1 • Amplify Shader Editorは、Asset Storeから購入することができます。 • すでに購入が済んでいる時には、 UnityエディタのAsset Storeウィンド ウからImportボタンをクリックするこ とで、各プロジェクトにインストール することができます。
  14. 14. Unityエディタへのインストール 2 • Import Unity Packageウィンドウが 開いたら、右下のImportボタンを押 してください。パッケージがUnityエ ディタにインポートされます。 • インポートが無事終了すると、ツー ルバー>Windowメニューに新規に Amplify Shader Editor項目が追加 されます。 • またProjectウィンドウのAssetsフォ ルダの直下にAmplifyShaderEditor フォルダが生成され、中に必要な ファイルがインストールされます。
  15. 15. Unityエディタへのインストール 3 • ProjectウィンドウのAssetsフォルダの直下に生成されるAmplifyShaderEditorフォルダ内には、 Amplify Shader Editorで使用される様々なファイルが入っています。 • 特に、AmplifyShaderEditor/Examples以下にある、OfficialおよびCommunityフォルダ内には、 すぐに使えるシェーダーのサンプルが入っていますので、シェーダー制作の参考にするとよ いでしょう。 • なお、Amplify Shader Editorで作成した各シェーダーファイルは、Amplify Shader Editorがイ ンストールされていないUnity環境でも動作します。従って、エディタ環境に関しては、シェー ダーファイルを直接編集する可能性のあるスタッフのみが所持すれば、問題ありません。
  16. 16. Amplify Shader Editor の画面構成と基本操作
  17. 17. 新規にシェーダーファイルを作成する 1 • ProjectフォルダのCreateメニューより、Shader>Amplify Surface Shaderを選択すると、右上のようなノードエディタ(CANVAS)が開きます。 • 新規にシェーダーファイルを作成した場合、左側メニューのShader Nameを指定します。 この名前は、Inspectorのマテリアル内で使用されるシェーダー名になります。 • さらにメニューバー上の右から1つめのボタンをクリックし、緑色になると、シェーダーノードがファイルに保存されます。
  18. 18. 新規にシェーダーファイルを作成する 2 • ノードエディタを閉じると、新規にMyEmptyShaderというファイルができていますので、 こちらをリネームしておきます。前のページで指定したShader Nameと同じにするのがよいでしょう。 • リネームしたシェーダーファイルをInspectorで見ると、「Open in Shader Editor」というボタンがあります。 こちらをクリックすると、再びノードエディタが開きます。 • Amplify Shader Editorをインストールすると、 Amplify Shader Editor以外で作成したシェーダーファイルの場合でも、Inspector上で は「Open in Shader Editor」ボタンが現れます。その時、このボタンを押すと、空っぽの初期状態のノードエディタが立ち上がります。 この場合、セーブ処理をしなければ元のシェーダーファイルは壊れませんので、そのままノードエディタを閉じてください。 もしこの時にセーブ処理をしてしまうと、シェーダーファイルが上書きされてしまいますので、注意してください。
  19. 19. 既存のシェーダーファイルをオープンする • Amplify Shader Editorで作成した既存の シェーダーファイルを、ノードエディタで開く 場合には、シェーダーファイル本体もしくは、 それから作成したマテリアルをProject上で 指定し、Inspector上の「Open in Shader Editor」ボタンをクリックします。 • なお「 Open in Shader Editor」ボタンは、 Amplify Shader EditorをUnityエディタにイン ストールしていないと表示されません。
  20. 20. ノードメニューの表示の仕方、ノードの探し方 ノードメニューの出し方は、いくつ かあります。 ① ノードエディタ上の適当な場 所で右クリックする。 ② マスターノードのInputから左 ドラッグでワイヤを伸ばし、 適当なところで離す。 ③ 画面右側にあるノードメ ニューを利用する。 ノードメニューからはSearchボッ クスが利用できるので、ノード名 を入れてサーチしてもよいです し、プルダウンから使用するノー ドを選択してもよいです。 1 2 3
  21. 21. 良く使うノードは「ショートカット+左クリック」 ノードメニューの中に、ノード名の 横に[ ]が付いているものがあり ます。[ ]内の数字や1文字のアル ファベットは、該当するノードの ショートカットです。 ショートカットを利用する時には、 何もないCANVAS上で、ショート カットに当たるキーを押しながら、 左クリックします。 良く使うノードのショートカットは 憶えてしまいましょう。
  22. 22. ノードのInput側とOutput側について • 基本的に、ノードの左側には、 ノードへデータをInput(入力) する端子があり、ノードの右側 にはそれらのノードで加工さ れたデータをOutput(出力)す る端子があります。 • ノードの中には、Output側にし か端子を持たないもの、両方 に端子を持っているものがあ ります。Input側しか端子を持 たないものは、マスターノード のみです。 • 基本的なデータの流れとして は、左から右へとデータが流 れていくことになります。 全てのデータはマスターノード に接続されることで、初めて 画面に表示されます。
  23. 23. ノードの接続の仕方、切断の仕方 • ノードの接続の仕方 接続するノード同士の Input/Output側のいずれかの ノードの端子を左ドラッグして ワイヤを伸ばし、相手ノードの 端子に接続します。 左の図なら、①⇒②で接続し ます。逆に②⇒①でも接続で きます。 • ノードの切断の仕方 Input側のノードの端子を左ド ラッグして外します。 左の図なら、③/④の端子を 左ドラッグしてワイヤを外し、 途中で離します。 または、Altキーを押しながら、 接続中のノードの端子を左ク リックします。 1 2 3 4
  24. 24. ノードをまとめて選択する、コメントをつける • 複数ノードの選択の仕方 画面の何もない場所から左ド ラッグして領域指定すること で、中に含まれる複数ノード を選択できます。 選択状態のノードは、そのま ま左ドラッグで移動できます。 • コメントのつけ方 複数ノードを選択状態にした まま、キーボードから「C」を入 力するとコメントとして囲ま れます。 不要になったコメントは 「Delete」キーで削除します。 コメント化されているノードは、 まとめて動かすことができま す。 コメントウィンドウ内にノード をドロップすると、追加されま す。同様にコメント外にノード をドロップすると外れます。 • 各コメントはネスト可能です。
  25. 25. ノードのプロパティを設定する • 変更したいノードを左クリック で選択すると、ノードエディタ 左側のNode Propertiesがノー ドごとに切り替わります。 • Node Properties内の各要素 を変更することで、各ノードの プロパティが変更できます。 • ノードのプロパティをマテリア ル側で外部に出すか等の設 定ができます。変数やテクス チャなどのノードについては、 シェーダープロパティ内で使 用する名称を変更できます。
  26. 26. マスターノードのプロパティについて • 特にMaster Nodeが選択され ている時、Node Propertiesに は、シェーダーの基本的な機 能を決める重要な設定が現 れます。 • またマテリアルを作成した時 に、Inspector上に表示される 外部プロパティの順番などは、 このNode Propertiesから設定 します。 • ここでは特に、Shader Nameと Available Propertiesをきちんと 設定しておきましょう。また シェーダーの基本的な機能を 設定するものとして、使用す るLight Modelも確認しておき ましょう。 • 他にもカリング設定や計算精 度、影の設定などができます。 詳しくはUnityのシェーダーリ ファレンスを確認してください。
  27. 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. 28. 作業時のエディタレイアウトについて 左のようにレイアウトす ると作業が捗ります。 ① オートセーブモードにす る。 ② Project上より作成中の シェーダーを割り当てた マテリアルを選択する。 ③ ノードエディタがマテリ アルモードであるか確 認する。 ④ Inspector上で作業中の マテリアルのプロパティ を確認する。 ⑤ マテリアルのプロパティ を変更することで、 Sceneビュー内のシェー ダーボールも自動的に 変更される。 1 2 3 4 5
  29. 29. 用途別に見る 基本的なノードの機能
  30. 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. 31. テクスチャを貼る 2 Lambert/Emissionに接続すると、ライトの影響を受けなくな る(Unlitの状態になる)。 Lambert/Albedoに接続すると、ライトの影響を受けるように なる。
  32. 32. テクスチャを貼る 3 Material/Default設定 Materialベースでの設定 Shaderファイルベースでの設定
  33. 33. テクスチャにカラーを重ねる 1 Color [5] Multiply [M] Add [A] Propertyに変更することで、 シェーダープロパティとして、 Inspector上に表示できます。 Constantに設定すると、 シェーダー内で固定値になり ます。
  34. 34. テクスチャにカラーを重ねる 2 Multiplyでカラーを重ねると、輝度は下がる。 (「白」なら変わらない) Addでカラーを重ねると、輝度は上がる。 (「黒」なら変わらない)
  35. 35. 2つのテクスチャやカラーを混ぜる 1 Lerp [L] Float [1] Blend Operations (Photoshop的)
  36. 36. 2つのテクスチャやカラーを混ぜる 2 Lerpは、2つのテクスチャやカラーをAlphaに接続された値 に従って、線形補間(Linear interpolation)することで混ぜ る。 Blend Operationsは、2つのテクスチャやカラーをPhotoshopの レイヤー合成的に混ぜる。 合成オプションはNode Properties内のBlend Opで設定する。 サンプルはColor Burn
  37. 37. ノーマルマップを貼る、合成する 1 Blend Normals Lerp [L] / Float [1] / Normalize [N] Texture Sample [T] / Normal = ON
  38. 38. ノーマルマップを貼る、合成する 2 Texture SampleノードのNormal Map オプションをONにした上でノーマル マップを、マスターノードのNormalに 接続するとノーマルマップが適用さ れる。
  39. 39. ノーマルマップを貼る、合成する 3 2つのノーマルマップを合成 する時は、Blend Normals ノードを使う。
  40. 40. ノーマルマップを貼る、合成する 4 Lerpを使用して、Floatで 指定した強度で2つの ノーマルマップを合成す る例。 さらに合成したノーマル マップをNormalizeノード で正規化しておく。 Alphaの値:Float (Mixed_Power)を変え るとブレンド具合が変化 する。
  41. 41. カラーやマスクを反転する 1 One Minus
  42. 42. カラーやマスクを反転する 2 カラーや白黒のマスクなど、「0~1」の範囲にあるベクトルや色調を 反転させる際に、One Minusノードを使用する。 特にカスタムライティングをする際に、良く使われるノードである。
  43. 43. UVマッピングをタイリング(スケール)する 1 Texture Coordinates [T] / Multiply [M] / Float [1] / Vector [2]
  44. 44. UVマッピングをタイリング(スケール)する 2 Texture CoordinatesノードをMultiplyノードに接続することで、UVマッピングを任意にタイリング (スケール)することができる。 Floatノードの代わりにVectorノードを接続すると、UV方向に違ったスケールをかけられる。
  45. 45. UVマッピングをタイリング(スケール)する 3 Texture CoordinatesノードのTiling端子に直接Float/Vectorノードを接続しても、同じ結果が得られる。
  46. 46. UVマッピングをタイリング(スケール)する 4 Float = 1Float = 0.25 Float = -0.25
  47. 47. UVマッピングをオフセット(スクロール)する 1 Texture Coordinates [T] / Add [A] / Float [1] / Vector [2]
  48. 48. UVマッピングをオフセット(スクロール)する 2 「赤1」に着目すると 右に1コマ、下に2コマ オフセットしている 左に1コマ、下に1コマ オフセットしている Texture CoordinatesノードをAddノードに接続することで、UVマッピングをオフセット(スクロール)することができる。 Addノードを使わずに、Float/VectorノードをTexture CoordinatesのOffset端子に直接接続しても同じ。 -0.125,0.25 0.125
  49. 49. UVマッピングをアニメーションさせる 1 Timeノードから取得した時間変化分を、AddノードでTexture Coordinatesノードに接続することで、 UVマッピングがスクロールアニメーションをする。 直接Texture CoordinatesノードのOffset端子に接続してもよい。 Texture Coordinates [T] / Time / Add [A]
  50. 50. UVマッピングをアニメーションさせる 2 Timeノードから取得した時間変化分に、MultiplyノードでVectorを掛けることで、 スクロールの移動方向と速度の調整ができる。 X(U)方向にマイナスの値を かけているので、スクロール の方向が前のページの例と 変わっていることに注意
  51. 51. PannerノードでUVスクロールアニメーションをする Pannerノードで、UVマッピングをスクロールアニ メーションすることもできる。 Time端子に値を接続すると、Time Parameters ノードから値を取得しない限り、UVマッピング のオフセットとして機能する。 PannerノードのNode PropertiesにあるSpeed X、 Speed Yで、スクロールの規定の速度と方向を 指定できる。 なおスライダーは、FloatノードでMin/Maxを指 定することで得られるインタフェース。
  52. 52. RotatorノードでUV回転アニメーションをする Rotatorノードを使うことで、 UVマッピングを回転アニ メーションさせることができ る。 Time端子に値を接続すると、 Time Parametersノードから 値を取得しない限り、UV マッピングの回転オフセット として機能する。 一方、Anchor端子には、UV 回転の中心点のUV座標を 指定する。
  53. 53. 実際にシェーダーを 組んでみよう!
  54. 54. UVタイルアニメーションを作ってみよう
  55. 55. シェーダーとテクスチャアトラスの準備
  56. 56. テクスチャアトラスの表示
  57. 57. 1コマサイズで表示する Divide [D] A/Bを計算するノード
  58. 58. 時間でスクロールさせる Fract 0から1まで、小数点以下のみを繰り返す関数。 0~1の繰り返しタイマーなどに使う。 この場合、時間が進行 してもUVが0~1の範囲 に収まるようにしている。
  59. 59. コマ単位でアニメーションさせる Floor 小数点以下を切り捨てて、整数にする関数。 ステップ進行などに使う。
  60. 60. +X方向に進行して、-Y方向にジャンプする UnityやMayaのUV座標系は上図。 DirectXでは、原点が左上になり、 かつV軸が反転する。
  61. 61. +X方向に6つ進行して、-Y方向に1つジャンプする ここはちょっとわかりにくいので、UV Offset Vectorにタイマー が進行すると,具体的にどんな値が入るか考えるとよい。 ポイントはX方向に進行するFloorの値を、Y方向にする時、 6(並びの数)で割り、再びFloorを通すことでX方向に6つ進ん でから、Y方向に1進むようにするところ。 ただしYの開始点が左下なので、チップ1番目を左上にするた めに1引いた後で、進行方向として-1を掛けている。 タイルテクスチャ自体はループ状態になっていることに注意! また、Flipbook UV Animationノードも見てみよう。 同様の機能がコンパクトに実装できます。
  62. 62. Component Mask ベクトルの各要素を分解するノード。 ベクトルの各要素から数値を取り出すのに使う。 他、ColorからXY要素(UV要素)のみを取り出すのに使用したりする。
  63. 63. Append 数値を合成して、ベクトルを新規に作り出すノード。 各数値をベクトルの構成要素にして、 新規にベクトルを作り出すのに使う。
  64. 64. 「苔むした岩」(環境ブレンディング) を作ってみよう
  65. 65. 2つのテクスチャを合成するための準備
  66. 66. 共に50%の比率で、Lerp合成する Lerp 2つのテクスチャやカラーを、0~1の範囲内のAlphaの値に従って、 線形補間(Linear interpolation)することで混ぜる。 Alpha=0⇒A=100% / Alpha=1⇒B=100%になる。 Alphaとして、float値の他にマスクノードなどを接続できる。
  67. 67. ベースマテリアルの「上側」を示すマスクを作る 1 岩の上方ほど、苔がより生えて いる状態を表現したい…。 岩の表面の凹凸でも、上方ほど、 苔がより生えている…。 ノーマルマップが使えないか? http://blogs.yahoo.co.jp/gotchn/39231307.html
  68. 68. ベースマテリアルの「上側」を示すマスクを作る 2 World Normal ノーマルマップを タンジェントスペースから ワールドスペースに変換 Component Mask Y方向(上方向)の情報のみ 取得 UnityやMayaでは、ワールド座標での上方向はY軸方向(Y-up)。 一方、3ds Maxや他のゲームエンジンではZ軸方向が上(Z-up) になるので注意。
  69. 69. タンジェントスペースの概念 ローカル座標にあるUVZ座標(空間)を 「タンジェントスペース(接空間)」という ノーマルマップのカラーと法線の傾きの関係のイメージ http://marupeke296.com/DXPS_S_No5_NormalMap.html (ローカル座標では、Normal) (ローカル座標では、Tangent) (ローカル座標では、Binormal) UV座標 World Normal ノーマルマップを タンジェントスペースから ワールドスペースに変換
  70. 70. マスクの濃度調整をする Clamp 0-1の代わりに、Saturate ノードを使ってもよい。
  71. 71. Clamp 0-1 / Saturate 0以下、または1以上の値を切り捨てるノード。 マスクなど、 0~1の範囲内にある必要がある数値の調整用 に用いられる。 使用時に、Node PropertiesのMin=0、Max=1を入れること。 この使い方をする限り、Saturateノードと同じ機能になる。 ※Shader ForgeのClump 0-1ノードは、 コードではSaturate関数に変換される。
  72. 72. マスクをシャープにする Subtract A-Bを計算する ※このパターンはシャープ化する のに良く使われる
  73. 73. 作成したマスクで、Lerp合成をする 作成したマスクを各LerpノードのAlphaに 接続して完成です。
  74. 74. Amplify Shader Editorに付属する サンプルシェーダーを見てみよう Assets/AmplifyShaderEditor/Examples/Official フォルダ内に 様々なサンプルシェーダーが入っています。 それらのサンプルをざっくりと見てみましょう。
  75. 75. AnimatedFire ​燃えさかる炎のシェーダー。 ​ポイントは、Pannerを使ったテクスチャのUVスク ロールと、Sin Timeを使った炎の照度変化です。 ​この二つのアニメーションを組み合わせることで、 複雑な効果を出しています。
  76. 76. Burn ​燃える薪などのシェーダー。 ​基本となる発想は、AnimatedFireと同様です。 ポイントとしてはノイズテクスチャとUVスクロール を組み合わせることで、複雑な変化を出しつつ、 さらにそれらをマスクとして様々な場所でLerp ノードによる合成を行っています。 ​燃えている部分の照度変化は、Sinノードで表現 しています。
  77. 77. CubemapReflection ​キューブマップを環境マップとして使用する、 リフレクションマッピングの例。 ​CubemapのUVとして、World Reflectionノードを接 続します。World Reflectionノードは、ワールド座標 上の反射ベクトルを生成するノードです。
  78. 78. DitheringFade ​カメラが近づくと、ディザリングしながら消えてい くシェーダー。 ​Opacity Maskに接続されているノードに注目して ください。 ​左側の大きなブロックは、カメラとオブジェクトの 距離に合わせて調整をしている部分です。そこ で得られた値を元に、Ditheringノードが作成したα マスクでカットオフをします。 Ditheringノードのパターンは、Node Propertiesから 2種類選べます。
  79. 79. NormalExtrusion ​ノーマル方向に時間で押し出しをするシェーダー。 ​波のような一定の動きを作り出しているのは、Sin ノード。Vertex Positionからの出力は振幅のディス トーション発生用。Y成分が使われているが、別 の成分でもよい。 ​Maxノードで0以上の値が常にVertex Normalの 方向に掛けられて、さらにLocal Vertex Offset経 由で押し出しされる。
  80. 80. Matcap ​Matcapと呼ばれるスフィアマップ を割り当てるシェーダー。Matcapは Zbrushの作業用シェーディングで もよく知られている。 ​ポイントは、World NormalをView 座標に変換するブロックと、View 座標は(-1,1)で来るので、それを UV合わせで(0,1)の座標系に変換 するブロック。 ノーマルマップをビュー座標変換し たらそれをUVとしてテクスチャに 与えてやる。 MatcapはEmissionポートに接続す るので、Receive Shadowはオフにし ておくほうがよい。
  81. 81. ObjectNormalRefraction ​ガラス玉っぽい雰囲気の屈折シェーダー。ほぼマスターノードの機能でできている。 上のブロックはWorld ReflectionとCubeMapを使った映り込みの部分。 そこにOpacityで透明度と、Refractionで屈折表現を足している。 マスターノードのBlend Modeを必ずTranslucentに設定する。
  82. 82. ​複数ハイトマップの繰り返しのある、視差マッピングシェーダーの例。 ​基本は、Parallax Mappingノードに必要なノードを接続してオフセット用のUVマップを作成し、それらを各マップのUVとして用いる。 ​ハイトマップはモノクロなのでRチャンネルしか使用していなかったり、繰り返しハイトマップの部分にはマテリアルインスタンスを使うことで メモリを軽量化しているところがポイント。 ParallaxMappingIterations
  83. 83. ParallaxOcclusionMaping ​視差遮蔽マッピングシェーダーの例。ハイトマップで表現される凹凸のある物体に対し、表面の見える部分と凹凸に隠れて見えない 部分が区別できるようにマッピングする。基本は、Parallax Occlusion Mappingノードにハイトマップ、ビューベクトル等の必要なノードを 接続してオフセット用のUVマップを作成し、それらを各マップのUVとして用いる。 本サンプルの場合、Roughnessマップを使用しているので、Smoothnessポートに接続する前に、One Minusノードを経由している。
  84. 84. ParallaxOffsetFakeInterior ​視差マッピングシェーダーの応用例。カメラを動かすと、窓越しのインテリアが視差で動くのが確認できる。 3つの背景レイヤーと1つのマスク(マスクはRとGチャンネルを使用)、さらに部屋の最奥用レイヤー向けオフセットUVと部屋の 中奥用レイヤー向けオフセットUVを使用することで、一枚の板ポリゴンで「窓越しにインテリアが見える壁」を表現できる。 3Dでビルの窓越しのインテリアのポリゴンを削減するのに使ったり、2.5D表現の背景として使っても面白い。
  85. 85. PositionCutOff ​StartPointの位置に応じて、マテリアルが浸水したような効果が得られるシェーダー。 ​Vertex PositionノードのY値が使用されている場合、オブジェクト座標での高さが得られるので、マテリアルボールの位置を変化させ ても浸水効果が発生する位置は変わらない。Toggle Switchノード経由でWorld PositionノードのY値を使用する場合は、ワールド座標 での高さが得られるので、マテリアルボールの位置を引き上げると、マテリアル上で浸水効果が発生する位置が下がる。
  86. 86. ReadFromAtlasTiled ​Custom Expressionノードも含むテクスチャアトラスから任意の場所を読み込むシェーダー。 ​Min座標にテクスチャアトラスから切り出す左下座標を指定し、Max座標に同じく右上座標を指定する。 最後にTileSizeでマテリアル上に表示するタイルの数を指定する。Frac関数は引数の小数部のみを返す関数。
  87. 87. ​質量感のある闇を表現するシェーダー。 ​大きく3つのブロックに別れているが、各々のブロック が作り出すマスクの意味を考えると構成がわかりや すい。一番上のブロックは、World NormalとViewベクト ルの内積から縁の部分を検出し反転している。 ​中のブロックは、シーンカラーのUVをノーマルマップで 変形し、疑似的な屈折ガラスを表現している。これら を乗算することで、内側ほど濃くなる闇を表現する。 ​最後のブロックはWorld NormalとLightベクトルの内積 より光の当たり方を求め、強さを調整した上で、 Opacityに接続することで、落ち影の透明度を調整し ている。Blend ModelはTranslucentにすること。 RefractedShadows
  88. 88. 内積(Dot Product)とは? A → B →θ A → | | B → | |cosθA → B → ・ = このオレンジ部の長さは、 A → | |cosθ 特に、 が長さ1の時、オレンジ部の長さはcosθとなる。A → 内積とは、2つのベクトルがなす角度の状態を示すスカラー値のこと。 特に2つのベクトルがノーマライズされている場合には、内積が即、 2つのベクトルの内角のcosθの値となっている。
  89. 89. 内積(Dot Product)とは?
  90. 90. RimLight ​RimLightシェーダー。最初のブロックは、リムマスクを作り出すブロック。ノーマルベクトルとViewベクトルの内積を反転して、 リムの位置を求めている。(ここで使用しているノーマルベクトルは、タンジェントスペースのノーマルマップなので、Viewベク トルのほうもタンジェントスペースに合わせていることを注意する) 続くPowerノードは、マスクの明るさを絞る役割をして いる。
  91. 91. ​スクリーンスペース曲率シェーダー。表面上が大きく変位する場所に影入れとハイライトを入れたような効果が得られる。 ​実装は、http://madebyevan.com/shaders/curvature/を参考にするとよい。 Crossノードは外積を求めるノードで、2つのベクトルに共に直交するベクトルを出力する。 ScreenSpaceCurvature
  92. 92. ​カメラからの距離合わせで、チェッカー柄のテクスチャのマッピングサイズが変化するシェーダー(チェッカーの柄のサイズ は変化しない)。 Screen Positonノードは、スクリーンスペース上での位置データscreenPosを出力するノード。反射やスクリー ンスペース系のエフェクトを作るのに用いられる。 ​screenPos.xyをwで割ることで、(0,0)~(1,1)に正規化された値で描画先の座標が得られる。 ScreenSpaceDetail カメラを引く screenPos上のXY座標を UVとして利用している
  93. 93. SimpleBlur ​シンプルなブラーエフェクトの例。 ​ブラーをかけるテクスチャに対して、テクスチャインスタンスのUV座標を少しずつオ フセットして重ねて作成する。各Floatの値が各サンプルの寄与度になっていて、全 て足すと1になるのがポイント。StepとLerpは、ブラーあり/なしのためのトグル。
  94. 94. SimpleGPUInstancing ​GPU Instancingが使えるシェー ダーの例(?) ​特定のParameter TypeをInstanc ed Propertyに変更するようです。 ​するとマスターノードの右上に マークが現れます。 ​GPU Instancingを使用するため にはその他にも設定が必要です ので、リファレンスで確認したほ うがいいでしょう。
  95. 95. SimpleLambert ​本当にシンプルなLambertモデ ルのサンプル。 マスターノードのLight Modelを Lambertに設定するだけです。
  96. 96. SimpleNoise ​シンプルなノイズエフェクトの例。 ​2Dテクスチャに引き渡すUVマップにノイズジェネレータで作成したノイズを加算し て、ノイズ効果をテクスチャに加える。 ​SizeパラメタとStrengthパラメタの両方でエフェクト効果が変わる。
  97. 97. SimpleRefraction ​シーンカラー(Grabテクスチャ)のUVに、ノーマルマップをスクリーンスペースで 加算することで作成するシンプルな屈折表現。 ​Distortionの値で、ノーマルマップの影響を調整できる。 Grabテクスチャには、Screen Positionノードではなく、Grab Screen Positionノード を使う必要がある。 ​Blend ModeはTranslucentにすること。
  98. 98. SimpleTexture ​UnityのStandard Shader(Metallic-Smoothness)と、ほぼ同様の 機能を持つPBRシェーダーの例。 ​MetallicとSmoothnessの各ポートに使用するテクスチャチャン ネルは、Unity標準のものに合わせてみた。 ​Node PropertiesのCull ModeをOffにして、Standard Shaderでは できない両面ポリゴン表示のシェーダーを作ってもよいでしょう。 (ただし両面ポリゴン表示の場合、裏側にも表側と同じノーマ ルマップを当ててライティングすることになるので、裏側のライ ティング結果がおかしくなる可能性があることに注意してくだ さい。)
  99. 99. ​岩の上に雪が積もる環境マッピング。「苔むした岩」の例と同様の考え方で組まれている。①のWorld Normalは、ノーマル マップの合成用マスクなので、ワールド座標上での高さ(Y)をそのまま使っている。②のWorld Normalは、合成されたノーマ ルマップ上で評価したワールド座標上での法線ベクトル。こちらもワールド座標上での高さ(Y)をアルベドとスペキュラマッ プの合成用マスクとして使っているが、こちらはノーマルマップベースなので、個々の岩の凹凸も考慮される。 SnowAccum
  100. 100. ​キューブが回転すると、四方に貼られたスクリーン越しに 見えるオブジェクトが変化する不思議なキューブ。 その仕掛けは、ステンシル処理です。 ​キューブの四面には、各々スクリーンが貼られていて、手 前の水紋が現れるスクリーンとその後ろに配置されてい るステンシルマスクがあります。またキューブの内部には、 各マスクのステンシルリファレンス番号に対応したマテリ アルを持つオブジェクトが配置されています。 ​あるステンシルマスクは、同じステンシルリファレンス番号 を持つオブジェクトしか描画しません。従って、このキュー ブが回転すると、スクリーン越しに見えるオブジェクトが変 化するという仕掛けになっています。 StencilExample 1
  101. 101. ​オブジェクトに貼り付けられているマテリアル は、左図のようなものです。 ​マテリアルノードはありふれたものですので、 Stencil Buffer以下の設定を見てください。 ​Referenceに設定する番号は、それを表示さ せるマスクと合わせます。 ​Comparisonには、比較関数を割り当てます。 デフォルトはAlwaysですが、今回はEqualを設 定します。 ​Equalに設定することで、ピクセルのレファレン ス値がバッファの値と等しい場合のみレンダ リングされます。 StencilExample 2
  102. 102. ​マスク側には、左図のようなマテリアルを割り当てます。 ​ポイントはStencil BufferとQueue Indexの設定です。 ​Stencil Buffer側の設定は、まずReferenceに、表示するオブジェクト とに割り当てたものと同じ番号を割り当てます。この例の場合なら ば、1になります。 ​続いてステンシルテスト通過後のバッファの値をどうするかを設定 する、Passのオペレーションを、Replaceにします。Replaceを設定する ことで、リファレンス値がバッファに書き込まれます。 ​最後に、Queue Indexに-1を割り当てます。現在のRender Queueは Geometryですので、このマスクのQueueはGeometry-1になります。 StencilExample 3
  103. 103. ​最後に一番手前のRefractorに割り当てられている、カラー付きの動く水紋のマテリアルです。 ​こちらには特にステンシルの設定はなく、Blend ModeがTransparentのマテリアルになっています。 ​マテリアルの設計も、シーンカラー(Grabテクスチャ)のUVにノーマルマップのアニメーションを加算する という、波ガラス系の屈折マテリアルです。 ​なおステンシル系の処理は、影に嘘が出やすいので、注意しましょう。また多くの場合、Forwardレンダリ ングでしか使うことはできません。 StencilExample 4
  104. 104. ​サンプルはカメラからの距離(Distance based)によるテッセレーションの例。 ​Tessellationの設定は、マスターノードのNode Properties内にあるTessellation内で行う。ここで行った設定が Inspector上のマテリアルにも反映される。テッセレーションは現状DX11でないと使用できないので注意。 ​Local Vertex Offset ポートにつながっているノードは、ディスプレイスメントマップによる高さ表現。 Tessellation カメラにより近い側が分割されている
  105. 105. ​Texture2DArrayのサンプル。通常、Texture Sampleノードが来る位置に、Texture Arrayノードが配置されている。 ​現状、Texture2DArrayをマテリアルに簡単にロードするインタフェースがないので、次のページのようなマテリアルロード用のコードを オブジェクトにアタッチしてやる必要がある。 TextureArray 1 ※新しいASEでは別のサンプルが入っています
  106. 106. ​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として読み込まれている
  107. 107. ​擬似SSSとも言える、Translucency(半透明) シェーダー。 ​モデルの裏側のポイントライトが、モデルの 薄い部分を透過して、赤い色がサーフェイス 下で拡散しているように見える。 ​Translucencyの設定は、マスターノードの Translucencyポートにマップを接続すること で有効になる。右の図内で使用されている Depthマップは、 Thicknessマップとも言って、 モデルの厚みが薄い部分を白で表現した もの。Substance Painter等で作成すること ができる。 Translucency ↓ディレクショナルライトあり ←ポイントライトのみ
  108. 108. ​裏側の光に反応してカラーが現れるTransmission (透過)シェーダー。 マスターノードのTransmissionポートにマップもしく はカラーを接続することで透過が有効になる。 同じライティング状態で、Translucencyポート側に ノードを接続すると以下のようになる。 Transmission Transmission Translucency
  109. 109. ​マスターノードのBlend ModeをTransparentにすることで作る、Transparency(透明)シェーダー Emissionポートに繋がっている3つのキューブマップは映り込みの効果用だが、RGB別々にUV座標を 動かしたもので新規にカラーベクトルを合成することで、複雑な反射を生み出している。 ​Opacityの値で透明度を調整する。 Transparency
  110. 110. ​テレインなどのテクスチャー貼り付けに用いられるトリプレイナー(三面)プロジェクションマッピングの例。 概念図のように、XYZの各軸方向からプロジェクションマッピングをおこなう。 ​同時に上側(Y軸側)から、草原のテクスチャをプロジェクションマッピングする。 草原のマッピングは、ワールドスペースとオブジェクトスペースで上からのプロジェクションを分けることができる。 TriplanarProjection 1 https://cdn.tutsplus.com/gamedev/uploads/ 2013/12/triPlanar-angles.png ワールドスペースの場合 オブジェクトスペースの場合 回転すると上側がずれる 回転しても上側がずれない
  111. 111. 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
  112. 112. TriplanarProjection 3 Object Normal変換 Albedoマップへの Triplanar Projection 1
  113. 113. TriplanarProjection 4 Normalマップへの Triplanar Projection Y軸方向(Top)平面 のNormalマップ NormalマップのLerp ワールドスペース での高さ(Y) Coverage Amount Coverage Falloff 1 2
  114. 114. TriplanarProjection 5 ワールドスペース ⇒オブジェクトスペース 切り替え Y軸方向(Top)平面 のAlbedoマップ AlbedoマップのLerp Coverage Amount Coverage Falloff Lerp用高さ(Y)マスク 2 2 2
  115. 115. ​テレイン用の海洋シェーダーのサンプル。 ノーマルマップを2枚重ねる波のアニメーションの他、スクリーン深度に応じて、 水のカラーが変わる仕様になっている。 Water 1
  116. 116. Water 2 スライド速度の違う ノーマルマップアニ メーションの合成 スクリーンカラーを取得し、 それにノーマルアニメー ションで屈折表現を入 れる 深さによる水の カラー変化 スクリーン深度を取得し、それを テレインとの交差用マスクとする 水表面の泡のアニメー ションマスク
  117. 117. アニメーション付き UVPanner。 速度が違っている。 アニメーションをする ノーマルを重ねると波 が発生する GrabテクスチャのScreen Positionの正規化 波のノーマルマップをUVと する疑似的屈折表現 深さに基づく水の カラー合成 水表面の泡の 合成 水の屈折画像の 合成 Water 3 Albedoマップの作成
  118. 118. 泡のアニメーション マスクは様々な場 所の合成用マスク として使われている 深さに基づく水の カラー合成 水表面の泡の 合成 水の屈折画像の 合成 Water 4 アニメーション付き UVPanner
  119. 119. ​マスターノードの基本機能でスライス状のカットアウトをするシェーダー。 Ticknessの幅を変えることで、カットアウト風にマテリアルをクリッピングすることができる。 ​DividingStepsを変えると、分割数が変わる。 ​Fractノードは、小数点以下の数字を出力する関数。 WorldPosSlices Thickness = 0.0 Thickness = 0.5 Thickness = 1.0
  120. 120. サンプルシェーダーに関してのご注意 ​本スライドで取り上げたサンプルシェーダーのノードグラフには、Amplify Shader Editorに付 属するものに、一部バグ修正をしたり、機能をよりよく説明するために独自に追加修正を 加えたものがあります。 ​本スライドと同様の結果にならない場合には、付属サンプルをお手元で修正してみること をお勧めいたします。 ​なお、元となっている付属サンプルは、Amplify Shader Editor 0.4.0_dev02に付属するもの で、Unity5.5.1p4 Windows環境で検証しています。 ​ また全てのサンプルは、ASE本体のバージョンアップによっても追加/訂正されますので、 常に新しいバージョンのものを試してみるとよいでしょう。
  121. 121. 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での表現力を間違いなくアップしてくれるこ とでしょう。
  122. 122. 参考文献 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

×