FlowMap贴图制作流程和在特效中的应用

快手Y-tech

最新技术干货分享

自纹理映射技术出现以来，纹理贴图已经成为实时渲染中的关键组成部分。随着实时渲染技术的不断发展迭代，纹理贴图的种类也越发丰富。本文将介绍一种名为FlowMap的纹理贴图，如图1所示。重点从FlowMap原理、制作流程、FlowMap在视频特效中的应用三点展开介绍。

图1 一张FlowMap贴图示例

FlowMap是一张记录了二维向量信息的贴图，在渲染时，我们可以通过采样FlowMap中存储的向量，来实现对诸如纹理坐标或是渲染计算中其他向量的扭曲和偏移。FlowMap这一技术的推广归功于Vlachos在SIGGRAPH 2010中的分享^[1]：“Water Flow in PORTAL 2” 。开发团队使用FlowMap贴图优化了水面重复纹理的瑕疵，并且实现了水面流动的效果。效果呈现可参见图2。

图2 Water rendering using flow maps, based on Valve's water in LFD2. Effect exaggerated for demonstration.

从原理上说，FlowMap的这一应用属于一种UV动画，它使得原图在FlowMap标记的方向上，表现出一种无尽的循环往复的流动感。

它的实现思路是这样的：

1、通过FlowMap获取到纹理坐标的偏移方向（这里需要注意偏移方向的值域是[-1,1]，所以采样后需要进行一步换算）；

2、准备如下图3所示的周期性时间函数A、B、C；

3、将偏移方向和两个时间函数A、B相关联，对想要施加Flow效果的贴图进行两次采样；

4、将A、B两次采样的结果按时间函数C混合。

图3 紫线：函数A；黑线：函数B；红线：函数C

想象一下，函数A相关的采样结果已经可以表现出原图按FlowMap方向流动的效果了，但是它在每一次重复时会出现明显的跳变，如图4中最左侧图。B函数相比A偏移了半个相位，如此，我们便可以在这半个相位内把A、B的采样结果做一次混合，将重复时的跳变隐藏起来。如图5中绿框和蓝框部分。

图4 上图从左至右依次为：函数A相关采样结果、函数B相关采样结果与AB混合后结果

图5 将两个Flow的UV动画混合到一起

FlowMap在shader中的实现如下所示：

float lineOne = mod(Time,1.0) * flowAmount;float lineTwo = mod(Time + 0.5,1.0) * flowAmount;
vec2 flowDir = tex2D(Flow_tex, uv).xy * 2.0 - 1.0;vec4 colorOne = tex2D(DiffuseColor_tex, uv + flowDir.xy * lineOne);vec4 colorTwo = tex2D(DiffuseColor_tex, uv + flowDir.xy * lineTwo);
float mixFactor = abs(0.5-mod(Time,1.0)) * 2.0;return mix(colorOne,colorTwo,mixFactor);

有很多种工具和方法可以制作FlowMap，如独立的FlowMap绘制工具FlowMap Painter、houdini game development toolset中FlowMap套系节点、以及基于WebGL实现的在线FlowMap绘制工具等等。贴图材质绘制工具Adobe Substance 3D Painter（SP）也在官方文档中对绘制FlowMap的方法做了详细说明^[2]。

SP在设计师团队中被广泛使用且熟练度较高。故而我们计划使用SP作为生成FlowMap的工具。不过SP虽然可以绘制FlowMap，设计师却无法看到FlowMap施加到某个纹理后偏移或扭曲的效果。

图6 SP中预览绘制的FlowMap贴图

为了解决这个问题，我们使用SP的自定义shader功能，将FlowMap效果在SP中做了实现。

SP的Shader在安装包目录下面可以找到，即C:\Program Files\Allegorithmic\Adobe Substance 3D Painter\resources\starter_assets\shaders (Adobe Substance 3D Painter Windows Version 7.3.0)。

(1) 头文件引用

//官方文档里面有各个引用内容里面的具体内容import lib-sparse.glsl...

(2) Uniform声明以及UI部分

//声明一些shader内需要用到的变量，以": param"开头的一行将此变量与编辑器UI上对应变量关联起来 //FlowMap纹理，关联到SP的normal纹理图层上//: param auto channel_normaluniform SamplerSparse drawFlow_tex;
//float变量，关联到shader面板的一个滑条上，通过调整它来手动模拟时间函数//: param custom { "default": 0, "label": "Flow Offset (tweak this slider to show flow effects)", "min": 0.0, "max": 1.0 }uniform float u_slider_float1;
//float变量，关联到shader面板的一个输入框上，用于调整Flow时的大小//: param custom { "default": 0, "label": "Flow Amount" }uniform float u_spin_float1;
//自定义纹理，作为我们施加FlowMap效果的对象//: param custom{"default": "origin", "label":"Origin","usage":"texture"}uniform sampler2D origins_tex;...

‍(3) 着色部分

// substance painter 只允许我们编写片段着色器的一部分// 在这里将FlowMap的效果再实现一次，代码实现与上文类似，不再赘述void shade(V2F inputs){  ...    ...}

图7 自定义shader在SP中的参数面板

shader编写完成后，我们将shader文件和颜色贴图（上图中Origin纹理）导入到SP的library中，在TEXTURE SET SETINGS中删除多余的图层通道，仅保留normal。接下来我们在SP导航栏的File中执行Save As Template，就得到了用于预览FlowMap效果的SP模板。在此模板下，设计师仍按照SP官方文档中介绍的方式绘制FlowMap，通过调整shader面板中的参数，可以实时地预览到FlowMap施加到某张纹理上的效果。

图8 在SP中直接预览“Flow”后的效果

图9 输出FlowMap导入到引擎后的效果

在魔法表情中也能找到FlowMap技术的身影，如FlowUV动画效果与平面AR结合，落地的「星空之路」魔表等。除了FlowMap在UV动画上应用之外，在毛绒等材质的渲染中，也可以通过FlowMap中存储的方向来影响shader中参与计算的向量，实现诸多有趣的效果。

 FlowMap UV动画：「星空之路」

图10 通过FlowMap信息控制毛绒生长方向

本文主要介绍了FlowMap在UV动画上的实现原理和应用，并结合实际生产环境，展示了在SP中制作一个FlowMap预览模板的流程。就UV动画而言，FlowMap不仅仅可以用来表现水的流动，对于任何其他希望看起来流动的效果，如岩浆、泥巴、烟雾等都可以采用FlowMap的方式来表现。另外正如上文中提到的，FlowMap存储的方向也可以用来影响shader中参与计算的向量，除了毛绒材质生长方向的控制，在丝绸、头发材质的表现中FlowMap也可以用来控制各向异性高光的走向。

FlowMap为某种渲染效果的实现增添了许多的可能性。在我们拆解某种效果时，如果它包含“流动”、“方向性”等特征，不妨使用FlowMap试一试吧。

参考文献

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

[2]https://substance3d.adobe.com/documentation/spdoc/flow-map-painting-143327274.html

[3]https://zhuanlan.zhihu.com/p/33288033

[4]https://substance3d.adobe.com/documentation/spdoc/shader-api-89686018.html

[5]http://graphicsrunner.blogspot.com/2010/08/water-using-flow-maps.html

CVPR2022 | 移动端手部三维重建技术

快手特效开发的质量保证

解密快手极致的纹理压缩