Unity Shader学习笔记 - 用UV动画实现沙滩上的泡沫

这个泡沫效果来自远古时代的Unity官方海岛Demo， 原效果直接复制3个材质球在js脚本中做UV动画偏移，这里尝试在shader中做动画并且一个pass中完成：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

//岸边浪花泡沫
//CloudLty 2016-9-6
Shader "Custom/foams2"
{
    Properties//标记所以外部变量，让该变量按标记显示在编辑器中
    {
        _TintColor      ("Tint Color (RGBA)", Color) = (1,1,1,1)
        _MainTex        ("Texture (RGB)", 2D) = "white" {}
        _Mask           ("Mask", 2D) = "white" {}
        _AlphaDelay     ("Alpha Delay", Range(-1,1)) = 0
        _Speed          ("Time Scale", Range(0,1)) = 0.25
        _WaveRange      ("Wave Range", Range(-1,1)) = 0.6
        _Layer1OffsetX  ("Layer1 Offset X", Range(-2,2)) = 0
        _Layer2OffsetX  ("Layer2 Offset X", Range(-2,2)) = 0
        _Layer3OffsetX  ("Layer3 Offset X", Range(-2,2)) = 0
        _Layer1OffsetY  ("Layer1 Offset Y", Range(-2,2)) = 0
        _Layer2OffsetY  ("Layer2 Offset Y", Range(-2,2)) = 0
        _Layer3OffsetY  ("Layer3 Offset Y",Range(-2,2)) = 0

    }
    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }
        LOD 100

        Pass
        {
            ZWrite off
            Blend srcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert     //顶点着色器 类似于宏定义，告诉Unity这个函数名是顶点做色器函数
            #pragma fragment frag   //片段着色器

            #include "UnityCG.cginc" //类似头文件？主要是Untiy提供的一些常用函数 貌似不写编译时也会自动包含进来

            //顶点着色器输入结构体
            struct appdata
            {
                float4 vertex : POSITION;   //POSITION输入语义，Unity将顶点坐标提交于此变量
                float4 uv : TEXCOORD0;      //TEXCOORD0，Unity将模型第一套UV提交于此变量
            };

            //顶点着色器输出结构体 （反正会给片段做色器使用）
            struct v2f
            {
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;//输出语义
                float4 uv1 : TEXCOORD0;
                float4 uv2 : TEXCOORD1;
                float4 uv3 : TEXCOORD2;
                float2 uv4 : TEXCOORD3;
            };

            //外部变量声明
            uniform sampler2D   _MainTex;
            uniform float4      _MainTex_ST;
            uniform sampler2D   _Mask;
            uniform float4      _Mask_ST;
            uniform half4       _TintColor;
            uniform float       _AlphaDelay;
            uniform float       _Speed;
            uniform float       _WaveRange;
            uniform float       _Layer1OffsetX;
            uniform float       _Layer2OffsetX;
            uniform float       _Layer3OffsetX;
            uniform float       _Layer1OffsetY;
            uniform float       _Layer2OffsetY;
            uniform float       _Layer3OffsetY;

            //UV动画函数
            float2 DelayOffsetUV(float2 uv, float offset, float offset_y)//输入UV 和偏移量（x，y），外部变量控制速度，范围
            {
                float pi = 3.1415926536f;
                float sintime = sin(_Time.y * _Speed * pi + offset * 0.5f * pi);//余弦函数使UV来回移动,
                float u = (sintime + 1) * 0.5f * _WaveRange + (1 - _WaveRange);
                uv.x += u;
                uv.y += offset_y;
                return uv;
            }

            //顶点着色器
            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);

                //逐层偏移
                float2 inuv = v.uv;
                // layer1 uv offset
                float2 uv_tex1 = DelayOffsetUV(inuv, _Layer1OffsetX, _Layer1OffsetY);
                o.uv1.xy = TRANSFORM_TEX(uv_tex1, _MainTex);

                // layer1 uv offset
                float2 uv_tex2 = DelayOffsetUV(inuv, _Layer2OffsetX, _Layer2OffsetY);
                o.uv1.zw = TRANSFORM_TEX(uv_tex2, _MainTex);

                // layer1 uv offset
                float2 uv_tex3 = DelayOffsetUV(inuv, _Layer3OffsetX, _Layer3OffsetY);
                o.uv2.xy = TRANSFORM_TEX(uv_tex3, _MainTex);

                //每一层的Mask（透贴）偏移，偏移量与tex一致，并可以用_AlphaDelay微调
                // mask1 uv offset
                float2 uv_mask1 = DelayOffsetUV(inuv, _Layer1OffsetX - _AlphaDelay, _Layer1OffsetY);
                o.uv2.zw = TRANSFORM_TEX(uv_mask1, _Mask);

                // mask2 uv offset
                float2 uv_mask2 = DelayOffsetUV(inuv, _Layer2OffsetX - _AlphaDelay, _Layer2OffsetY);
                o.uv3.xy = TRANSFORM_TEX(uv_mask2, _Mask);

                // mask3 uv offset
                float2 uv_mask3 = DelayOffsetUV(inuv, _Layer3OffsetX - _AlphaDelay, _Layer3OffsetY);
                o.uv3.zw = TRANSFORM_TEX(uv_mask3, _Mask);

                UNITY_TRANSFER_FOG(o,o.vertex);

                o.uv4 = inuv;
                return o;
            }

            //获取泡沫逐渐出现，向岸边移动，开始折返并逐渐消失的透明度值
            fixed GetDisappearAlpha(float delay)
            {
                float PI = 3.1415926536f;
                float t = _Time.y *_Speed * PI + delay * 0.5* PI + 1.2 * PI;
                fixed a = (sin(t)+1)*0.5;
                return a*a;
            }

            //将两层半透明的颜色合并，获取合并后的RGBA
            fixed4 TwoColorBlend(fixed4 c1, fixed4 c2)
            {
                fixed4 c12;
                c12.a = c1.a + c2.a - c1.a * c2.a;
                c12.rgb = (c1.rgb * c1.a * (1 - c2.a) + c2.rgb * c2.a) / c12.a;
                return c12;
            }

            //片段着色器
            fixed4 frag(v2f i) : SV_Target //参数为输入结构体，语义就是输出到什么地方
            {
                fixed pi = 3.1415926536f;

                //get rgb
                fixed4 c1 = tex2D(_MainTex, i.uv1.xy);
                fixed4 c2 = tex2D(_MainTex, i.uv1.zw);
                fixed4 c3 = tex2D(_MainTex, i.uv2.xy);

                //get alpha
                c1.a = tex2D(_Mask, i.uv2.zw) * GetDisappearAlpha(_Layer1OffsetX);
                c2.a = tex2D(_Mask, i.uv3.xy) * GetDisappearAlpha(_Layer2OffsetX);
                c3.a = tex2D(_Mask, i.uv3.zw) * GetDisappearAlpha(_Layer3OffsetX);

                //layer1 + layer2
                fixed4 c12 = TwoColorBlend(c1,c2);
                //layer12 + layer3
                fixed4 c123 = TwoColorBlend(c12,c3);

                return c123 * _TintColor;
            }
            ENDCG
        }
    }
}