Unity LOGO流光效果

你的名字 2022-05-16 02:17 252阅读 0赞

原文地址：[https://blog.csdn.net/qq992817263/article/details/81562513][https_blog.csdn.net_qq992817263_article_details_81562513]

之前写过一篇LOGO流光的shader，原理几乎是一样的，今天我又翻出来优化了一下，为了让效果看起来更有质感，不那么突兀，或者说是不那么直接的让人看出来原理就是将一张斜着的作为流光的图片放在上面移动，为此我做了一点改动。   
我们让流光划过的位置呈现出一种凸起的样子，这样不仅我们的整个LOGO看起来有了质感，流光扫过的时候也给人一种更加金光闪烁的感觉。   
原理也很简单，我们在计算流光贴图的uv的时候，会根据流光贴图和遮罩贴图的alpha值的乘积来确定最终输出的颜色是否可见，也就是说如果两个贴图任意一个的alpha值为0，那么最终输出值也就等于0，也就是输出透明颜色，也即是计算出此处没有流光效果，所以在此基础上我们让主纹理uv坐标的y值也乘以流光贴图和遮罩贴图的alpha值乘积，得到的效果就是在有流光效果的位置，主纹理上的颜色会呈凸起状态。   
代码如下：

fixed4 frag(v2f i) : SV_Target
                {
                    //=====================计算流光贴图的uv=====================
                    //缩放流光区域
                    float2 flashUV = i.uv*_FlashScale;
                    //不断改变uv的x轴，让他往x轴方向移动
                    flashUV.x += -_Time.y*_FlashSpeedX;
                    //不断改变uv的y轴，让他往y轴方向移动
                    flashUV.y += -_Time.y*_FlashSpeedY;
    
                    //=====================计算流光贴图的可见区域=====================
                    //取流光贴图的alpha值
                    fixed flashAlpha = tex2D(_FlashTex, flashUV).a;
                    //取遮罩贴图的alpha值
                    fixed maskAlpha = tex2D(_MaskTex, i.uv).a;
                    //最终在主纹理上的可见值（flashAlpha和maskAlpha任意为0则该位置不可见）
                    fixed visible = flashAlpha*maskAlpha*_FlashIntensity*_Visibility;
    
                    //=====================计算主纹理的uv=====================
                    //被流光贴图覆盖的区域凸起（uv的y值增加）
                    float2 mainUV = i.uv;
                    mainUV.y += visible*_RaisedValue;
    
                    //=====================最终输出=====================
                    //主纹理 + 可见的流光
                    fixed4 col = tex2D(_MainTex, mainUV) + visible*_FlashColor;
    
                    UNITY_APPLY_FOG(i.fogCoord, col);
                    return col;
                }

shader中定义的属性如下：

Properties
        {
            //主纹理
            _MainTex("Main Texture", 2D) = "white" {}
            //流光纹理
            _FlashTex("Flash Texture",2D) = "white"{}
            //遮罩纹理
            _MaskTex("Mask Texture",2D) = "white"{}
            //流光颜色
            _FlashColor("Flash Color",Color) = (1,1,1,1)
            //流光强度
            _FlashIntensity("Flash Intensity", Range(0, 1)) = 0.6
            //流光区域缩放
            _FlashScale("Flash Scale", Range(0.1, 1)) = 0.5
            //水平流动速度
            _FlashSpeedX("Flash Speed X", Range(-5, 5)) = 0.5
            //垂直流动速度
            _FlashSpeedY("Flash Speed Y", Range(-5, 5)) = 0
            //主纹理凸起值
            _RaisedValue("Raised Value", Range(-0.5, 0.5)) = -0.01
            //流光能见度
            _Visibility("Visibility", Range(0, 1)) = 1
        }

流光能见度用于外部C\#代码调用，可以做出类似于鼠标靠近流光出现，鼠标离开流光消失的功能。

注意：这里有非常重要的一点，也是之前没有提到过的，那就是shader的三张纹理贴图最好都要设置为Repeat模式，也即是在uv超出时循环绘制。

![这里写图片描述][70]

最终的效果图：（使用不同的遮罩图片以达到不同的流光效果）   
![这里写图片描述][70 1]

![这里写图片描述][70 2]

![这里写图片描述][70 3]

![这里写图片描述][70 4]

shader完整代码：（直接复制粘贴可用）

Shader "Unlit/Flash"
    {
        Properties
        {
            //主纹理
            _MainTex("Main Texture", 2D) = "white" {}
            //流光纹理
            _FlashTex("Flash Texture",2D) = "white"{}
            //遮罩纹理
            _MaskTex("Mask Texture",2D) = "white"{}
            //流光颜色
            _FlashColor("Flash Color",Color) = (1,1,1,1)
            //流光强度
            _FlashIntensity("Flash Intensity", Range(0, 1)) = 0.6
            //流光区域缩放
            _FlashScale("Flash Scale", Range(0.1, 1)) = 0.5
            //水平流动速度
            _FlashSpeedX("Flash Speed X", Range(-5, 5)) = 0.5
            //垂直流动速度
            _FlashSpeedY("Flash Speed Y", Range(-5, 5)) = 0
            //主纹理凸起值
            _RaisedValue("Raised Value", Range(-0.5, 0.5)) = -0.01
            //流光能见度
            _Visibility("Visibility", Range(0, 1)) = 1
        }
        SubShader
        {
            Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
            LOD 100
    
            Blend SrcAlpha OneMinusSrcAlpha
    
            Pass
            {
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #pragma multi_compile_fog
    
                #include "UnityCG.cginc"
    
                struct appdata
                {
                    float4 vertex : POSITION;
                    float2 uv : TEXCOORD0;
                };
    
                struct v2f
                {
                    float2 uv : TEXCOORD0;
                    UNITY_FOG_COORDS(1)
                    float4 vertex : SV_POSITION;
                };
    
                float4 _MainTex_ST;
                sampler2D _MainTex;
                sampler2D _FlashTex;
                sampler2D _MaskTex;
                fixed4 _FlashColor;
                fixed _FlashIntensity;
                fixed _FlashScale;
                fixed _FlashSpeedX;
                fixed _FlashSpeedY;
                fixed _RaisedValue;         
                fixed _Visibility;
    
                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
                {
                    //=====================计算流光贴图的uv=====================
                    //缩放流光区域
                    float2 flashUV = i.uv*_FlashScale;
                    //不断改变uv的x轴，让他往x轴方向移动
                    flashUV.x += -_Time.y*_FlashSpeedX;
                    //不断改变uv的y轴，让他往y轴方向移动
                    flashUV.y += -_Time.y*_FlashSpeedY;
    
                    //=====================计算流光贴图的可见区域=====================
                    //取流光贴图的alpha值
                    fixed flashAlpha = tex2D(_FlashTex, flashUV).a;
                    //取遮罩贴图的alpha值
                    fixed maskAlpha = tex2D(_MaskTex, i.uv).a;
                    //最终在主纹理上的可见值（flashAlpha和maskAlpha任意为0则该位置不可见）
                    fixed visible = flashAlpha*maskAlpha*_FlashIntensity*_Visibility;
    
                    //=====================计算主纹理的uv=====================
                    //被流光贴图覆盖的区域凸起（uv的y值增加）
                    float2 mainUV = i.uv;
                    mainUV.y += visible*_RaisedValue;
    
                    //=====================最终输出=====================
                    //主纹理 + 可见的流光
                    fixed4 col = tex2D(_MainTex, mainUV) + visible*_FlashColor;
    
                    UNITY_APPLY_FOG(i.fogCoord, col);
                    return col;
                }
                ENDCG
            }
        }
    }

觉得麻烦的也可以下载完整demo资源，包含LOGO贴图和示例场景：

[https://download.csdn.net/download/qq992817263/10595536][https_download.csdn.net_download_qq992817263_10595536]

[https_blog.csdn.net_qq992817263_article_details_81562513]: https://blog.csdn.net/qq992817263/article/details/81562513
[70]: /images/20220516/5f34d40e18024c25aff627ffef78da20.png
[70 1]: /images/20220516/96346ad4de394f99a528e9601f6d516d.png
[70 2]: /images/20220516/6543d1b1cb744ac4a4ac5e0a9b34c574.png
[70 3]: /images/20220516/0e63f0e88dc0428a820b23ab300d7742.png
[70 4]: /images/20220516/d2013a4498b046a181a2bf1f6c353ab6.png
[https_download.csdn.net_download_qq992817263_10595536]: https://download.csdn.net/download/qq992817263/10595536