利用UnityShaderGraph制作卡通风格的水

本文系用户投稿，不代表机核网观点

大家好呀，最近有些闲情雅致准备研究一下Unity的Shader Graph，和大家分享一下研究成果吧。这个水系列的目前暂定分为七期。
第一期，我们讲利用Shader Graph来实现卡通水的波光效果。
第二期，我们将实现水的颜色根据水的深度来变化，以及水靠近其他物体时的泡沫效果。
第三期，我们来做水的折射和反射效果，让水底的东西看起来扭曲吧。
第四期，我们来做水面的波浪效果，让我们平整不动的水面动起来吧。
第五期，我会直接分享一个利用Vertex Fragment Shader制作的同样的水的Shader。
第六期，我们来说物体落水的涟漪效果和水花，以及在水中航行的船只的浪花和泡沫效果吧。
第七期，我们给水加上物理效果，让我们的船只在水中开始波澜壮阔的航行吧。
之前我在 利用Unity复刻PS1时代的画面 中也提到了一点点Shader的知识，感兴趣的可以去看看。
在开始之前，请确保你已经知道了Shader Graph最基本的操作方法。比如，如何安装URP或者HDRP，如何新建并打开Shader Graph，如何随意添加一个节点，如何新建Properties。不知道的其实自己摸索摸索或者百度一下就行了。
从波光效果开始
看看今天要实现的波光效果：

时至今日，大部分游戏中的大面积的水面，都是用一个平面做的。所以我们创建一个平面(Plane)来代表我们的水面。

然后我们新建一个PBR Graph和一个新的材质(Material)，将材质的Shader指定到你新建的Graph上，把材质赋给平面，然后打开PBR Graph。
首先，制作波光有好几种方式，但是这里我们要做卡通效果的水面，并且节省一点计算量的话，那我们从一张噪点图开始最好。Shader Graph为我们提供了三种基本的噪点图。

其中，Simple Noise 和 Gradient Noise 我用的是Tiling and Offset让他们动起来的，而Voronoi(泰森多边形)则自带了一个Offset。而且Voronoi中的各个噪点的移动非常的符合我们的要求，因为另外两个看起来就像是整个图在移动，而Voronoi则是每个噪点单独移动。我们可以利用Voronoi的黑点和黑点之间的白色部分来模拟波光效果。
于是，我们创建一个Voronoi节点，并让它的Offset和Time连接上，这样它就能动起来了。

然后，我们也可以给Time和Voronoi之间加上一个Multiply节点，也就是让时间乘上一个系数，这个系数我们可以在Properties中定义，这样我们就能得到一个可以随意调整移动速度的Voronoi了。我们也可以再定义一个Property，用来控制Cell Density，也就是图中这些像细胞一样的黑点的密度。

我们现在的这个噪点图看起来太不像波光了。我们需要增大黑点的范围，以及让黑点的周围更加的黑一些，让白色的区域减少。怎么实现呢？我们可以通过增加一个Power节点。

也许你会问了，为什么一个power节点就达到了我们要实现的效果了呢？这里我们可以讲解一下，Power指的是幂，也就是把一个数字进行多少次方。这里我们Power里的B给的是3，A给的是Voronoi，也就是他把Voroni里的每一个颜色的数值都进行了立方。
在Unity的一张灰度图中，0代表黑色，1代表白色，0和1之间的小数就是白与黑之间的灰色过渡。0³是0，1³是1，而中间的数字，遵循下面这张函数图。

也就是说，除了完全白色的区域，其他大部分颜色区域都会快速的向黑色靠近。也就营造出了视觉上的黑色区域扩大了的效果。我们可以再新建一个Property来托管我们的Power效果。
但是仔细观察，我们就发现了一个问题，这个黑与白之间的过渡还是有点太平滑了，我们卡通风的东西，就是要把平滑的过渡都去掉！来人，上Step。

可以看到，上了Step之后，过渡变得锐利了起来了，那这个Step又起到了什么做用呢？Step里有一个Edge（边缘），这个Edge的意思是，数值大于等于这个Edge的区域，他就直接给你全部调成1，小于Edge的区域，全部调成0，而1就是白色，0就是黑色。因此过渡变得锐利了起来，毕竟现在图上已经是非黑即白了。太棒了。我们把这个Edge也在Properties里给一个Property，让他可以在编辑器中被我们随意的调整。
接下来，我们只要把这个白色的部分的颜色改一改就好了，我们在Properties中新建一个Color，并将Mode调整为HDR。

HDR的做用是让颜色不仅仅只有一个颜色信息，还带上一个光线强度的信息。这样我们加上了Post Processing里的Bloom之后，你就能看到波光反射出来的强烈光线了。虽然其实是自己发射出来的，但是这并不是自发光。

接着我们把我们的颜色和我们之前的黑白图乘起来。

不过上图这个看不太出来，因为我调的是非常接近白色的蓝，其实稍微换个颜色就很明显了。

为什么只有白色的部分变蓝了，黑色部分没变呢？因为很简单，白色是1，黑色是0，任何数乘0得0，乘1得其本身啊。
然后现在我们光是做出了一个波光效果，我们把水本身的颜色也加上吧。

注意我们这里用的是Add节点。然后我们把颜色输出到PBR Master上的Albedo。并且我们点开设置，把Surface换成Transparent。

接着我们再在Property里面弄一个叫Alpha Vector1，让他默认是0.8，并让他连接上我们的PBR Master上的Alpha，这样我们的水就有透透的效果了。

回到游戏里来看看效果：

OK，现在我们还需要修改一点东西。
我们看到上图，波光是平均分布在整个水面上的。但是我想做一种类似池塘的效果，也就是水的中间部分波光多，四周少，因为到时候我们这个水的四周都和岸边接上之后。实际上我们的水在接近岸边的时候，波光会少一些，取而代之的是foam(泡沫，水沫)。
所以我们回到Voronoi节点所在的位置，新建一个Radial Shear节点并将它和Voronoi的UV连接。我们就能看到，Voronoi的中心被放大，而四周被压缩，形成了有点像鱼眼的效果。

Radial Shear(辐射状切变)做了什么呢？它获取了我们模型上的UV，然后它根据数学公式将我们的UV的中心放大，四周压缩。其中，UV控制我们输入哪个UV给他，默认就是UV0了。Center就是他以哪个点为中心来应用这种辐射状的切变。Strength就是切变的强度。Offset就是UV的偏移。

OK，现在我们的波光看起来有点围绕中心点的感觉了。
最后讲一下我做的对话台词编辑器上架Unity Asset Store了，这是让你通过可视化的方式，来编写多分支多选项的台词的工具。支持任何语言的本地化。并且不需要你编写一行代码就可以使用大量的对话特效。目前在商店获得五星好评。这里分享一下开发经过和完整的使用教程。
点此跳转到Unity商店。