U3d杂谈 — 实现缩放不影响边缘线的圆

通常，我们在U3d中使用Quad附上一张贴图来画一个圆。但是如果这个圆需要放大和缩小的时候，圆上的边线就会跟着一起缩放，这不是我们所期望的效果。我们希望不管圆放大多大，纹理上的边缘线一直保持固定的大小，这样边缘线就会很清晰美观。就像绘制一个矢量圆一样。

我们直接使用Quad与一张透明贴图的缩放效果如下：

可以清晰的看见，放大3倍的圆，边线也放大了3倍，导致不是我们期望效果。但是在U3d中，Mesh是不支持矢量这样效果的，那么我们只有自己想办法实现一个类似矢量计算的圆。

为了实现一个边缘线不变化的圆，我们需要把当前Quad变成一个圆形的模型（Mesh）。边缘线是一个模型控制的。这样我们就能控制边缘线的宽度。这里有2中方案，第一种就是使用程序Mesh。第二种就是模型师制作一个Mesh，我们通过Shader实现边缘线的偏移计算即可。

我采用的是第二种方式，因为这种可以把具体的效果丢给美术处理，也是不容易出错的方式。

左边这个大圆就是使用我们模型制作加Shader实现的效果。可以发现，在放大了3倍的基础上，依然保持相对的边缘线大小。正是我们所期望的那样。

首先，我们需要制作出一个如下图的模型：

周围是一圈环形边缘线与中心点组成的一个圆。现在我们通过计算模型顶点相对于圆点做方向上偏移计算来控制模型的大小：

 v2f vert (appdata v)
            {
                v2f o;
                if (abs(v.vertex.x) > 0.001 || abs(v.vertex.y) > 0.001 || abs(v.vertex.z) > 0.001)
                {
                    float3 vv = normalize(float3(v.vertex.x, v.vertex.y, v.vertex.z));
                    float4 pos = v.vertex + float4(vv, 0) * _Size;
                    o.vertex = UnityObjectToClipPos(pos);
                }
                else
                {
                    o.vertex = UnityObjectToClipPos(v.vertex);
                }
                              
                o.uv = v.uv;
                
                return o;
            }

我们在顶点这色器中，计算顶点的偏移，需要排除中心圆点。这样我们就能保证边缘线上的点都能在与圆点的方向上偏移固定的size距离。这样就实现了不同大小的圆，边缘的宽度是一定的。这个完成指挥，只需要模型是把这个模型的UV调整好可以了，如果后面有什么效果调整，都只需要美术那边负责处理即可。

完整的Shader如下：

Shader "Custom/CircleShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Size ("Size",Float) = 1
        _Degree("Degree",Float) = 0
        _Color("Color",Color) = (0,0,0,0)
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            blend SrcAlpha OneMinusSrcAlpha
            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;
            };


            float _Size;
            fixed4 _Color;
            v2f vert (appdata v)
            {
                v2f o;
                if (abs(v.vertex.x) > 0.001 || abs(v.vertex.y) > 0.001 || abs(v.vertex.z) > 0.001)
                {
                    float3 vv = normalize(float3(v.vertex.x, v.vertex.y, v.vertex.z));
                    float4 pos = v.vertex + float4(vv, 0) * _Size;
                    o.vertex = UnityObjectToClipPos(pos);
                }
                else
                {
                    o.vertex = UnityObjectToClipPos(v.vertex);
                }
                              
                o.uv = v.uv;
                
                return o;
            }

            sampler2D _MainTex;
            float _Degree;

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                half d = dot(normalize(i.uv - fixed2(0.5, 0.5)), normalize(fixed2(0.5, 0)));
                half c = cos(_Degree / 2 * 3.14 / 180);
                if (d < c)
                {
                    col.a = 0;
                }
                col *= _Color;
                return col;
            }
            ENDCG
        }

        
    }
}