unity道場11 shader forge 101...
TRANSCRIPT
Unity道場 11
Shader Forge 101 ～ShaderForgeをつかって学ぶシェーダー入門～
基本操作とよく使われるノード編
Unity Technologies Japan合同会社 コミュニティエバンジェリスト
小林信行 2016/08/28
自己紹介 ： 小林 信行ユニティテクノロジーズジャパン合同会社コミュニティエバンジェリスト
UnityやMayaをはじめとする各種3Dツールの研究、ゲーム制作のノウハウの普及をしてます。その前は『涼宮ハルヒの追想』『涼宮ハルヒの約束』『とらドラ・ポータブル！』などの原作付きキャラクターゲームの企画＆監督。
本コースを受講することで得られる知見
• 本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、ＳｈａｄｅｒＦｏｒｇｅの全機能を紹介するものではありません。
• 本コースでは、ShaderForgeの基本的なオペレーションと、よく使うノードについて学びます。
• よく使うノードの機能を学んだ後は、実際にシェーダーを組んでいく上で、しばしば使われるパターンを実際に見ていきましょう。
シェーダーを学んでみよう！
シェーダーは、「独自の絵づくりのためには必要だ」
とよく言われているけれど…
そもそも「シェーダー」って、なに？
• 「シェーダー」とは、主にGPUによって処理される、画像処理の手順を指定した、小さめのスクリプトのことを指します。
• Unityの場合には、サーフェイスシェーダー、バーテックスシェーダー、フラグメントシェーダー、コンピュートシェーダーの４種類があります。
• サーフェイスシェーダーは、Unity独自のシェーダー言語であるShaderLabで通常は書きます。さらにそれ以外のシェーダーは、ShaderLabにCgやHLSLなどのより一般的なシェーダー言語を組み合わせて書かれます。
• 「Shader Forge」は、その内のサーフェイスシェーダーをノードベースでエディットできるように、エディタ拡張で作られたツールです。
http://docs.unity3d.com/ja/current/Manual/SL-Reference.html
絵画における「質感」を構成するもの • 色 （材質およびそれに当たる光の色の表現）
• 陰影 （光が当たっている面の陰影の出方による立体表現）
• タッチ （材質の表面状態の表現）
⇒絵画は、「色＋陰影＋タッチ」の組み合わせで、様々な「質感」を表現する。
Ｕｎｉｔｅ 2016 Tokyo 『Unityとアセットツールで学ぶ「絵づくり」の基礎～ライト、シェーダー、イメージエフェクト～』
シェーダーはこの全てに関わっている
3DCGにおいて「質感」に影響を与えるもの
• マテリアル （マップおよびシェーダー）
• ライト （直接光と間接光、ホワイトバランス、ソフトネス、アングル）
• カメラ （HDRとフォーカス、スクリーンスペースでのイメージエフェクト）
⇒絵画における「色＋陰影＋タッチ」の組み合わせは、3DCGの場合には、
「マテリアル×ライト×カメラ」の各設定として、設計される。
Ｕｎｉｔｅ 2016 Tokyo 『Unityとアセットツールで学ぶ「絵づくり」の基礎～ライト、シェーダー、イメージエフェクト～』
シェーダーを使った絵づくりを学ぶためには、これら要素を切り分けて理解することが大切。各々の役割をごっちゃにしないこと！
特に、「マテリアル ＝ マップ × シェーダー」 u 物理ベースシェーダー（Ｓｔａｎｄａｒｄシェーダーなど）の場合
• 「物理ベースシェーダー」としての機能面は、Ｓｔａｎｄａｒｄシェーダーなどのゲームエンジンがデフォルトで提
供しているシェーダーが受け持っている。
• 従って、絵づくりはシェーダーに割り当てる、各ワークフローに則ったマップ（テクスチャ）の作り込みとライ
ティングが中心となる。
• マップ（テクスチャ）は、Substance DesignerやSubstance Painterなどで制作する。
u ＳｈａｄｅｒForgeが担当するのは、「シェーダーの機能面の作成」で、マップの作り込みではない
• ＳｈａｄｅｒＦｏｒｇｅを使いこなすことで、自分だけのカスタムシェーダーを作成することができる。
• カスタムシェーダーは、自分だけの独自の絵づくりの一翼を担うもの。
ここに様々なマップやライティングを組み合わせることで、最終的な絵づくりが完成する。
目的に合わせて、ツールも使い分けましょう！
ShaderForgeなどのノードベースエディタで
シェーダーを学ぶメリットってどんなところ？
ノードベースのシェーダーエディタでシェーダーを学ぶ利点 l シェーダーのコード記述特有の「めんどくささ」が回避できる。
• シェーダーのコード記述には、お約束のルールが結構ある。
• 同じことを繰り返して書かなければいけないことが結構ある。⇒ShaderForgeなどのノードベースエディタでは、この辺りの「めんどくささ」を意識しないでよい
l 通常のプログラミングよりは、ノードのバリエーションが圧倒的に少ない。⇒ビジュアルプログラミングの場合、ノードが複雑になると、ロジックが見づらくなるが、 シェーダーはグラフィック処理に特化している分、それほど複雑にならないですむ
l 一度憶えると、他のDCCツールやゲームエンジンでも同じようなノードやセマンティクス（シェーダー入力/出力に付加される指定文字列のこと）があるので、相互運用がしやすくなる。
l ShaderForgeの場合、「変更が即、グラフィックに反映される」ので、イタレーションがしやすい。⇒「トライアンドエラーがしやすい」ということは、「学びやすい」ということでもある
ShaderForgeの画面構成
マテリアルの新規作成
マテリアルに割り振られているシェーダーの変更
ノードエディタの基本操作
ノードエディタの基本操作
l ノードリンクの削除：Alt/Option + RMB。リンクのまとめ切断も可能
l Macでノードを削除：Command + X （切り取り）で（WindowsならDeleteキーで）
l ノードのクイックサーチ：ノードの頭文字を入れて、マウススクロール。 左クリックで決定
l ノードの範囲選択指定：Alt/Optionを押しながら、LMBドラック
l ノードの範囲選択中は、ヒエラルキー状態を保ちながらノードを移動できる
l ノード上でRMBでコメント挿入ができる他、各ノードの機能をＷＥＢから検索できる
用途別に見る基本的なノードの機能
テクスチャを貼る
UV Coordinates Texture 2D
Main
テクスチャを貼る
Emissionに接続すると、ライトの影響を受けなくなる（Unlitの状態になる）。
Diffuse/Base Colorに接続すると、ライトの影響を受けるようになる。
テクスチャにカラーを重ねる
Color Multiply Add
テクスチャにカラーを重ねる
Multiplyでカラーを重ねると、輝度は下がる。 （「白」なら変わらない）
Addでカラーを重ねると、輝度は上がる。 （「黒」なら変わらない）
テクスチャにカラーを重ねる
Multiply/Addノードには、２つ以上のノードを入力することが可能
２つのテクスチャやカラーを混ぜる
Lerp（線形補間）
Value
Blend（Photoshop的）
２つのテクスチャやカラーを混ぜる
Lerpは、２つのテクスチャやカラーをＶａｌｕｅの値に従って、線形補間（Linear interpolation）することで混ぜる。
Blendは、２つのテクスチャやカラーをPhotoshopのレイヤー合成的に混ぜる。
ノーマルマップを貼る、合成する
Texture 2D / Normal map
Main / Normal
Normal Blend
Lerp / Value / Normalize
ノーマルマップを貼る、合成する
ノーマルマップを、MainノードのNormalに接続するとノーマルマップが適用される。
2つのノーマルマップを合成する時は、Normal Blendノードを使う。
ノーマルマップを貼る、合成する
Lerpを使用して、Valueで指定した強度で２つのノーマルマップを合成することもできる。その場合、合成したノーマルマップをNormalizeノードで正規化しておく。
カラーやマスクを反転する
One Minus
カラーやマスクを反転する
カラーや白黒のマスクなど、「０～１」の範囲にあるベクトルや画像を反転させる際に、One Minusノードを使用する。特にカスタムライティングをする際に、良く使われるノードである。
ＵＶマッピングをタイリング（スケール）する
UV Coordinates / Multiply / Value / Vector2
ＵＶマッピングをタイリング（スケール）する
UV CoordinatesノードをMultiplyノードに接続することで、ＵＶマッピングを任意にタイリング（スケール）することができる。 MultiplyノードにVector2ノードを接続すると、UV方向に違ったスケールをかけられる。
ＵＶマッピングをタイリング（スケール）する
Value = 1 の時
Value = 0.25 の時
Value = -0.25 の時
ＵＶマッピングをオフセット（スクロール）する
UV Coordinates / Add / Value / Vector2
ＵＶマッピングをオフセット（スクロール）する
「赤１」に着目すると 右に１コマ、下に２コマオフセットしている
左に１コマ、下に1コマオフセットしている
UV CoordinatesノードをAddノードに接続することで、ＵＶマッピングをオフセット（スクロール）することができる。
ＵＶマッピングをアニメーションさせる
Timeノードから取得した時間変化分を、AddノードでUV Coordinatesノードに接続することで、ＵＶマッピングがスクロールアニメーションをする。
UV Coordinates / Time / Add
ＵＶマッピングをアニメーションさせる
Timeノードから取得した時間変化分に、MultiplyノードでVector2を掛けることで、スクロールの移動方向と速度の調整ができる。
専用ノードでＵＶマッピングをアニメーションさせる
Pannerノードで、ＵＶマッピングをスクロールアニメーションすることもできる。Distanceに値を接続すると、Ｔｉｍｅノードから値を取得しない限り、ＵＶマッピングのオフセットとして機能する。 PannerノードのUVで、スクロールの速度と方向を指定できる。
ＵＶマッピングを回転アニメーションさせる Rotatorノードを使うことで、ＵＶマッピングを回転アニメーションさせることができる。
実際にシェーダーを組んでみよう！
UVタイルアニメーションを作ってみよう
シェーダーとテクスチャアトラスの準備
テクスチャアトラスの表示
１コマサイズで表示する
DivideノードA/Bを計算するノード
時間でスクロールさせる
時間でスクロールさせる
Fracノード ０から１まで、小数点以下のみを繰り返す関数。 0～1の繰り返しタイマーなどに使う。
コマ単位でアニメーションさせる
コマ単位でアニメーションさせる
Floorノード 小数点以下を切り捨てて、整数にする関数。 ステップ進行などに使う。
+X方向に進行して、-Y方向にジャンプする
UnityやMayaのUV座標系は上図。DirectXでは、原点が左上になり、かつV軸が反転する。
+X方向に進行して、-Y方向にジャンプする
Component Maskノード ベクトルの各要素を分解するノード。 ベクトルの各要素から数値を取り出すのに使う。他、Vector3からXY要素（UV要素）のみを取り出すのに使用したりする。
Appendノード 数値を合成して、ベクトルを新規に作り出すノード。 各数値をベクトルの構成要素にして、新規にベクトルを作り出すのに使う。
「苔むした岩」(環境ブレンディング)を作ってみよう
２つのテクスチャを合成するための準備
Lerpノード ２つのテクスチャやカラーを、０～１の範囲内のTの値に従って、線形補間（Linear interpolation）することで混ぜる。Tとして、Valueの他にマスクノードなどを接続できる。
共に50%の比率で、Lerp合成する
ベースマテリアルの「上側」を示すマスクを作る
岩の上方ほど、苔がより生えて いる状態を表現したい…。
岩の表面の凹凸でも、上方ほど、苔がより生えている…。
ノーマルマップが使えないか？
ベースマテリアルの「上側」を示すマスクを作る
タンジェントスペースからワールドスペースに変換
Y方向（上方向）の情報のみ取得
UnityやMayaでは、ワールド座標での上方向はY軸方向（Y-up）。一方、3ds Maxや他のゲームエンジンではZ軸方向が上(Z-up)になるので注意。
Transformノード ワールド/ローカル/タンジェント/ビューの各座標空間に、ベクトルを変換するノード。
タンジェントスペースの概念 ローカル座標にあるUVZ座標（空間）を「タンジェントスペース（接空間）」という
ノーマルマップのカラーと法線の傾きの関係のイメージ
http://marupeke296.com/DXPS_S_No5_NormalMap.html
(L)Normal (L)Tangent
(L)Binormal
UV座標
マスクの濃度調整をする
Clamp 0-1ノード 0以下、または1以上の値を切り捨てるノード。 マスクなど、 0～1の範囲内にある必要がある数値の調整用に用いられる。
マスクをシャープにする
Subtractノード A-Bを計算するノード。
マスクで、２つのテクスチャのLerp合成をする
参考文献 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
