Zenn
🔖

URP環境で動作するビルトインのUIシェーダまとめてみた

2022/06/22に公開
Unity
URP
シェーダ
tech

uGUIのMaterialにアタッチして使用する

Unlit/Detail

以下がインスペクターである

ソースコードは以下である

UI-Unlit-Detail.shader
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

Shader "UI/Unlit/Detail"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Main Color", Color) = (1,1,1,1)

        _DetailTex ("Detail (RGB)", 2D) = "white" {}
        _Strength ("Detail Strength", Range(0.0, 1.0)) = 0.2

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    SubShader
    {
        LOD 100

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType"="Plane"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
            #pragma multi_compile_local _ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                float2 texcoord2 : TEXCOORD1;
                fixed4 color : COLOR;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 texcoord : TEXCOORD0;
                float2 texcoord2 : TEXCOORD1;
                float4 worldPosition : TEXCOORD2;
                fixed4 color : COLOR;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            sampler2D _DetailTex;
            float4 _MainTex_ST;
            float4 _DetailTex_ST;
            float4 _DetailTex_TexelSize;
            fixed4 _Color;
            fixed _Strength;

            fixed4 _TextureSampleAdd;

            bool _UseClipRect;
            float4 _ClipRect;

            bool _UseAlphaClip;

            v2f vert (appdata_t v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.worldPosition = v.vertex;
                o.vertex = UnityObjectToClipPos(o.worldPosition);

                o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.texcoord2 = TRANSFORM_TEX(v.texcoord2 * _DetailTex_TexelSize.xy, _DetailTex);
                o.color = v.color * _Color;

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 color = (tex2D(_MainTex, i.texcoord) + _TextureSampleAdd) * i.color;
                fixed4 detail = tex2D(_DetailTex, i.texcoord2);
                color.rgb = lerp(color.rgb, color.rgb * detail.rgb, detail.a * _Strength);
                color = color * _Color;

　　　　　　　　//当シェーダーでは使用しない
                #ifdef UNITY_UI_CLIP_RECT
                color.a *= UnityGet2DClipping(i.worldPosition.xy, _ClipRect);
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                return color;
            }
            ENDCG

        }
    }
}

SpriteTextute

uGUIでSource ImageにSpriteをアタッチすることで表示される

Main Color

上のソースを見る限り、頂点シェーダーで頂点カラーにMain Color乗算後、
フラグメントシェーダーでそれをSource Imageのテクスチャに乗算している。
ただ、lerpの処理後も、Main Colorを乗算している

Detail (RGB)、Detail Strength

上のソースを見る限り、Detail Strengthの値によって、
Source ImageとSource Image * Detail (RGB)とで線形補間している。

では実際に、Source Imageに適当なテクスチャ、Detail (RGB)に赤色のテクチャーを設定し、
Detail Strengthの値を変更させどうなるか見てみる。

Detail Strengthが0

Detail Strengthが0.5

Detail Strengthが1

また、虹色のテクスチャをoffsetさせていくことで色を変化させることができる


Stencil Comparison、Stencil ID、Stencil Operation、Stencil Write Mask、Stencil Read Mask

ステンシルテストを行うためのプロパティ群
Pass [_StencilOp]なので、ステンシルテストが成功だった場合にPass構文内ののシェーダ―を実行

Stencil Comparison

数字 比較関数 説明
1 Never 常にステンシルテスト失敗
2 Less バッファ値＜基準値ならステンシルテスト成功
3 Equal バッファ値＝基準値ならステンシルテスト成功
4 LEqual バッファ値≦基準値ならステンシルテスト成功
5 Greater バッファ値＞基準値ならステンシルテスト成功
6 NotEqual バッファ値≠基準値ならステンシルテスト成功
7 GEqual バッファ値≧基準値ならステンシルテスト成功
8 Always 常にステンシルテスト成功

Stencil Operationn

