【第4回】エフェクト汎用シェーダー作成編（※中・上級者向け）

K-R_VFX

2024年9月2日 00:54

【エフェクト汎用シェーダー作成編（※中・上級者向き）】では、ゲームエンジン【Unity】でShaderGraphを使用したエフェクト汎用シェーダーの作成について解説します。

【第4回】UVControlの実装・SubGraphの学習
前回の学習では【BaseColorテクスチャ】を実装しました
しかし、マテリアルからテクスチャを変更できるだけでは、まだまだ機能が足りていません。

今回の学習では【BaseColorテクスチャ】のUV情報に対して様々な処理を行い、それらをプロパティ化することで汎用シェーダーによくある機能を実装していきたいと思います。

また、シェーダーを組んでいくとノードをたくさん作成する為、どうしてもグラフ内が散らかります。
そこで【SubGraph】という機能を使ってノードを整頓する方法も学習していきましょう。

1.UVControlの選定

UVControlを実装するにあたり、テクスチャに対してどんな機能があれば便利になるかを考えていきます。

よくあるエフェクトシェーダーでは、テクスチャに対して下記の表にある機能が実装されていることが多いです。

今回実装する機能はこちらで問題なさそうですので、表の機能を目標に実装を進めていきたいと思います。

2.UVControlの実装

各項目のプロパティ化は最後にまとめてやります。

【Tiling】

今回タイリングは【Tiling And Offsetノード】の「In」部分の【Tiling(2)】を使用して実装していきます。

タイリングが内部的にどのように処理されているか学習していきましょう。
⇒タイリングはUVに”掛け算(Multiply)”をすることで実現しています。

【Offset】

こちらも【Tiling And Offsetノード】の「In」の【Offset(2)】を使用して実装していきます。

オフセットが内部的にどのように内部的に処理されているかを学習していきましょう。
⇒オフセットはUVに”足し算(Add)”をすることで実現しています。

【Rotate】

回転は【Rotateノード】を使用して実装していきます。

内部的には下記画像のような処理になっています。
⇒少し複雑なので詳しい説明は今回省きますが、簡単に説明するとUV情報に【回転軸】と【回転値】を求めて情報を足しています。

【UVScroll（Speed）】

UVスクロールがどのように内部的に処理されているか学習していきましょう。
⇒UVスクロールは、UVに”時間(Time)を足す(Add)”ことで実現しています。

上記画像の処理ではU（横軸）とV（縦軸）両方に同じ処理が入るので斜めにスクロールする動きになると思います。
UVスクロールの速度も変更できません。

これを汎用的にするには【Timeノード】と【Addノード】の間に下記処理を追加します。

①【Multiplyノード】を追加して、時間の値（スクロールの速度）を自由に調整できるようにします。

②【Multiplyノード】の「In」の「B(2)」にはU座標（横軸）とV座標（縦軸）の２つの座標情報を持っているため、個別で制御できるようにするために【Vector2ノード】を繋ぎます。
これにより、【Vector2ノード】のX(1)にはU座標（横軸）、Y(1)にはV座標（縦軸）と情報を分けることが出来ました。

UVコントロールに必要な機能の基本的な処理方法が分かったかと思います。
これらの機能を全て合わせると下記画像のような繋ぎ方になります。

3.SubGraphの学習

シェーダーを組んでいくとノードをたくさん作成する為、だんだんグラフ内が散らかってきます。

SubGraphは、自分が指定したものをオリジナルのノードにまとめるような機能です。

汎用的なものはSubGraph化することで毎回１から作成せずに済むので作業の効率化にもつながります。

今回SubGraph化するものは先ほどまで学習していた「UVControl」の部分です。（下記画像赤枠で囲った部分）

1.SubGraphの作成

作製した【SubGraphフォルダ】内でSubGraphを作成して下さい。
名前は「SG_UVControl_001」とします。

2.SubGraphの使い方

下記画像が大まかなSubGraphの説明です。

SubGraphはノードの作成なので、
【マスターノード】に当たる部分がノードの「Out部分」
【Blackboard】に当たる部分がノードの「In部分」となります。

3.ノードの作成・プロパティ化

【ShaderGraph】のUVControl部分をコピー＆ペーストします。

UVノードの処理
・【UVノード】はプロパティ化できません。

・UVは「U」と「V」の２つの情報を持つものなので【Vector2】としてプロパティ化して「In」部分に設定します。（ShaderGraph内で【UVノード】を繋げばいいので、UV情報を【Vecter2】として「In」に設定しておくというわけです。）

各パラメーターをプロパティ化していきましょう。

◆【UV】のプロパティ化
・ノードの上で【右クリック】⇒【Convert To】⇒【Propety】でプロパティ化します。
・名前は「UV」とします。

◆【タイリング】のプロパティ化
・名前は「Tiling」とします。

◆【オフセット】のプロパティ化
・名前は「Offset」とします。

◆【回転】のプロパティ化
・回転軸も「In」に出しておきたいので【Center(2)】に【Vecter2】ノードを繋ぎます。(X0.5/Y0.5入力します)
・回転値に「Float」を繋ぎます。

・回転軸と回転値をそれぞれプロパティ化します。
・名前は、
　回転軸「Rotate_Center」
　回転値「Rotate_Value」とします。

※今回の学習では、【Rotateノード】の回転値の設定は、分かりやすい「Degrees」を使用したいと思います。（回転させたい角度分入力する。⇒０～360度で入力）

◆【UVスクロール】のプロパティ化
名前は「Speed」とします。

最後にアウトプットノードに繋いでいきます。

アウトプットノードの設定は下記画像の通りです。
UV情報（２つの情報を持つもの）なので「Vecter2」に変更します。
名前を「Out」に変更します。（名前は任意で構いません。）

繋いだら完成です。
保存もお忘れなく！

4.SubGraphをShaderGraphで使用する

作製したUVControlのSubGraphをShaderGraph内に配置してみましょう。

やり方は２つあります。
①ノード検索で作成

②プロジェクトビューから直接ドラッグ＆ドロップで配置

先ほどSubGraphでプロパティ化したものが「In」の項目に並んでいます。

ShaderGraph内のUVControl部分をSubGraphに差し替えてみましょう。

かなりスッキリした見た目になりました。
自分で作成した分、（修正などが入った際など）期間が開いてグラフを見る際に処理内容が分かりやすいです。

SubGraphを使用すると、ノードのプレビューが球体になってしまうので確認しにくい場合は、【Main Preview】で右クリック ⇒ 「Quad」にするなどして確認していきましょう。

5.UVControlの実装

プロパティ化する前に、SubGraphの「In」の各パラメーターに適切にノードを繋ぎます。

プロパティ化していきます。
Base_Colorに関する物は「BC」という頭文字を各プロパティ名の頭に付けます。
┗同じプロパティ名にした場合、自動で「(1)」と名前が付く仕様のためです。（気にしない方は付けなくても構いません。）

各プロパティ名は下記の通りです。
【Tiling】：「BC_Tiling」
【Offset】：「BC_Offset」
【Rotate_Center】：「BC_Rotate_Center」
【Rotate_Value】：「BC_Rotate_Value」
【Speed】：「BC_Speed」