笔记14-图形 2.8 flowmap的实现

参考了 星痕 的 语雀笔记

Flowmap 是什么

Valve 在 2010 年的GDC中介绍的他们在《求生之路2》和《传送门2》中用来实现水面流动效果的技术。

flowmap的实质

一张记录了2D向量信息的纹理
Flow map上的颜色（通常为RG通道）记录该处向量场的方向，让模型上某一点表现出定量流动的特征。通过在 shader 中偏移uv再对纹理进行采样，来模拟流动效果。

前置知识：UV映射

UV坐标用于查找纹理的颜色值。

• UV贴图若使用（R，G）颜色通道表示坐标：黑色(0,0），绿色处(0,1)，红色处(1,0），黄色处(1,1)
• UV贴图上颜色相同处：意味着采样纹理时使用了同一位置

为什么使用Flowmap

类似uv动画，而非顶点动画，所以无需对模型顶点进行操作，易实现，运算开销小
除了水面的渲染，凡是涉及到流动的地方都可以使用flowmap，比如《战神》中的天空球上周期性变换的云。

水体渲染

flowmap 是其中一种实现方案，还有FFT（快速傅里叶变换），Gerstner波，法线水等，具体可以看下毛星云大佬的真实感水体渲染。

flowmap 和 流体模拟 的关系

• 真正的流体模拟（比如《Unity入门精要》里没讲的，或者Houdini做的）：需要解纳维-斯托克斯方程，计算压力、速度场随时间的真实演化，一个像素的流动会真实地影响邻居。
• Flowmap：它只是一张纹理，里面存的是固定的方向向量。它的本质是：“我告诉每个像素，你要朝着我指定的方向移动你的UV。” Flowmap根本不在乎物理规律，它只在乎视觉效果。

Flowmap shader

借助 Shader 理解 Flowmap

• 1. 采样Flow map获取向量场信息
• 2. 用向量场信息，使采样贴图时的UV随时间变化
• 3. 对同一贴图以半个周期的相位差采集两次，并线性插值，使贴图流动连续

最简单的随时间偏移： UV - time

// 这代码可跑不了
float3 flowDir = tex2D(FlowMap, i.uv) * 2.0 - 1.0; // 从[0,1]映射到[-1,1]
flowDir *= _FlowSpeed; // 使用 _FlowSpeed 控制向量场的强度

adjust_uv = uv - flowDir * time;

//-----
float phase = frac(_Time); // 把偏移控制在一定范围

//-----
float phase0 = frac(_Time * 0.1 * _TimeSpeed ); // 为了解决frac产生的突变
float phase1 = frac(_Time * 0.1 * _TimeSpeed + 0.5); // 理想的流动：无缝循环

float2 tiling_uv = i.uv * _MainTex_ST.xy + _MainTex_ST.zw; // 贴图偏移

half3 tex0 = tex2D(_MainTex, tiling_uv - flowDir.xy * phase0);
half3 tex1 = tex2D(_MainTex, tiling_uv - flowDir.xy * phase1);

float flowLerp = abs((0.5 - phase0) * 2.0);
half3 finalColor = lerp(tex0, tex1, flowLerp);

（视频中给出了 Unity Shader 和 Shader Graph 两个版本的实现）

Flowmap 的制作

1. Flowmap Painter

注意

• 用该工具得到的flowmap为线性空间下的颜色，不需要gamma矫正，Unity中请取消勾选“sRGB”
• 导入时不能选择有损压缩，选择无损或者高质量

2. Houdini Labs

HoudiniLabs是内置在houdini中的一组游戏开发相关的节点可以在github中搜索sidefx Labs或着直接在houdini中安装得到。较早版本的houdini中，无法在shelf内找到该工具，你只能通过github下载。在这些未被内置到houdini的版本中，这组工具的名称为gamedev。

1. flowmap相关节点功能

（以后用 Houdini 了再做）

2. flowmap的绘制与烘焙

-作业-

实现流动效果

（以后有想实现的效果了再做）