AnyPortrait > マニュアル > 「Shader Graph」でマテリアルを作成

「Shader Graph」でマテリアルを作成


1.2.2

Shader Graph(シェーダグラフ)」は、ノードベースのツールを利用して、シェーダを作成する機能です。
Unity 2018で導入されたこの機能は、、LWRPとHDRPでも動作するので、互換性が良いという特徴があります。
「Shader Graph」を利用して、「カスタムシェーダ」をルールに合わせて作成するAnyPortraitとも互換性のあるマテリアルを作成することができます。
このページでは、「Shader Graph」を利用して、「カスタムシェーダ」を作成しマテリアルに適用する方法を説明します。
追加情報は次のページを参照してて見ることをお勧めします。
- カスタムシェーダー
- Shader Graph (Unity公式ページ/英語)
- マテリアルライブラリ


参考
このページで説明されたシェーダは、基本的なシェーダコードの内容をグラフ形式に変換したものです。
基本的なルールだけよると、皆さんが自由にシェーダを製作することができます。




「Shader Graphアセット」を作ってみましょう。
Create> Shader > 2D Renderer」で二つの方式の「Shader Graphアセット」を作成することができます。
この例では、「Sprite Lit Graph(Experimental)」を利用してみましょう。


参考
この例では、LWRP 2Dと互換性のあるシェーダを作成しました。
他の種類のグラフを作成することも可能です。




生成された「Shader Graphアセット」をダブルクリックすると、「グラフツール」が開きます。
現在は、出力ノードである「Sprite Lit Master」ノードのみの状態です。
(1) 「+」ボタンを押します。




(2) プロパティのタイプを選択します。ここでまず、「Texture2D」を選択します。




(1) 新しいプロパティが追加されました。
(2) プロパティの名前を「MainTex」に設定します。プロパティの名前は、この例と異なる設定いただいてもかまいません。
(3) Referenceの名前を「_MainTex」に設定します。この値は、シェーダでのプロパティで動作するので、この例と同じように作成します。




(1) と同じ方法で、上記のように「Vector4」タイプのプロパティと「Color」タイプのプロパティを追加します。
(2) 第二のプロパティを次のように設定します。
- Reference : _MainTex_ST
- Type : Vector4
- Default : (1, 1, 0, 0)
(3) 第三のプロパティを次のように設定します。
- Reference : _Color
- Type : Color
- Default : (0.5, 0.5, 0.5, 1)



AnyPortraitのカスタムシェーダルールに合わせて、基本的なシェーダを作成しました。
(画像をクリックすると拡大してご覧いただけます。)




テクスチャをサンプリングして色を作成するノードです。
基本のUVを使用することもありますが、「MainTex ST」を使用すると、「UVのタイリング」などをさらに設定することができます。
MainTex ST」の値が(1, 1, 0, 0)ではない場合、通常表示されないことがあります。




テクスチャの色と「_Color」プロパティの色を組み合わせているノードです。
AnyPortraitは色演算時に「2X Multiply」方式を使用します。
従ってこのグラフでも「_Color」のRGB値が2と乗算した後、「テクスチャの色」と乗算されます。




アルファチャンネルの値は、「テクスチャのアルファ値」と「_Colorのアルファ値」を乗算となります。
完成された色は、「Sprite Lit Master」の「Color」に接続されます。




これで、「Shader Graph」をAnyPortraitに適用してみましょう。
AnyPortraitエディタを開きます。
(1)Root Unit」を選択します。
(2)Material Library」ボタンを押します。
(3)Make Material Set」ボタンを押します。
(4) 新しいマテリアルセットはプリセットを使用しないので、「(None)」を選択します。
(5)Select」ボタンを押します。




(1) 生成されたマテリアルのセットを選択します。
(2) マテリアルセットの「Name」と「Icon」を設定し、「Default Material」ボタンを押して、デフォルトのマテリアルに設定します。




Shader Graphで作成されたシェーダを適用してみましょう。
(3)Color Space:Gamma > Basic Rendering > Alpha Blend」の項目に、作成したシェーダを割り当てます。




Bakeをした後、Unityシーンで確認してみましょう。




Shader Graphで作成されたマテリアルが適用されて表示されるのを見ることができます。




クリッピングメッシュのためのShader Graph作成


