参考
may佬《技术美术百人计划》
Flowmap的实现
Flowmap的定义
flowmap实质上是一张记录了2D向量信息的纹理,使用颜色(通常为RG通道)记录该处向量场的方向,让模型上某一点表现出定量流动的特征,通过在shader中偏移UV再对纹理进行采样来模拟流动效果
前置了解:UV映射
-
UV坐标用于查找纹理的颜色值,使用(R,G)颜色通道表示坐标,黑色(0,0),绿色(0,1),红色(1,0),黄色(1,1)
-
UV贴图上颜色相同的地方意味着纹理采样的时候使用了同一位置
-
Flowmap通过上边携带的向量场信息对UV进行了偏移,进而干扰纹理采样的过程,形成扭曲的效果
-
需要注意,不同的软件uv坐标可能不同,如ue中反转了绿通道(OpenGL和DirectX原点坐标差异)
flowmap的作用
flowmap更接近uv动画而非顶点动画,没有对顶点进行操作,是一种廉价而高效的实现流动效果的方法
不只是水面,flowmap可以用在任何流动的效果上,包括流动的天空球
- 图为战神中flowmap在天空球中的应用,通过交替出现的云朵可以看出flowmap的典型特征:周期性变化
Flowmap shader
实现思路
- 采样Flow map获取向量场信息
- 用向量场信息,使采样贴图的UV随时间变化
- 对同一贴图以半个周期的相位差采集两次并线性插值,使贴图流动连续
flowmap流动
最简单的随时间偏移的方法:uv - time
- 为什么不是加?
- 在uv+(time,0)的情况下,随着时间增加会采样到更远的像素,在视觉上表现为更远距离的像素偏移向该点,与直观感受到的运算法则相反
UV值遵循向量的运算法则,UV偏移时,改变的不是顶点的位置
从Flowmap获取需要的流动方向,再乘上time,就可以让某个点根据flowmap进行流动
- 使用flow map之前需要将色值0 ~ 1的范围映射到方向向量的范围 -1 ~ 1
//从flowmap获取流向
float3 flowDir = tex2D(_FlowMap,i