flowmap怎么做_Flow Map

FlowMap其实算是一种UV动画, 这个技术的推广很大得益于Vlachos[1]的一篇技术分享. 由于当时文章里主要是用这种技术制作水面流动的效果,所以目前很多水面效果也是用这种方法来做,但是其实这个技术可以用在任何你希望看起来是流动的效果中,比如岩浆或者泥巴.

这个技术首先依赖的是UV的平移,也就是说第一步让贴图UV随着时间变换起来:

t是一个随时间变化的任意值，用这个新UV采样贴图那么贴图就会移动起来，在UE4的材质编辑器里是这样的：

但是如果你预览会发现目前贴图只是随着一个方向不停的滚动，如果需要模拟水流的样子只平移是不够的, 受到了其他水分子的挤压，所以看起来有点扰动在里面才逼真。这个时候，Flow map登场了，通过给贴图的移动预先烘焙好一段移动的轨迹，那么水流看起来会栩栩如生许多：FlowMap 效果

FlowMap看起来是这样：FlowMap

因为我们主要encoding了水平方向的数据, 分别用r和g通道, 所以这样FlowMap看起来都是这个色调的样子. 这个数据可以用DCC工具bake, 不过作为学习和简化的方法, 我推荐你用FlowMap Painter, 一款免费并且简单易用的工具.

有了FlowMap, 我们只需要读取其中的数据分别作为原图的扰动分量即可实现让贴图"流动"起来, 这么说可能有点抽象, 所以必须自己手动做一遍感受下会比较好. 作为展示目的, 我在UE4中是用自定义节点做的:

代码如下:

float2 AdjustUV = UV * Tiling;

float HalfPeriod = PeriodSec * 0.5;

float2 Flow = Texture2DSample(FlowMap, FlowMapSampler, AdjustUV).rg * 0.5 + float2(0.5,0.5);

float2 Bias = fmod(View.RealTime,PeriodSec) * Flow;

float2 NewUV = Bias* Speed + AdjustUV;

float4 C1 = Texture2DSample(Tex, TexSampler, NewUV);

Bias = fmod(View.RealTime + HalfPeriod,PeriodSec) * Flow;

NewUV = Bias * Speed + AdjustUV;

float4 C2 = Texture2DSample(Tex, TexSampler, NewUV);

float a = abs(HalfPeriod - fmod(View.RealTime, PeriodSec)) / HalfPeriod;

return lerp(C1,C2, a);

比较重要的部分是C1和C2的混合，通过混合来掩盖单一贴图平移时候出现的闪烁，我觉得这也是这个算法里最核心和最美得部分，正是这种打时间差的配合让流动显得非常自然而且无尽无止。

使用后的效果：

在UE4里，其实有一个官方预制的更复杂版本，但是其实本质算法是不变的，只是多了很多细节控制，甚至用不到的东西。

这只是模拟水面的一种方式，还有其他很多方法可以配合使用达到更多细节的拟真：水面流动(如果你把顶点动画和flowmap结合，可以达到神海的效果[2], 这是之前在UDK里做的效果)

[1]Alex Vlachos, Valve, Water Flow in PORTAL 2, 2010.

[2]Carlos Gonzalez-Ochoa, Naughty Dog, Water Technology of Uncharted, 2012.