Shader特效之图片波动炫光效果

1.前言

今天给大家介绍一个非常炫酷的UV流光特效。可以用于UI的Image的图片波动+炫光的效果。
效果使用ShaderForge实现的，原因是ShaderForge可以很方便的导出源码，而ShaderGraph不可以。
ShaderForge虽然对Unity新版本不再支持了，但是这个仓库：ShaderForge，作者兼容了很多新版本的Unity，我们依然还是可以使用。

2.素材

素材1：主图片，用于效果的主体显示和波动颜色

素材2：噪波图，用于干扰主图渲染UV的干扰图，控制显示流动效果

3.UV波动效果

普通的UV波动效果如下图所示：

下面是再ShaderForge中使用节点链接的，逻辑非常简单清晰

4.波动+炫光效果

我们也可以根据自己的需要，给shader添加不同的参数，比如炫光，颜色叠加等。比如看下我加的炫光效果如下：
白色流光：

彩色炫光：

ShaderForge实现：

5.UV流动原理

使用了时间节点Time和自定义参数pannerUV，来控制图片的UV流动，其中噪波图的流动和主图的流动原理一样。详见下图：

6.参数解释

tex1_pannerUV：噪波图的uv流动速度
tex2_pannerUV：主图的uv流动速度，例子中是0，不需要主图流动
disturbance_stronger：噪波图的强度，可以是扰动更剧烈
flow_color：炫光的颜色
t1_stronger：噪波产生的炫光的强度
t2_stronger：主图的亮度

7.Shader源码

最后我们贴出Shader的源码，让大家可以直接使用：

Shader "Shader Forge/uv_flow_pure" {Properties {_Tex1 ("Tex1", 2D) = "white" {}_Tex2 ("Tex2", 2D) = "white" {}_tex1_panner_U ("tex1_panner_U", Range(-5, 5)) = 0.1_tex1_panner_V ("tex1_panner_V", Range(-5, 5)) = 0.1_tex2_panner_U ("tex2_panner_U", Range(-5, 5)) = 0_tex2_panner_V ("tex2_panner_V", Range(-5, 5)) = 0_disturbance_stronger ("disturbance_stronger", Range(0, 5)) = 0.2_flow_color ("flow_color", Color) = (1,1,1,1)_t1_stronger ("t1_stronger", Range(0, 10)) = 1_t2_stronger ("t2_stronger", Range(0, 10)) = 1}SubShader {Tags {"RenderType"="Opaque"}Pass {Name "FORWARD"Tags {"LightMode"="ForwardBase"}CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_instancing#include "UnityCG.cginc"#pragma multi_compile_fwdbase_fullshadows#pragma target 3.0uniform sampler2D _Tex1; uniform float4 _Tex1_ST;uniform sampler2D _Tex2; uniform float4 _Tex2_ST;UNITY_INSTANCING_BUFFER_START( Props )UNITY_DEFINE_INSTANCED_PROP( float, _tex1_panner_U)UNITY_DEFINE_INSTANCED_PROP( float, _disturbance_stronger)UNITY_DEFINE_INSTANCED_PROP( float, _t2_stronger)UNITY_DEFINE_INSTANCED_PROP( float, _tex1_panner_V)UNITY_DEFINE_INSTANCED_PROP( float, _tex2_panner_V)UNITY_DEFINE_INSTANCED_PROP( float, _tex2_panner_U)UNITY_DEFINE_INSTANCED_PROP( float, _t1_stronger)UNITY_DEFINE_INSTANCED_PROP( float4, _flow_color)UNITY_INSTANCING_BUFFER_END( Props )struct VertexInput {UNITY_VERTEX_INPUT_INSTANCE_IDfloat4 vertex : POSITION;float2 texcoord0 : TEXCOORD0;float4 vertexColor : COLOR;};struct VertexOutput {float4 pos : SV_POSITION;UNITY_VERTEX_INPUT_INSTANCE_IDfloat2 uv0 : TEXCOORD0;float4 vertexColor : COLOR;};VertexOutput vert (VertexInput v) {VertexOutput o = (VertexOutput)0;UNITY_SETUP_INSTANCE_ID( v );UNITY_TRANSFER_INSTANCE_ID( v, o );o.uv0 = v.texcoord0;o.vertexColor = v.vertexColor;o.pos = UnityObjectToClipPos( v.vertex );return o;}float4 frag(VertexOutput i) : COLOR {UNITY_SETUP_INSTANCE_ID( i );
// Lighting:float _t1_stronger_var = UNITY_ACCESS_INSTANCED_PROP( Props, _t1_stronger );float _tex1_panner_U_var = UNITY_ACCESS_INSTANCED_PROP( Props, _tex1_panner_U );float _tex1_panner_V_var = UNITY_ACCESS_INSTANCED_PROP( Props, _tex1_panner_V );float4 node_5719 = _Time;float2 node_2527 = ((float2(_tex1_panner_U_var,_tex1_panner_V_var)*node_5719.g)+i.uv0); // UV流动float4 _Tex1_var = tex2D(_Tex1,TRANSFORM_TEX(node_2527, _Tex1)); // 噪波干扰float _disturbance_stronger_var = UNITY_ACCESS_INSTANCED_PROP( Props, _disturbance_stronger );float node_6101 = (_Tex1_var.r*_disturbance_stronger_var);float4 _flow_color_var = UNITY_ACCESS_INSTANCED_PROP( Props, _flow_color );float _tex2_panner_U_var = UNITY_ACCESS_INSTANCED_PROP( Props, _tex2_panner_U );float _tex2_panner_V_var = UNITY_ACCESS_INSTANCED_PROP( Props, _tex2_panner_V );float4 node_7472 = _Time;float2 node_326 = (node_6101+((float2(_tex2_panner_U_var,_tex2_panner_V_var)*node_7472.g)+i.uv0));float4 _Tex2_var = tex2D(_Tex2,TRANSFORM_TEX(node_326, _Tex2)); // 叠加效果float _t2_stronger_var = UNITY_ACCESS_INSTANCED_PROP( Props, _t2_stronger );float3 finalColor = (i.vertexColor.rgb*((_t1_stronger_var*node_6101*_flow_color_var.rgb)+_Tex2_var.rgb)*_t2_stronger_var);return fixed4(finalColor,1);}ENDCG}}FallBack "Diffuse"CustomEditor "ShaderForgeMaterialInspector"
}

好了，这篇文章就到这里，希望对你有所帮助