-100p

-10p

+10p

+100p

Unity虹色シェーダー

UnityでuGUI用虹色シェーダー。画像を2タイプの虹色に染め上げる実装。
(Rainbow Shader for Unity uGUI to tint an image with two types of rainbow colors)

関連ページ 参考URL
業務で画像を虹色に光らせる必要があり、その時はネットで拾った こちらのシェーダー を使わせて貰った。
そこから更に自分なりのアレンジを加えたものが完成したので共有。

虹色シェーダー、コード全文

下は虹色シェーダーのサンプル動画。
HueType.ToShinyとHueType.ToDarkで二種類の虹色グラデーションを用意している。
比較するとToShinyは白っぽくToDarkは黒っぽい。


以下コード全文。uGUI Imageへの反映方法は こちらの記事 参照。
Shader "UI/Rainbow"
{
    Properties
    {
        _HueBlendRate("Hue Blend Rate", Range(0.1, 5)) = 2 
//RGBの重ね具合、虹色のグラデーションに影響

        _OverrideRate("Override Rate", Range(0, 1)) = 1 
//元々のピクセルの色にどれだけ虹色を被せるか

        _HueOffset("Hue Offset", float) = 0 
//虹色の移動値


        [Space]
        
//虹色の混合の仕方、ToShinyはHueBlendRateが高いほど真っ白に近づく。ToDarkは逆で真っ黒に近づく。

        [KeywordEnum(ToShiny, ToDark)] _HUETYPE("HueType", Int) = 0
        
//虹色の染め上げ方。

        [KeywordEnum(Circle, Vertical, Horizontal)] _GRADATIONTYPE("GradationType", Int) = 0
    }

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

        CGINCLUDE

        #pragma vertex vert
        #pragma fragment frag

        struct appdata
        {
            float4 vertex : POSITION;
            float4 color : COLOR;
            float2 uv : TEXCOORD0;
        };

        struct v2f
        {
            float4 vertex : POSITION;
            fixed4 color : COLOR;
            float2 uv : TEXCOORD0;
        };

        sampler2D _MainTex;

        fixed _HueBlendRate;
        fixed _OverrideRate;
        fixed _HueOffset;

        #pragma multi_compile _HUETYPE_TOSHINY _HUETYPE_TODARK
        #pragma multi_compile _GRADATIONTYPE_CIRCLE _GRADATIONTYPE_VERTICAL _GRADATIONTYPE_HORIZONTAL

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

        ENDCG

        
//まず普通に画像を描画

        Pass
        {
            CGPROGRAM

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

            ENDCG
        }

        
//続いて虹色に染め上げた画像を上に重ねる

        Pass
        {
            CGPROGRAM
 
            fixed3 HUEtoRGB(in float H)
            {
                float R = abs(H * 6 - 3) - 1;
                float G = 2 - abs(H * 6 - 2);
                float B = 2 - abs(H * 6 - 4);
                return saturate(float3(R, G, B));
            }

            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 color = (tex2D(_MainTex, IN.uv)) * IN.color;
                fixed hueOffset = max(0, _HueOffset);
                fixed3 hueColor;

#ifdef _GRADATIONTYPE_CIRCLE
                
//中心から円状に虹色グラデーションが広がる

                float pi2 = 6.283184;
                float rad = (atan2(IN.uv.y - 0.5, IN.uv.x - 0.5) + (hueOffset / 2 * pi2) + pi2) % pi2 / pi2;
                hueColor= (HUEtoRGB(rad) / _HueBlendRate);
#elif _GRADATIONTYPE_VERTICAL
                
//y軸に沿って虹色グラデーションに染める

                hueColor= (HUEtoRGB((IN.uv.y + hueOffset) % 1) / _HueBlendRate);
#elif _GRADATIONTYPE_HORIZONTAL
                
//x軸に沿って虹色グラデーションに染める

                hueColor= (HUEtoRGB((IN.uv.x + hueOffset) % 1) / _HueBlendRate);
#endif

#ifdef _HUETYPE_TOSHINY
                
//光り輝くように虹色を混合

                color.xyz *= 1 / hueColor;
#elif _HUETYPE_TODARK
                
//光を抑えて虹色を混合

                color.xyz *= hueColor;
#endif

                
//_OverrideRateに応じて虹色画像の重ね具合を決める

                color.a *= _OverrideRate;
                return color;
            }

            ENDCG
        }
    }
}

プロパティを解説

用意してあるプロパティは5つ。

 Hue Blend Rate 
: RGBの重ね具合、グラデーションに影響する。この値が低いとRBGがくっきり分かれて虹色にはならない。
 Override Rate 
: 虹色画像の重ね具合。0で元の画像のみを表示、1で虹色に染まった画像のみを表示。
 Hue Offset 
: 虹色のピクセルの移動値。GradationTypeがCircleなら円状に、Verticalなら上下に、Horizontalなら左右に移動。
 Hue Type 
: 虹色の混合の仕方。明るい虹色(ToShiny)か暗めの虹色(ToDark)かの2択。
 Gradation Type 
: Circleなら円状、Verticalなら縦、Horizontalなら横のグラデーションになる。

選択するHueTypeによって適切なHueBlendRateが異なる。ToShinyなら2、ToDarkなら0.3辺りがおすすめ。
下はそれぞれのHueTypeでHueBlendRateを徐々に上げていった動画。


HueOffsetを上げていくことで虹色が移動するアニメーションが作れる。
この際、選択するGradationTypeにより演出が変わってくる。

1
1

-100p

-10p

+10p

+100p