Unity 扫光Shader
一、前言
今天我们来实现一个扫光Shader
1.1 思路
思路：我们可以用一张作为扫光的贴图，然后采样它的颜色叠加在原来的基础上，这样就有了光，接着运用_Time.y让采样的UV随着时间变化，这样扫光就能动起来
1.2 效果图
可以看到，扫光按我们所想移动了起来，另外我们还加了一个_RotateAngel变量，让扫光的方向可以调节
1.3 准备工作
1.3.1 扫光贴图
我们需要一张扫光的贴图作为材料，先附上贴图
1.3.2 贴图设置
这里需要把WrapMode设置为Repeat，因为我们算法中uv或加上当前的时间，让uv超出0~1的范围，把WrapMode设置为Repeat，这样保证超出0 ~ 1后还可以采样到纹理
二、Shader内容
2.1 初版Shader
Shader "Custom/MoveLight"
{
Properties
{
_MainTex ("MainTex", 2D) = "white" {}
_LightTex("LightTex",2D) = "white" {}
_LightColor("LightColor",Color) = (1,1,1,1)
_LightStrength("LightStrength",Range(1,10)) = 1
_Speed("Speed",Range(0,10)) = 1
_RotateAngel("RotateAngel",Range(0,360)) = 0
}
SubShader
{
Tags { "Queue"="Transparent" "RenderType"="Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float2 lightUV : TEXCOORD1;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _LightTex;
float4 _LightTex_ST;
float _Speed;
float4 _LightColor;
float _LightStrength;
float _RotateAngel;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.lightUV = TRANSFORM_TEX(v.uv, _LightTex);
// o.lightUV = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
//加上时间，让扫光动起来
i.lightUV.x = i.lightUV.x + frac(_Speed * _Time.y);//_Time的4个分量 float4 Time (t/20, t, t*2, t*3),
fixed4 lightCol = tex2D(_LightTex, i.lightUV);
float4 result = col;
float alpha = step(1,lightCol.a);
result = lerp(col,col + lightCol * _LightColor * _LightStrength,alpha);
result.a = col.a;
return result;
}
ENDCG
}
}
}
2.2 效果
2.3 分析
这样我们采用原来的alpha作为最终的alpha，这样保证不会加到透明的地方；
还有我们运用step和lerp函数，只把扫光贴图不透明（即有白光）的部分进行白光的叠加；
还有我们使用了_Time.y 来改变uv,让扫光动了起来。这里记住_Time的4个分量_Time (t/20, t, t2, t3),
不过这样扫光的方向是固定的，更多的时候，我们是希望可以调节的。接下来我们来优化一下
2.4 优化
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
//角度转弧度，因为正余弦采用弧度
float angel = _RotateAngel * 3.14159265359 / 180;
//旋转前，改变轴心。不减的话，是以左下角(0,0)为轴心,减去后以(0.5,0.5)为轴心，这才是我们要的旋转效果
float2 lightUV = i.lightUV - float2(0.5,0.5);
//这里，应用旋转函数，把UV进行旋转
lightUV= float2(lightUV.x * cos(angel) - lightUV.y * sin(angel),lightUV.y * cos(angel) + lightUV.x * sin(angel));
//加回偏移
lightUV = lightUV + float2(0.5,0.5);
//加上时间，让扫光动起来
lightUV.x = lightUV.x + frac(_Speed * _Time.y);//_Time的4个分量 float4 Time (t/20, t, t*2, t*3),
fixed4 lightCol = tex2D(_LightTex, lightUV);
加上旋转之后，效果就如我们最前面贴的动画一样。可以调节RotateAngel来调节扫光方向了，这里讲一下旋转函数的推导:
任意一点的坐标a(xa，ya)在旋转任意角度θ后,它的新坐标b(xb,yb),其中
xb = xa * cosθ - ya * sinθ；
yb = ya * cosθ + xa * sinθ；
这是因为我们画一个圆，半径为r , 假设点a自身与圆的夹角a ,
那么 xa = r * cos a, ya = r * sin a
则可以得出 xb = r * cos( a + θ)， yb = cos (b + θ)
带入余弦和差公式，把括号拆开，则可得到上面的公式：
xb = xa * cosθ - ya * sinθ；
yb = ya * cosθ + xa * sinθ；
也就有了下面的代码
//这里，应用旋转函数，把UV进行旋转
lightUV= float2(lightUV.x * cos(angel) - lightUV.y * sin(angel),lightUV.y * cos(angel) + lightUV.x * sin(angel));
三、完整代码
到此，我们的代码就写完了。接下来附上完整的代码
Shader "Custom/MoveLight"
{
Properties
{
_MainTex ("MainTex", 2D) = "white" {}
_LightTex("LightTex",2D) = "white" {}
_LightColor("LightColor",Color) = (1,1,1,1)
_LightStrength("LightStrength",Range(1,10)) = 1
_Speed("Speed",Range(0,10)) = 1
_RotateAngel("RotateAngel",Range(0,360)) = 0
}
SubShader
{
Tags { "Queue"="Transparent" "RenderType"="Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float2 lightUV : TEXCOORD1;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _LightTex;
float4 _LightTex_ST;
float _Speed;
float4 _LightColor;
float _LightStrength;
float _RotateAngel;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.lightUV = TRANSFORM_TEX(v.uv, _LightTex);
// o.lightUV = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
float angel = _RotateAngel * 3.14159265359 / 180;//角度转弧度，因为正余弦采用弧度
//旋转前，改变轴心。不减的话，是以左下角(0,0)为轴心,减去后以(0.5,0.5)为轴心，这才是我们要的旋转效果
float2 lightUV = i.lightUV - float2(0.5,0.5);
//这里，应用旋转函数，把UV进行旋转
lightUV= float2(lightUV.x * cos(angel) - lightUV.y * sin(angel),lightUV.y * cos(angel) + lightUV.x * sin(angel));
//加回偏移
lightUV = lightUV + float2(0.5,0.5);
//加上时间，让扫光动起来
lightUV.x = lightUV.x + frac(_Speed * _Time.y);//_Time的4个分量 float4 Time (t/20, t, t*2, t*3),
fixed4 lightCol = tex2D(_LightTex, lightUV);
float4 result = col;
float alpha = step(1,lightCol.a);
result = lerp(col,col + lightCol * _LightColor * _LightStrength,alpha);
result.a = col.a;
return result;
}
ENDCG
}
}
}