UE Flow Map Flowmap 流动贴图制作
技术综合 3114 4
实名

通过了实名认证的内容创造者

发布于 2019-3-10 19:51:22

您需要 登录 才可以下载或查看,没有账号?注册

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

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

2.jpg


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

1.jpg


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


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里做的效果)


本文出自知乎的Grfx.IO


评分

参与人数 1元素币 +40 活跃度 +20 展开 理由
元素界王神... + 40 + 20 【点赞】这很有大网气质!

查看全部评分

你就在那里,默默望着你
使用道具 <
W阳光男孩X  发表于 2019-3-11 07:16:37  
2#
谢谢分享
回复 收起回复
使用道具
yhr28  发表于 2019-3-11 07:28:22  
3#
谢谢分享啊!!!!
回复 收起回复
使用道具
子子子子俞  发表于 2019-3-11 09:59:24  
4#
感谢分享   干货满满

评分

参与人数 1元素币 +5 活跃度 +5 展开 理由
大西几 + 5 + 5 【诚意】很有诚意的内容,获取额外奖励

查看全部评分

回复 收起回复
使用道具
Brucr  发表于 2022-11-9 12:47:54  
5#
每天学习一点点,加油
回复 收起回复
使用道具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表