Shader step函数实现线条拼色

效果展示

细节说明

线条为绿色红色两种拼接而成，非两种颜色叠加。可以理解成红色和绿色覆盖叠加，然后红色在中间的区域（绿色部分）被抠掉了，然后填充上绿色了。（下面有gif效果图证明）

具体实现

线条创建

       基础线条载体就是LineRenderer组件。先在场景中创建一个空对象，然后挂在LineRenderer组件，保持默认设置就好。设置线条起点(-7,0,0)和终点(7,0,0)，线条宽度0.5，以及线条颜色。
如图：

创建Shader(LineGradualColor)

1. 创建Shader。首先创建一个UnlitShader模板，命名为LineGradualColor.shader。接着创建一个材质球，命名为LineGradualColor。
2. 打开LineGradualColor.shader，修改第一行shader名称为Shader “ShadersHub/LineGradualColor”；
3. 设置刚刚创建的材质球的shader为ShadersHub/LineGradualColor(即刚刚创建的shader)；

Shader源码

Shader "ShadersHub/LaserBeam"
{
    Properties
    {
		_MiddleColor("_MiddleColor color", Color) = (1,1,1,1)
		_EdgeColor("Edge color", Color) = (1,0,0,1)
		_MiddleWidth("Middle Width", float) = 0.85
		_EdgeWidth("Edge Width", float) = 0
    }

    SubShader
    {
        Tags { "RenderType"="Transparent" "RenderType" = "Transparent" }
        LOD 100

		Blend SrcAlpha OneMinusSrcAlpha
		ZWrite Off

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
				fixed4 color : COLOR;
				float4 worldPos : TEXCOORD1;
				float4 vertex : SV_POSITION;
            };

			fixed4 _MiddleColor;
			fixed4 _EdgeColor;
			float _MiddleWidth;
			float _EdgeWidth;

            v2f vert (appdata v)
            {
                v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				o.worldPos = mul(unity_ObjectToWorld, v.vertex);
				o.color = v.color;
				return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
				half centerness = 1 - abs(i.uv.y - .5) * 2;
				//half centerness = i.uv.y;
				float middle = step(_MiddleWidth, centerness);
				float edge = step(_EdgeWidth, centerness) - middle;
				
				fixed4 col = _MiddleColor * middle + _EdgeColor * edge;

				return col;
            }
            ENDCG
        }
    }
}

Shader源码分析

颜色拼接

    我们直接来看顶点着色器部分。

	fixed4 frag (v2f i) : SV_Target
	{
		//half centerness = 1 - abs(i.uv.y - .5) * 2;
		half centerness = i.uv.y;
		float middle = step(_MiddleWidth, centerness);
		float edge = step(_EdgeWidth, centerness) - middle;
		
		fixed4 col = _MiddleColor * middle + _EdgeColor * edge;
	
		return col;
	}

注意，上面的第一行代码是注释的，第二行代码是打开的，这里为了说明知识点，特做此处理。这时的效果应该是这样的。

我们先看下Step函数:
step(a, x) <=> if(x >= a) return 1; else return 0。
step(x, a) <=> if(x <= a) return 1; else return 0。

现在设定的是 _MiddleWidth = 0.85，_EdgeWidth = 0，centerness值就是uv.y值，然后代入计算：
float middle = step(_MiddleWidth, centerness) 中 ，当uv.y>=0.85时，middle>=1。可以理解成此时 middle 才生效。
float edge = step(_EdgeWidth, centerness) - middle 中，当uv.y>=0时，middle>=1。可以理解成此时 middle 才生效。
当 uv.y>0.85时，step(_EdgeWidth, centerness)和middle都生效。

       这里有个减法(float edge = step(_EdgeWidth, centerness) - middle )，两个step作用的表达式，在同时生效（step函数值不为0）时，fixed4 col = _MiddleColor * middle + _EdgeColor * edge中的edge因子为0。图形意义就是当 uv.y>0.85时，剔除边缘色（edge）。所以一开始我说，“非两种颜色叠加”。
       我们调节 _MiddleWidth从0.85变大时，绿色(线条中心颜色)会变宽。我们再调节 _EdgeWidth，会发现值变大时，红色(线条边缘色)变窄。
       为了再次证明是Middle和Edge两种颜色的拼接，而非覆盖叠加，我们看下面的动态图。途中当middle颜色透明度为0时，绿色部分就空出来了。

线条纵向位置居中算法

上面的绿色(线条中心色)一直是在底下，我们需要它正确显示在中间部位。这时我们就需要一个根据uv.y能够对称分布的公式，这时最简单的就是用上绝对值。这个表达式就是 half centerness = 1 - abs(i.uv.y - .5) * 2，值域在[0,1]。我们可以画出它的函数图像：

       此时，我们可以用half centerness = 1 - abs(i.uv.y - .5) * 2; 替换 half centerness = i.uv.y ;，直接用一开始的源码也是一样的。这时，我们发现，线条的绿色居中了。

       接下来我想修改下上面的函数图像，做点标注，方便我讲解。

       图中我们将 _EdgeWidth 设置成0.5，_MiddleWidth 设置成0.85。下文中，我将 float middle = step(_MiddleWidth, centerness); 称为 中间色表达式， float edge = step(_EdgeWidth, centerness) - middle; 称为 边缘色表达式。
       上图中，我们只需要将图片顺时针旋转90°，就可以对应上我们的运行时效果图了。坐标图中的两个色块就对应运行时的线条。此时我们调节绿色直线会直接影响图中的浅绿色方块的大小，也就是影响中间色带的宽度；调节红色直线会直接影响红色方块的大小，也就是影响边缘色带的宽度。读者可以结合文中的图像和实际运行时动态调值来更好地理解。
       本篇至此完结，欢迎指正交流(或邮件1136468882@qq.com)！