与图像大小无关的着色器

Question

我正在尝试为绘制圆形的图像材料创建一个着色器，而不管图像本身的纵横比如何。

在Shadertoy（hlsl）中，无论纵横比如何，我都可以执行以下操作创建一个圆形：

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

哪个给出以下输出

如果我删除线uv.x *= iResolution.x/iResolution.y;，则圆圈将根据当前的长宽比弯曲。

现在，我想在Unity中创建相同的效果，所以我尝试了（对我来说似乎是）相同的方法。_MainTex_TexelSize包含纹理的宽度/高度（来自docs）：

{TextureName} _TexelSize-float4属性包含纹理大小信息：-x包含1.0 /宽度-y包含1.0 /高度-z包含宽度-w包含高度

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

着色器按原样编译，但是圆仍将根据图像的纵横比拉伸。

我认为这可能是由于使用o.uv = TRANSFORM_TEX(v.uv, _MainTex);设置uv的方式，所以我尝试将其除以图像的大小：

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

但是这什么也没做

并且设置uv的方式与此不同

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

导致圆心向右上方移动，但长宽比更改时仍会扭曲。

我想在阴影中获得纵横比独立结果的过程错了什么/做错了什么？

Answer 1

输入纹理_MainTex的纵横比与输出*的纵横比无关。在shadertoy示例中，输出为屏幕，iResolution为您提供屏幕尺寸（单位等效为_ScreenParams）。如果要绘制非全屏的四边形，则必须将四边形的长宽比与_MainTex的长宽比匹配才能使用_MainTex_TexelSize，否则，只需在着色器属性中提供长宽比或尺寸即可（即基本上是_ScreenParams的功能）：

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

您可以使用derivatives计算纵横比。此处dx和dy是每个像素的uv变化量。如果您想使fallOff始终为10像素，这也将很有用。

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