ShaderForge-流光效果
发表于2018-07-12
游戏开发中，经常会用到在封面对LOGO之类的图片进行流光特效，下面就来看下是如何使用ShaderForge插件实现流光效果的。
流光效果
对图片的LOGO文字部分叠加一个流动光线的效果
生成流光的原理
简单来讲，就是先提供一张光线的贴图，让这张贴图根据时间发生偏移，然后叠加上到原来的图片上。
实现
制作流光图
使用ps的渐变工具
如果想让流光只叠加到文字部分，可以直接制作一张文字部分为白色，其他部分为黑色的图片，直接用乘法叠加到之前准备的流光图上。
贴图偏移
改变贴图的uv纹理坐标，这里我们让u坐标随着时间线性增大，材质贴图会出现匀速向右偏移的效果
为流光贴图叠加颜色设置范围
乘以颜色值，乘以制作好的蒙版图
叠加到原来的图片上去
ShaderForge实现流光效果
ShaderForge节点树
手写UnityShader代码实现LOGO流光效果
Shader "Unlit/liuguang_u"
｛
Properties
｛
_MainTex ("mainTex", 2D) = "white" ｛｝
_LiuguangTex("liuguangTex", 2D) = "white" ｛｝
_MaskTex("maskTex", 2D) = "white" ｛｝
_Color("color", Color) = (1,0,0,1)
_ScrollXSpeed("xScrollValue",Range(-10,10))=2
｝
SubShader
｛
Tags ｛ "RenderType"="Opaque" ｝
LOD 100
Pass
｛
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
//uniform sampler2D mainTex;
uniform sampler2D _LiuguangTex;
uniform sampler2D _MaskTex;
fixed4 _Color;
fixed _ScrollXSpeed;
struct appdata
｛
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
｝;
struct v2f
｛
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
float4 vertex : SV_POSITION;
｝;
sampler2D _MainTex;
float4 _MainTex_ST;
v2f vert (appdata v)
｛
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
｝
fixed4 frag (v2f i) : SV_Target
｛
// sample the texture
// add
fixed4 col = tex2D(_MainTex, i.uv);
fixed xScrollValue = _ScrollXSpeed * _Time.y;
float2 scrolledUV = i.uv + fixed2(xScrollValue,0.0f);
float4 liuguangCol = tex2D(_LiuguangTex, scrolledUV);
float4 maskCol = tex2D(_MaskTex, i.uv);
float3 finalColor = col.rgb + _Color.rgb*maskCol*liuguangCol;
fixed4 finalRGBA = fixed4(finalColor,1);
// apply fog
UNITY_APPLY_FOG(i.fogCoord, col);
return finalRGBA;
｝
ENDCG
｝
｝
｝
Tips:
如果想要节省贴图资源，可以用数学计算的方法生成流光，这样就可以节省一张流光图的空间
来自：https://blog.csdn.net/v_xchen_v/article/details/78420296