ShaderGraph简单切割效果

目录

效果预览

预想 

实现

一、Shader设置

二、切割效果

 三、渐变切割线

SmoothStep节点

概略

详细解析SmoothStep函数

 切割渐变理解

 实现渐变切割

 动态切割线

静态切割线

---

效果预览

预想 

在游戏中的切割效果，本身是根据物体高度进行切割，在Unity这个高度就是游戏物体的坐标，在世界坐标系中，这个坐标就是Y轴。如果我们根据一个临界值，让高于这个临界值的部分消失，让低于这个部分才显示，那么我们就可以实现切割效果，而这个临界值也是我们切割线所在。

实现

一、Shader设置

创建一个Lit材质的ShaderGraph，打开AlphaClipping,之后会使用Alpha阈值来控制切割

二、切割效果

先创建一个Position节点，这个节点可以获取赋予当前材质物体的坐标，其模式有四种，可以在后面自己测试不同效果，先默认为World。

创建Split 节点来分离这个坐标系，我们只需要物体的Y坐标作为输入值。Split输出连接Step输入节点，这样我们就可以根据设置边界值并对比输入值，通过Step返回1或者0，将这个输出赋给Alpha阈值，如果是1则显示，如果是0则不显示，我们就完成了切割的核心效果。当然物体本身的Alpha也会决定效果的显示，默认的时候需要让它不等于1。

暴露Step的Edge作为切割程度。就可以在面板中显示参数，效果如下：

 三、渐变切割线

这样的切割效果过于生硬，我们应该做一个类似激光过渡的效果，来装饰我们的切割效果。

SmoothStep节点

概略

 Smoothstep平滑插值节点，跟Lerp插值节点相类似，Lerp插值节点是返回在A与B之间通过T线性插值的结果，而Smoothstep功能和Lerp相近，但不是线性插值，次节点的插值从开始处逐渐加快，在结束时减慢。

详细解析SmoothStep函数

在Shader中，Smoothstep的函数为

float smoothstep(float t1,float t2,float x)
{
       x=clamp((x-t1)/(t2-t1),0.0,1.0);
       return x*x*(3-2*x);
}

如果我们x取值为t1，那么我们将得到一个为0的返回值，如果我们取t2，我们将得到一个为1的返回值，不管t1和t2之间的大小，因为有clamp函数的存在最终的取值只会限制在（0，1）之间，我们也可以从函数图像中得出，smoothstep函数是先缓再快最后再缓。

 切割渐变理解

我们根据物体Y轴数据来确定渐变的位置，在切割线一下才有渐变，切割以上本来就是不显示的，也不应该出现渐变效果，我们的输入值肯定是Y轴的坐标。而物体的坐标数据已经确定，某个位置就是某个值，我们能改变的其他数据就是参数Edge1和参数Edge2，从下图可以看到，对于≤Edge1（参数t1）的坐标数据返回值将会是0，对于≥Edge2（参数t2）的坐标数据返回值将是1，当然这种情况只适用于Edge2>Edge1的时候，如果Edge1>Edge2，那么结果将会相反，≤Edge2的坐标数据返回值将是1，≥Edge1的坐标数据返回值将是0.而在这之间的范围将是一个渐变效果，因为先缓再快再缓的函数图像效果。

 实现渐变切割

理解原理后，那我们只需要对Edge1和Edge2的输入值作考虑。回到预想的效果当中，高于切割线位置的坐标数据是不显示的，我们可以不管高于坐标数据的那一块数据。当坐标数据低于切割线的时候，会出现渐变效果，应该从亮到暗的转变，也就是亮度从1转变到0，很容易知道切割线的位置数据就是Edge2的值，这样在切割线以下的的坐标数据，将会返回[0,1）之间的数值，其中已经有渐变的数值变换。如下图所示：

 接下来就是考虑下边缘的坐标值，如果将这个值固定，我们的渐变变换就变成了单一的粗细变换，会变成下面的效果：

 动态切割线

我们应该动态确认Edge1的值。根据切割线渐变，我们应该有一个我们满意的厚度，我们的切割线位置减去这个厚度，那么我们就得到这个最小的边界位置，不管我们如何改变切割线的位置，最小边界的位置也都会相应地改变。当然我们可以暴露这个厚度值在外部调节。

效果如下：

 但是这种效果在切割厚度很小的情况下效果还可以，但是切割厚度稍大就会出现渐变再消失的情况，因为这个厚度时动态的而非静态的，也就是不固定的效果，再shadergraph面板我们也可以看出效果。

静态切割线

 回想一下，出现动态切割的情况是因为我们的切割线是动态的，再往回想一步为什么我们要这样做？因为我们要获得一条固定的线段作为我们的发光切割渐变线效果。如果需要静态，那么我们的两个输入值也应该是静态的。

删去动态切割线的节点，我们可以观察到SmoothStep预览效果，上边是1，在切割线位置往下渐变至0，那如果我们让1的部分也变成0，这部分也不发光，加载黑色与黑色之间的这一块白色，不就是一条切割线了么。

对于物体本身来说，当然位置模式为World模式，将物体位置归零，这样就好思考了。当我们对于Edge1来说，我们并没有比较它与Edge2的大小，两个大小不同，将会对函数曲线有不一样的图像效果。将它们放到一张图中就可以很清晰看出它们直接与输出值之间的关系。

可以看到，因为Edge1不绝对小于Edge2， 而我们获得的物体Y轴坐标数据是固定数据，如果减去一个参数同样也是固定数据，将这个固定数据作为Edge1的值，那么当切割线在任何一个位置时，都有相应的对照显示区间。

可以从下图理解

 输入值为物体Y轴所有坐标数据，对于切割线来说，有两种类型的坐标点，第一种切割线以下的点（图上t1,t2)，第二种就是切割线以上的点（图上t3）。

对于第一类，假设坐标点在t1，切割厚度为0.01，这时候Edge1的值就是t1-0.01，在区间[t1-0.01，Edge2（切割线位置）]，这部分的点将会遵循下图的第一张模式，同样的t2也是如此，距离切割线近的点亮度相加会更亮，越远离切割线亮度越低，实现渐变效果。

对于第二类，假设坐标的在t3，切割厚度为0.01，这时候Edge1的值就是t3-0.01，而坐标的t3在Edge1的右边，如下图第二幅显示，此时坐标点返回值为0，呈不显示状。

这样我们就是现实了静态切割线，相乘颜色节点输出到Emssion节点，实现切割光线。