图形学基础——Flowmap的实现

最新推荐文章于 2025-05-14 14:02:09 发布
原创 最新推荐文章于 2025-05-14 14:02:09 发布 · 1w 阅读 · 39 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#shader

本文介绍了Flowmap的基础概念、Flowmap shader的实现原理和Flowmap的制作方法，包括使用Unity3d的Flowmap Painter和Houdini进行制作。Flowmap用于表现2D向量流动效果，通过在shader中应用向量场信息，实现UV动画效果，无需顶点动画，运算开销小。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Flow map

百人计划学习地址：图形 2.8 Flowmap的实现

一、基础概念

首先复习一下UV映射

UV坐标用于查找纹理贴图上的颜色值
在这里插入图片描述

什么是FlowMap？

Flowmap的实质就是一张记录了2D向量信息的纹理

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

我们使用（R，G）向量来表示色值，如下图三所示，表现了向量的方向与色值的对应
在这里插入图片描述

Flow Map实现原理
通过所带有的向量场的信息对UV进行偏移，并干扰采样的过程，使原本的采样效果变得扭曲
在这里插入图片描述
为什么要使用FlowMap？

用于表现各种流动的效果，好处如下

  • 效果类似于UV动画，而非顶点动画。
  • 无需对模型顶点进行操作
  • 易实现，运算开销小
    在这里插入图片描述

二、Flowmap shader

shader的实现流程

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

如何实现最简单的随时间偏移?

使用UV - time

为什么是相减？
先来看看 uv+time 的情况(u,v) + (time,0) :模型上某个点: 随着time增加，采样到的像素越远
视觉上可以形容为：更远距离的像素偏移向该点，视觉效果和我们直观认识到的运算法则是相反的,所以需要相减

我们需要更好的运动方向，正确的方法是从flowMap获取流动方向

但是，flow map不能直接使用，需要将flow map上的色值从[0,1]的范围映射到方向向量的范围[-1.1]
在这里插入图片描述
下一步需要把变形控制在一定范围之内

最低0.47元/天 解锁文章

