UE4-基于顶点偏移制作拉扯效果

基于顶点偏移制作拉扯效果

材质方面的节点图(全览)

在这里插入图片描述

效果:

在这里插入图片描述

关键节点:

在这里插入图片描述
Absolute World Position 该节点输出 对象(已经赋予了材质)的像素在世界坐标的三维位置,XYZ对应RGB。获取的是赋予此材质的物体的每一个像素。
在这里插入图片描述
Distance 该表达式计算两个点/颜色/位置/向量并输出所得到的值之间的距离。适用于一个,两个,三个和四个分量矢量,但是表达式的两个输入必须具有相同数量的通道。在这里插入图片描述
Subtract 减法,通道逐项减法运算,同样,保持相同数量的通道。
在这里插入图片描述
Append 翻译为附加,则可以理解为组合,连接多个值组合成一个新的值。是A+B的串联。

原理:

主要依靠算法来进行实现,涉及初中及高中基础数学知识。
利用Absolute World Position节点获取所要使用的物体的各个顶点位置信息,可以理解为一个点云,物体由点组成。之后利用一个三通道值作为中心点,然后计算每一个顶点距离该中心点的距离,并且添加判断,超出一定范围则不触发效果。之后利用材质参数集或蓝图里的dynamic material来进行传参,规定顶点偏移的终点位置,即小球所在位置。

(材质部分)实现步骤:

在这里插入图片描述
首先使用Absolute World Position节点与自定义的Center节点获取定点位置与中心位置,但同时,需要利用空间思维将该三维坐标投射在只有RG通道的平面上,利用Distance节点算出两点在RG平面上的距离。
在这里插入图片描述
我们先算出一个圆锥,之后再做变体。此处,可以利用相似三角形的比例相等来进行计算。
依据图示可以算出h = H*L/R ,这即是在范围内每个像素点应提高的位置。
在这里插入图片描述
在这里插入图片描述
由此我们可以得出h点的信息,由于Absolute World Position节点是逐个计算,因此圆锥到此已经可以制作出来,但无法控制。因此添加新的三通道节点,提取其B值,即Z轴方向的值,进行Append,但注意,Append节点的结合是根据输入的值进行组合,即1+1不等于2,而是1,1。因此,生成圆锥必须要Append一个两通道的0,0,即在0,0的位置上组合上一个B值就是Z轴值。
在这里插入图片描述
在这里插入图片描述
总体的思路中Z轴方向的偏移已经做好,接下来则是进行X轴与Y轴的偏移。
其实X与Y轴可以看做同一个操作,只不过是所需要提取的数据不同而已。思路一致。
为了使拉扯效果在世界坐标中任意位置都可以正常进行,我们必须理解清楚什么是相对坐标,什么是世界坐标。

  • 世界坐标:相对于整个世界的坐标
  • 相对坐标是相对于组件父级的坐标

因此,由于Absolute World Position节点是获取的世界坐标,因此在计算目标点对于中心点位置时,必须考虑到是世界坐标。首先我们将Center的R值和G值分别提取出来。与目标点的R、G值进行相减。获取世界坐标下P点的偏移值,之后继续进行相似三角形比例相等的运算,可以得出X,Y的偏移值。然后利用Append进行X,Y的组合,生成(X,Y)坐标。然后与之前算出来的高度即Z轴进行组合,获得实际偏移点(X,Y,Z)。
在这里插入图片描述

在这里插入图片描述
判断就很简单了
添加if节点,利用之前设置的半径R,作为B值,Absolute World Position节点与Center节点算出的距离作为A值,当A≥B时,输出0,即黑色,否则为1,白色。然后添加Lerp节点,利用判断控制Alpha值,Alpha为黑时输出0,即平面,为1时则输出B值即算出来的偏移点值。
在这里插入图片描述

对颜色的判断则是利用高度信息进行判断,利用Absolute World Position节点获取模型的每一个点,进行判断,高于一定值的则输出某色,反之一样。
在这里插入图片描述

(蓝图部分)制作步骤:

材质部分之后,将进行蓝图部分的制作。该蓝图为所要赋予模型的蓝图,结构脚本中创建动态材质实例,即Create Dynamic Material Instance,并将返回值提升为变量,以作后用。
在这里插入图片描述
制作射线检测,非常简单就不赘述。
在这里插入图片描述
值得注意的是,此处我们获取了击中点的位置坐标。以便传输到我们的材质变量中。
在这里插入图片描述
创建一个小球的变量,用于获取小球的位置。

在这里插入图片描述
将此处设置为要获取位置信息的小球。
在这里插入图片描述
此处的Do once是为了不让每次射线击中时都把位置信息传递给Center进行更新,否则会出现圆锥体跟随小球滑动的现象。此处小球检测功能所传出来的PositionX与Y即击中位置的信息,将它传递给材质中Center的R,G。
在这里插入图片描述
之后进行调用,并进行判断,获取小球位置,与Center的距离,如果大于200,则执行Flase,小于等于200执行True。
在这里插入图片描述
这部分是True。直接利用小球位置进行NowPosition信息的更新即可。
在这里插入图片描述
此处为Flase。则是利用Lerp节点对于偏移后的结果进行回弹动画,Timeline只需要控制0-1的值即可。Lerp的XY值则为之前击中点获取的X,Y值,保持不变,因为要从偏移起始点弹回,因此X,Y值是不动的,动的是Z轴值。此处Z设置0.00001则是为了保证Z不为零,经验证可知,Z=0模型会出错,会消失掉。之后利用这些节点进行动画控制,传参进入NowPosition。
在这里插入图片描述
并进行Reset事件的触发,意为整个动画结束,可以进行下一次击中事件的动画。不会出现动画重叠的情况。
在这里插入图片描述

总结

制作该效果可以该数学方法进行搭建,优点是所有位置都可控,都可以利用数学公式进行变形,效果因思维而异。计算量不大,但需要一定的空间思维。
学习到了数学思维在UE4之中的运用方法,对于之后的材质制作不再停留在视觉效果上,而是多了很多功能性的展望上。为之后的学习与制作过程开阔了视野。

  • 6
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值