知識0からのUnityShader勉強

知識0からのUnityShader勉強

UnityのShaderをメインとして、0から学んでいくブログです。

【UnityShader】オブジェクトにアウトラインをつける #25

前回の成果

揺れるシェーダーの修正ができた

soramamenatan.hatenablog.com

今回やること

アウトラインのシェーダーを制作します。

nn-hokuson.hatenablog.com

事前準備

Scene上にSphereを置いて、今回制作したmaterialをアタッチしてください。

f:id:soramamenatan:20191010104510p:plain

ソースコード

Shader "Unlit/outline" {
    SubShader {
        Tags {
            "RenderType" = "Opaque"
            "LightMode"="ForwardBase"
        }
        LOD 200

        Pass {
            Cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f {
                float4 vertex : SV_POSITION;
            };

            v2f vert(appdata v) {
                v2f o;
                v.vertex += float4(v.normal * 0.04f, 0);
                o.vertex = UnityObjectToClipPos(v.vertex);
                return o;
            }

            fixed4 frag(v2f i ) : COLOR {
                fixed4 col = fixed4(0.1f, 0.1f, 0.1f, 1);
                return col;
            }
            ENDCG
        }

        Pass {
            Cull Back
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float4 normal : NORMAL;
            };

            struct v2f {
                float4 vertex : SV_POSITION;
                float3 normal : NORMAL;
            };

            v2f vert(appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.normal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            fixed4 frag(v2f i) : COLOR {
                half nl = max(0, dot(_WorldSpaceLightPos0.xyz, i.normal));
                if (nl <= 0.01f) nl = 0.1f;
                else if (nl <= 0.3f) nl = 0.3f;
                else nl = 1.0f;
                fixed4 col = fixed4(nl, nl, nl, 1);
                return col;
            }
            ENDCG
        }
    }
}

今回初めてPassが2回出てきたと思います。
そこも含めて説明していきます。

"LightMode"="ForwardBase"

これはForward RenderingでUnityがマテリアルにライトの情報を渡してくれるようになるTagです。
これがないと後述する_WorldSpaceLightPos0に正しい値が入ってこなくなります。

ちなみにSceneにライトが2つ以上ある場合は、2Pass目に

Tags { "LightMode"="ForwardAdd" }

を追加してください。

Cull Front / Cull Back

以前、Cull Offでカリングを無効にしました。
他にもカリングの指定の仕方があるので紹介します。

カリング名 意味
Cull Front 視点と同じ側のポリゴンをレンダリングしない
Cull Back 視点と反対側のポリゴンをレンダリングしない(デフォルト)

2つ目のPassで明示的にCull Backを指定する必要はないのですが、Cull Frontと比較するために記述しました。

_WorldSpaceLightPos0

こちらはビルドインされている変数です。
Directional Lightと他のライトで入る値が違います。

ライト名 中身
Directional Light float4(ワールド空間方向のxyz, 0)
他のライト float4(ワールド空間座標のxyz, 1)

上記でも説明しましたが、Tagに"LightMode"="ForwardBase"を指定しないと正しい値が入らないので気をつけてください。

docs.unity3d.com

Passを2回呼ぶ意味

今回アウトラインを制作する上にあたって、

  • 法線ベクトルにモデルをスケールさせて黒くする
  • ライトの方向に合わせてモデルのライティングを変化させる

の2回にわたってモデルを描画しているからです。

1Pass目

次のソースコードで法線ベクトルにモデルを膨らませています。

v.vertex += float4(v.normal * 0.04f, 0);

ここで気をつけてほしいのが、vertex shaderから取得したvはローカル座標系です。
ですので、

UnityObjectToWorldNormal(v.normal);

等で法線情報をワールド座標系に変更しないようにしましょう。
変更してしまうと、後の

UnityObjectToClipPos(v.vertex)

で結果が変わってしまいます。

2Pass目

ここではモデルの法線ベクトルとDirectional Lightのベクトルの内積を計算しています。
dotは、

soramamenatan.hatenablog.com

ここで説明した通り、2ベクトルの角度によって-1~1の範囲を返します。
今回はmax関数で最小値を0に指定しているので、0~1の範囲です。

ソースコードにコメントを付与

Shader "Unlit/outline" {
    // Shaderの中身を記述
    SubShader {
        Tags {
            // 一般的なShaderを使用
            "RenderType" = "Opaque"
            // materialにlightの情報を渡す
            "LightMode"="ForwardBase"
        }
        // しきい値
        LOD 200

        // 1Pass目
        Pass {
            // 視点と同じ側のポリゴンをレンダリングしない
            Cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f {
                float4 vertex : SV_POSITION;
            };

            v2f vert(appdata v) {
                v2f o;
                // 法線方向にモデルを膨らませる
                v.vertex += float4(v.normal * 0.04f, 0);
                o.vertex = UnityObjectToClipPos(v.vertex);
                return o;
            }

            fixed4 frag(v2f i ) : COLOR {
                fixed4 col = fixed4(0.1f, 0.1f, 0.1f, 1);
                return col;
            }
            ENDCG
        }
        // 2Pass目
        Pass {
            // 視点と視点と反対側のポリゴンをレンダリングしない
            Cull Back
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float4 normal : NORMAL;
            };

            struct v2f {
                float4 vertex : SV_POSITION;
                float3 normal : NORMAL;
            };

            v2f vert(appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.normal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            fixed4 frag(v2f i) : COLOR {
                // ライトと法線の外積
                half nl = max(0, dot(_WorldSpaceLightPos0.xyz, i.normal));
                if (nl <= 0.01f) nl = 0.1f;
                else if (nl <= 0.3f) nl = 0.3f;
                else nl = 1.0f;
                fixed4 col = fixed4(nl, nl, nl, 1);
                return col;
            }
            ENDCG
        }
    }
}

結果

モデルにアウトラインをつけられています。
更に、ライトの方向によってモデルの色を変更できています。

f:id:soramamenatan:20191011095447p:plain

今回はここまでとなります。
ご視聴ありがとうございました。