「クリッピングメッシュ(Clipped Mesh)」を描画するためには、二種類のシェーダが必要です。
- Clipped Shader
- Alpha Mask Shader
Shader Graphではシェーダを作成すると、クリッピングメッシュもレンダリングすることができます。


まず、「Clipped Shader」を作ってみましょう。




前に作成しシェーダーを複製します。




(1) クリッピング、レンダリングのための「Texture2D」タイプと「Vector4」タイプのプロパティを次のように追加します。
(2)マスクテクスチャ」の入力を受けるプロパティを次のように設定します。
- Reference : _MaskTex
- Type : Texture2D
(3)マスクテクスチャ」の「位置とサイズ」に関連するプロパティを次のように設定します。
- Reference : _MaskScreenSpaceOffset
- Type : Vector4
- Default : (0, 0, 0, 1)




上記の記述されたShader Graphを複製したので、基本的なレンダリングのためのグラフでは、完成された状態です。
ここでクリッピングに関連するノードを追加してみましょう。
次の3つのノードを追加します。
(1) MaskTex プロパティ
(2) Screen Position ノード(Defaultモード)
(3) MaskScreenSpaceOffset プロパティ



既存のグラフにクリッピングに関するノードを追加してShader Graphを完成しました。
グラフの下側のノードとアルファ関連の演算ノードが追加、変更されたものです。
(画像をクリックすると拡大してご覧いただけます。)


クリッピングに関するノードを見てみましょう。




Screen Position」と「MaskScreenSpaceOffset」プロパティを使用して、「マスクテクスチャのためのUV」を計算する部分です。
これはかなり複雑に構成されているが、「AnyPortraitのクリッピングメッシュ処理の最適化」に関連しているからです。
この部分は修正せずに、同じように作成ください。




「マスクテクスチャ(MaskTex)」と「Screen PositionとMaskScreenSpaceOffsetを利用して作成されたUV」を利用して、アルファ値を変更するノードです。
このノードを追加すると、元の画像がマスクテクスチャによって透明になります。




クリッピングレンダリングのマスクテクスチャを生成する「Alpha Mask Shader」を作ってみましょう。
AnyPortraitは「Rチャンネル」をマスクデータとして使用します。
Rチャンネル」の特性にマスク画像データは、光の影響を受けて色が変わることがあります。
したがって、光の影響を受けない「Sprite Unlit Graph」を選択して、新しいShader Graphを生成します。




生成された「Shader Graph」をダブルクリックして、グラフツールを開きます。
上記のように3つのプロパティを追加します。
このプロパティは、先に説明したプロパティと同じです。



マスクテクスチャ」を生成するShader Graphを作成してみましょう。
上記のShader Graphと非常に似ており、「アルファ値に関連付けられたノード」のみが、他のものを見ることができます。
(画像をクリックすると拡大してご覧いただけます。)




AnyPortraitのマスクテクスチャはアルファデータを「Rチャンネル」に保存します。
_MainTexの色」と「_Colorの色」の「Aチャンネル」の値が「Rチャンネル」に変換されることを、上記の画像で確認することができます。
その他のグラフは、従来と同じです。




クリッピングレンダリングのためのマテリアルを作成しましょう。
マテリアルライブラリを再び開き、上の画像のように作成したシェーダを設定します。
(1) Basic Shader : Color Space : Gamma > Basic Rendering > Alpha Blend
(2) Clipped Shader : Color Space : Gamma > Clipped Rendering > Alpha Blend
(3) Alpha Mask Shader : Alpha Mask




もし「LWRP」または「LWRP 2D」環境でのレンダリングをする場合は、基本的な設定では、クリッピングメッシュが正常に表示されません。
これはシェーダの問題ではなく、Unityのカメラ処理方式の違いです。
したがってShader Graphで汎用的なシェーダを作成しても問題が解決されません。
クリッピングメッシュを正常にレンダリングするために、以下の方法に応じて設定します。
(1)Bakeダイアログ」を開きます。
(2)Setting」タブを選択します。
(3)Render Pipeline」の項目の値を現在の「Graphicsオプション」に合わせて変更します。グラフィックスの設定が「LWRP」または「LWRP 2D」になっている場合は「Scriptable Render Pipeline」に変更します。 (逆の場合は「Default」に設定します。)


(Unity 2019からサポートされているオプションです。)




BakeをしUnityシーンで確認してみるキャラクターが正常に表示されるのを見ることができます。