Shader smoothstep函数

教程手册：The Book of Shaders

教程地址：https://thebookofshaders.com/05/?lan=ch

最近了解了一下Shader的内容，看到了这本书，当看到此章节时，很是愚笨，未能理解如下这段代码的意思，看不懂其中的几个算法表达的是什么意思。

代码片段一：

上述代码对应图案为：

后来逐步的深入了解smoothstep函数和剔除一些无关的计算，大概明白了一些内容，这里记录下来。

我们先将无关的计算剔除掉，变成如下的内容和图案。

代码块二：

对应图案：

这里我们看到，只是变动了 color = pct*vec3(0.0,1.0,0.0); 这一行，去掉了背景的渐变。背景成为了黑色，当时我在思考，背景默认是黑色吧（疑点1）？还是很迷糊，没有理解，看了smoothstep函数的由来，写了个小例子来验证smoothstep函数的结果，大概已经理解了一些。

后来觉的还是很懵，这还不是我想要的，我想要更直观的表现方式，于是抛开上述已有的代码，思考如果自己划线改如何画。

我们想到，y=x，并且还有线宽，好像有点意思了。于是乎写了下面的代码。

代码片段三：

嗯，这里看到了我们想要图案，这里是在书籍网站的代码块中实时编辑的，我们把代码放到KodeLife（学习Shader的IDE）中看看，如下。

咦，线条没了，背景色也变了，怎么回事呢？

经过一番尝试后，加上了背景色，想要的图案又回来了，如下代码片段四。

好像理解了什么，背景色并不是默认为黑色，（应该是缓存区没有刷新，导致屏幕上输出的一直都是线条的颜色，我们加上了背景色之后就好了，个人猜测，有大佬可以指点一下。）

好了，到了这里我们明白了线条是怎么画出来的，怎么来的了，就是修改不同位置的颜色输出，就可以得到自己想要的图案。

嗯，我们的看起来好像很毛躁，没有原书中的那么平滑。

我们再把原书中的smoothstep拿出来放到我们自己代码中看看。

代码片段五：

嗯，很平滑，也有了黑色的背景。这是因为smoothstep每次计算都会给出不同的值，不在上下限的值会给出0或1，调换smoothstep的参数一和参数二，就会看到这种效果。

如下：

至此大概对smoothstep的概念和用法有了一定的了解。