Unity - Shader Graph 入門 - ひとりでのアプリ開発

初めに

　Shader Graph を使うことで、Shader の書き方が分からなくても Shader を作ることができます。本記事では、Shader Graph でできることや使い方についてまとめます。

Shader Graph とは

Shader とは

　Shader（シェーダー）は描画方法を記述したプログラムであり、１つの Material に１つのシェーダーを設定します。

（例：デフォルトの CustomRenderTexture）

Shader "CustomRenderTexture/MyShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex("InputTex", 2D) = "white" {}
     }

     SubShader
     {
        Blend One Zero

        Pass
        {
            Name "MyShader"

            CGPROGRAM
            #include "UnityCustomRenderTexture.cginc"
            #pragma vertex CustomRenderTextureVertexShader
            #pragma fragment frag
            #pragma target 3.0

            float4      _Color;
            sampler2D   _MainTex;

            float4 frag(v2f_customrendertexture IN) : COLOR
            {
                float2 uv = IN.localTexcoord.xy;
                float4 color = tex2D(_MainTex, uv) * _Color;

                // TODO: Replace this by actual code!
                uint2 p = uv.xy * 256;
                return countbits(~(p.x & p.y) + 1) % 2 * float4(uv, 1, 1) * color;
            }
            ENDCG
        }
    }
}

　Shader の書き方については、別の記事にまとめておりますので、そちらをご覧ください。

fineworks-fine.hatenablog.com

Shader Graph とは

　Shader を作るには上で紹介したようなコードを書く必要がありました。

　バージョン2018.1 以降の Unity では Shader Graph という Shader の書き方が分からなくても Shader を作ることができる機能が追加されました。

Shader Graph アセットの作り方

準備

　Shader Graph は HD レンダーパイプライン (HDRP) とユニバーサルレンダーパイプライン (URP) にのみ対応しています。現在、Shader Graph は HDRP および URP パッケージに含まれています。

　HDRP や URP をプロジェクトに追加するには、次の方法があります。

プロジェクト作成の際に、はじめからこれらが含まれているテンプレートを選ぶ
Package Manager から追加する

　HDRP または URP パッケージをインストールすると、自動的に Shader Graph を読み込みます。

　Create > Rendering から URP Assets を作成し、Edit > Project Settings の Graphics にある Scriptable Render Pipeline Settings に設定します。

Shader Graph アセットの作成

　Assets で右クリック > Create > Shader Graph から作成したい Shader Graph を選択します。

　Lit は光の影響をうける、Unlit は光の影響をうけないシェーダーになります。

　Lit Shader Graph を作ってみます。

Shader Graph ウィンドウ

　Shader Graph ウィンドウで Shader を作成していきます。

Shader Graph ウィンドウの開き方

作成した Shader Graph アセットをダブルクリック
Inspector の Open Shader Editor をクリックする

Shader Graph ウィンドウの構成

要素	説明
Blackboard	シェーダーのプロパティやキーワードを設定する
Graph Inspector	要素を選択したときに、要素の設定が表示される
Main Preview	アクティブなレンダリングパイプライン上のシェーダーを表示
タイトルバー	Save 等 Graph 上で実行できるアクションが含まれている
ワークスペース	ノードのネットワークを作成する場所