Unity 水、流体、波纹基础系列（二）——方向流体（Directional Flow）

目录	1 各向异性模式 1.1 涟漪水 1.2 方向流体Shader 2 与流体保持一致 2.1 方向流体的UV 2.2 纹理旋转 2.3 旋转导数 2.4 采样流体 3 瓦片化流体 3.1 流体网格 3.2 融合单元 3.3 重叠单元 3.4 采样网格中心 3.5 缩放波浪 4 隐藏失真 4.1 几乎均匀的水流 4.2 观察网格 4.3 混合网格 4.4 可选的混合项 收起

本文重点：

对齐纹理和流体方向

把表面切割为瓦片

无缝混合瓦片

混淆视觉效果

这是流体材质的第二篇，继上一篇纹理变形之后，讲述如何对齐流体而不再是将它们进行扭曲。

本教程是CatLikeCoding系列的一部分，原文地址见文章底部。“原创”标识意为原创翻译而非原创教程。

该篇教程使用Unity 2017.4.4f1完成。

（顺其自然的涟漪）

1 各向异性模式

让纹理变形以模拟流动时，它最终可能在任何方向上被拉伸或挤压。这意味着无论如何变形，看起来效果都还不错。但这仅在各向同性模式下才有可能。各向同性意味着图像在所有方向上看起来都相似。我们在上一教程中使用的水纹理就是这种情况。

1.1 涟漪水

尽管流动的假象让人信以为真，但通过使各向同性图案变形而形成的图案看起来并不像真实的水。如果只看静态效果而不是动画时候会尤为明显， 因为你无法预估真正的流向应该是什么样的。这主要是因为波浪和波纹的对齐方式是错误的。它们应该沿着流向拉长，而不是垂直于流向。

（用黑色albedo扭曲各向同性图案）

扭曲效果适合于湍急或缓慢的水流。对于显示出清晰波纹图案的趋于平静的流体效果不佳，因为这种波纹应该指向明确的方向。它们是各向异性的。下面包含此类波纹的替代水纹理。它的制作方法与其他纹理相同，但图案不同，并且导数相对于高度数据的缩放比例为0.025。

（涟漪用的导数高度贴图）

导入纹理，确保它不在sRGB模式下，并将其用于扭曲效果。

（扭曲的各向异性图案）

即使没有动画，现在也有清晰的视觉方向。但是，图案与流没有对齐，因此隐含方向也不正确。如果要可视化适当的波纹，则需要使用其他方法。

1.2 方向流体Shader

在本教程中，我们将创建一个不同的流着色器。与其让纹理变形，不如让纹理与流对齐。复制DistortionFlow着色器并将其重命名为DirectionalFlow。除了不使用jump参数，我们将所有参数保持不变，因此将jump删除。另外，我们不会干扰到albedo纹理，因此可以通过主纹理提供导数高度数据。而且，我们不需要噪声来抵消阶段混合，因此我们只对流程图的RG通道感兴趣。

首先，将surf函数减少为仅对导数高度数据进行采样，对albedo使用Height平方并设置法向矢量。

使用该Shader创建一个材质，并使用和扭曲材质一样的设置，把图案改为ripple，并且tiling 设置为1。将其应用于四边形时，我们最终只会得到波纹图案。图案以与沿V轴的对齐的流相对应。默认值是向上流动的，由于图案在相反的方向上也是对称的，所以看起来一致。

（方向流动 材质）

2 与流体保持一致

现在我们有了各向异性版本了，但还需要找到一种方法将其与流向对齐。我们将首先在固定且受控的方向上进行尝试，一旦可行，便继续使用流体贴图。

2.1 方向流体的UV

使纹理与方向对齐是变换UV坐标的问题。这是对流体模拟的基石，因此我们将添在Flow文件中添加一个函数来支持它。将其命名为DirectionalFlowUV。它需要原始的UV坐标和Flow向量作为参数。还要为其提供Tiling和时间参数，类似于FlowUVW函数。由于它不需要根据时间产生变形效果，因此不需要阶段数据或时间混合权重。

我们首先简单地向上滚动，通过从V坐标中减去时间，沿正V方向移动图案。然后应用平铺。

在我们的着色器中使用此函数可获得最终流体的UV坐标。我们将为其提供float（0，1）作为流向量- [0，1]代表默认方向-切片属性，以及由速度调制的时间。然后，我们使用结果对模式进行采样。

结果与之前相同，但是有所移动。

（滑动波纹模式）

2.2 纹理旋转

要旋转UV坐标，我们需要一个2D旋转矩阵，如“渲染1，矩阵”教程中所述。如果流向量 [x， y]具有单位长度，则它表示单位圆上的一个点。因为[0，1]对应于无旋转，所以X坐标表示某个旋转角度θ（theta）的正弦，而Y坐标表示相同角度的余弦。另外，流量矢量[1，0]表示向右的U方向的流量。因此，对于顺时针旋转，流矢量可以解释为 [sinθ，cosθ]。

“渲染1，矩阵”教程将2D旋转矩阵定义为

，但它表示逆时针旋转。当我们需要顺时针旋转时，我们必须翻转sinθ的符号，这得到我们最终的旋转矩阵

。

因为我们的流体贴图不包含单位长度的向量，所以我们必须首先对其进行归一化。然后通过float2x2构造函数使用该方向向量构造矩阵。使用mul函数将该矩阵与原始UV坐标相乘。完成之后，应应用时间偏移和平铺。

让我们通过使用流体矢量[1，1]来测试这是否有效。这将导致图案顺时针旋转45°。