TA百人计划学习笔记 2.8FlowMap流动效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_57856130/article/details/135674802

资料
- 源视频　【技术美术百人计划】图形 2.8 flowmap的实现——流动效果实现_哔哩哔哩_bilibili
- PPT　2800flow map
- 参考笔记　2.8 flowmap的实现——流动效果实现 · 语雀
UV映射（纹理映射）
- 对一个贴图进行纹理查找，就要用到uv坐标
- 理解：
  - 如图为Unity中的uv坐标，类似于xy轴，用此uv坐标查找右边贴图的颜色值，采样会得到和贴图一模一样的结果
  - 如图，如果改变查找时的uv坐标，让每一列都有相同的uv值，那么采样结果就是右图的条纹状的结果
  - 如图，如果用同一个uv值(0,0)采样的话，结果就会是同一的颜色
FlowMap
- 定义
  - 是一张记录了向量信息（通过RG通道构建）的纹理
  - 理解：
    - 一个2D平面，平面上每个点都对应一个向量，这个向量干扰了原本的UV向量，使得UV采样纹理时，图片发生变化。在时间维度上，不断改变UV值，使得纹理产生流动效果。
    - 在shader中通过flowmap干扰uv（偏移uv），对纹理进行采样，这样就得到了一个模拟流动的效果
- eg
  - - Valve在2010年GDC中介绍的一种在求生之路2中用来实现水面流动效果的技术
    - 用到的flowmap
- 注意：
  - 不同软件的不同uv坐标：UE4与Unity相比，反转了绿通道，所以使用的flowmap也会发生变化。（根据不同的引擎需求进行调整）
- 优势
  - 类似于uv动画的原理，而非顶点动画。也就是说不用对模型顶点进行操作，容易实现，性能开销小
  - flowmap适用于任何流动相关的效果。
    - 例如：
      - 流动的天空球（运动的云群的效果）
FlowMap Shader
- flowmap shader的基本流程
  - 1.采样flowmap获取向量场信息
  - 2.用向量场信息，使采样贴图时的uv随时间变化
  - 3.对同一贴图以半个周期的相位差采集两次，并线性插值，使贴图流动连续
- 实现思路
  - 目标：根据flowmap上的值，使纹理随时间偏移
    - 操作1：最简单的uv随时间偏移的方法： uv - time
      - 关于为什么是相减：
      - 先理解一下相加的情况：模型上的某个点（u，v）+（time，0）
      - 可以理解为随着time增加，采样到的像素越远
      - 这个效果在视觉上可以形容为：更远距离的像素偏移向这个点，也就是说和我们直观认识到的运算法则是相反的。
      - 用uv值作为向量时，是遵守运算法则的
      - uv偏移并没有改变顶点位置，只是采样到了更远的像素
    - 操作2：从flowmap获取流动方向
      - 从flowmap获取流动的方向，再乘time，就可以达到让某个点根据flowmap流动的目的
      - 问题：flowmap不能直接使用
      - 解决：将flowmap上的色值从[0，1]映射到方向向量的[-1，1]
        
        ０＊２＝０　１＊２＝２　
        
        ０－１＝－１　２－１＝１　
    - 操作3：流动无缝循环，把偏移控制在一定的范围内（随着时间进行，变形太过夸张）
      - 构造两个相位相差半个周期的波形函数
      - 用相位差半个周期的两层采样进行加权混合，用纹理流动另一层采样来覆盖一个周期重新开始时的不自然情况
      - 备注
        构建循环，庄懂老师是通过时间取小数，然后用三角函数构建的。
FlowMap的制作
绘制工具
- Flowmap Painter
  - 下载地址：FlowMap Painter – teckArtist
  - 可以使用反转UV通道选项，以便不同符合不同的引擎需求
  - 注意：使用Flowmap Painter绘制得到的贴图为线性空间下的颜色，不需要伽马校正。（Unity里不用勾选sRGB）
- Houdini
注意事项
- flowmap贴图的设置：
  - 要使用无压缩或高质量
  - 确认色彩空间