smoothstep函数_SmoothStep是个啥？这是数学的魅力！

大家好

鸽了这么长时间我终于更新了

最近太忙了都没时间打理公众号

BUT最近学到了一个技巧，看了很多相关的资料

很想和大家分享一下

所以这期是连夜赶出来的

接下来我们就一起了解下SmoothStep到底是啥

可能你们曾经用过这个功能

也有可能是第一次听说过

但今天你看完这篇

绝对可以从原理上弄得明明白白

如果你现在问这个功能有什么用

我只能说这是一个

平滑输入值且变换区间的函数

是不是很抽象。。。

你此时心里肯定有千万头为什么的草泥马飞过

但是先不着急。。。

咱们会从最基础的函数开始

一步步将smoothstep推导出来

So let‘s get started！

接下来咱们会以UE4的SmoothStep为例讲解：

也就是下面这个东西

首先使用这个节点的时候一定是一脸懵逼的：a是啥？？b是啥？？x又是啥？？？

当我们把这个材质功能点开时，可以看到他其实是对A、B、X三个数做了以下的运算：

如果代码看着有些晕，不要紧，这里其实是下面两个公式：

其中，t的值被限制在了0-1的范围内

咱们可以看到这里有两个公式，首先看第一个，这是一个二元一次方程，利用咱们输入的A、B、X三个值求出一个数值t。单看这个函数非常抽象，如果咱们将其输入函数图像生成器，并定义A=0，B=1，X即为x时，将会得到以下的函数图像(这里叫函数的话，严谨一点应该写f(x)=的，不过大家理解就好)：

这个函数既然加了定义区间，就会产生一些经验性的总结，即为以下结论：

当x < a < b 或 x > a > b时，返回值为0

当x < b < a 或 x > b > a时，返回值为1

不过单看函数的话，相信你一定会说：这不就是t=x的函数图像嘛~但是咱们还有两个变量A和B，通过改变AB的数值，函数图像就会出现以下的变化：

是不是很直观，改变A的值，则会改变函数图像与x轴的交点，而a的值刚好就是当t=0时x的取值，也即为函数图像和x轴相交的x取值。而整个变换的过程，相当于是将函数以(1,1)点为旋转中心旋转出来的结果。反观下一个参数，改变B的值则相当于是将函数图像以原点为中心旋转出来的结果，b的值刚好就是函数图像与t=1(这里的t即为y，因为前面的方程的f(x)定义为t，所以咱们就以t来代替)的交点的x值。

说着挺绕，但其实总结起来就一句话：这个函数的实际意义，就是将输入函数在x轴向上0-1范围内的取值变换到a-b的范围内，相当于是一个缩放函数。

讲到这里你可能会说：这么简单吗？我好了。。。BUT等等，重头戏在后面，咱们接着往下讲。

咱们通过上面的函数得到了一个结果值t，接下来咱们就需要对这个t做文章了，也就引出了下面这个公式：

公式对应的图像如下：

可以看到这个函数图像在x于0-1区间内呈现出微弱的“s”形，同时在(0,0)和(1,1)两个端点的函数图像切线斜率都为0，所以我们可以看出，这个函数就是前面第一个函数结果t的加权函数，相当于就是将t的值沿着曲线平滑了，如果表现在图像上的话，那就是提高图像的对比度，亮的越亮，暗的越暗(类似ps的曲线)。

但是如果我问你这个函数是怎么来的，相信你一定是黑入问号

“这个二元三次方程，我都没学过咋个用嘛，他是凭空变出来的吗？？？？？”

这当然不是凭空变出来的，咱们接下来就会讲讲怎么去推导出这个公式

巧妇难为无米之炊，当然推导出这个公式我们也需要一些“原材料”，这个原材料就是咱们高中学过的最熟悉的二次函数的标准式，我们将这个函数记录为函数C：

f(x)= x² 

接下来我们将这个二次函数的标准式“魔改”一下：将函数沿x轴翻转一下，然后将其沿x轴和y轴的正方向挪动1个单位。即得到下面的公式和图形，我们将这个函数记录为函数D：

f(x)=1-(x-1)²

同时显示两个函数，我们就会得到下面这个效果：

可能你已经看出来了：如果我们将函数C，及左上的二次函数标准式，与函数D，及右下变化换后的二次函数，在x于0-1区间内做一下混合，这不就可以得出上面的公式了嘛。

不过要如何混合呢？这里咱们使用两个函数：一个是函数f(x)=x，我们将其记录为函数E。另外一个是函数f(x)=1-x，我们将其记录为函数F。函数图像如下所示：

这不是正好可以作为混合两个函数的权重嘛！于是我们就可以将函数DE的积与函数CF的积相加，也就是DE+CF。我们带入公式即可得到以下表达式，我们将其记录为G

f(x)=x[1-(x-1)²]+x²(1-x)

说到这里你肯定会有点蒙，什么函数CDEF的记不清楚，所以咱们把这几个函数整理一下：

好的咱们继续，如果我们将上面的表达式f(x)=x[1-(x-1)²]+x²(1-x)精简一下，该合并的合并，就可以得到下面这个表达式：

f(x)=3x²-2x³

如果生成函数图像可以得到以下结果：

哈哈是不是很巧？？！我们将前面那个黑人问号的公式推导出来了，这里我们将x换成t，是不是就得到了下面的这个公式：

Ojierk，到这里，我们已经把两个公式的作用和函数都详细讲了一遍，是不是茅塞顿开，原来SmoothStep本身的作用就是：通过AB的值伸缩X的函数范围，同时对结果进行平滑处理。这里我们同时显示两个函数的函数图像，通过更改AB的值，大家可以很直观的感受到。

本文主要讲解了SmoothSteps的函数原理。具体的用法呢，大家下去可以思考思考。我相信了解原理之后，用起来也肯定会更加有底气。那么今天的科普就到这里啦，886~~