Unity Shader 极简实践3——step，lerp 和 smoothstep 应用

《质量效应》谢泼德指挥官

0.本文示例代码地址

GitHub

1. step

step 函数的逻辑是

step (a, x)
{
  if (x < a) 
  {
    return 0;
  }
  else
  {
    return 1;
  }
}

step 通常用来取代 if-else 的代码，下面看一个使用 step 函数的示例

Shader "Custom_Shader/Function_step"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Amount ("Amount", float) = 0.5
        _Color ("Color", Color) = (0,0,0,1)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _Color;
            float _Amount;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

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

核心代码是

  fixed4 col = step(_Amount, length(i.uv - 0.5)) * _Color;
  return col;

片元着色器中，若当前片元距离中心超过 _Amount 值时返回颜色值 _Color，否则返回黑色。这里的内置函数 length 作用是计算两个参数的距离。效果图：

step实现效果

2. lerp

lerp 函数的定义是

lerp(a, b, w)
{
  return a + w*(b-a)
}

当 w = 0 时，返回a，当 w = 1 时返回b，否则返回对 a 和
b 的差值，w 越接近0，返回结果越接近a，w越接近1，返回结果️接近1，通常用来计算一些渐变量。

lerp (a, b, w) 中，a 和 b 需要同类型，可以是数值或向量
一个使用 lerp 的案例

Shader "Custom_Shader/Function_lerp"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1.0, 1.0, 1.0, 1.0)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _Color;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return lerp(0, 1, length(i.uv - 0.5)) * _Color;
            }
            ENDCG
        }
    }
}

核心代码

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

实现了一个渐变效果，图片中心 uv 值为 (0.5,0.5)，从图片中心向外渐变，距离中心越近，颜色越接近黑色，距离越远，颜色越接近 _Color 颜色，效果图

lerp渐变

3. smoothstep

smoothstep可以用来生成0到1的平滑过渡值，它也叫平滑阶梯函数。smoothstep定义是

float smoothstep(float a, float b, float x) 
{
  x = clamp((x - a) / (b- a), 0.0, 1.0); 
  return x * x * (3 - 2 * x);
}

简单来说就是：

• 在 a < b 的情况下，当 x < a 时，返回 0，当 x > b 时，返回 1，否则在 0和 1之间平滑过渡，如图：
  smoothstep(-2, 3, x)的函数图像:
  
  smoothstep(-2, 3, x)
• 在 a > b 的情况下，当 x < b 时，返回1，当 x > a 时，返回0，否则在 1 和 0 之间平滑过渡，交换上述 a 和 b 的位置，可以得到 smoothstep(3, -2, x)的函数图像 ：
  
  smoothstep(3, -2, x)

两个 smoothstep 进行减法运算可以得到一些波形图，例如 smoothstep(1, 2, x) - smoothstep(2, 3, x)的函数图像

减法运算

想要增加波峰的持续宽度，可以构造 smoothstep(1,2, x) - smoothstep(3, 4, x)，图像如下：

减法运算

从 smoothstep 的函数图像我们可以得到灵感，如何在 Shader 中使用平滑过渡函数

Shader "Custom_Shader/Circle"
{
    Properties
    {
        _Color ("MainColor", Color) = (1,1,1,1)
        _Start ("Start", Range(0, 0.5)) = 0.1
        _Inner ("Inner", Range(0, 0.5)) = 0.2
        _Outer ("Outer", Range(0, 0.5)) = 0.22
        _End ("End", Range(0, 0.5)) = 0.3
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            float4 _Color;
            float _Start;
            float _End;
            float _Inner;
            float _Outer;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 singleSmoothstep(float _Start, float _End, v2f i) {
                return smoothstep(_Start, _Inner, length(i.uv - 0.5));
            }

            fixed4 doubleSmoothstep(float _Start, float _End, float _Inner, float _Outer, v2f i) {
                float value = smoothstep(_Start, _Inner, length(i.uv - 0.5));
                float value2 = smoothstep(_Outer, _End, length(i.uv - 0.5));
            }
            fixed4 frag (v2f i) : SV_Target
            {
                return _Color * singleSmoothstep(_Start, _End, i);
            }
            ENDCG
        }
    }
}

提供了单一的平滑过渡方法 singleSmoothstep 和经过减法运算的 doubleSmoothstep 方法，当返回 singleSmoothstep(0.1, 0.35, x) 时得到的过渡效果：

平滑过渡,_Start=0.1, _End=0.35

交换参数位置，得到 singleSmoothstep(0.35, 0.1, x) 的平滑过渡效果：

平滑过渡

当返回 doubleSmoothstep(0.05, 0.2, 0.2, 0.35, x)时得到的过渡效果

双平滑过渡

当返回 doubleSmoothstep(0.05, 0.15, 0.25, 0.4, x)时得到当过渡效果

双平滑过渡

当返回 doubleSmoothstep(0.14, 0.15, 0.29, 0.3, x)时得到当过渡效果

平滑过渡