【Unity云消散】巩固step，lerp和smoothstep

拼搏现实的明天。 2023-09-23 21:49 33阅读 0赞

之前在[学习HLSL常用函数][HLSL]时就有涉及到范围相关的函数，但是最近做的东西发现step,lerp和smoothstep这三个函数总是一直在用，总是会在用的时候突然忘记他们分别是干啥的，这里就记录一下方便查看吧，形式大部分参考[Unity Shader 极简实践3——step，lerp 和 smoothstep 应用][Unity Shader _3_step_lerp _ smoothstep]

## 1 step ##

// x <a,返回0
    // x>=0,返回1
    step(a,x);

通常用来代替if else。

### shader中的表现 ###

要么是0要么是1，非此即彼的感觉，所以如果写进shader中与颜色挂钩，表现出的颜色变化效果很“硬”，颜色变化突兀，没有过渡感。

fixed4 frag (v2f i) : SV_Target
                {
                    // step
                    fixed4 col = step(_Amount, length(i.uv - 0.5)) * _Color;
                    return col;
                }
                ENDCG

![330aeb4516994394a4bebc0055fabc99.png][]

## 2 lerp ##

// w是一个百分比，表示从a到b之间按照w来取值
    // w = 0,返回a
    // w = 1,返回b
    lerp(a, b, w);

例如lerp(0, 100, 0.2)，返回20

### shader中的表现 ###

// lerp
                    fixed4 col = lerp(0, 1, length(i.uv - 0.5)) * _Color;
                    return col;

与step相比，lerp是有个过渡的。代码中的i.uv - 0.5表示的是着色点与中心的距离，也就是从中心向外出发，距离越远这个百分比越大，意味着lerp的结果越接近1，从而实现了颜色从中心向外由黑色--> \_Color（白色）的效果。

![a8ff13b6b1784bc98518e5bbda90f94c.png][]

## **3 smoothstep** ##

这是稍微复杂一点的范围函数，用来生成0到1的平滑过渡值，如下：如果x在\[a,b\]范围内，则返回**介于0和1之间**的平滑插值，使用smoothstep在两个值之间**创建平滑过渡。**

smoothstep(a, b, x);

这是之前我在HLSL函数那篇文章展示的一个函数图，最下面两条就是smoothstep()

![9f2b56d13b9549a8b6748cf03703fc0e.png][]

如果两个smoothstep作减法还会有一些波形图效果。

### shader中的表现 ###

fixed4 singleSmoothStep(float _Start, float _End, v2f i) {
                    return smoothstep(_Start, _End, length(i.uv - 0.5));
                }
    
               fixed4 doubleSmoothStep(float _Start, float _End, float _Inner, float _Outer, v2f i) {
                    float res = smoothstep(_Start, _Inner, length(i.uv - 0.5));
                    float res2 = smoothstep(_Outer, _End, length(i.uv - 0.5));
                    return res - res2;
                }
    
                fixed4 frag (v2f i) : SV_Target
                {
                    // step
                    //fixed4 col = step(_Amount, length(i.uv - 0.5)) * _Color;
    
                    // lerp
                    //fixed4 col = lerp(0, 1, length(i.uv - 0.5)) * _Color;
    
                    // smoothstep
    
                    //fixed4 col = singleSmoothStep(_End, _Start, i) * _Color;
                    fixed4 col = doubleSmoothStep(_Start, _End, _Inner, _Outer, i) * _Color;
                    return col;
                }

波形图和shader中的着色效果一起来看：

**singleSmoothStep(0.1,0.35, i)**

![308370dd8df04447a7272fbb8fe3c60b.png][]

![313b9a86c5fa4f0591410a3217dbf2b0.png][]

**singleSmoothStep(0.35,0.1, i)**

![a1ddecd448a44e17a3cc22b858268748.png][]

![af05eed3297647089c635e0d0e3230cc.png][]

**doubleSmoothStep(0.1, 0.5, 0.2, 0.3, i)**

![02fb368121bf4674a3a0976497edb660.png][]

![b67bfd47f3164622b4383f986044ab9f.png][]

[HLSL]: https://blog.csdn.net/qq_41835314/article/details/126814172
[Unity Shader _3_step_lerp _ smoothstep]: https://www.jianshu.com/p/53fe928a0fb6
[330aeb4516994394a4bebc0055fabc99.png]: https://img-blog.csdnimg.cn/330aeb4516994394a4bebc0055fabc99.png
[a8ff13b6b1784bc98518e5bbda90f94c.png]: https://img-blog.csdnimg.cn/a8ff13b6b1784bc98518e5bbda90f94c.png
[9f2b56d13b9549a8b6748cf03703fc0e.png]: https://img-blog.csdnimg.cn/9f2b56d13b9549a8b6748cf03703fc0e.png
[308370dd8df04447a7272fbb8fe3c60b.png]: https://img-blog.csdnimg.cn/308370dd8df04447a7272fbb8fe3c60b.png
[313b9a86c5fa4f0591410a3217dbf2b0.png]: https://img-blog.csdnimg.cn/313b9a86c5fa4f0591410a3217dbf2b0.png
[a1ddecd448a44e17a3cc22b858268748.png]: https://img-blog.csdnimg.cn/a1ddecd448a44e17a3cc22b858268748.png
[af05eed3297647089c635e0d0e3230cc.png]: https://img-blog.csdnimg.cn/af05eed3297647089c635e0d0e3230cc.png
[02fb368121bf4674a3a0976497edb660.png]: https://img-blog.csdnimg.cn/02fb368121bf4674a3a0976497edb660.png
[b67bfd47f3164622b4383f986044ab9f.png]: https://img-blog.csdnimg.cn/b67bfd47f3164622b4383f986044ab9f.png