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道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編

38,638 views

Published on

関連教材: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

Published in: Engineering

Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編

  1. 1. Unity道場 11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編 Unity Technologies Japan合同会社 コミュニティエバンジェリスト 小林信行 2016/08/28
  2. 2. 自己紹介 : 小林 信行 ユニティテクノロジーズジャパン合同会社 コミュニティエバンジェリスト  UnityやMayaをはじめとする各種3Dツールの研究、 ゲーム制作のノウハウの普及をしてます。 その前は『涼宮ハルヒの追想』『涼宮ハルヒの約束』 『とらドラ・ポータブル!』などの原作付きキャラクター ゲームの企画&監督。
  3. 3. 本コースを受講することで得られる知見 •  本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、 ShaderForgeの全機能を紹介するものではありません。 •  本コースでは、ShaderForgeの基本的なオペレーションと、よく使うノードにつ いて学びます。 •  よく使うノードの機能を学んだ後は、実際にシェーダーを組んでいく上で、し ばしば使われるパターンを実際に見ていきましょう。
  4. 4. シェーダーを学んでみよう!
  5. 5. シェーダーは、 「独自の絵づくりのためには必要だ」 とよく言われているけれど…
  6. 6. そもそも「シェーダー」って、なに? •  「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定 した、小さめのスクリプトのことを指します。 •  Unityの場合には、サーフェイスシェーダー、バーテックスシェーダー、フラグメ ントシェーダー、コンピュートシェーダーの4種類があります。 •  サーフェイスシェーダーは、Unity独自のシェーダー言語であるShaderLabで 通常は書きます。さらにそれ以外のシェーダーは、ShaderLabにCgやHLSLな どのより一般的なシェーダー言語を組み合わせて書かれます。 •  「Shader Forge」は、その内のサーフェイスシェーダーをノードベースでエ ディットできるように、エディタ拡張で作られたツールです。 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  ShaderForgeが担当するのは、「シェーダーの機能面の作成」で、マップの作り込みではない •  ShaderForgeを使いこなすことで、自分だけのカスタムシェーダーを作成することができる。 •  カスタムシェーダーは、自分だけの独自の絵づくりの一翼を担うもの。 ここに様々なマップやライティングを組み合わせることで、最終的な絵づくりが完成する。 目的に合わせて、ツールも使い分けましょう!
  10. 10. ShaderForgeなどの ノードベースエディタで シェーダーを学ぶメリットって どんなところ?
  11. 11. ノードベースのシェーダーエディタでシェーダー を学ぶ利点 l  シェーダーのコード記述特有の「めんどくささ」が回避できる。 •  シェーダーのコード記述には、お約束のルールが結構ある。 •  同じことを繰り返して書かなければいけないことが結構ある。 ⇒ShaderForgeなどのノードベースエディタでは、この辺りの「めんどくささ」を意識しないでよい l  通常のプログラミングよりは、ノードのバリエーションが圧倒的に少ない。 ⇒ビジュアルプログラミングの場合、ノードが複雑になると、ロジックが見づらくなるが、   シェーダーはグラフィック処理に特化している分、それほど複雑にならないですむ l  一度憶えると、他のDCCツールやゲームエンジンでも同じようなノードやセマンティクス(シェーダー 入力/出力に付加される指定文字列のこと)があるので、相互運用がしやすくなる。 l  ShaderForgeの場合、「変更が即、グラフィックに反映される」ので、イタレーションがしやすい。 ⇒「トライアンドエラーがしやすい」ということは、「学びやすい」ということでもある
  12. 12. ShaderForgeの画面構成
  13. 13. マテリアルの新規作成 マテリアルに割り振られている シェーダーの変更
  14. 14. ノードエディタの基本操作
  15. 15. ノードエディタの基本操作 l  ノードリンクの削除:Alt/Option + RMB。リンクのまとめ切断も可能 l  Macでノードを削除:Command + X (切り取り)で(WindowsならDeleteキーで) l  ノードのクイックサーチ:ノードの頭文字を入れて、マウススクロール。                    左クリックで決定 l  ノードの範囲選択指定:Alt/Optionを押しながら、LMBドラック l  ノードの範囲選択中は、ヒエラルキー状態を保ちながらノードを移動できる l  ノード上でRMBでコメント挿入ができる他、各ノードの機能をWEBから検索できる
  16. 16. 用途別に見る 基本的なノードの機能
  17. 17. テクスチャを貼る UV Coordinates Texture 2D Main
  18. 18. テクスチャを貼る Emissionに接続すると、ライトの影響を受け なくなる(Unlitの状態になる)。 Diffuse/Base Colorに接続すると、ライトの影 響を受けるようになる。
  19. 19. テクスチャにカラーを重ねる Color Multiply Add
  20. 20. テクスチャにカラーを重ねる Multiplyでカラーを重ねると、輝度は下がる。 (「白」なら変わらない) Addでカラーを重ねると、輝度は上がる。 (「黒」なら変わらない)
  21. 21. テクスチャにカラーを重ねる Multiply/Addノードには、2つ以上のノードを 入力することが可能
  22. 22. 2つのテクスチャやカラーを混ぜる Lerp(線形補間) Value Blend(Photoshop的)
  23. 23. 2つのテクスチャやカラーを混ぜる Lerpは、2つのテクスチャやカラーをValueの値 に従って、線形補間(Linear interpolation) することで混ぜる。 Blendは、2つのテクスチャやカラーを Photoshopのレイヤー合成的に混ぜる。
  24. 24. ノーマルマップを貼る、合成する Texture 2D / Normal map Main / Normal Normal Blend Lerp / Value / Normalize
  25. 25. ノーマルマップを貼る、合成する ノーマルマップを、MainノードのNormalに接続 するとノーマルマップが適用される。 2つのノーマルマップを合成する時は、 Normal Blendノードを使う。
  26. 26. ノーマルマップを貼る、合成する Lerpを使用して、Valueで指定した 強度で2つのノーマルマップを合成 することもできる。 その場合、合成したノーマルマップを Normalizeノードで正規化しておく。
  27. 27. カラーやマスクを反転する One Minus
  28. 28. カラーやマスクを反転する カラーや白黒のマスクなど、「0~1」の範囲にあるベクトルや画像を 反転させる際に、One Minusノードを使用する。 特にカスタムライティングをする際に、良く使われるノードである。
  29. 29. UVマッピングをタイリング(スケール)する UV Coordinates / Multiply / Value / Vector2
  30. 30. UVマッピングをタイリング(スケール)する UV CoordinatesノードをMultiplyノードに接続することで、UVマッピング を任意にタイリング(スケール)することができる。 MultiplyノードにVector2ノードを接続すると、UV方向に違ったスケール をかけられる。
  31. 31. UVマッピングをタイリング(スケール)する Value = 1 の時 Value = 0.25 の時 Value = -0.25 の時
  32. 32. UVマッピングをオフセット(スクロール)する UV Coordinates / Add / Value / Vector2
  33. 33. UVマッピングをオフセット(スクロール)する 「赤1」に着目すると 右に1コマ、下に2コマ オフセットしている 左に1コマ、下に1コマ オフセットしている UV CoordinatesノードをAddノードに接続することで、UVマッピングをオフセット(スクロール) することができる。
  34. 34. UVマッピングをアニメーションさせる Timeノードから取得した時間変化分を、AddノードでUV Coordinatesノードに接続 することで、UVマッピングがスクロールアニメーションをする。 UV Coordinates / Time / Add
  35. 35. UVマッピングをアニメーションさせる Timeノードから取得した時間変化分に、MultiplyノードでVector2を掛けることで、 スクロールの移動方向と速度の調整ができる。
  36. 36. 専用ノードでUVマッピングをアニメーションさせる Pannerノードで、UVマッピン グをスクロールアニメーショ ンすることもできる。 Distanceに値を接続すると、 Timeノードから値を取得し ない限り、UVマッピングのオ フセットとして機能する。 PannerノードのUVで、スク ロールの速度と方向を指定 できる。
  37. 37. UVマッピングを回転アニメーションさせる Rotatorノードを使うことで、 UVマッピングを回転アニ メーションさせることがで きる。
  38. 38. 実際にシェーダーを 組んでみよう!
  39. 39. UVタイルアニメーションを作ってみよう
  40. 40. シェーダーとテクスチャアトラスの準備
  41. 41. テクスチャアトラスの表示
  42. 42. 1コマサイズで表示する
  43. 43. Divideノード A/Bを計算するノード
  44. 44. 時間でスクロールさせる
  45. 45. 時間でスクロールさせる Fracノード 0から1まで、小数点以下のみを繰り返す関数。 0~1の繰り返しタイマーなどに使う。
  46. 46. コマ単位でアニメーションさせる
  47. 47. コマ単位でアニメーションさせる Floorノード 小数点以下を切り捨てて、整数にする関数。 ステップ進行などに使う。
  48. 48. +X方向に進行して、-Y方向にジャンプする UnityやMayaのUV座標系は上図。 DirectXでは、原点が左上になり、 かつV軸が反転する。
  49. 49. +X方向に進行して、-Y方向にジャンプする
  50. 50. Component Maskノード ベクトルの各要素を分解するノード。 ベクトルの各要素から数値を取り出すのに使う。 他、Vector3からXY要素(UV要素)のみを取り出す のに使用したりする。
  51. 51. Appendノード 数値を合成して、ベクトルを新規に作り出す ノード。 各数値をベクトルの構成要素にして、 新規にベクトルを作り出すのに使う。
  52. 52. 「苔むした岩」(環境ブレンディング) を作ってみよう
  53. 53. 2つのテクスチャを合成するための準備
  54. 54. Lerpノード 2つのテクスチャやカラーを、0~1の範囲内のTの値に 従って、線形補間(Linear interpolation)することで混ぜる。 Tとして、Valueの他にマスクノードなどを接続できる。
  55. 55. 共に50%の比率で、Lerp合成する
  56. 56. ベースマテリアルの「上側」を示すマスクを作る 岩の上方ほど、苔がより生えて いる状態を表現したい…。 岩の表面の凹凸でも、上方ほど、 苔がより生えている…。 ノーマルマップが使えないか?
  57. 57. ベースマテリアルの「上側」を示すマスクを作る タンジェントスペースから ワールドスペースに変換 Y方向(上方向)の情報 のみ取得 UnityやMayaでは、ワールド座標での上方向はY軸方向(Y-up)。 一方、3ds Maxや他のゲームエンジンではZ軸方向が上(Z-up) になるので注意。
  58. 58. Transformノード ワールド/ローカル/タンジェント/ビューの各座標 空間に、ベクトルを変換するノード。 タンジェントスペースの概念 ローカル座標にあるUVZ座標(空間)を 「タンジェントスペース(接空間)」という ノーマルマップのカラーと法線の傾きの関係のイメージ http://marupeke296.com/DXPS_S_No5_NormalMap.html (L)Normal (L)Tangent (L)Binormal UV座標
  59. 59. マスクの濃度調整をする
  60. 60. Clamp 0-1ノード 0以下、または1以上の値を切り捨てるノード。 マスクなど、 0~1の範囲内にある必要がある 数値の調整用に用いられる。
  61. 61. マスクをシャープにする
  62. 62. Subtractノード A-Bを計算するノード。
  63. 63. マスクで、2つのテクスチャのLerp合成をする
  64. 64. 参考文献 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

×