效果展示

细节说明

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

具体实现

线条创建

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

创建Shader(LineGradualColor)

创建Shader。首先创建一个UnlitShader模板，命名为LineGradualColor.shader。接着创建一个材质球，命名为LineGradualColor。
打开LineGradualColor.shader，修改第一行shader名称为Shader “ShadersHub/LineGradualColor”；
设置刚刚创建的材质球的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 100Blend SrcAlpha OneMinusSrcAlphaZWrite OffPass{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)！

Shader step函数实现线条拼色相关推荐

python使用matplotlib可视化阶梯图、使用step函数可视化阶梯图、可视化时间序列数据的波动周期和规律
python使用matplotlib可视化阶梯图.使用step函数可视化阶梯图.可视化时间序列数据的波动周期和规律目录
OpenGL GLSL Shader Subroutines函数的实例
OpenGL GLSL Shader Subroutines函数先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <shader.h> ...
matlab step函数跟踪斜坡信号及阶跃响应绘图
最近做大作业用到了step函数.在此把step产生阶跃响应和斜坡响应的函数记一下,方便未来的学弟学妹和大家~ num=conv([0.33,1],[0.1,1]); num=5000*num; fig ...
Simulink代码生成：Step函数接口配置
本文研究Simulink生成代码时的step函数的名称和参数. 文章目录 1 问题引入 2 配置过程 3 代码生成 4 总结 1 问题引入在之前的一篇博客<Simulink代码生成:Simul ...
matlab step函数的用法,Matlab 中step conv 函数使用
Matlab 中step 函数使用 s+ 4 对于一个闭环系统传递函数是 G(s) = ------------------ : s^2 + 2s + 8 现在要求其时域响应: 代码: num ...
R语言使用lm函数构建多元回归模型（Multiple Linear Regression）、使用step函数筛选最合适的回归变量（逐步回归筛选预测变量的最佳子集）
R语言使用lm函数构建多元回归模型(Multiple Linear Regression).使用step函数筛选最合适的回归变量(逐步回归筛选预测变量的最佳子集) 目录
R语言使用lm函数构建带交互项的多元回归模型、使用step函数构建逐步回归模型筛选预测变量的最佳子集（step regression）
R语言使用lm函数构建带交互项的多元回归模型.使用step函数构建逐步回归模型筛选预测变量的最佳子集(step regression) 目录
【ADAMS学习记录】——STEP函数添加运动驱动
STEP 函数为运动副添加驱动 step函数格式和定义 STEP(x,x0,h0,x1,h1) x:自变量,可以是时间或时间的任一函数 x0 :自变量的STEP函数开始值,可以是常数.函数表达式或设计 ...
adams驱动旋转速度_Adams的step函数驱动转速和转矩的心得
电机函数驱动法针对转速突变(也就是振动激励的方法) Motion 的 step 函数 : step(time,0,0,0.3,6000d*time)+step(time,1,0,1.01,200d*t ...

Shader step函数实现线条拼色

Shader smoothstep实现线条渐变色