百人计划 图形 2.8 flowmap的实现——流动效果实现

什么是FlowMap？

FlowMap

FlowMap是Valve在2010年GDC中介绍的一种在求生之路中用来实现水面流动效果的技术。易于实现，运算量较小。使用了一张被称为flowmap的贴图，来达到控制场景中水面流向的效果。

FlowMap的实质

是一张记录了向量场信息的纹理。

假设有一个2D平面。平面上每个点都对应一个向量，这个向量指向这个点接下来要运动的方向，通过颜色的色值（RG）来记录这些向量的信息，得到了一张flowmap，在shader中干扰uv（偏移uv），对纹理进行采样，这样就得到了一个模拟流动的效果。

 UV映射（纹理映射）

对一个贴图进行纹理查找，会用到uv坐标。

unity中的uv坐标，类似于xy轴，用此uv坐标查找右边贴图的颜色值，采样会得到和贴图一样的结果

 如果改变查找时的uv坐标，让每一列都有相同的uv值，那么采样结果就是右图的条纹状

 如果用同一个uv值采样的话，结果就会是同一个颜色（即uv贴图上颜色相同的地方，意味着采样纹理时使用了同一个位置）

 FlowMap原理

通过所有的向量场信息对uv进行一个偏移，来干扰采样时候的这个过程。经过flowmap发生偏移后，让原本正常的采样变成一个扭曲的效果。（注：不同软件uv坐标不同：UE4与unity相比，反转了绿通道，所以使用的flowmap也会发生变化）

 为什么要使用flowmap

类似于uv动画的原理，不是顶点动画。不需要对模型顶点进行操作，容易实现，性能开销小。

flowmap适用于任何流体动画效果：例如流动的天空球，水中的涟漪。

Flow Map Shader

1、flowmap的实现

flowmap shader 基本流程：采样flowmap获取向量场基本信息、使用向量场信息，使采样贴图时的uv随时间变化、对同一贴图以半个周期的相位差采集两次，并线性插值使贴图流动连续。

目标效果：根据flowmap上的向量场信息，使纹理随时间偏移。

1、最简单的uv随时间偏移的方法：uv-time（为什么是相减？模型上的某个点（u，v,）+（time，0），可以理解为随着time增加，采样到的像素越远）

2、从flowmap获取流动方向再乘以time，可以实现让某个点根据flowmap流动的目的。但是flowmap不能直接用，可通过将flowmap上的色值从[0，1]映射到[-1，1]（乘以二减一）

3、流动无线循环，把偏移量控制在一定范围内（随着时间进行，变化夸张），通过构造两个相位差半个周期的波形函数，将其加权混合，用纹理流动另一层覆盖一个周期重新开始时的不自然情况。

2、代码

3、用flowmap修改法线贴图

FlowMap的制作

绘制过程

使用FlowPainter直接绘制，绘制过程可以使用反转uv通道选项，以便符合不同引擎要求（使用FlowMap Painter 绘制得到的贴图为线性空间下的颜色，不需要伽马校正。unity里面不需要勾选sRGB）。

绘制工具

Flowmap Painter、houdini

注意：flowmap贴图设置：要使用无压缩或高质量、确认色彩空间。