...

p.47

p.48

p.49

p.50

p.51

p.52

p.53

p.54

p.55

p.56

p.57

...

-100p

-10p

+10p

+100p

Unity日食シェーダー

Unity uGUI用、日食シェーダー。Blurと色相反転の組み合わせ。
(Eclipse Shader for Unity uGUI)

2023-10-27  
2024-08-04
関連ページ
p.38 : シェーダー基礎、Imageにシェーダーを反映させる方法
p.39 : シェーダー基礎、最もシンプルなuGUI用Shaderの作成
p.46 : Unityシェーダーで画像が途切れる問題の対処
p.47 : Unity色相反転シェーダー
p.50 : Unity発光シェーダー
前から作りたかった、色相反転とともに周囲が光りだすシェーダー。
前作ったBloomシェーダーのBlur部分と、色相反転シェーダーを組み合わせて作った。
昔のFFのシャドウフレアでこんな感じのエフェクトがあった気がする。

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

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
        }
    }
}

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

...

p.47

p.48

p.49

p.50

p.51

p.52

p.53

p.54

p.55

p.56

p.57

...

-100p

-10p

+10p

+100p