(1)波浪的第一種實現(xiàn)方式：滾動頂點。在頂點著色器中巩那，采用正弦（余弦）函數(shù)诡宗，讓頂點按規(guī)律抬高降低，從而我們就看到了對應(yīng)的波浪效果巴比。
播放滾動采用的是正弦函數(shù)來實現(xiàn)效果轻绞。
公式依據(jù)：
y = asin(bx + c)
y表示正弦值，在本示例中表示 頂點坐標(biāo)在y軸上的偏移量
a表示正弦值的幅度佣耐，因為常規(guī)正弦值[-1,1]
x表示參數(shù)政勃，本示例中表示時間
b表示時間流逝速度
c表示x軸上的偏移量，在本示例中表示頂點在x軸上的坐標(biāo)值
shader實現(xiàn)如下:
///
/// 做一個波浪滾動的效果兼砖，依據(jù)公式: y = a*sin(bx + c)
/// y 表示正弦的值（本示例中頂點坐標(biāo)在y軸上的偏移）, a可以作為振幅奸远，x在本示例中表示時間，b表示時間流逝速度掖鱼，c表示坐標(biāo)軸上的偏移(也就是本示例中的頂點在x軸上的坐標(biāo))
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;
//當(dāng)前的時間*流逝速度
float timer = _Time.y*_Speed;
//y軸上的偏移值
float offsety = _Range*sin(timer + v.vertex.x);
//頂點坐標(biāo)的y實現(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）第二種波浪效果實現(xiàn)方式：滾動UV
采集某個像素的時候然走，按照正弦(余弦)規(guī)律，將UV值按照波動增加戏挡，這樣某個像素點就會規(guī)律的采集原始uv位置前后的像素值芍瑞。
該方案可以實現(xiàn)波紋效果（扔一個小石子到水里，生成一圈一圈的漣漪）
1.首先確定一個中心點，用作波紋的中心妥凳。（默認中心點是(0.5,0.5)）
2.按照時間計算波紋的相對偏移量
image.png
從圖上我們可以看出竟贯，某個uv取值，只是取周圍一定范圍之內(nèi)的逝钥。
取uv的時候屑那，原始uv加上一個確定方向的偏移量，是為了生成以確定圓心為中心的漣漪。
波浪想過是如何形成的呢持际？我認為是視覺錯覺沃琅。
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;
//默認0.5，0.5為中心點蜘欲，可以根據(jù)這個位置做偏移,得到最新的中心點
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對應(yīng)的偏移量
fixed4 col = tex2D(_MainTex, tempuv + offsetuv);
return col;
}
ENDCG
}
}
}
