如何将半透明白色应用于圆形擦拭的轮廓

Question

这个问题的一个目标是我的圆擦除轮廓像下图中的左例一样改进。到目前为止，我的圆擦拭轮廓没有两个清晰的半透明环。如果你知道如何像左图那样渲染它们，你能给我一些建议吗？

我想实现一个理想的圆形擦除。

这是我使用的着色器。

Shader "Unlit/CircleWipe"
 {
     Properties
     {
         _MainTex ("Texture", 2D) = "white" {}
         _FadeTex("Fade Texture", 2D) = "white" {}
         _Radius("Wipe Radius", Float) = 0
         _Horizontal("Horizontal ratio", Float) = 1
         _Vertical("Vertical ratio", Float) = 1
         _RadiusSpeed("Radius Speed", Float) = 1
         _CenterX("Center X",  Range(0.0, 1.0)) = 0.5
         _CenterY("Center Y",  Range(0.0, 1.0)) = 0.5
         [HDR]_FadeColour("Fade Colour", Color) = (1,1,1,0)
         _Offset("Offset", Vector) = (0,0,0,0)
     }
     SubShader
     {
         Tags { "RenderType" = "Transparent" "Queue" = "Transparent" }
         Blend SrcAlpha OneMinusSrcAlpha


     Pass
     {
         CGPROGRAM
         #pragma vertex vert
         #pragma fragment frag
         #pragma multi_compile_fog

         #include "UnityCG.cginc"

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

         struct v2f
         {
             float2 uv : TEXCOORD0;
             UNITY_FOG_COORDS(1)
             float4 vertex : SV_POSITION;
         };

         sampler2D _MainTex;
         sampler2D _FadeTex;
         float4 _MainTex_ST;
         float _Radius;
         float _Horizontal;
         float _Vertical;
         float _RadiusSpeed;
         float _CenterX;
         float _CenterY;
         fixed4 _FadeColour : COLOR;
         float4 _Offset;

         v2f vert (appdata v)
         {
             v2f o;
             o.vertex = UnityObjectToClipPos(v.vertex);
             o.uv = TRANSFORM_TEX(v.uv, _MainTex);
             UNITY_TRANSFER_FOG(o,o.vertex);
             return o;
         }

         fixed4 frag(v2f i) : SV_Target
         {
             fixed4 topCol = tex2D(_MainTex , i.uv);
             fixed4 fadeCol = _FadeColour * tex2D(_FadeTex , i.uv);
             float2 center = float2(_CenterX , _CenterY);
             float2 pos = i.uv.xy;
             float dist = length((pos - center) * float2(_Vertical , _Horizontal));
             return lerp(fadeCol , topCol , smoothstep(_Radius , _Radius + 1.1 , dist));
         }
         ENDCG
     }
 }
 }

比较

环境
Unity2020.3f
项目类型：通用渲染管线
目标：IOS & Android

Answer 1

float a = smoothstep(_Radius - 1.1, _Radius, dist);
float b = smoothstep(_Radius, _Radius + 1.1, dist);
float t = a - b;
fixed4 col = lerp(fadeCol , topCol , b);
return lerp(col, _FadeColour, t);

您也可以尝试将最后一行替换为：

return col + _FadeColour * t;

2张图片实现的效果：

如何将半透明白色应用于圆形擦拭的轮廓

How to apply semi-transparent white color to outline of circle wipe

shader

transparency

blur

hlsl

unity3d