【Unity道場 2016】Shader Forge 101

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

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

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

シェーダーを学んでみよう!

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

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

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

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

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

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

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

ShaderForgeの画面構成

Window Help Next Window Ctrl+Tab Previous Window Ctrl+Shift+Tab Layouts Shader Forge Services Ctrl+0 Scene Ctrl+1 Game Ctrl+2 Inspector Ctrl+3 Hierarchy Ctrl+4 Project Ctrl+5 Animation Ctrl+6 Profiler Ctrl+7 Audio Mixer Ctrl+8 Asset Store Ctrl+9 Version Control Animator Animator Parameter Sprite Packer Editor Tests Runner Lighting Occlusion Culling Frame Debugger Navigation Console Ctrl+Shift+C Collab History

新規にシェーダーを 作成する場合 ShaderForgeで作成 した既存のシェーダー を開く場合 ShaderForgeに関連する 各Web資料へアクセスする

ここに、これから作るシェーダーの簡単な説明が出ます。 (ここで選択したシェーダーのタイプは後で変更すること も可能です。)

シェーダーのコンビル ボタン ノードのメニュー 作成中のシェーダーの リアルタイムプレビュー (モデルは変更可能) 3本の線は、Vector3で繋がっていること を表している 各ノード Mainノード 作成する各シェーダーの 詳細設定をおこなうメニュー これらの初期ノードは、選択したシェーダーの タイプによって異なる ノードエディタ作業領域内で、ノードの先頭1文字 のアルファベット(例の場合なら、「V」)を入力 することで現れる、ショートカット。 マウスのスクロールボタンで上下できる。

シェーダー名とFallback の指定 ポリゴンのカリング指定 ブレンドモードの指定 Inspectorウィンドウに表示 するプロパティを表示する (マウスで上下移動可能) 作成しているシェーダーのタイプを 指定する。 ここを変更することで、一番最初に 選択したタイプから変えることが可 能になっている。 ターゲットとする プラットフォームの指定 Shader Settings Properties Lighting Geometry Blending

再度、ShaderForgeのノード エディタで開く時には、ここを クリックする こちらをクリックすると、 IDEでシェーダーコードとして 開くことになる 作成したシェーダーファイル Basic001.shader これはShaderForgeの他、IDEで も開くことができる。 またShaderForgeがなくても、 シェーダーとして機能する。 シェーダー上で 右クリック マテリアルの新規作成 シェーダーを変更 したいマテリアル を選択する マテリアルに割り振られている シェーダーの変更

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

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

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

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

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

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

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

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

2つのテクスチャやカラーを混ぜる Lerp(線形補間) Blend (Photoshop的) Value

2つのテクスチャやカラーを混ぜる Lerpは、2つのテクスチャやカラーをValueの値 に従って、線形補間(Linear interpolation) することで混ぜる。 Blendは、2つのテクスチャやカラーを Photoshopのレイヤー合成的に混ぜる。

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

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

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

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

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

UVマッピングをタイリング(スケール)する UV Coordinates / Multiply / Value / Vector2

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

UVマッピングをタイリング(スケール)する Value = 1 の時 Value = 0.25 の時 Value = -0.25 の時

UVマッピングをオフセット(スクロール)する UV Coordinates / Add / Value / Vector2

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

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

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

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

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

実際にシェーダーを 組んでみよう!

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

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

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

1コマサイズで表示する

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

時間でスクロールさせる

Fracノード 0から1まで、小数点以下のみを繰り返す関数。 0~1の繰り返しタイマーなどに使う。

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

Floorノード 小数点以下を切り捨てて、整数にする関数。 ステップ進行などに使う。

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

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

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

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

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

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

Lerpノード 2つのテクスチャやカラーを、0~1の範囲内のTの値に 従って、線形補間(Linear interpolation)することで混ぜる。 Tとして、Valueの他にマスクノードなどを接続できる。

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

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

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

Transformノード ワールド/ローカル/タンジェント/ビューの各座標 空間に、ベクトルを変換するノード。

マスクの濃度調整をする

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

マスクをシャープにする

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

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

参考文献 ● SHADER FORGE Nodes http://acegikmo.com/shaderforge/nodes/ ● 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 ● プログラマブルシェーダーについては、 『ゲームつくろー!』「プログラマブルシェーダ編」 http://marupeke296.com/ProShader_main.html

Thank you!