【Shader Graph】SmoothStep节点详解及其应用-Toy模板网

这篇具有很好参考价值的文章主要介绍了【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）的图像如下：

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

由图像可知，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变量，得出的材质效果如下：

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

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

情况二：t1 < t2

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

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

由图像可知，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变量，得出的材质效果如下：

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

由上到下是白到黑的渐变，渐变区的宽度取决于 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）的图像如下：

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

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

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

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

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）的图像如下：

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

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

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

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

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

四、SmoothStep节点的应用

对于SmoothStep(edge1，edge2，In）

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

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分量，材质如图：

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

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分量，材质如图：

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

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分量，材质如图：

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

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分量，材质如图：

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

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

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

新增四个Properties：

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

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

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

效果：

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

(函数的图像直接用的excel，excel里面没有自带的clamp函数，可以用Median函数实现，Median函数返回一组数中的中间值，对于Median(0，x，1)，当x < 0，返回0，当x > 1，返回1，当x处于[0,1]，返回x自身。）文章来源地址https://www.toymoban.com/news/detail-500083.html

到了这里，关于【Shader Graph】SmoothStep节点详解及其应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！