实现波浪滚动效果

(1)波浪的第一种实现方式：滚动顶点。在顶点着色器中，采用正弦（余弦）函数，让顶点按规律抬高降低，从而我们就看到了对应的波浪效果。

播放滚动采用的是正弦函数来实现效果。
公式依据：
y = asin(bx + c)
y表示正弦值，在本示例中表示 顶点坐标在y轴上的偏移量
a表示正弦值的幅度，因为常规正弦值[-1,1]
x表示参数，本示例中表示时间
b表示时间流逝速度
c表示x轴上的偏移量，在本示例中表示顶点在x轴上的坐标值

shader实现如下:

///
/// 做一个波浪滚动的效果，依据公式: y = a*sin(bx + c)
/// y 表示正弦的值（本示例中顶点坐标在y轴上的偏移）, a可以作为振幅，x在本示例中表示时间，b表示时间流逝速度，c表示坐标轴上的偏移(也就是本示例中的顶点在x轴上的坐标)
Shader "Shader/Shader_wave"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        //振幅a
        _Range("Range",float) = 1.0
        //时间流逝速度
        _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;
                //当前的时间*流逝速度
                float timer = _Time.y*_Speed;
                //y轴上的偏移值
                float offsety = _Range*sin(timer + v.vertex.x);
                //顶点坐标的y实现偏移
                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）第二种波浪效果实现方式：滚动UV
采集某个像素的时候，按照正弦(余弦)规律，将UV值按照波动增加，这样某个像素点就会规律的采集原始uv位置前后的像素值。
该方案可以实现波纹效果（扔一个小石子到水里，生成一圈一圈的涟漪）

1.首先确定一个中心点，用作波纹的中心。（默认中心点是(0.5,0.5)）
2.按照时间计算波纹的相对偏移量

image.png

从图上我们可以看出，某个uv取值，只是取周围一定范围之内的。
取uv的时候，原始uv加上一个确定方向的偏移量，是为了生成以确定圆心为中心的涟漪。
波浪想过是如何形成的呢？我认为是视觉错觉。

Shader "Unlit/Shader_Wave"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Range("Range",float) = 1.0
        _Speed("Speed",float) = 1.0
        //设定的涟漪中心位置
        _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;
                //默认0.5，0.5为中心点，可以根据这个位置做偏移,得到最新的中心点
                float2 center = float2(0.5 + _CenterX, 0.5 + _CenterY);
                //uv与圆心的偏移向量
                float2 pos = float2(center - tempuv);
                //距离圆心的距离
                float len = length(pos);
                float timer = -_Time.y*_Speed;
                //原理：该点的uv，会随着时间推移，周期性的取 
                float wave = GenWave(_Range, len, _WaveWidth, timer);
                //UV的偏移量，以圆心为中点的，这样才能做出一个圆形的波浪
                float2 offsetuv = normalize(pos)*wave;
                //取像素信息:tempuv 是原始的uv位置， offsetuv 是某个时间点该uv对应的偏移量
                                fixed4 col = tex2D(_MainTex, tempuv + offsetuv);
                                return col;
            }
            ENDCG
        }
    }
}