Unity道場_ShaderForge101.pdf

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. ShaderForgeの画面構成
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. View Slide

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
    

    View Slide

71. View Slide