Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

流光效果

一、什么是流光效果


在Unity Shader 中的流光效果是一种动态的视觉效果,
通常用于给材质增加一种闪光或光线移动的效果,使物体表面看起来像是有光在流动。
这种效果常用于武器光效、能量护盾、传送门等等,可以让物体看起来更加生动富有科技感

流光效果1
流光效果2

二、基本原理


利用Unity内置的时间变量_Time,让UV坐标沿着固定的一个方向持续递增,
然后用偏移后的UV坐标对纹理贴图进行采样

回顾:
_Time中的4个分量分别是(t/20,t,2t,3t),t代表该游戏场景从加载开始经过的时间

三、美术注意事项

  1. UV需要均匀的展开,如果UV展开不均匀或者出现拉伸,流光的移动会出现扭曲和不自然 需要确保模型的UV展开尽量均匀和平滑
  2. UV的比例要一致,模型上不同部分的UV比例需要保持一致,确保流光效果的移动速度在 整个模型上是一致的。如果某些区域的UV比例过大或过小,流光在这些区域的移动速度会不同
  3. 贴图需要无缝衔接(首尾或上下相连),避免流光效果再边界处出现断裂或跳跃 等等等

四、实现示例

1. 实现示例步骤

  1. 属性声明、属性映射
    主纹理
    叠加颜色
    移动速度
  2. 透明设置相关
    渲染标签——渲染类型、渲染队列
    混合模式—— 使用Blend One One 直接叠加颜色,让其效果更亮,更有流光的效果
    关闭剔除——两面都渲染
  3. 顶点着色器
    坐标转化、纹理缩放偏移
  4. 片元着色器
    用_Time进行u轴方向的偏移采样
    返回采样颜色*叠加h颜色 ### 2.示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    Shader "Unlit/MovingLight"
    {
    Properties
    {
    _MainTex ("Texture", 2D) = "white" {}
    //光叠加的颜色
    _Color("Color",Color)=(1,1,1,1)
    //流动的速度
    _Speed("Speed",float)=1
    }
    SubShader
    {
    Tags { "RnederType" = "Transparent" "Queue" = "Transparent" }
    Blend One One
    Cull Off

    Pass
    {
    CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag

    #include "UnityCG.cginc"
    struct v2f
    {
    float2 uv : TEXCOORD0;
    float4 vertex : SV_POSITION;
    };

    sampler2D _MainTex;
    float4 _MainTex_ST;
    fixed4 _Color;
    float _Speed;

    v2f vert (appdata_base v)
    {
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex);
    o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
    return o;
    }

    fixed4 frag (v2f i) : SV_Target
    {
    //根据时间 进行uv坐标偏移 这样u轴方法就可以看见移动的效果
    i.uv = float2(i.uv.x + _Time.x * _Speed,i.uv.y);

    return tex2D(_MainTex, i.uv)*_Color;
    }
    ENDCG
    }
    }
    }

评论