【Shader Graph】SmoothStep节点详解及其应用

目录

一、SmoothStep函数

二、基础图像

情况一：t1 > t2 

情况二：t1 < t2 

三、两个SmoothStep函数相减的图像

1）SmoothStep(t1，t2，x) - SmoothStep(t2，t3，x)

2）SmoothStep(t1，t2，x) - SmoothStep(t3，t4，x)

四、SmoothStep节点的应用

1）In < edge2， edge1 作为自变量

2）edge2 < In， edge1 作为自变量

3)  In < edge1， edge2 作为自变量

4)  edge1 < In， edge2 作为自变量

五、用SmoothStep做有边缘的模型裁切效果

---

一、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);
}

二、基础图像

情况一：t1 > t2 

以t1 = 3， t2 = -2 为例 ， SmoothStep(3，-2，x）的图像如下：

由图像可知，x <= -2 时，返回1， x >= 3 时，返回0，-2 < x < 3 时，返回值由1逐渐减少至0。 

即对于SmoothStep(t1，t2，x)（t1>t2），x <= t2 时， 返回1，x >= t1 时，返回0，t2 < x < t1 时，随着x的增大返回值逐渐由1减少至0。

我们用一个材质球表示，我们将模型空间的y坐标传入x变量，得出的材质效果如下：

由上到下是黑到白的渐变，渐变区的宽度取决于 t1 - t2 的大小。

情况二：t1 < t2 

以t1 = -2， t2 = 3 为例 ， SmoothStep(-2，3，x）的图像如下：

由图像可知，x <= -2 时，返回0， x >= 3 时，返回1，-2 < x < 3 时，返回值由0逐渐增加至1。 

即对于SmoothStep(t1，t2，x)（t1<t2），x <= t1 时， 返回0，x >= t2 时，返回1，t1 < x < t2 时，随着x的增大返回值逐渐由0增加至1。

我们用一个材质球表示，我们将模型空间的y坐标传入x变量，得出的材质效果如下：

 由上到下是白到黑的渐变，渐变区的宽度取决于 t2 - t1 的大小。

三、两个SmoothStep函数相减的图像

1）SmoothStep(t1，t2，x) - SmoothStep(t2，t3，x)

以t1 = -2，t2 = 0 ，t3 = 2 为例 ，SmoothStep(-2，0，x）-  SmoothStep(0，2，x）的图像如下：

由图像可知，x <= -2  或 x >= 2时，返回0， x = 0 时，返回1，-2 < x < 2 时，返回值在[0,1]范围内。

我们用一个材质球表示，我们将模型空间的y坐标传入x变量，得出的材质效果如下：

2）SmoothStep(t1，t2，x) - SmoothStep(t3，t4，x)

以t1 = -2，t2 = -1 ，t3 = 1 ，t4 = 2 为例 ，SmoothStep(-2，-1，x）-  SmoothStep(1，2，x）的图像如下：

由图像可知，x <= -2  或 x >= 2时，返回0， -1 <= x <= 1 时，返回1，-2 < x < -1 或 1 < x < 2 时，返回值在[0,1]范围内。

我们用一个材质球表示，我们将模型空间的y坐标传入x变量，得出的材质效果如下：

两个SmoothStep函数相减，可以做出圆环的效果。

四、SmoothStep节点的应用

对于SmoothStep(edge1，edge2，In）

1）In < edge2， edge1 作为自变量

由基础图像我们可知：

当 In < edge2 < edge1 时，返回1

当 In < edge1 < edge2 时，返回0

当 edge1 < In < edge2 时，返回[0,1]且随着edge1减小，返回值由0增加至1

以上三条关系式中，edge1逐渐减小，我们固定两个常量In < egde2，让edge1作为自变量，传入模型坐标的y分量，材质如图：

2）edge2 < In， edge1 作为自变量

由基础图像我们可知：

当 edge1 < edge2 < In 时，返回1

当 edge2 < edge1 < In 时，返回0

当 edge2 < In < edge1 时，返回[0,1]且随着edge1增大，返回值由0增加至1

以上三条关系式中，edge1逐渐增大，我们固定两个常量egde2 < In，让edge1作为自变量，传入模型坐标的y分量，材质如图：

3)  In < edge1， edge2 作为自变量

由基础图像我们可知：

当 In < edge1 < edge2 时，返回0

当 In < edge2 < edge1 时，返回1

当 edge2 <​​​​​​​ In < edge1 ​​​​​​​时，返回[0,1]且随着edge2减小，返回值由1减小至0

以上三条关系式中，edge2逐渐减小，我们固定两个常量In < edge1，让edge2作为自变量，传入模型坐标的y分量，材质如图：

4)  edge1 < In， edge2 作为自变量

由基础图像我们可知：

当​​​​​​​ edge2 < edge1 < In ​​​​​​​ 时，返回0

当​​​​​​​ edge1 < edge2 < ​​​​​​​In ​​​​​​​ 时，返回1

当​​​​​​​ edge1 < ​​​​​​​In​​​ < edge2  时，返回[0,1]且随着edge2增大，返回值由1减小至0

以上三条关系式中，edge2逐渐增大，我们固定两个常量edge1 < In，让edge2作为自变量，传入模型坐标的y分量，材质如图：

五、用SmoothStep做有边缘的模型裁切效果

思路：用Step节点做模型裁切效果，用SmoothStep节点加上边缘效果

新增四个Properties：

其中Edge用来控制裁切高度，Width用来控制边缘宽度，EdgeColor是边缘颜色，MainColor是模型的整体颜色

 

 效果：

(函数的图像直接用的excel，excel里面没有自带的clamp函数，可以用Median函数实现，Median函数返回一组数中的中间值，对于Median(0，x，1)，当x < 0，返回0，当x > 1，返回1，当x处于[0,1]，返回x自身。）