200万优质内容无限畅学
大模型——最全梳理 一文搞懂RAG技术的5种范式！
03-26 483
高级 RAG 引入了具体的改进措施，以克服 Naive RAG 的局限性。为了提高检索质量，它采用了检索前和检索后策略。为了解决索引问题，高级 RAG 通过使用滑动窗口方法、细粒度分割和元数据的整合，改进了索引技术。此外，它还采用了多种优化方法来简化检索过程。模块化 RAG 架构超越了前两种 RAG 范式，具有更强的适应性和多功能性。它采用了多种策略来改进其组件，例如为相似性搜索添加搜索模块，以及通过微调完善检索器。为应对特定挑战，还引入了重组 RAG 模块和重排 RAG 管道等创新方法。
模型部署系列——TensorFlow Serving部署模型
AI天才研究院
08-05 1335
2019年，人工智能技术飞速发展，而云计算、容器技术则带来了更加方便和灵活的部署环境。TensorFlow Serving 是 TensorFlow 官方发布的服务化部署工具，它可以将训练好的模型部署到线上环境，提供 HTTP/RESTful API 服务，并且支持多种编程语言，包括 Python、Java、C++等。
FlowMap：流动效果实现
weixin_51327051的博客
03-18 2324
flowmap的实质是张记录了2D向量信息的纹理，Flow map上的颜色( 通常为RG通道)记录该处向量场的方向，让模型上某一点表现出定量流动的特征。通过在shader中偏移uv再对纹理进行采样，来模拟流动效果。Flowmap的特征是周期性变化。
Flow Map
Natelon的博客
12-10 2529
什么是Flow Map 本质是一张记录了2D向量信息的纹理 Flow map上的颜色（通常为RG通道）记录该处向量场的方向，让模型上某一点表现出定量流动的特性 通过在shader中偏移uv再对纹理进行采样，来模拟流动效果 有亿个问题 Flow Map不能直接使用，需要将Flow Map上的色值从（0，1）的范围映射到方向向量的范围（-1，1） 实现无缝流动 前面我们已经把映射后的Flow Map与UV相加进行扰动，并与_Time相乘，但是随着_Time的值越来越大，扰动也会越来越大最终
FlowMapPainter：将静态图像转化为动态流动效果的工具体验
最新发布
weixin_31776191的博客
05-14 676
在数字艺术与游戏开发的世界里，静态图像的动态转化技术正变得日益重要。动态转化工具能够将静止的图像转化为具有流动特性的动态效果，从而给用户体验带来前所未有的视觉冲击。随着技术的不断进步，这些工具逐渐演变成强大的图像处理应用，不仅能够实现基本的动态效果，还可以集成到复杂的游戏引擎中，生成实时动态的视觉内容。本章将从基础概念开始，逐一阐述静态图像动态转化工具的工作原理、应用场景以及它们如何推动现代游戏和数字媒体的发展。
flowmap怎么做_Flow Map
weixin_32098487的博客
12-23 1746
FlowMap其实算是一种UV动画, 这个技术的推广很大得益于Vlachos[1]的一篇技术分享. 由于当时文章里主要是用这种技术制作水面流动的效果,所以目前很多水面效果也是用这种方法来做,但是其实这个技术可以用在任何你希望看起来是流动的效果中,比如岩浆或者泥巴.这个技术首先依赖的是UV的平移,也就是说第一步让贴图UV随着时间变换起来:t是一个随时间变化的任意值，用这个新UV采样贴图那么贴图就会移...
flowmap怎么做_如何制作一张给发盖用的Flow map
weixin_35959694的博客
12-23 886
-前言-在制做非常短的头发时，如果纯用发片摆，需要使用很密集的发片才能做出来。直接用一个发盖来表现，可以降低工作量，而且除了剪影外，其他区域的效果很自然。之前，我在网络上只找到了一些适合给平铺型的发片生成Flow Map的工具，它们不能直接为立体的发盖模型生成该贴图。现在我找到了两个解决办法，分享出来，希望对你有用。-具体操作-方法一，直接用插件这是朋友帮我做的，非常好用。两个下载方式都可以。1....
2.8Flowmap的实现
qq_65461674的博客
06-01 1373
半条命2中水的流动求生之路2中的水的流动这种方式原理简单，容易实现，运算量少，如今也还在使用Flow map(流向图) ，一张记录了2D向量信息的纹理，Flow map上的颜色(通常为RG通道)记录该处向量场的方向，让模型上某一点表现出定量流动的特征。通过在shader中偏移uv再对纹理进行采样，来模拟流动效果。
ue4 加载材质_Houdini Terrian & UE4 （六）制作Flowmap
weixin_39845113的博客
11-24 326
导言对于游戏场景来说，水流是动景很重要的一环。传统的水面制作中，一般是做2-3个方向的波叠加，或者制作一个随机的flowmap，这样做出来的水面自然是没有灵魂的【手动滑稽】。所以，这里我们用houdini来制作一个基于地形的flowmap，让场景拥有基于高度的水流效果。首先，制作flowmap需要用到官方的Game Shelf，下面是github的链接，下载后按照说明加载到houdini环境即可。...
Python基础教程——10个可视化案例实操，一图胜千言！
2401_85339817的博客
07-04 1585
我们的数据科学家的任务是展示市场营销部门进行的一次民意调查的结果。在这次民意调查中，客户被要求对一种高蛋白棒的新旧配方的性价比、营养价值、外观和口味进行评分。据科学家使用雷达图来显示投票结果。雷达图将不同的属性（口味、外观等）放在不同的坐标轴上，然后连接属于同一实体（本例中为蛋白棒）的属性值，形成一个多边形区域。不同的区域使用不同的颜色，便于查看者掌握产品之间的差异。
语义分割网络系列——FCN，全卷积网络
新兴IT民工的专栏
11-09 2159
这个专栏的前面一些文章，已经设计到了图像网络，或者说机器视觉的两个主要任务：分类和检测。现在来说说另外一个任务：分割(Segmentation)。一般来说，分类相对比较简单一点，通过一个基础网络(backbone)就可以完成任务，从LeNet，AlexNet，到ResNet，SENet等，都是通过基础网络完成分类任务。在分类网络的基础上，加上一些detector head，比如RCNN引入的ROI Pooling，RPN等；YOLO1-5引入的回归，anchor等。就可以完成目标检测的任务。
Canvas-Flowmap-Layer:用于映射对象流的地图层。 扩展Esri JSAPI并在HTML画布上呈现
05-23
画布流图图层 Canvas-Flowmap-Layer扩展了 （Esri JSAPI），以使用Bezier曲线将对象流从起点映射到目的地。 Esri图形将转换为像素空间，以便将点和曲线的渲染映射到 。 如果您正在寻找LeafletJS支持，可以在找到一个Canvas-Flowmap-Layer插件。 查看我们的。 目录 动画片 相互作用 象征学 发牌 演示版 Esri JSAPI v4 简单的演示 自动旋转演示 自动世界包装 阿尔伯斯阿拉斯加投影演示 WGS84投影演示 Esri JSAPI v3 简单的演示 功能比较/沙盒演示 支持JavaScript Web映射库 README-JSAPI-4上提供了Esri JSAPI v4的详细文档。 README-JSAPI-3上提供了Esri JSAPI v3的详细文档。 如果您正在寻找LeafletJS支持，可以在jwasil
FlowMap技术映射算法（WIP） 的Rust实现_rust_代码_下载
06-12
FlowMap技术映射算法（WIP） 的Rust实现_rust_代码_下载
从0开始的技术美术之路（十三）Flow Map
qq_43210334的博客
06-23 5771
本篇参考B站视频 “技术美术百人计划”·霜狼_may ； 以及感谢群友解惑 本篇主要用于自我复习，如有疑问或发现有什么错误，请多指教~ 本篇内容主要包括：Flowmap的相关介绍，shader实现以及Flowmap绘制； 一.Flowmap介绍 1.什么是Flowmap？ 简单来说，就是一种用来实现水面流动效果的技术。 它是由Valve 在2010年的GDC所提出的，由于其原理简单，容易实现且运算量较少，所以仍在适用； 长相如下图： 2.flowmap实质 一张记录了2D向量信息的纹理，Flow m.
译文：SketchFlow Map 小型教程一
weixin_30678349的博客
07-16 126
原文链接：http://electricbeach.org/?p=302 首先，让我们创建一个新的项目。如果你是第一次打开Blend，你应该可以看到如下的欢迎画面： 选择New Project…，在之后的对话框里，选取Silverlight 3 SketchFlow Application，如下所示，然后单击OK。 以下是你启动一个新项目后Blend的样子： 在美术板周围有很多...
flowmap怎么做_Photoshop生成的流动贴图（flowmap）
weixin_39968946的博客
12-23 913
Photoshop提供了大量工具以供贴图编辑和图像控制。 很方便的一点是，您也可以使用这些工具来生成流动贴图(flowmap)。 本篇文章将为您展示如何使用UV贴图和Epic提供的操作在Photoshop中生成流动贴图。 请注意本操作只能在Photoshop CS5或以上版本中生效。如您需要使用流动贴图操作，请直接打开UV贴图并确认此贴图在背景进行调用。附件图像可用于平铺流动贴图的贴图，或您也可以...
绘制流向地图（Flow Maps）
热门推荐
ArcGIS产品与技术专栏
04-27 2万+
1、 什么是流向地图         当事物或人从一个地点移动到另一个地点时，可以通过流向地图（Flow Maps）揭示出运动中的一些规律或现象。通常使用“线”来表示流向，且不同的宽度代表不同数量间的差异。 2 、流向地图类型     1) 网络流图         显示地点之间相互的连接，通常是基于交通或通讯联系。        【示例】：美国俄勒冈州的公路交通情况。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值