echarts力导向图节点连线动画_[Visual effect graph 专辑-01] 如何使用vfx生成可控位置的线条动画...

专辑汇总链接:

aganztracy:[Visual effect graph tutorial 专辑]开篇及思路介绍​zhuanlan.zhihu.com
a6ac05d4e2425b387674d22ff3df3b35.png

本章动画大概的效果(原理一样):

ac85368f89ad6477fa14ead22e8c2b45.png
traceData Visualizationhttps://www.zhihu.com/video/1245110086806179840

关键思想:线条动画由粒子的拖尾形成

文章内容:

如果不出意外应该会了解到:

  • vfx中自带的拖尾效果的结点分析
  • c#如何读取csv表格数据
  • 让拖尾沿着特定轨迹数据运动的方法
  • c#传入数据到renderTexture,vfx如何读取rendertexture的数据
  • c#代码控制vfx属性
  • 介绍几个常用的vfx视觉上的可控属性

1.分析vfx中自带的拖尾效果

注意:因为unity团队一直在不断更新vfx的内容,所以你的vfx版本要足够新才能使用拖尾效果

前提知识:

1.知道vfx是什么、基本原理(gpu粒子系统)
2.知道如何新建vfx
3.知道vfx的基本操作(节点类别组成、如何添加节点、属性参数等、移动缩放视图等)
  • 新建vfx后,删除自带的初始粒子系统
  • 空格键唤出node框,选择System-simple heads & Trails(system)节点,即可得到下图的线条动画预设(System节点是vfx自带的粒子效果的展示demo)

09712df388b7f5d285d8f8a7d8aebc15.png
system-simple heads & trails(system)节点

26a20768bed3caebe1ee19fc1831bbd6.png
vfx自带的线条动画预设

78e4d1ba9338f4f548313dc8a78a06e8.png
vfx自带的线条动画预设对应的节点
  • 初始拖尾预设的节点分析(沿着运行顺序):
    • spawn:每次系统吐出10个粒子(相对应会有10个线条)
    • initialize particle :初始化粒子系统,随机设置粒子的速度、渐变颜色、生命时长
    • update particle:update 粒子系统时添加了 turbulance节点(湍流效果)

33314481f3333ac3bcfb108e572a4564.png
无 turbulance时,粒子只会在初始速度下沿着一个方向运动

0e65b400c2c4502582b082fad4010eb1.png
增加turbulance后,粒子在湍流场作用下,收到不同的力改变了运动方向
    • gpuEvent:在update 中添加了一个响应事件的节点SpawnEvent,使得每个粒子在update过程中会吐出拖尾strip,Rate值影响拖尾的长度
    • initialize particle strip:初始化拖尾,设置拖尾的容量等?????????????让拖尾的位置继承(inherit)原粒子的位置以及颜色、设置拖尾的lifetime。

3c0223efef7effbc6fbd9dbca6bccf05.png
在粒子系统的update后方连线添加Output节点,即可看到原有粒子的运动轨迹

eb3d4c6256bf8b693594b627eee66498.png
黄框中是原有粒子,每个粒子后都有拖尾。在无Output节点时,原有粒子未显示
    • update particle strip:和粒子的update一样,在拖尾的update中添加了turbulance节点,会导致线条中每段的位置收到湍流场的力的作用发生位置变化从而弯弯曲曲

171b884f67dd952eecc335a95eaab2e6.png
所有线条如黄线一样弯弯曲曲

dc6535c9a66e89f718699b4ea61c2c77.png
把turbulance的intensity增加时,弯曲更明显
    • output particle quad:设置线条的纹理贴图及其贴图相关设置(如拉长纹理stretch还是重复纹理repeat、blend mode选择alpha透明、opague不透明、还是additive累加)、设置线条的size随着生命时长按曲线插值,造成线条两端细中间粗的效果。

分析完demo后,我们可以发现:

  • 拖尾是由原来的粒子系统在update时触发spawn particle strip事件而形成的
  • 一个粒子一条拖尾轨迹,粒子的运动位置控制了原始拖尾的轨迹
  • 拖尾的属性效果可以由原始粒子系统继承而来,也可以使用新的节点在拖尾的粒子流中自定义

所以该如何做可控位置线条动画呢?(例如trace data 的数据可视化)->规定粒子的运动轨迹,并添加给每个粒子拖尾

2. 让粒子沿着指定轨迹运动

轨迹数据如下:

现在假设我已经拥有了轨迹数据,一条轨迹数据是一个一系列位置数据的列表:

101dfecf9794d58f9573e2cfd784bc25.png
我的数据是csv表格,每个位置有三个参数(t,x,y)【此处显示的是数据的局部截图】

在这里我把每一行的行数当作粒子的z坐标来使用,没有使用数据t。

一个列表表示一个粒子运动的所有位置信息,现在需要让粒子的位置从第一行运动到第二行再到第三行...直到运动到数据的最后一行。

要可视化多条轨迹,那么每一条trace数据,都有一个这样的表格:

05506c95c4fbf3f5b79df3b06673b7f0.png

