共计 3646 个字符，预计需要花费 10 分钟才能阅读完成。
前言
皮皮最近接到了一个小需要：
???? 美术小姐姐：皮皮皮皮，你能不能做奶茶？
???? 我：？？？
???? 美术小姐姐：就是那种，奶茶的轮廓加上动静水波纹~
???? 我：吓死我还认为让我做喝的奶茶 …
???? 美术小姐姐：炒鸡多图片都须要这种成果，用动画的话工作量太大了！
???? 我：波浪成果是吧，小意思，一个月的奶茶就够了，或者扫码提需要~
???? 美术小姐姐：皮？????????????
???? 我：卒~
俗话说：遇事不决，量子力学 写虽得儿。
依据我多年喝奶茶的教训，像这种成果用 Shader 做就再简略不过了，最终的成果如下：
趁此机会，本篇文章就来与小伙伴们分享动静波浪 Shader 的原理和制作思路吧。
要留神的是，这是一篇偏入门的文章，写得会绝对比拟具体，尽量让不懂 Shader 的小白也能够看懂，这也是我写文章的一贯格调。
好了，话不多说，进入正题~
注释
???? 整体思路
看到波浪的体现特点我第一工夫想到的就是正弦曲线（或者说是正弦波，又让我想起了示波器）。
???? 正弦曲线（Sinusoid）
正弦曲线 是三角函数中的一种正弦（Sine）比例的曲线。正弦曲线体现为一条波浪线，形态犹如海上完满的波浪。
规范的正弦函数公式为：
y = sin(x)
正弦函数属于周期函数，其值域为 [-1, 1]。
如下图就是一个纯正规范的正弦曲线：
而个别咱们罕用的正弦曲线公式为：
y = A · sin(ωx ± φ) + k
这条公式比规范公式多了几个常数，含意如下：
A：振幅（Amplitude），曲线最高点与最低点的差值，体现为曲线的整体高度ω：角速度（Angular Velocity），管制曲线的周期，体现为曲线的严密水平φ：初相（Initial Phase），即当x = 0时的相位，体现为曲线在坐标系上的程度地位k：偏距（Offset），体现为曲线在坐标系上的垂直地位
相位（Phase）：上方公式中的
ωx±φ局部称为相位，相位产生在周期性的静止之中，最间接的了解就是角度。
☕稍加考虑
有了公式之后，咱们能够尝试调整其中的常数来扭转函数曲线的状态。
在查看下方的示例时，请尝试将 曲线状态的变动 与图中右上角公式的变动 关联起来。
扭转曲线的高度
咱们能够调整常数 A（振幅）来扭转曲线的值域（值域为 [-A, A]）：
扭转曲线的周期
咱们能够调整常数 ω（角速度）来扭转曲线的周期：
扭转曲线的程度地位
咱们能够调整常数 φ（初相）来扭转曲线的程度地位：
多说一句
其实对于“曲线的程度地位”这个形容是不太精确的，因为初相实际上扭转的是当 x = 0 时的相位，也就间接影响函数曲线在 x = 0 处的地位。
所以说曲线的地位并没有真正扭转，而只是曲线的状态产生了扭转。
然而因为正弦曲线的周期性特点，曲线的这种状态变动看起来像是曲线进行了位移。
扭转曲线的垂直地位
咱们能够调整常数 k（偏距）来扭转曲线的垂直地位：
???? 入手实现
明确了正弦曲线的个性之后，接下来咱们须要做的就是在代码中使用正弦函数。
慢着！正弦曲线的确如海上完满的波浪般柔美，然而正弦曲线是动态的，咱们要的波浪是动静的啊！
???? 如何让曲线动起来
别慌！还记得咱们能够调整 初相 来扭转曲线的“程度地位”吗？
既然如此，咱们能够给初相退出 工夫因素 ，使得 y 值能够随着工夫的减少产生 周期性变动，看起来就像是曲线在进行“程度位移”。
就像这样：
失去新的公式
退出工夫因素 t 后的曲线公式：
y = A · sin(ωx ± φt) + k
????On Shadertoy
小贴士：因为 GLSL ES 没有方法进行调试，所以写 Shader 时能够先在 Shadertoy 中编写并在线预览，显著提高效率。
所有尽在正文中，简略具体且直观。
主函数代码如下：
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{// 将像素坐标归一化（区间 [0.0, 1.0]）// iResolution 是 Shadertoy 提供的视口分辨率全局变量（类型：vec3）vec2 uv = fragCoord / iResolution.xy;
// 振幅（管制波浪顶端和底端的高度）float amplitude = 0.05;
// 角速度（管制波浪的周期）float angularVelocity = 10.0;
// 频率（管制波浪挪动的速度）float frequency = 10.0;
// 偏距（设为 0.5 使得波浪垂直居中于屏幕）float offset = 0.5;
// 初相位（正值体现为向左挪动，负值则体现为向右挪动）// iTime 是 Shadertoy 提供的运行工夫全局变量（类型：float）float initialPhase = frequency * iTime;
// 代入正弦曲线公式计算 y 值
// y = Asin(ωx ± φt) + k
float y = amplitude * sin((angularVelocity * uv.x) + initialPhase) + offset;
// 辨别 y 值高低局部，设置不同色彩
vec4 color = uv.y > y ? vec4(0.0, 0.0, 0.0, 1.0) : vec4(0.0, 0.7, 0.9, 1.0);
// 输入到屏幕
fragColor = color;
}预览成果如下（???? 是不是有内味儿了）：
在线预览：https://www.shadertoy.com/view/ttSfRh
????On Cocos Creator
咱们次要关注片段着色器局部，这里就不展现整个 Effect 文件的代码了，间接上传送门吧。
Effect 文件：https://gitee.com/ifaswind/eazax-ccc/blob/master/resources/effects/eazax-sine-wave.effect
代码外围其实就是套用了公式，咱们代码正文一起看吧。
所有尽在正文中，简略具体且直观。
片段着色器代码如下：
CCProgram fs %{
precision highp float;
// 引入 Cocos Creator 内置的全副变量
#include <cc-global>
// 顶点色彩（来自顶点着色器）in vec4 v_color;
// UV 坐标（来自顶点着色器）in vec2 v_uv0;
// 纹理
uniform sampler2D texture;
// 自定义属性
uniform Properties {
float amplitude; // 振幅
float angularVelocity; // 角速度
float frequency; // 频率
float offset; // 偏距
};
void main () {
// 保留顶点色彩
vec4 color = v_color;
// 叠加纹理色彩
color *= texture(texture, v_uv0);
// 间接抛弃本来就通明的像素
if (color.a == 0.0) discard;
// 初相位（正值体现为向左挪动，负值则体现为向右挪动）// cc_time 是 Cocos Creator 提供的运行工夫全局变量（类型：vec4）float initiaPhase = frequency * cc_time.x;
// 代入正弦曲线公式计算 y 值
// y = Asin(ωx ± φt) + k
float y = amplitude * sin(angularVelocity * v_uv0.x + initiaPhase) + offset;
// 抛弃 y 值以上的像素（左上角为原点 [0.0, 0.0]）if (v_uv0.y < y) discard;
// 输入色彩
gl_FragColor = color;
}
}%运行成果如下：
应用 cc.tween 动静扭转高度（偏距）实现波浪进度条：
cc.tween(this.sineWave)
.to(3, { height: 1})
.to(0.5, { amplitude: 0})
.start();
在线预览：https://ifaswind.gitee.io/eazax-cases?case=sineWave
SineWave 组件：https://gitee.com/ifaswind/eazax-ccc/blob/master/components/effects/SineWave.ts
专题
《一起学 Shader》这个专题断更了一段时间，很对不起小伙伴们，是时候续上了????
《一起学 Shader》
《Shader 入门：GLSL ES（简介和根本语法）》
《Shader 入门：GLSL ES（数据类型）》
《Shader 入门：GLSL ES（运算符和限定符）》
传送门
微信推文版本
集体博客：菜鸟小栈
开源主页：陈皮皮
Eazax-CCC 游戏开发脚手架
Eazax-CCC 示例在线预览
更多分享
《为什么抉择应用 TypeScript？》
《高斯含糊 Shader》
《一文看懂 YAML》
《Cocos Creator 性能优化：DrawCall》
《互联网经营术语扫盲》
《在 Cocos Creator 里画个炫酷的雷达图》
公众号
???? 菜鸟小栈
???? 我是陈皮皮，这是我的集体公众号，专一但不仅限于游戏开发、前端和后端技术记录与分享。
???? 每一篇原创都十分用心，你的关注就是我原创的能源！
Input and output.