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

...

p.44

p.45

p.46

p.47

p.48

p.49

p.50

p.51

p.52

p.53

p.54

...

-100p

-10p

+10p

+100p

Unity日食シェーダー

Unityで日食シェーダー。Blurシェーダーと色相反転シェーダーの組み合わせ。
(Eclipse Shader for Unity uGUI combining Blur and Invert Color)

2023-10-27

2024-05-31

日食シェーダー、コード全文

Eclipseのプロパティのスライダーを弄ると、徐々に日食に近づいていく。

応用すると、阿部寛を使って魔王降臨のような演出を作ることも出来る。

下がコード全文。uGUI Imageへの反映方法はこちらの記事参照。

Shader"UI/Eclipse"
{
    Properties
    {
        _Eclipse ("Eclipse", Range(0.0, 1.0)) = 0.0
        _BlurColor("Blur Color", Color) = (1.0, 1.0, 1.0, 1.0)
        _BlurDistance("Blur Distance", Range(0.0, 50.0)) = 20
        _BlurPower("Blur Power", Range(0.0, 1.0)) = 0.07
    }

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

        CGINCLUDE
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

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

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

        sampler2D _MainTex;

        fixed _Eclipse;
        fixed3 _BlurColor;
        fixed _BlurDistance;
        fixed _BlurPower;

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

        ENDCG

        Pass
        {
            CGPROGRAM

            fixed4 blur(fixed2 uv, fixed w, fixed kx, fixed ky)
            {
                float ease = pow(_Eclipse, 5);
                fixed quadDistance = _BlurDistance * ease;

                fixed2 shiftUv = fixed2(uv.x + kx * quadDistance, uv.y + ky * quadDistance);
                fixed4 tex = tex2D(_MainTex, shiftUv);

                tex.a = tex.a * w * _BlurPower * _Eclipse * 10;
                return tex;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 col = 0;

//x軸

                col += blur(i.uv, 0.01, 0, -0.006);
                col += blur(i.uv, 0.02, 0, -0.005);
                col += blur(i.uv, 0.03, 0, -0.004);
                col += blur(i.uv, 0.04, 0, -0.003);
                col += blur(i.uv, 0.05, 0, -0.002);
                col += blur(i.uv, 0.06, 0, -0.001);
                col += blur(i.uv, 0.06, 0, +0.001);
                col += blur(i.uv, 0.05, 0, +0.002);
                col += blur(i.uv, 0.04, 0, +0.003);
                col += blur(i.uv, 0.03, 0, +0.004);
                col += blur(i.uv, 0.02, 0, +0.005);
                col += blur(i.uv, 0.01, 0, +0.006);

//y軸

                col += blur(i.uv, 0.01, -0.006, 0);
                col += blur(i.uv, 0.02, -0.005, 0);
                col += blur(i.uv, 0.03, -0.004, 0);
                col += blur(i.uv, 0.04, -0.003, 0);
                col += blur(i.uv, 0.05, -0.002, 0);
                col += blur(i.uv, 0.06, -0.001, 0);
                col += blur(i.uv, 0.06, +0.001, 0);
                col += blur(i.uv, 0.05, +0.002, 0);
                col += blur(i.uv, 0.04, +0.003, 0);
                col += blur(i.uv, 0.03, +0.004, 0);
                col += blur(i.uv, 0.02, +0.005, 0);
                col += blur(i.uv, 0.01, +0.006, 0);

//y軸を大きめに-にズラした上で、x軸を大きめに-から+に描画

                col += blur(i.uv, 0.01, -0.005, -0.005);
                col += blur(i.uv, 0.02, -0.004, -0.004);
                col += blur(i.uv, 0.03, -0.003, -0.003);
                col += blur(i.uv, 0.04, -0.002, -0.002);
                col += blur(i.uv, 0.05, -0.001, -0.001);
                col += blur(i.uv, 0.05, +0.001, -0.001);
                col += blur(i.uv, 0.04, +0.002, -0.002);
                col += blur(i.uv, 0.03, +0.003, -0.003);
                col += blur(i.uv, 0.02, +0.004, -0.004);
                col += blur(i.uv, 0.01, +0.005, -0.005);

//y軸を大きめに+にズラした上で、x軸を大きめに-から+に描画

                col += blur(i.uv, 0.01, -0.005, 0.005);
                col += blur(i.uv, 0.02, -0.004, 0.0045);
                col += blur(i.uv, 0.03, -0.003, 0.003);
                col += blur(i.uv, 0.04, -0.002, 0.002);
                col += blur(i.uv, 0.05, -0.001, 0.001);
                col += blur(i.uv, 0.05, +0.001, 0.001);
                col += blur(i.uv, 0.04, +0.002, 0.002);
                col += blur(i.uv, 0.03, +0.003, 0.003);
                col += blur(i.uv, 0.02, +0.004, 0.004);
                col += blur(i.uv, 0.01, +0.005, 0.00);

//y軸を小さめに-にズラした上で、x軸を大きめに-から+に描画

                col += blur(i.uv, 0.01, -0.005, -0.003);
                col += blur(i.uv, 0.02, -0.004, -0.0022);
                col += blur(i.uv, 0.03, -0.003, -0.0015);
                col += blur(i.uv, 0.04, -0.002, -0.001);
                col += blur(i.uv, 0.05, -0.001, -0.0005);
                col += blur(i.uv, 0.05, +0.001, -0.0005);
                col += blur(i.uv, 0.04, +0.002, -0.001);
                col += blur(i.uv, 0.03, +0.003, -0.0015);
                col += blur(i.uv, 0.02, +0.004, -0.0022);
                col += blur(i.uv, 0.01, +0.005, -0.003);

//y軸を小さめに+にズラした上で、x軸を大きめに-から+に描画

                col += blur(i.uv, 0.01, -0.005, 0.003);
                col += blur(i.uv, 0.02, -0.004, 0.0022);
                col += blur(i.uv, 0.03, -0.003, 0.0015);
                col += blur(i.uv, 0.04, -0.002, 0.001);
                col += blur(i.uv, 0.05, -0.001, 0.0005);
                col += blur(i.uv, 0.05, +0.001, 0.0005);
                col += blur(i.uv, 0.04, +0.002, 0.001);
                col += blur(i.uv, 0.03, +0.003, 0.0015);
                col += blur(i.uv, 0.02, -0.004, 0.0022);
                col += blur(i.uv, 0.01, -0.005, 0.003);

//y軸を大きめに-にズラした上で、x軸を小さめに-から+に描画

                col += blur(i.uv, 0.01, -0.003, -0.005);
                col += blur(i.uv, 0.02, -0.0022, -0.0045);
                col += blur(i.uv, 0.03, -0.0015, -0.003);
                col += blur(i.uv, 0.04, -0.001, -0.002);
                col += blur(i.uv, 0.05, -0.0005, -0.001);
                col += blur(i.uv, 0.05, +0.0005, -0.001);
                col += blur(i.uv, 0.04, +0.001, -0.002);
                col += blur(i.uv, 0.03, +0.0015, -0.003);
                col += blur(i.uv, 0.02, +0.0022, -0.0045);
                col += blur(i.uv, 0.01, +0.003, -0.005);

//y軸を大きめに+にズラした上で、x軸を小さめに-から+に描画

                col += blur(i.uv, 0.01, -0.003, 0.005);
                col += blur(i.uv, 0.02, -0.0022, 0.004);
                col += blur(i.uv, 0.03, -0.0015, 0.003);
                col += blur(i.uv, 0.04, -0.001, 0.002);
                col += blur(i.uv, 0.05, -0.0005, 0.001);
                col += blur(i.uv, 0.05, +0.0005, 0.001);
                col += blur(i.uv, 0.04, +0.001, 0.002);
                col += blur(i.uv, 0.03, +0.0015, 0.003);
                col += blur(i.uv, 0.02, +0.0022, 0.004);
                col += blur(i.uv, 0.01, +0.003, 0.005);

                col.r = _BlurColor.r;
                col.g = _BlurColor.g;
                col.b = _BlurColor.b;

                return col;
            }

            ENDCG
        }

        Pass
        {
            CGPROGRAM

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

//色相を反転

                fixed reversalR = abs(col.r - _Eclipse);
                fixed reversalG = abs(col.g - _Eclipse);
                fixed reversalB = abs(col.b - _Eclipse);

//最後に到達する色を黒にするための値

fixed darkness = 1 - _Eclipse;

//黒変の変化を直線ではなくカーブにするための値を算出

fixed ease = -darkness * (darkness - 2);

//色相の変化にカーブをかける（後半に急激に黒く変色する）

                col.r = reversalR * ease;
                col.g = reversalG * ease;
                col.b = reversalB * ease;
                return col;
            }

            ENDCG
        }
    }
}

個人的には好きだけど汎用性がなく使いどころも少ないと思うので特に解説はしない。

...