如何将这些数据传递给vfx中的粒子呢?

  1. 创建两个Rendertexture(此处命名为initialPos和Position)存储数据:
  • initialPos 存储每个粒子的起始位置(即每个表格的第一行数据)
  • Position 存储每个粒子的当前的位置,以每一行为时间线,在c#中实时更新Position 的数据。

2. 在vfx的initialize particle模块和Update Particle 模块中添加Set position from map 节点,将两个rendertexture 分别传入

e8a140e8f71ff7a73c94782bc9b32f79.png
initialize particle模块传入初始位置数据

fba422fafbeee61c25287d0b2f3d7c06.png
Update Particle 模块传入实时更新的数据

代码部分

1) 从csv读取位置数据存入数组dataArray[],重映射后存入Vector3[]

//读取资源的方式

remap 是自定义的一个重映射的函数,如果你的数据没有这个需求,可以直接存入Vector3[]数组中

float 

2) 将读入的Vector3[]数据存入renderTexture

在unity工程中新建两个rendertexture,规定一个足够的大小,并拖入面板中给两个RenderTexture赋值

951292af62352d3eed9470191860937c.png
unity文件夹中右键新建两个rendertexture

5c98473e07002b7e9b726299af78fa90.png
RenderTexture属性

a21a90b6ec2ab4827d1e760cbd9c8f18.png
拖入赋值
#region Editable attributes

3)update()中实时更新Position (renderTexture)纹理

定义一个全局属性totalFrameNum作为时间,在Update函数中更新该属性。设置一个粒子运动的速度变量,计算Timeline,即当前应该传入Position哪一帧位置数据。

void 

根据timeLine计算当前应该写入哪行(nowTime)数据。更新Position纹理数据。

void 

以上代码因为个人程序的其他需求,夹杂着一些未解释的属性和代码段,但是重点代码段我都加粗了。代码部分到这里基本结束了,也许还需要的功能有:

  • 如切换下一组轨迹数据或者
  • 让粒子回到初始点循环轨迹数据
  • ...其实就是一些进程控制的问题,理好逻辑写出来相信不难!

这里再介绍一个restart线条动画时的问题

当粒子运行到最后一个位置时,会重新到下一个线条作品的起始位置,此时仍有拖尾,会造成一条很难看的直线,因此到达末尾时可以设置不显示拖尾持续几秒钟,防止直线的产生。

5f0614f77d706787656ac31dbb473349.png
看见没,就是那丑陋的直线

也许有用的代码(这里涉及到c#调用vfx属性的知识):

dataVisualVfx.SetInt ("trialsRate", 0); //设置trialsRate为0不出现尾巴
dataVisualVfx.GetComponent<VisualEffect> ().Reinit (); //重启vfx粒子系统

补充:c#控制vfx变量需要

在vfx的属性面板中新建该变量,命名并勾选exposed使其显示在vfx的inspector中,在inspector中的属性前打勾,表示该属性的值以面板中的值为真正的值。Set方法给属性赋值。

更多方法详见官方文档.visualeffectgraph@7.1/manual/ComponentAPI

c891a43d1a8251bfd59b77432b933026.png

2939ed0fddacede8ca98d6734f903acb.png

以下是我的重启线条动画的代码,设置了很多用来控制进程的变量,有点散乱(写的时候一腔热血,写完功能做到了就不想理逻辑了啊哈哈。。)不要脸地放出来,仅供参考哈

void 

3.列举几个常见的可控属性

线条运动起来了剩下的就是怎么让线条更有可视化的作用了。

  • 比如用颜色可视化时间:让不同t的粒子颜色映射到不同颜色上,再让trail继承粒子的颜色,就可以生成可视化了时间数据的渐变颜色线条了。

c04161d5badf4951684d2a3c88b1e79f.png

3d5f9ede4fe0793bb6c162160c216a7b.png

8cc3268d569be4c5842d65899475f216.png
  • 比如换不同的trail贴图,换blendmode

765991cc3a2b22a10787f3570a18df16.png

5c666c52c7f08f236301884ae3281aa6.png

d6740417d124e76a945a3a325d7ce597.png

62ba08bf0eeecc54c58cb1321aba62ae.png

7af97fa6fd356ce3b357df50987f9171.png

0a77f87919d9f66d712683cc823d154d.png
  • 或者在拖尾的大小和颜色上下点文章

d796b92ac5e766796c8514109e47eb4f.png
  • 还可以修改trial的lifetime ,让拖尾一段一段的
  • .....etc

01 over ,7天前写的草稿,今天才写完,这类文章永远是重要性和紧急性都最低的to do。
所以当初为啥挖坑呢。陷入疑思。
况且感觉第一次写这类教程并不容易,总觉得很多没讲清楚的点,总觉得想讲清楚要多花很多精力,说到这里真心感谢以往看过的有用的教程了。
最后希望起码没有误导读者。下周见02!
  • 2020523 更新一个可以平滑插值轨迹数据的插件,源码轻量级,亲测可以修改以自己的目的使用,可直接搜索下载。

478bfbf76963cba4a0553020a7041330.png
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值