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

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

效果:

关键节点:


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之中的运用方法,对于之后的材质制作不再停留在视觉效果上,而是多了很多功能性的展望上。为之后的学习与制作过程开阔了视野。

UE4-基于顶点偏移制作拉扯效果相关推荐

  1. ShaderForge-模型拉扯效果

    ShaderForge-模型拉扯效果 本系列开始进行ShaderForge实战案例分析,案例的参考来源自浮生若梦老师的ShaderForge教程. 附带教程链接地址:https://space.bil ...

  2. 如何在UE4游戏中实现植物风场效果?

    导语:如何让游戏里的植物产生类似风吹过的效果?腾讯游戏学院专家Freddy将在本文中,尝试使用UE4引擎的PivotPainter2.0插件制作此效果,一起来看看吧. 静态的游戏场景氛围是十分生硬的, ...

  3. 《Unreal Engine 4蓝图可视化编程》一2.2 制作瞄准镜效果

    本节书摘来异步社区<Unreal Engine 4蓝图可视化编程>一书中的第2章,第2.1节,作者: Brenden Sewell 译者: 陈东林 责编: 胡俊英,更多章节内容可以访问云栖 ...

  4. StarWink UV顶点动画制作详解

    StarWink UV顶点动画制作详解 我们先来看最终效果 实现原理: 1.利用算法得到圆形差值的UV坐标(中间为0)去采样纹理,得到圆形扩散的循环纹理动画. 2.利用算法得到循环的圆形扩散遮罩,并作 ...

  5. WPF学习12:基于MVVM Light 制作图形编辑工具(3)

    本文是WPF学习11:基于MVVM Light 制作图形编辑工具(2)的后续 这一次的目标是完成 两个任务. 本节完成后的效果: 本文分为三个部分: 1.对之前代码不合理的地方重新设计. 2.图形可选 ...

  6. 推荐20款基于 jQuery CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. Android开发学习之基于ViewPager实现Gallery画廊效果

    通过我们前面的学习,我们知道ViewPager是可以做出近乎完美的滑动体验,回顾整个Android,我们发现Gallery具备同样的特点,于是我们大胆地猜想,Gallery是否和ViewPager之间 ...

  8. 使用ivx滑动时间轴制作动画效果的经验总结

    之前的案例中使用过时间轴制作动画效果,其实在ivx中还有一个滑动时间轴组件,它必须添加在画布组件下,虽然也是通过给组件添加轨迹实现播放效果,不过根据名字比较容易理解它是通过滑动来触发播放的,而且可以选 ...

  9. 带顶点动画的护盾效果——UnityShader学习笔记

    文章目录 自言自语 一.效果 二.C# 三.Shader 总结 自言自语 最近又是很久没有更新笔记了.原因有二. 一.最近一直再啃一个看起来酷炫的护盾效果 啃了好久啊.直至效果满意 也理解了. 这个是 ...

最新文章

  1. Python学习之路基础篇--10Python基础,函数进阶
  2. 面试官问:Integer 如何实现节约内存和提升性能的?
  3. RxJava 在Android中的应用(二)
  4. LeetCode:Add Two Numbers
  5. 剑指offer(17)树的子结构
  6. 十、input与跳转
  7. Chrome浏览器各种文件的存放路径汇总
  8. (79)FPGA如何处理跨时钟域问题-面试必问(三)(第16天)
  9. 递归算法的总结与应用
  10. apriori算法_机器学习(无监督学习)关联规则Apriori算法原理与python实现
  11. 白板推导系列Pytorch-PCA降维
  12. 解压缩文件常用命令——linux
  13. 应用泛函分析—线性空间
  14. 重装系统后安装并激活Office
  15. css(五)项目实战,ps切图
  16. 锁存器(latch)和触发器(filp-flop)的概念和区别?为什么多用register。行为级描述中latch如何产生的?
  17. WUST 五一萌新向CTF writup
  18. 野山参怎么吃好,这样炖是不是效果最好
  19. html的入门——从标签开始(2)
  20. Java高并发编程 (马士兵老师视频)笔记(二)并发容器

热门文章

  1. 计算机高新技术考试(OSTA)认证考试招生简章
  2. MySql 资料网站
  3. 经济泡沫和泡沫经济的区别_投资绿色技术:绿色黄金还是绿色泡沫?
  4. 新概念英语第一册 (1)
  5. 对博客园不敢恭维!!!
  6. 指定时间几个月(自然月)之后的时间
  7. 易语言 剪切板 html,易语言剪切板操作源码
  8. 基于Python的招聘信息的大数据可视化分析系统
  9. IPO(INPUT PROCESS OUTPUT)图
  10. Hyperledger Fabric 1.3 官方文档翻译(三)关键概念 (Key Concepts) - 3.7 对等节点 (Peers)