首页 > 其他分享 >2.8 Flowmap的实现

2.8 Flowmap的实现

时间:2023-10-18 12:32:55浏览次数:39  
标签:贴图 向量场 实现 UV Flowmap flowmap Labs 2.8 向量


一、Flowmap是什么

Valve 2010的GDC讲座,《求生之路2》中水的制作

http://alex.vlachos.com/graphics/Vlachos-SIGGRAPH10-WaterFlow.pdf

Water (shader) - Valve Developer Community

2.8 Flowmap的实现_贴图

2.8 Flowmap的实现_github_02

2.8 Flowmap的实现_贴图_03

1.Flowmap的本质

一张记录了2D向量信息的纹理,Flowmap上的颜色(通常为RG通道)记录该处向量场的方向,让模型上某一点表现出定量流动的特征。

通过在shader中偏移uv再对纹理进行采样,来模拟流动效果。

2.8 Flowmap的实现_算法_04

2.8 Flowmap的实现_初始化_05

2.8 Flowmap的实现_github_06

一个向量场——>使用RG通道记录方向——>flow map 色值与方向的对应关系

2.8 Flowmap的实现_初始化_07

2.8 Flowmap的实现_贴图_08

2.8 Flowmap的实现_贴图_09

2.前置了解:UV映射

2.8 Flowmap的实现_github_10

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

UV贴图(用于理解):使用(R、G)颜色通道表示坐标。

黑色(0,0)绿色(0,1)红色(1,0)黄色(1,1)

UV贴图上颜色相同处:意味着采样纹理时使用了同一位置。

2.8 Flowmap的实现_初始化_11

3.为什么要使用flowmap

类似UV动画,而非顶点动画。换而言之,无需对模型顶点进行操作,易实现,运算开销小。

不仅仅是水面,任何和流动相关的效果都可以采用flowmap。

2.8 Flowmap的实现_github_12

2.8 Flowmap的实现_github_13

2.8 Flowmap的实现_github_14

flowmap 粒子与快速傅里叶变换(FFT) 波形构造水面

2.8 Flowmap的实现_github_15

战神flowmap在天空球中的应用

二、Flowmap Shader

1.借助Shader Graph理解Flow map

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

演示详细去参考课程:2800_哔哩哔哩_bilibili

2.Shader中实现

目标:

  • 根据flowmap上的值,使纹理随时间偏移。
  • 最简单的随时间偏移 UV - time,为什么相减?
  • 先看UV + time的情况,(u,v) + (time,0)
  • 模型上某个点:随time增加,采样到的像素越远。
  • 视觉上可以形容为:更远距离的像素偏移向改点,视觉效果和我们直观认识到的运算法则是相反的。
  • UV值作为向量(u,v),自然也遵循向量的运算法则。但UV偏移时,改变的不是顶点的位置。
  • 单方向运动× ,由flowmap获取流动方向√。
  • flowmap不能直接使用,将flowmap上的色值从【0,1】的范围映射到方向向量的范围【-1,1】
  • 调整采样时的UV为:adjust_uv = uv - flowDir * time
  • 在这里我们用FlowSpeed来控制向量场的强度
  • 随着时间进行,变形越来越夸张,为了把偏移控制在一定范围内使用frac函数。
  • 由于frac函数的使用,产生了跳变,修改代码
  • 我们希望无缝循环
  • 用相位差半个周期的两层采样进行甲醛混合,使纹理流动一个周期重新开始时的不自然情况被另一层采样覆盖
  • 用flowmap修改法线贴图

2.8 Flowmap的实现_贴图_16

三、Flowmap操作

1.Flowmap Painter

Unity制作的绘制flowmap的工具

2.8 Flowmap的实现_算法_17

注意:用该工具得到的flowmap为线性空间下的颜色,不需要gamma校正,Unity中请取消勾选“sRGB”

2.Houdini Labs

Houdini Labs是内置在houdini中的一组游戏开发相关的节点,可以在github中搜索sidefx Labs或着直接在houdini中安装得到。

在较早版本的houdini中无法在shelf内找到该工具,你只能通过github下载。在这些未被内置到houdini的版本中,这组工具的名称为gamedev。

1.flowmap相关节点功能

2.8 Flowmap的实现_贴图_18

节点名称

功能

Labs flowmap

为模型初始化一个向量场v

Labs flowmap brush

笔刷绘制修改向量场

Labs flowmap obstacle

根据障碍物修改向量场

Labs guide flowmap

根据样条线修改向量场

Labs flowmap to color

将向量转化为模型顶点色

Labs flowmap visualize

可视化,内置flowmap shader

2.8 Flowmap的实现_算法_19

Labs flowmap的设置

本节点的功能是为模型每个点初始化一个点属性(Point Attributes)——v。 兵可以勾选方便查看向量。

Method(初始化方式)

功能

Normal

模型法线生成初始v向量

slope

计算梯度生成初始v向量

direction

将所有v向量设置为固定方向

2.8 Flowmap的实现_算法_20

Labs flowmap brush

笔刷

  • 由comb节点(梳法线)简单修改而来。
  • 在operation标签下设置了对点的v属性进行修改

· Comb Lift 用于调整笔刷模式:

0 为正常绘制

1 为擦除 (使向量变为该点的法线值)

-1 使向量指向该点法线的反方向

其余值则为混合模式

