Vertex Circular Alpha Shader

Unity Engine
1

I’m trying to write a shader that alters the alpha of vertices in a progressive circle around it. Imagine a circular sprite, where at one point on the outside is the color red, and the point opposite it is white, with a gradient of color between. I don’t believe my attempt is inherently wrong… but regardless of the amount of tweaking, I can’t seem to get it to work how I’d like. Here’s the vertex shader:
(note, _Center is a property being updated by the owning object to its transform.position)

        void vert (inout appdata_full v, out Input o)
        {
            #if defined(PIXELSNAP_ON)
            v.vertex = UnityPixelSnap(v.vertex);
            #endif

            UNITY_INITIALIZE_OUTPUT(Input, o);
            o.color = v.color;

            float4 distance = _Center - v.vertex;
            float magnitude = abs(sqrt(distance.x * distance.x + distance.y * distance.y));
            float theta = atan2(distance.y, distance.x);

            o.color.a = clamp(sin(_Time * 128 + theta + magnitude), 0, 1);
        }

Any thoughts or ideas are appreciated.

2

Thought one is that the result from a sqrt is always positive, so the abs is not needed in the magnitude calculation.

Thought two is that distance.x * distance.x + distance.y * distance.y can better be written as dot(distance.xy, distance.xy).

Thought three is that clamp(v, 0, 1) can better be written as saturate(v).

Thought four is that I’d like to see the current result and what you intend the result to be. It’s probably in the sin(_Time+theta+distance) part where it differs.

3

@jvo3dc : Thanks for the optimization suggestions! I need to hit the docs to see what vector.xy and saturate() do, but I trust that they’ll work. :wink:

Unfortunately I can’t record a .gif right now, but the intended result is for every vert to have a separate, incrementing time step where the alpha is high. The surface shader uses this after the fact to change the color. I made a couple of modifications to the code that seem to have gotten me close to the desired effect:

        void vert (inout appdata_full v, out Input o)
        {
            #if defined(PIXELSNAP_ON)
            v.vertex = UnityPixelSnap(v.vertex);
            #endif

            UNITY_INITIALIZE_OUTPUT(Input, o);
            o.color = v.color;

            float4 distance = _Center - mul(_Object2World, v.texcoord);
            float magnitude = sqrt(dot(distance.xy, distance.xy));
            float theta = atan2(distance.y, distance.x);

            o.color.a = saturate(sin(_Time * 128 + (magnitude + theta) * 2));
        }

On one sprite, it almost looks like the effect I’m going for, but on a separate sprite of the same size, the effect starts at the top all the way across and moves down.

4

After a lot of fucking around with this shader and getting nowhere, I tried a different approach from a different shader base. I got it to work the way that I wanted it to, but I still don’t understand why the previous one didn’t work the way I thought it should.

struct v2f {
                float4 vertex : POSITION;
                half2 texcoord : TEXCOORD0;
                half2 texcoord1 : TEXCOORD1;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;

            v2f vert (appdata_full v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.texcoord1 = o.vertex;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.texcoord);
                float4 distance = i.texcoord1.xyxy;
                float magnitude = sqrt(dot(distance.xy, distance.xy));
                float theta = atan2(distance.y, distance.x);
                float thetaSelector = (_Time * 128) % (3.14159 * 2);
                float actualSelector = lerp(-3.14159, 3.14159, thetaSelector / (3.14159 * 2));
                float thetaDifference;
                if (theta < 0) {
                    if (thetaSelector < 0) {
                        thetaDifference = abs(theta - actualSelector);
                    } else {
                        thetaDifference = abs(theta + actualSelector);
                    }
                } else {
                    if (thetaSelector < 0) {
                        thetaDifference = abs(theta - actualSelector);
                    } else {
                        thetaDifference = abs(theta + actualSelector);
                    }
                }
                if (col.r == 1 && col.g == 1 && col.b == 1 && thetaDifference <= 0.5) {
                    col = _Color;
                }
                return col;
            }