Unity Shader 之 带遮罩Mask的流光效果的简单实现

Unity Shader 之 带遮罩Mask的流光效果的简单实现

 

目录

Unity Shader 之 带遮罩Mask的流光效果的简单实现

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、关键代码

七、附录贴图


 

一、简单介绍

Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言,“赋予程序员灵活而方便的编程方式”,并“尽可能的控制渲染过程”同时“利用图形硬件的并行性,提高算法效率”。

带遮罩的流光效果,流光效果只在需要的mask 部分进行,当然可以根据自己的需要调整。

 

二、实现原理

1、通过流光贴图和流光Mask 的通道(rgba)的乘法运算,得到流光范围;

2、根据时间,动态 uv 增加实现流光贴图的流光;

3、与主贴图的效果叠加,实现最终效果;

 

三、注意事项

1、注意图片是否带 alpha 通道(本节的 主贴图和mask贴图 jpg 格式,流光贴图 png 格式)

2、流光方向和形式根据自己需要调整

 

四、效果预览

 

五、实现步骤

1、新建Unity场景,在场景中添加 plane,如下图

 

2、向工程中导入素材贴入,如下图

 

3、添加 Shader 脚本,和建立对应材质,如下图

 

4、编写好Shader,编译正确,把材质对应增加贴图和赋值,如下图

 

5、把材质赋值给 Plane,运行场景,效果如下

 

六、关键代码

Shader "Custom/MaskFlash"
{
    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
        //主纹理凸起值(这里主要是 y 上的简单上下偏移效果)
        _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值(注意要是png 带alpha通道的图片)
                fixed flashAlpha = tex2D(_FlashTex, flashUV).a;
                //因为我是黑底白罩的mask jpg ,所以取rgb任意一个都行(如果是png,可以取遮罩贴图的alpha值)
                fixed maskAlpha = tex2D(_MaskTex, i.uv).r;
                //最终在主纹理上的可见值(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
        }
    }
    FallBack "Diffuse"
}

 

七、附录贴图

 

 

发布了152 篇原创文章 · 获赞 59 · 访问量 12万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 岁月 设计师: pinMode

分享到微信朋友圈

×

扫一扫,手机浏览