unity流光效果

在 Unity 中，流光效果能够助力我们实现丰富的动画效果。今天，我们就来深入探究一下 Unity 中的流光效果。

此前，我们可能留意到 Material 里纹理的属性包含 Tiling 和 Offset，但未曾深入研究它们的用途。直到今天，我们才发现可以利用 Offset 实现 UV 动画，进而创造出各种有趣的动画，例如流光效果。

流光效果通常表现为一条高光在物体表面划过，模拟高光移动照射物体的视觉效果。以往，实现这种效果的方法是通过 Shader 每帧传递一个 Offset 值，修改高光纹理采样的 UV。不过，这种方法存在一定弊端。若采用这种方式，需要自行实现 Shader。对于简单的匀速移动效果，实现起来相对容易；但如果希望移动速度是变化的，就需要自行解析速度曲线并将其传递给 Shader。

令人惊喜的是，一直用于位移动画和骨骼动画的 Animation 也具备实现流光效果的能力。下图展示了 Animation 在物体渲染方面的可操作内容（Unity 4.3 版本和 4.2 版本略有不同）。

在 Shader 部分，我们会使用两张纹理，分别是底图和高光图。需要特别注意的是，如果要移动 UV，必须声明其 ST 属性，这样才能通过内置方法 TRANSFORM_TEX() 计算 UV 偏移。以下是相应的 Shader 代码：

// 这里仅展示简单示例，实际使用需根据需求调整
Shader "Custom/FlowLightShader" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_FlowLightTex ("Flow Light (RGB)", 2D) = "white" {}
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200

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;
sampler2D _FlowLightTex;
float4 _FlowLightTex_ST;

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 = tex2D(_MainTex, i.uv);
fixed4 flowLightCol = tex2D(_FlowLightTex, TRANSFORM_TEX(i.uv, _FlowLightTex));
// 简单算法：将高光覆盖底图颜色增加高光 alpha 倍
col.rgb += flowLightCol.rgb * flowLightCol.a;
return col;
}
ENDCG
}
}
FallBack "Diffuse"
}

这里只运用了一种简单的算法来计算最终的颜色值，即把高光覆盖在底图颜色上，并根据高光的 alpha 值进行增强。在实际应用中，可根据具体需求设计更合适的计算方法。

在动画的关键帧中，我们可以依据美术需求设计速度曲线，示例图如下（此处可根据实际情况插入相应图片）。

运行效果如图所示（此处可根据实际情况插入相应图片）。

需要注意的是，此方法不能应用于 NGUI，因为 NGUI 组织顶点的方式与普通物体不同。