在houdini中,一些节点可以通过将鼠标移动到模型视窗“view”,

再按enter进行操作,esc退出。所有可执行的操作显示在视窗最下方;

· Brush和Symmetry 标签下为笔刷控制选项。

如笔刷不透明度Opacity

2.8 Flowmap的实现_算法_21

2.8 Flowmap的实现_算法_22

两个输入端:

第一个为我们的flowmap field,

第二个为需要检测碰撞的模型。

这个节点将模型转化为体素(VDB),并在和flowmapfield接触的位置改写向量场,使受影响的向量指向远离碰撞体的方向,模拟出一个反冲的效果。

· Strength决定了flowmap field受影响的程度;

· Division Size和Dilate Volume用于控制VDB,分别用于体素的细分程度和整体体积。

注意:Division size不宜过小,一是因为该VDB是空心的,可能会形成壳体,二是细分过多会导致占用大量资源。

简单来说,你可能需要反复调整这两个值并观察来达到理想的结果。

· Blur strength用于平滑,避免局部不自然。

2.8 Flowmap的实现_github_23

Labs guide flowmap

2.8 Flowmap的实现_github_24

2.8 Flowmap的实现_初始化_25

2.flowmap的绘制与烘焙

Labs Maps Baker节点

2.8 Flowmap的实现_贴图_26

导出时注意gamma校正选项、UV匹配

2.8 Flowmap的实现_github_27

用Labs UV transfer节点来匹配高模和低模的UV

flowmap贴图设置:

  • 无压缩或高质量
  • 确认色彩空间

2.8 Flowmap的实现_github_28

2.8 Flowmap的实现_初始化_29

标签:贴图,向量场,实现,UV,Flowmap,flowmap,Labs,2.8,向量
From: https://blog.51cto.com/u_136836/7916406

相关文章

  • JAXB实现对象与xml互转
    importjava.io.ByteArrayOutputStream;importjava.io.InputStream;importjava.io.StringReader;importjava.nio.charset.StandardCharsets;importjavax.xml.bind.JAXBContext;importjavax.xml.bind.JAXBException;importjavax.xml.bind.Marshaller;importjavax......
  • @Autowired注解在实现类还是接口
    @Autowired注解在实现类还是接口首先要清楚@Service是注解在实现类上的,@Service告诉Spring容器,注册一个实例化的类对象,当@Service注解在接口上,是无法对接口实例化的。@ServicepublicclassxxxImplimplementsxxxService@Autowired本质上注入的也是实现类,但是是根据接口byTy......
  • react 公司项目学习 【react+webpack+nw.js + mobx+react-intl 实现的多页面多语言win
    这几天突然要来个react项目;听说还比较复杂;项目组内就两个人会react还在忙,整组主要是用vue;这不,这种‘狗都不干’的事,被安排到我身上了,那就学吧;一、研究代码结构不得不说,这目录结构搞得有点复杂,算是我接触中除了乾坤和electron之外,相当复杂的了,慢慢阅读吧;看懂了,原来是react+web......
  • Node.js框架:通过nvm实现多个node版本共存使用
    一、环境部署1、nvm下载下载地址:https://github.com/coreybutler/nvm-windows/releases2、nvm安装打开安装程序后按流程走就行,中间的安装地址可以自定义调整。注:在选择node.js的路径时,默认路径为C盘里的安装路径,如果本地在该路径下已经安装过......
  • 【实操】Java+百度ocr,实现图片识别文字小工具
    前言......
  • Sentinel源码改造,实现Nacos双向通信!
    SentinelDashboard(控制台)默认情况下,只能将配置规则保存到内存中,这样就会导致SentinelDashboard重启后配置规则丢失的情况,因此我们需要将规则保存到某种数据源中,Sentinel支持的数据源有以下这些:然而,默认情况下,Sentinel和数据源之间的关系是单向数据通讯的,也就是只能先在数......
  • Springboot实现模糊查询
    合理怀疑我之前的脑子长歪了,就跟个小丑一样,到处蹦跶,也没解决,现在好像走了大运,就直接出结果了具体实现我跟之前的sql语句进行对比,发现在我印象里面我使用的是这种结构:select*fromuserwhereidlikecaoncat('%',#{id},'%');但是记忆好像出现了问题,它实际上是这样的:select......
  • m基于FPGA的GFDM调制解调系统verilog实现,包含testbench仿真测试文件
    1.算法仿真效果本系统进行了Vivado2019.2平台的开发,测试结果如下:   GFDM调制信号放大:   GFDM解调信号放大:   系统RTL结构图如下:   2.算法涉及理论知识概要        随着通信技术的不断发展,人们对数据传输速率和频谱效率的要求越来越高。......
  • 在Android Studio上使用flutter Intl插件快速实现国际化和多国语言
    Flutter实现国际化和多语言支持在Flutter中实现国际化和多语言支持通常涉及以下步骤:添加依赖库:首先,你需要添加flutter_localizations依赖库到你的pubspec.yaml文件中。这个库包含了Flutter国际化所需的核心功能。dependencies:flutter:sdk:flutterflutter_localiza......
  • 在react项目中结合antd实现表格tooltip提示
    react项目antdesign给表格title添加tooltip提示效果,效果如下: title:()=>(    <span>     {'原表'}&nbsp;     <Tooltip       title={'如有颜色标注则表示id在该表无数据'}     >      <InfoCircleOutlined......