(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
}
}
}
