2

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

在 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包含纹理的宽度/高度（来自文档）：

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

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

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

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

然而这什么也没做

并以不同的方式设置紫外线

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

导致圆的中心向右上方移动，但当纵横比发生变化时仍会变形。

我错过了/做错了什么步骤来获得像我在shadertoy中获得的纵横比独立结果？

4

1 回答 1

2

输入纹理_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;
}

您可以使用导数计算纵横比。这里 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;
}
于 2020-02-17T18:40:33.077 回答