水面涟漪的简单制作方法

小伙伴们好呀，时隔许久，汪汪又回来了。其实很久之前就想写文章了，但苦于一直没有时间，也是因为最近太忙了，身上就有三个项目，虽然每个项目事情都不是太多，但一起来的时候真的很要命，做完那些事，回家后累的要死，吃完饭就想放空自己(Do Nothing)所以一直拖到现在。虽然没时间写文章，但不代表汪汪没有在进步，汪汪还是学到了很多很多。今天晚上回家后，决定不能放纵自己，决定重新开始写作！！

这次给小伙伴们带来一个很简单的水面涟漪做法，这个是我一开始学的时候，大佬给我的一个思路，这个方法有好处也有坏处，好处就是实现简单，坏处就是动画不够自然，我们先来看看效果：

这个效果很适合新手来实现，更复杂的，就需要小伙伴们用数学公式来计算了，再配合自己制作的贴图，以及通道，就能实现很自然的效果，汪汪目前不展开讲述，如果小伙伴们想了解更多，汪汪会再后续更新进阶的实现方法，当然也要求小伙伴们有一定的Shader基本功。

此次效果，汪汪使用了Unity的ShaderGraph，只要小伙伴们了解一些shader基础，就能很快上手，推荐新手。但是汪汪平时学习，更多的是用它来体现一些思路，然后自己来Code，因为自己写的代码，更自由，更容易控制(毕竟大佬们的效果多半也是代码和公式啊。。。)，而且，如果掌握了手写Shader，会比较容易上手ShaderGraph，不知道内置节点？不要紧，自己造一个，然后替换，反正效果已经实现了(哈哈哈。。。)。

准备

此次效果完全由UV动画来实现，也就是FlipBook，已经知道的大佬们，就不用继续往下了，或者也可以看看，完善一下，回忆一下？ 我们需要一张法线贴图：

这是一个4x4的序列动画法线，通过FlipBook，来让其动起来，就可以实现酷炫的涟漪：

效果如下：

但是这样未免有点太假了，一看就很规则，这是大忌。

精益求精

我们还需要再来一次：

但这样还不够，我们还需要柔化：

最后经过这些步骤，再把法线混合，看到的就是这样的：

你以为这样就够了吗？远远不够，平的地方太平了，不自然，都能泛起涟漪了，水肯定不少吧：

加一层水的法线，再混合：

看看最终效果：

最后我们把法线和地表的法线混合就是最终的效果了：

结语

本次内容只是提供给小伙伴们一种实现的思路，这种效果的实现方法不唯一，得按照项目需求来定义，目前汪汪知道的就三种：

• 利用梯度值
• 利用粒子效果渲染到shader里
• FlipBook

如果小伙伴们还知道其他的实现方法，可以留言讨论，另外，本次案例中使用到的贴图，其实并没有现成的法线图，汪汪是通过一张黑白灰的矢量图，转换过来的：

由于网络上有现成的，汪汪这里就只总结规律：

希望本篇文章能帮到小伙伴们。