创建时间
Mar 27, 2023 06:46 AM
标签
Tags
插件工具
UE4
Origin
zhuanlan.zhihu.com
上篇文章中介绍了 FlowMap 的原理,下面说一下如何制作 FlowMap,下面是一些网上能搜到的制作途径:
- Substance Painter
之前试了很多次,效果十分不理想,且不直观,不好修改。
- FlowMap Painter(这个应该比较广为人知)
没法导入模型,只能对着一张 Tex 或者 Mask 简单画一下流水的方向
这位外国老哥用 UE4 物理模拟的方式来制作,但是看了 Demo 感觉效果还挺差的(说白了,要钱的,30 刀,??????)
是一个很好的启发。
可能也是根据 Ryan 的思路升级了一下,但是还是有很强的限制。
不废话了直接开始。
核心思想:

利用 Event Tick 事件,通过 LineTrace 射线打到 Mesh 上,返回 Mesh 的 UV Position,两个 Position 相减算出 Velocity,绘制到 RenderTarget 上。
Brush Material
笔刷材质 (M_sphere):

很简单,就是利用 DepthFade 画个轮廓。
Paint 材质 (M_PaintBrush):

从蓝图中获取到 position 和 velocity,作为材质画在 RenderTarget 上。
Erase 材质(M_EraseBrush):

通过降低该 UV 处的透明度来减弱强度。
Clear 材质 (M_ClearBrush):

直接涂黑,这个材质可能不会常用,因为一旦画上一笔后,能做的只是减缓强度,而不是直接擦掉。
创建一个 RT:

BP_PaintTarget

BeginPlay 时创建三个材质的动态实例,分别设置 Brush,Eraser,Clear

三个笔刷类型的函数,接下来创建 Trace Channels(FlowMap),默认设置为 Ignore,目的是让我们的射线始终打在我们的目标 Mesh 上,避免由于其他物体的阻断导致 Velocity 错误


StaticMesh -> Collision -> FlowMap -> Block
反正就是要绘制 Mesh 的 Collsion Responses,FlowMap 设为 Block
BP_PaintTarget 就完成了。
BP_MyPawn
创建一个 Pawn 类的 BP,添加 SpringAram,Camera,Sphere(Sphere 作为笔来用,后面说)组件

创建 LineTrace Function

有几点需要解释一下
在 Project Setting 中需要开启 Support UV From Hit Results,这样才可以使用 Find Collision UV 节点,这样就可以摆脱平面,从三维角度进行绘制了
Get Hit Result Under Cursor by Channel / LineTraceByChannel 两个节点设置好我们创建的 Trace Channel ,FlowMap
我们主要从这个函数中获得三个信息
- Position 用于确定笔刷的位置
- UVMouse Velocity 确定要 “画” 什么颜色
- UVPosition 确定在 RT 上的什么位置画
Event BeginPlay:

关于 calculate Brush Size 的部分,我处理的也比较笨拙,只是为了让笔刷看起来更加合理,如果有更好的办法,可以忽略我的处理方法,UI 就更简单了,我只是将 Radius 的显示放在了 UI 上,其实用 print 的方法也可以
以下的方法就是一些操控模式了,也可以自己定义
Event Tick:

这部分也很通俗易懂,旋转,画,擦,清除
因为是可以在 3 维空间中画的,所以说,自然要有一些简单的控制


移动,旋转,缩放,都是很简单的东西

控制笔刷大小等,宏 Redius2Size 只是将 Radius * 100
上篇文章中处理 FlowMap 要 - 0.5 再 * 2,对于我们的 RT 就不用了,但是要乘(-1,-1),如下:

简单演示:

换个水的材质,试试效果,本人拿手绘板绘制的,鼠标绘制惨不忍睹:

总之画起来还是有些许不太舒服的地方(手绘板会改善比较大),且不能回撤,确实也没想到其他比较好的处理方法。毕竟手绘的不是那么的自然,而且大部分时候需要一笔成型。就这样。
以上如有不对,还望大佬指正,感谢。 > 本文由简悦 SimpRead 转码