数字 キーワード 説明
1 Keep 変更なし（初期値）
2 Zero バッファ値に０を設定
3 Replace バッファ値に基準値を設定
4 IncrSat バッファ値を１加算（２５５の場合はそのまま）
5 DecrSat バッファ値を１減算（０の場合はそのまま）
6 Invert 全ビットを反転
7 IncrWrap 全ビットを反転
8 DecrWrap バッファ値を１減算（０の場合は２５５になる）

実際に試してみる

マスクする側

マスクされる側

マスクする側
Stencil Comparison：8
Stencil ID:1
Stencil Operation:3
ステンシルテストは常に成功し、その際ステンシルバッファ値に1を書き込む

マスクされる側
Stencil Comparison：3
Stencil ID:1
マスクする側でステンシルバッファ値に書き込んだ1と、マスクされる側のStencil IDが等しいとき、マスクされる側のシェーダ―実行

マスクする側とマスクされる側を組み合わせた結果

Color Mask

カラーマスクを指定
白色のImageを使用して値を変えて調べたところ、以下の数字でカラーマスクされることがわかった。

数字 マスク値
0~2 何も描画されない
2~4 B
4~6 G
6~8 GB
8~10 R
10~12 RB
12~14 RG
14~ RGB

Use Alpha Clip

チェックを入れると、アルファ値が0.001より小さい場合、描画されなくなる

補足

Lighting Off、Blend SrcAlpha OneMinusSrcAlphaなので
ライティングの影響を受けない、一般的なアルファブレンドで描画
_TextureSampleAddについては、https://logicalbeat.jp/blog/575/

Unlit/Text

以下がインスペクターである

ソースコードは以下である
FallBack先のUI/Default Fontも、UI/DefaultへFallBackしている

UI-Unlit-Text.shader
Shader "UI/Unlit/Text"
{
    Properties {
        [PerRendererData] _MainTex ("Font Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    FallBack "UI/Default Font"
}
UI-Default.shader
Shader "UI/Default"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend One OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            Name "Default"
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
            #pragma multi_compile_local _ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                float4  mask : TEXCOORD2;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float4 _MainTex_ST;
            float _UIMaskSoftnessX;
            float _UIMaskSoftnessY;

            v2f vert(appdata_t v)
            {
                v2f OUT;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                float4 vPosition = UnityObjectToClipPos(v.vertex);
                OUT.worldPosition = v.vertex;
                OUT.vertex = vPosition;
                
		//当シェーダーでは使用しない
                float2 pixelSize = vPosition.w;
		//当シェーダーでは使用しない
                pixelSize /= float2(1, 1) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
		//当シェーダーでは使用しない
                float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
		//当シェーダーでは使用しない
                float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
                OUT.texcoord = TRANSFORM_TEX(v.texcoord.xy, _MainTex);
		//当シェーダーでは使用しない
                OUT.mask = float4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));

                OUT.color = v.color * _Color;
                return OUT;
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = IN.color * (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);

		//当シェーダーでは使用しない
                #ifdef UNITY_UI_CLIP_RECT
                half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
                color.a *= m.x * m.y;
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                color.rgb *= color.a;

                return color;
            }
        ENDCG
        }
    }
}

uGUIのTextで使用するシェーダー
Font Textureを使用して文字を描画させているため、テクスチャを自分で設定できない。
MainColorに関しては、TextコンポーネントのColorと乗算させている
それ以外のステンシルテストのプロパティや、カラーマスク、AlphaClipを
実機で確認したところ、Unlit/Detailのように再現できたため割愛。

Unlit/Text Detail

以下がインスペクターである

ソースコードは以下である
FallBackでUI/Unlit/Detailを指定している
UI/Unlit/Detailは、上のUnlit/Detailのソースを参照

UI-Unlit-TextDetail.shader
Shader "UI/Unlit/Text Detail"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Main Color", Color) = (1,1,1,1)

        _DetailTex ("Detail (RGB)", 2D) = "white" {}
        _Strength ("Detail Strength", Range(0.0, 1.0)) = 0.2

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    FallBack "UI/Unlit/Detail"
}

