コツコツエンジニアノート

Unity UIシルエット化シェーダー

[Unity URP] UIシルエット化シェーダー(UI Silhouette Color Shader)。
画像を単一色に変更する方法。

#UnityShader

投稿日:2024-01-14

更新日:2026-04-17

シルエット化シェーダー概要

マテリアルの

BlendRate

のスライダーで、シルエット率を0から1までのfloat値で指定できます。
また

Color

の値をいじるとシルエットの色を変更できます。

コード全文

以下シルエット化シェーダーの全文です。uGUI Imageへの反映方法はこちらの記事参照してください。
基礎知識として次の記事にも目を通すと分かり易いです。 p.59 : シェーダー基礎、最もシンプルなuGUI用 URP Shader

Shader "UI/SilhouetteColor"
{
    Properties
    {
        _BlendRate ("BlendRate", Range(0.0, 1.0)) = 1
        _Color("Color", Color) = (1, 1, 1, 1)
    }

    SubShader
    {
        Tags
        {
            "RenderPipeline" = "UniversalPipeline"
            "Queue" = "Transparent"
        }
        Cull Off
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

            struct Attributes
            {
                half2 uv : TEXCOORD0;
                half4 color : COLOR;
                float4 positionOS : POSITION;
            };

            struct Varyings
            {
                half2 uv : TEXCOORD0;
                half4 color : COLOR;
                float4 positionCS : SV_POSITION;
            };

//uGUI Image > Source Imageにアタッチされた画像を参照する

            TEXTURE2D(_MainTex);
            SAMPLER(sampler_MainTex);

//SRP Batcherを適用

CBUFFER_START(UnityPerMaterial)

//今回追加したプロパティに対応する変数

                half _BlendRate;
                half4 _Color;
            CBUFFER_END

            Varyings vert (Attributes input)
            {
                Varyings output;
                output.uv = input.uv;
                output.color = input.color;
                output.positionCS = TransformObjectToHClip(input.positionOS.xyz);
                return output;
            }

            half4 frag (Varyings input) : SV_Target
            {
                half4 col = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, input.uv);
                col *= input.color;
                col.rgb = lerp(col.rgb, _Color.rgb, _BlendRate);
                return col;
            }
            ENDHLSL
        }
    }
}

コード解説

ピクセルシェーダーだけ解説します。

            half4 frag (Varyings input) : SV_Target
            {
                half4 col = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, input.uv);
                col *= input.color;
                col.rgb = lerp(col.rgb, _Color.rgb, _BlendRate);
                return col;
            }

col

がその画像本来のピクセル色、

_Color

がプロパティから指定したシルエットの色です。

たとえば指定したinput.uv座標のピクセル色、colが(1, 0, 0, 1)の赤色だとして、_Colorが(0.5, 0.5, 0.5, 1)の灰色だとします。
式では

col.rgb = lerp(col.rgb, _Color.rgb, _BlendRate);

とあり、a(透明度)は無視してrgbのみの代入をしています。
これに従ってcolの赤と_Colorの灰色を式に代入するとこうなります。

col.rgb = lerp(half3(1, 0, 0), half3(0.5, 0.5, 0.5), _BlendRate);

lerp

関数は、第三引数が0の時は第一引数の値を返し、第三引数が1の時は第二引数の値を返します。
仮に

_BlendRate

が1の場合は、元の赤色は完全に無視して灰色が表示されます。
逆に

_BlendRate

が0であれば赤色が表示され、0.5であれば赤と灰色の中間色が表示されます。

...

p.68

p.69

p.70

p.71

p.72

p.73

p.74

p.75

p.76

p.77

p.78

...

< シェーダー基礎、URP環境でuGUI用マルチパスシェーダー

Unity UI色反転シェーダー >