Unity Shader 极简实践3——step,lerp 和
0.本文示例代码地址
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
作用是计算两个参数的距离。效果图:
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)
时得到的过渡效果:
交换参数位置,得到
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)
时得到当过渡效果