Image size independent shader

Question

I'm trying to create a shader for an image material that draws a circle regardless of the aspect ratio of the image itself.

In Shadertoy (hlsl) I can do the following to create a round circle, regardless of aspect ratio:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y; // < this compensates for the aspect ratio

    float l = length(uv);
    float s = smoothstep(0.5, 0.55, l);

    vec4 col = vec4(s);
    fragColor = vec4(col);
}

Which gives the following output

If I remove the line uv.x *= iResolution.x/iResolution.y; the circle will warp based on the current aspect ratio.

Now I want to create the same effect in Unity, so I tried the (to me seemingly) same approach. _MainTex_TexelSize contains the width/height of the texture (from the docs):

{TextureName}_TexelSize - a float4 property contains texture size information:
- x contains 1.0/width
- y contains 1.0/height
- z contains width
- w contains height

Shader "Unlit/Shader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        Blend SrcAlpha OneMinusSrcAlpha
        Cull off

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _MainTex_TexelSize;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                o.uv -= 0.5;
                o.uv.x *= _MainTex_TexelSize.z / _MainTex_TexelSize.w;
                return o;
            }

            float DrawCircle(float2 uv, float radius, float fallOff)
            {
                float d = length(uv);
                return smoothstep(radius, fallOff, d);
            }

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

                float c = DrawCircle(i.uv, 0.5, 0.55);
                col = lerp(col, fixed4(1,0,0,1), c);
                return col;
            }
            ENDCG
        }
    }
}

The shader compiles as is, but the circle will still stretch based on the aspect ratio of the image.

I thought this may be due to the way the uv's are set up using o.uv = TRANSFORM_TEX(v.uv, _MainTex); so I tried dividing that by the image's size:

o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.uv / _MainTex_TexelSize.zw;
o.uv -= 0.5;

However this did nothing

and setting up the uv's differently like so

o.uv = v.uv / _MainTex_TexelSize.zw;
o.uv / _MainTex_TexelSize.zw;
o.uv -= 0.5;

results in the circle's center moving to the upper right, but still warp when the aspect ratio change.

What step am I missing/doing wrong to get the aspect ratio independent result like I get in shadertoy?

Answer 1

The aspect ratio of the input texture _MainTex has nothing to do with the aspect ratio of the output*. In the shadertoy example that output is the screen, and iResolution gives you the screen dimensions (the equivalent in unity is _ScreenParams).

If you want to draw a quad that is not full screen, you have to match the quad aspect ratio with the _MainTex aspect ratio to use _MainTex_TexelSize, or else just provide the aspect ratio or dimensions in a shader property (that is basically what _ScreenParams does):

float _Aspect;    
fixed4 frag(v2f i) : SV_Target
{
    i.uv -= .5;     
    i.uv.x *= _Aspect;

    fixed4 col = tex2D(_MainTex, i.uv); 

    float c = DrawCircle(i.uv, .5, .55);        
    col = lerp(col, fixed4(1,0,0,1), c);    
    return col;
}

You could calculate the aspect ratio with derivatives. Here dx and dy are the amount of uv change per pixel. This would also be useful if you want to have, for example, fallOff always be 10 pixels.

fixed4 frag(v2f i) : SV_Target
{
    i.uv -= .5; 
    float dx = ddx(i.uv.x);
    float dy = ddy(i.uv.y);
    float aspect = dy/dx;
    i.uv.x *= aspect;

    fixed4 col = tex2D(_MainTex, i.uv); 

    float c = DrawCircle(i.uv, .5, .55);
    col = lerp(col, fixed4(1,0,0,1), c);
    return col;
}