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

...

p.42

p.43

p.44

p.45

p.46

p.47

p.48

p.49

p.50

p.51

p.52

...

-100p

-10p

+10p

+100p

Unity色相反転シェーダー

Unity uGUI用、色相反転シェーダー。いわゆるネガポジ反転とその仕組み。
(Invert Color Shader for Unity uGUI)

2023-10-27

2024-09-04

色相反転シェーダー、コード全文

マテリアルのBlendRateのスライダーで、反転率を0から1までのfloat値で指定できる。

下が色相反転シェーダーの全文。uGUI Imageへの反映方法はこちらの記事参照。

Shader "UI/ColorReversal"
{

//Propertiesに_BlendRateを指定してInspectorからアクセスできるようにする

    Properties
    {
        _BlendRate ("BlendRate", Range(0.0, 1.0)) = 1
    }

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

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            struct appdata
            {
                fixed2 uv : TEXCOORD0;
                fixed4 vertex : POSITION;
                fixed4 color : COLOR;
            };

            struct v2f
            {
                fixed2 uv : TEXCOORD0;
                fixed4 vertex : SV_POSITION;
                fixed4 color : COLOR;
            };

            sampler2D _MainTex;

//_BlendRateの宣言

            fixed _BlendRate;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = v.color;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                col *= i.color;
                col.r = abs(col.r - _BlendRate);
                col.g = abs(col.g - _BlendRate);
                col.b = abs(col.b - _BlendRate);
                return col;
            }
            ENDCG
        }
    }
}

少し解説

まずshaderで色は0~255の値ではなく0~1のfloat値で管理している。
赤なら(1, 0, 0)、青なら(0, 0, 1)、紫なら(1, 0, 1)といった具合。なのでそれぞれのピクセルのRGBを1から引けば完全な色相反転になる。
赤の反転色は（0, 1, 1)で水色に、青の反転色は（1, 1, 0)で黄色になる。
BlendRateを使用しないシンプルな色相反転の場合、フラグメントシェーダーのコードは次の通り。

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                col *= i.color;
                col.r = 1 - col.r;
                col.g = 1 - col.g;
                col.b = 1 - col.b;
                return col;
            }

今回のシェーダーの場合は1という固定値ではなく、ユーザーが指定するBlendRateを参照する。
ただ1より低い値からRGBの値を引くと、結果がマイナスになってしまう可能性がある。
なので逆にRGBからBlendRateを引き、それをabsによって絶対値にして対応してる。

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                col *= i.color;
                col.r = abs(col.r - _BlendRate);
                col.g = abs(col.g - _BlendRate);
                col.b = abs(col.b - _BlendRate);
                return col;
            }