(1)波浪的第一種實(shí)現(xiàn)方式：滾動(dòng)頂點(diǎn)。在頂點(diǎn)著色器中，采用正弦（余弦）函數(shù)，讓頂點(diǎn)按規(guī)律抬高降低，從而我們就看到了對(duì)應(yīng)的波浪效果。

播放滾動(dòng)采用的是正弦函數(shù)來(lái)實(shí)現(xiàn)效果。
公式依據(jù)：
y = asin(bx + c)
y表示正弦值，在本示例中表示 頂點(diǎn)坐標(biāo)在y軸上的偏移量
a表示正弦值的幅度，因?yàn)槌Ｒ?guī)正弦值[-1,1]
x表示參數(shù)，本示例中表示時(shí)間
b表示時(shí)間流逝速度
c表示x軸上的偏移量，在本示例中表示頂點(diǎn)在x軸上的坐標(biāo)值

shader實(shí)現(xiàn)如下:

///
/// 做一個(gè)波浪滾動(dòng)的效果，依據(jù)公式: y = a*sin(bx + c)
/// y 表示正弦的值（本示例中頂點(diǎn)坐標(biāo)在y軸上的偏移）, a可以作為振幅，x在本示例中表示時(shí)間，b表示時(shí)間流逝速度，c表示坐標(biāo)軸上的偏移(也就是本示例中的頂點(diǎn)在x軸上的坐標(biāo))
Shader "Shader/Shader_wave"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        //振幅a
        _Range("Range",float) = 1.0
        //時(shí)間流逝速度
        _Speed("Speed",float) = 1.0
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Speed;
            float _Range;

            v2f vert (appdata v)
            {
                v2f o;
                //當(dāng)前的時(shí)間*流逝速度
                float timer = _Time.y*_Speed;
                //y軸上的偏移值
                float offsety = _Range*sin(timer + v.vertex.x);
                //頂點(diǎn)坐標(biāo)的y實(shí)現(xiàn)偏移
                v.vertex.y = v.vertex.y + offsety;
                //模型空間->世界空間->投影空間
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

image.png

image.png

（2）第二種波浪效果實(shí)現(xiàn)方式：滾動(dòng)UV
采集某個(gè)像素的時(shí)候，按照正弦(余弦)規(guī)律，將UV值按照波動(dòng)增加，這樣某個(gè)像素點(diǎn)就會(huì)規(guī)律的采集原始uv位置前后的像素值。
該方案可以實(shí)現(xiàn)波紋效果（扔一個(gè)小石子到水里，生成一圈一圈的漣漪）

1.首先確定一個(gè)中心點(diǎn)，用作波紋的中心。（默認(rèn)中心點(diǎn)是(0.5,0.5)）
2.按照時(shí)間計(jì)算波紋的相對(duì)偏移量

image.png

從圖上我們可以看出，某個(gè)uv取值，只是取周圍一定范圍之內(nèi)的。
取uv的時(shí)候，原始uv加上一個(gè)確定方向的偏移量，是為了生成以確定圓心為中心的漣漪。
波浪想過(guò)是如何形成的呢？我認(rèn)為是視覺錯(cuò)覺。

Shader "Unlit/Shader_Wave"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Range("Range",float) = 1.0
        _Speed("Speed",float) = 1.0
        //設(shè)定的漣漪中心位置
        _CenterX("CenterX",float) = 0
        _CenterY("CenterY",float) = 0
        //
        _WaveWidth("WaveWidth",float) = 0.5
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag


            #include "UnityCG.cginc"

            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;
            float _Speed;
            float _Range;
            float _CenterX;
            float _CenterY;
            float _WaveWidth;
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            float GenWave(float range, float len, float width, float timer)
            {
                float wave = sin(len*width + timer);
                //將波峰波谷控制在 0 - 1
                //wave = (wave + 1)*0.5f;
                //振幅
                wave = wave * range;
                return wave;
            }
            

            fixed4 frag (v2f i) : SV_Target
            {
                float2 tempuv = i.uv;
                //默認(rèn)0.5，0.5為中心點(diǎn)，可以根據(jù)這個(gè)位置做偏移,得到最新的中心點(diǎn)
                float2 center = float2(0.5 + _CenterX, 0.5 + _CenterY);
                //uv與圓心的偏移向量
                float2 pos = float2(center - tempuv);
                //距離圓心的距離
                float len = length(pos);
                float timer = -_Time.y*_Speed;
                //原理：該點(diǎn)的uv，會(huì)隨著時(shí)間推移，周期性的取 
                float wave = GenWave(_Range, len, _WaveWidth, timer);
                //UV的偏移量，以圓心為中點(diǎn)的，這樣才能做出一個(gè)圓形的波浪
                float2 offsetuv = normalize(pos)*wave;
                //取像素信息:tempuv 是原始的uv位置， offsetuv 是某個(gè)時(shí)間點(diǎn)該uv對(duì)應(yīng)的偏移量
                                fixed4 col = tex2D(_MainTex, tempuv + offsetuv);
                                return col;
            }
            ENDCG
        }
    }
}