Unity 水、流体、波纹基础系列（一）——纹理变形（Texture Distortion ）

目录	1 UV动画 1.1 滑动表面着色器 1.2 让UV流动 1.3 流动方向 1.4 定向滑动 2 无缝循环 2.1 混合权重 2.2 跷跷板 2.3 时间偏移 2.4 结合两个不同的扭曲 2.5 UV跳跃 2.6 分析跳跃 3 动画调整 3.1 平铺 3.2 动画速度 3.3 流动强度 3.4 流偏移 4 纹理化 4.1 抽象水纹 4.2 法线贴图 4.3 导数贴图 4.4 高度缩放 4.5 流量速度+ 收起

本文重点：

用一张流图纹理来调整UV坐标

创建一个无缝的动画循环

控制流体产生

使用导数纹理展示凹凸

1 UV动画

如果液体不动时，在视觉上是无法与固体区分开的。你看的到底是水，果冻还是玻璃杯呢？水池是结冰的吗？但可以肯定的是，如果干扰它并观察它是否会变形，以及变形多少就可以区分。仅从创建上看起来像流体的材质是远远不够的，实际上它必须要能动起来。否则，它就是看起来像是水的玻璃雕塑或已经结冰的水。当然，这对于一张照片来说已经足够了，但对于电影或游戏来说远远足够。

在大多数情况下，我们只希望表面由水，泥，熔岩或某种看起来像液体的神奇效果制成。它不需要是交互式的，只是在随意观察时看起来很像。因此，我们不需要进行复杂的水物理模拟。需要做的只是在常规材质中添加一些动画。这可以通过对用于纹理化的UV坐标进行动画处理来完成。

Valve的Alex Vlachos首先在SIGGRAPH2010演示文稿《 Portal 2中的水流》中公开详细描述了本教程中使用的技术。

1.1 滑动表面着色器

对于本教程而言，你可以重新建一个新项目，设置为使用线性色彩空间渲染。如果你使用的是Unity 2018，请选择默认的3D管道，而不是轻量级或HD。然后创建一个新的标准表面着色器。我们要通过扭曲纹理贴图来模拟流体的表面，因此将其命名为DistortionFlow。下面是新的着色器，其中删除了所有注释和不需要的部分。

为了易于查看UV坐标如何变形，可以使用如下测试纹理。

（UV测试纹理）

创建我们的着色器的材质，并将测试纹理作为其albedo贴图。将其tiling设置为4，以便我们可以看到纹理是如何重复的。然后使用此材质将四边形添加到场景中。为了获得最佳观看效果，请将其绕其X轴旋转90°，以使其在XZ平面中平放。这样可以轻松地从任何角度查看它。

（Distortion Flow材质在四边形上）

1.2 让UV流动

流体UV坐标的代码是通用的，因此我们将其放在单独的Flow.cginc包含文件中。它需要包含的只是一个具有UV和时间参数的FlowUV函数。它应该返回新的流体UV坐标。我们从最简单的位移开始，这只是将时间添加到两个坐标。

将此文件包含在我们的着色器中，并使用主要的纹理坐标和当前时间调用FlowUV，Unity通过_Time.y使其可用。然后使用新的UV坐标来采样我们的纹理。

（对角线滑动的UV）

当我们将两个坐标增加相同的数量时，纹理将沿对角线滑动。加上了时间之后，所以它从右上方滑动到左下方。并且由于我们为纹理使用默认的环绕模式，因此动画每秒循环一次。

仅当时间值增加时，动画才可见。当编辑器处于播放模式时就是这种情况，但是你也可以通过“场景”窗口工具栏启用“Animated Materials”来在编辑模式下启用时间进度。

（启用Animated Materials）

实际上，每次编辑者重新绘制场景时，素材使用的时间值都会增加。因此，当禁用“Animated Materials”时，每次你编辑某些内容时，纹理滑动都会有产生一点点。动画材质只会强制编辑器始终重绘场景。因此，仅在需要时才打开它吧。

1.3 流动方向

你可以使用速度矢量来控制流动的方向和速度，而不必总是沿相同的方向流动。因此可以将此矢量作为属性添加到材质。但是，我们仍然仅限于对整个材质使用相同的矢量，但这看起来像是的硬的物体表面在滑动。为了使某种东西看起来像流动的液体，除了一般移动之外，它还必须随时间局部变化。

通过添加另一个速度矢量来消除静态外观，使用该速度矢量第二次对纹理进行采样，然后将两个采样组合在一起。当使用两个略有不同的矢量时，我们最终得到一个变形纹理。但是，我们仍然仅限于以相同方式流动整个表面。对于开阔水域或直流而言，这通常就足够了，但在更复杂的情况下则不足。

为了支持更多有趣的流体效果，我们必须以某种方式改变整个材质表面的流体向量。最简单的方法是通过Flow 贴图。这是包含2D向量的纹理。这是一种纹理，在R通道中具有向量的U分量，在G通道中具有向量的V分量。它不需要很大，因为我们并不需要展示急剧的突然变化，依靠双线性滤波来来保持平滑。

（Flow 贴图）

该纹理是使用卷曲噪声创建的，在“噪波导数”教程（尚未翻译）中对此进行了说明，但是创建纹理的细节并不重要。它包含多个顺时针和逆时针旋转流，没有任何源或汇。确保将其导入为不是sRGB的常规2D纹理，因为它不包含颜色数据。

将流体 贴图的属性添加到我们的材质中。它不需要单独的UV平铺和偏移，因此为其指定NoScaleOffset属性。默认值为没有flow，默认对应于黑色纹理。

（带有流体 贴图的材质）

为流体贴图添加一个变量，并对其进行采样以获得流向量。然后通过将其用作于albedo进行临时可视化。

（平铺流体向量）

纹理是线性数据，因此在场景中显得更亮。很好，因为无论如何我们都不应该将其用作颜色。由于表面着色器的主要UV坐标使用了主要纹理的平铺和偏移，因此我们的流图也会平铺。我们不需要映射流体贴图，因此将材质的Tileing设置回1。