4. Gerstner波形和FFT波形模拟水

视频介绍

大家好。前面两节课，我们讲了平面水的效果设置，以及如何绑定真实的数据。今天，我们就来看看山海鲸中的第二种水——也就是所谓的波形模拟水。

实际上，波形模拟水和平面水有很多相似的地方。比如说，假设我们要去设置一个深度，用数据绑定，那么它们是一样的。所以，在波形模拟水中，我就不单独再开一节课教大家数据设置了，大家参照平面水的设置即可。

而且，波形模拟水本质上也是用一个平面，唯一的区别就在于这个平面的顶点非常多。我们可以先看一下现在这个平面水的一个平面。我们把整个场景切成线框图，可以看到这个平面非常简单，它只有四个顶点，是一个正方形，由两个三角面组成。这样一个非常简单的平面，好处当然是它的性能损耗很低，一共只有这么几个顶点，对于GPU的压力就非常小。但是，波形模拟水是需要每一个顶点都升高或者降低，那么对于它来说，就需要更加密集的顶点。

首先，把这个平面去掉，我们一起来看一下波形模拟水该如何去设置。

波形模拟水的设置，实际上比平面水更加简单一点。我们首先点击到地表，可以看到这里有水体，水体里面有几种不同的水体。这几种不同水体其实是非常类似的，唯一的区别就是它的生成方式不一样。比如说，湖泊是通过点一圈点出来的，海洋就是纯粹的一个平面。那么这几种水体，就留给大家自己去尝试。我们今天先看看最简单的海洋。

我们移动到画面中，特别说一下刚刚为什么没有出现海洋，是因为前面把地表整体的可见度开关给关了。我们重新添加一下，现在把它打开。因为前面给大家演示浅水模拟的时候，需要把它隐藏掉。重新添加一下，在地表，然后点击海洋，一点，海洋就出来了。其实是一个非常简单的过程，它比水的材质的设置还要简单一些。

这个旋转可以适当调整一下，因为我们的旋转是带吸附的，所以有的地方可能感觉好像有点难拉，它实际上是一个整数吸附，比如说15度、30度，它会吸附一下。水拉上来之后，实际上它所有的功能就都带了。但是前提条件大家还是要记得：首先，场景中SSR的开关要打开；第二，整个天空中的环境贴图要选择天空，这样它才能有反射。如果把天空叉掉了，可以看到，即使是这种波形模拟水，也会显得不那么好看了。所以，对于水来说，最重要的就是要把反射打开。

我们来简单看一下波形模拟水和平面水的最大区别。首先，它在整个岸边会自动有这种岸边白沫的效果，就是仿造浪打在岸边上的这样一个感觉。不仅是在岸边有，假设在整个画面中放一个船，找一个交通工具放一艘船，我们放一艘船，然后把这艘船稍微往水下去淹没一点点，就可以看到这艘船的岸边也会自动有一些白沫，浪打在船的边上的这种感觉。到这边来可能更明显一点，这个是整个水的材质自动赋予的。当然，大家如果不喜欢这个岸边白沫，也可以直接把它关掉，这个强度都是可以调整的，这个根据大家真实的情况。比如说，像这种相对平静的湖面，可能并不是海边的时候，我们可能会把它调淡一些，就是并不需要那么强烈的岸边白沫。

第二，就是我们可以看到在浪的尖端的时候，也会有个白沫，这个我们称为浪尖白沫。同样，这个也是可以去调掉的。这两个相对比较简单，我们直接就可以看到它，并且直接去设置它。

另外还有一个，我们可以看到透明度，这个可以说是整个这种波形模拟水的材质的“飞升”。当然，它的这个“飞升”也是带来性能的一定的消耗。那这个点在什么地方呢？首先就可以看到，它是可以把底下的这个东西透过来的，这是第一点。第二点，它透过来的这个东西，还会随着水的波动进行一个散射。建在这里可能感觉不出来，我们把这个房子移进去，大家可能会感觉到更明显一点。可以看到，同样的在水面上和水面下的这个玻璃，它会形成一种整体的散射效果，这个就大大增强了水的真实性。那么这个散射，它是一个自动的效果，但是散射和折射，是有不一样的颜色设置的，我们一会再说。

