OpenGL ES 实现动态（水波纹）涟漪效果

该原创文章首发于微信公众号：字节流动

水波纹效果原理

最近一个做视频滤镜的朋友，让我给他做一个动态水波纹效果，具体就是：点击屏幕上的某一位置，然后波纹以该位置为中心向周围扩散。接到这个需求，一开始就尝试着在 3D 坐标系（x,y,z）中利用正弦或余弦函数去修改 z 分量的值，但是这样出来的效果太假了，压根就没有水波纹的真实感。

然后，我就乖乖地去研究下物理世界中的水波纹是怎样形成的。你别说，我还真接了一盆水，坐在旁边观察了半天。

最后观察出，物理世界中水波纹的特点如上图所示，从水面的正上方往下看，在凹面上方观察到的是缩小效果，而在凸面上方观察到的是放大效果，然后整个水波纹效果就是放大和缩小效果的交叉排列。

因此，我们得出结论，水波纹（涟漪）效果实际上就是一组组相互交替、幅度向外部逐渐减小的缩小放大效果组合。本文将水波纹模型简化成一组放大和缩小效果随时间逐步向外部偏移。