Unlit/TextにDetail (RGB)が追加されたシェーダー
UI/Unlit/DetailにFallbackしているため、処理自体はUnlit/Detailと同じであるため
上のUnlit/Detailを参照

Unlit/Transparent

以下がインスペクターである

ソースコードは以下である
FallBackでUI/Defaultを指定している
UI/Defaultは、上のUnlit/Textのソースを参照

UI-Unlit-Transparent.shader
Shader "UI/Unlit/Transparent"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }
    FallBack "UI/Default"
}

Base (RGB), Alpha (A)

アルファ抜きされた部分を、透明(非表示)にしてくれる
UIで画像を表示する際は、TextureTypeをSpriteにしなければならないが、
このシェーダを使用するとDefalutでも画像をBase (RGB), Alpha (A)に設定し透過表現ができる

なお、TextureTypeをSpriteにすると、画像の黒い部分は自動でアルファ抜きしてくれるので、
そのまま当シェーダーを使用せず、ImageのSourceImageに画像をアタッチすることで同じ表現が可能
Defalut

Sprite

ImageのSourceImageｎに画像をアタッチ

それ以外の項目は上で説明済みであるため割愛

Detail

以下がインスペクターである

こちらの項目とソースも上で説明しているため割愛

Default Font

以下がインスペクターである

以下ソースコードである
FallBackでUI/Defaultを指定している
UI/Defaultは、上のUnlit/Textのソースを参照

UI-DefaultFont.shader
Shader "UI/Default Font" {
    Properties {
        [PerRendererData] _MainTex ("Font Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    FallBack "UI/Default"
}

こちらの項目も上で説明しているため割愛

DefaultETC1

以下がインスペクターである

以下がソースコードである

UI-DefaultETC1.shader
Shader "UI/DefaultETC1"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        [PerRendererData] _AlphaTex("Sprite Alpha Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend One OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            Name "Default"
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
            #pragma multi_compile_local _ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                float4  mask : TEXCOORD2;
            };

            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float4 _MainTex_ST;
            float _UIMaskSoftnessX;
            float _UIMaskSoftnessY;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                float4 vPosition = UnityObjectToClipPos(IN.vertex);
                OUT.worldPosition = IN.vertex;
                OUT.vertex = vPosition;

                //当シェーダーでは使用しない
                #ifdef UNITY_HALF_TEXEL_OFFSET
                OUT.vertex.xy += (_ScreenParams.zw-1.0) * float2(-1,1) * OUT.vertex.w;
                #endif

                float2 pixelSize = vPosition.w;
                pixelSize /= float2(1, 1) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));

                float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
                float2 maskUV = (IN.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
                OUT.texcoord = TRANSFORM_TEX(IN.texcoord.xy, _MainTex);
                OUT.mask = float4(IN.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));

                OUT.color = IN.color * _Color;
                return OUT;
            }

            sampler2D _AlphaTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 color = IN.color * UnityGetUIDiffuseColor(IN.texcoord, _MainTex, _AlphaTex, _TextureSampleAdd);

                //当シェーダーでは使用しない
                #ifdef UNITY_UI_CLIP_RECT
                    half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
                    color.a *= m.x * m.y;
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                color.rgb *= color.a;
                return color;
            }
        ENDCG
        }
    }
}

当シェーダは、テクスチャフォーマットがETC1の時に使用するシェーダである。
ETC1はアルファを持たないフォーマットであるため、その欠点を解消するため
Unityが当シェーダを提供してくれている

Always Included Shadersに当シェーダを設定しておくと、ETC1利用時にデフォルトとして、
当シェーダを使うようになる

それ以外の項目は上で説明済みであるため割愛

参考

https://booth.pm/ja/items/931290
https://s-games.booth.pm/items/660001
https://github.com/heppoko/Unity_uGUI_Advance_Reference

Discussion