首先看一下，这里有最大透明度。当我们的透明度越高，我们可以看到的水面越清澈，那么这个散射的效果就会越明显。可以看到这个水在很深很深的地方，都会很清澈。我们可以看到水很深的地方，这样整个的水就显得很清澈。那如果把这个调低，那整个的水就会显得相对浑浊，可以看到这个水就相对浑浊了。这个大家根据自己的真实的水的情况来，比如说我们到一个特别特别美的海边，那它的水非常清，那么它就应该透明度很高。比如说假设是洪水，那它水应该很浑浊，那这个透明度就应该很低。这个大家根据真实的水去调整。

那既然讲到了洪水，我们还是在平面水的时候讲到洪水，只需要把基础色去调调就行了。那在这个里面，它就会相对比较复杂，它有两个颜色，一个叫折射颜色，一个叫散射颜色。这个是什么意思呢？折射颜色就是当太阳光打进来，然后直接反射到眼睛里面的颜色；而散射颜色是太阳光打进水中，它在水中弹弹弹，最后再出来这个颜色。这两个颜色综合组成了整个水的颜色。这个说起来，可能相对比较理论，大家自己调一下就行了。

假设散射颜色对刚刚的波纹反应是最大的，比如说我把它调成黄色，可以看到水深的地方，它就显得很黄了。但是水浅的地方，其实还是显得有一点点蓝，像我们在海边，一会深蓝一会浅绿的那种颜色，其实是由水深决定的，水深就是由散射颜色和折射颜色的不同组合决定的。那假设把折射颜色也调成黄色，可以看到，那么整个的水就呈现出一种浑浊的态势了。当然现在它依然还是很清澈，让我们把它改成1，那这个我们可能就会去仿造一个洪水的颜色。当然我们可以再细调一下，这个水还是比较难调的，因为它有两个颜色的组合。洪水可能偏黄一些，这个大家要根据自己真实的情况去调整。可能这样就是一种江水的颜色了。

这个就是整个的这样一个水面，就是这种波形模拟水。我们可以看到波形模拟水，因为它是真实的波形，它边上这个岸边也是非常非常的不生硬的，它会不断地波动。

最后，我们再看一下，这还有个波形种类。波形种类目前有两种，一种叫Gerstner波，一种叫FFT（FFT也就是快速傅里叶变换的一个缩写）。正常情况下，我们是不推荐大家开FFT的。这里得说一下，我们是使用WebGL，我们可以看到这里是一个Web的画面中，我们在Web中，WebGL里面是不支持很多的一些技术去实现FFT的，特别重要的一支computer shader。那我们在WebGL中，是用一个非常hack的方式去实现的，因此它性能相对会差一些。如果你的画面中有很多很多的消耗性的东西，并且你的硬件不够强，是不建议开FFT的。我们可以开看一下，FFT的水，它整个的画面是更加的真实，但是可以看到，因为性能就直接掉到十几了，所以整个画面显得一顿一顿的。除非有非常非常好的显卡，否则我不建议大家去开FFT。但是有的时候你去看一下，开了FFT之后，这种非常真实的画面效果，会大大提升这个画面的真实感。那我们这里还是用Gerstner。

我们最后再看一下，因为我们前面就说了，它跟平面水非常类似，我们可以看一下，它这样子的上下移动，跟平面水是一样的。那它唯一的区别就在于它的顶点数。我们开篇就看了平面水的顶点，我们来看一下这个波形模拟水的顶点。同样的点击到场景，切换到线框，可以看到波形模拟水，它的顶点这个网格是非常密集的。这样一个密集的网格，我们在每一个动画中，其实都会去不断地调整这个网格的高度，每个顶点的高度，这样才能造成真实的高度的变化。

今天这节课我们给大家一起看了一下波形模拟水的设置。它实际上是平面水的一个升级版，主要升级在两个地方。第一个地方，就是整个渲染的效果，不仅增加了散射、折射、透明度，还有这种折射的波光粼粼的这样的一个变化。同时我们还增加了岸边白沫、浪尖白沫一些水的装饰的渲染效果，会让整个水更加的真实。其他的都跟平面水是非常类似的，它也是可以通过我们在平面水那节课教的方式去抬升和下压水的高度。唯一的区别就是，它的顶点非常非常密集。

今天这节课就到这里，谢谢大家。