专辑汇总链接:
aganztracy:[Visual effect graph tutorial 专辑]开篇及思路介绍zhuanlan.zhihu.com![a6ac05d4e2425b387674d22ff3df3b35.png](https://i-blog.csdnimg.cn/blog_migrate/5e3b53317281e8fe37f82366e54f5a8a.jpeg)
本章动画大概的效果(原理一样):
![ac85368f89ad6477fa14ead22e8c2b45.png](https://i-blog.csdnimg.cn/blog_migrate/93257b9a26805aea9c406c4d75e2913a.png)
关键思想:线条动画由粒子的拖尾形成
文章内容:
如果不出意外应该会了解到:
- 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](https://i-blog.csdnimg.cn/blog_migrate/2ac1bf1cfb8b32cb119d72324af0db96.jpeg)
![26a20768bed3caebe1ee19fc1831bbd6.png](https://i-blog.csdnimg.cn/blog_migrate/12eeaec82a831b28e07f6cd811734e4c.jpeg)
![78e4d1ba9338f4f548313dc8a78a06e8.png](https://i-blog.csdnimg.cn/blog_migrate/084c32836c2ad76cc649940153a1a15a.jpeg)
- 初始拖尾预设的节点分析(沿着运行顺序):
- spawn:每次系统吐出10个粒子(相对应会有10个线条)
- initialize particle :初始化粒子系统,随机设置粒子的速度、渐变颜色、生命时长
- update particle:update 粒子系统时添加了 turbulance节点(湍流效果)
![33314481f3333ac3bcfb108e572a4564.png](https://i-blog.csdnimg.cn/blog_migrate/e2bc4ca16918610f1d72c55cc4ba3abe.jpeg)
![0e65b400c2c4502582b082fad4010eb1.png](https://i-blog.csdnimg.cn/blog_migrate/30b632f243eb7e9cbe625a3e351e6aa6.jpeg)
-
- gpuEvent:在update 中添加了一个响应事件的节点SpawnEvent,使得每个粒子在update过程中会吐出拖尾strip,Rate值影响拖尾的长度
- initialize particle strip:初始化拖尾,设置拖尾的容量等?????????????让拖尾的位置继承(inherit)原粒子的位置以及颜色、设置拖尾的lifetime。
![3c0223efef7effbc6fbd9dbca6bccf05.png](https://i-blog.csdnimg.cn/blog_migrate/bf98f16484809201139dac69bf20635c.jpeg)
![eb3d4c6256bf8b693594b627eee66498.png](https://i-blog.csdnimg.cn/blog_migrate/c049b1f2e4f275d6d1d5e0145ef7772c.jpeg)
-
- update particle strip:和粒子的update一样,在拖尾的update中添加了turbulance节点,会导致线条中每段的位置收到湍流场的力的作用发生位置变化从而弯弯曲曲
![171b884f67dd952eecc335a95eaab2e6.png](https://i-blog.csdnimg.cn/blog_migrate/111d5c660031b5ccae201f036234b5e4.jpeg)
![dc6535c9a66e89f718699b4ea61c2c77.png](https://i-blog.csdnimg.cn/blog_migrate/b18f9c63d2259c79a799e3a525a0b5a6.jpeg)
-
- output particle quad:设置线条的纹理贴图及其贴图相关设置(如拉长纹理stretch还是重复纹理repeat、blend mode选择alpha透明、opague不透明、还是additive累加)、设置线条的size随着生命时长按曲线插值,造成线条两端细中间粗的效果。
分析完demo后,我们可以发现:
- 拖尾是由原来的粒子系统在update时触发spawn particle strip事件而形成的
- 一个粒子一条拖尾轨迹,粒子的运动位置控制了原始拖尾的轨迹
- 拖尾的属性效果可以由原始粒子系统继承而来,也可以使用新的节点在拖尾的粒子流中自定义
所以该如何做可控位置线条动画呢?(例如trace data 的数据可视化)->规定粒子的运动轨迹,并添加给每个粒子拖尾
2. 让粒子沿着指定轨迹运动
轨迹数据如下:
现在假设我已经拥有了轨迹数据,一条轨迹数据是一个一系列位置数据的列表:
![101dfecf9794d58f9573e2cfd784bc25.png](https://i-blog.csdnimg.cn/blog_migrate/7051d577e21e7080186b618c721c67ec.jpeg)
在这里我把每一行的行数当作粒子的z坐标来使用,没有使用数据t。
一个列表表示一个粒子运动的所有位置信息,现在需要让粒子的位置从第一行运动到第二行再到第三行...直到运动到数据的最后一行。
要可视化多条轨迹,那么每一条trace数据,都有一个这样的表格:
![05506c95c4fbf3f5b79df3b06673b7f0.png](https://i-blog.csdnimg.cn/blog_migrate/d81e6dcb9abe019dffa46ac6cfdc9540.jpeg)
如何将这些数据传递给vfx中的粒子呢?
- 创建两个Rendertexture(此处命名为initialPos和Position)存储数据:
- initialPos 存储每个粒子的起始位置(即每个表格的第一行数据)
- Position 存储每个粒子的当前的位置,以每一行为时间线,在c#中实时更新Position 的数据。
2. 在vfx的initialize particle模块和Update Particle 模块中添加Set position from map 节点,将两个rendertexture 分别传入
![e8a140e8f71ff7a73c94782bc9b32f79.png](https://i-blog.csdnimg.cn/blog_migrate/89af3fa0e5b39174853c1d1e54b031ef.png)
![fba422fafbeee61c25287d0b2f3d7c06.png](https://i-blog.csdnimg.cn/blog_migrate/006f28dca1e67720ec13ea3cdc76ae4e.png)
代码部分
1) 从csv读取位置数据存入数组dataArray[],重映射后存入Vector3[]
//读取资源的方式
remap 是自定义的一个重映射的函数,如果你的数据没有这个需求,可以直接存入Vector3[]数组中
float
2) 将读入的Vector3[]数据存入renderTexture
在unity工程中新建两个rendertexture,规定一个足够的大小,并拖入面板中给两个RenderTexture赋值
![951292af62352d3eed9470191860937c.png](https://i-blog.csdnimg.cn/blog_migrate/d3893b5d169c2f534d6df178ec0a15cb.png)
![5c98473e07002b7e9b726299af78fa90.png](https://i-blog.csdnimg.cn/blog_migrate/d48a670fe2e4aeb339f4e2805187dc0e.jpeg)
![a21a90b6ec2ab4827d1e760cbd9c8f18.png](https://i-blog.csdnimg.cn/blog_migrate/ab2295ee2eda0382c127aa8c7d2641b9.jpeg)
#region Editable attributes
3)update()中实时更新Position (renderTexture)纹理
定义一个全局属性totalFrameNum作为时间,在Update函数中更新该属性。设置一个粒子运动的速度变量,计算Timeline,即当前应该传入Position哪一帧位置数据。
void
根据timeLine计算当前应该写入哪行(nowTime)数据。更新Position纹理数据。
void
以上代码因为个人程序的其他需求,夹杂着一些未解释的属性和代码段,但是重点代码段我都加粗了。代码部分到这里基本结束了,也许还需要的功能有:
- 如切换下一组轨迹数据或者
- 让粒子回到初始点循环轨迹数据
- ...其实就是一些进程控制的问题,理好逻辑写出来相信不难!
这里再介绍一个restart线条动画时的问题
当粒子运行到最后一个位置时,会重新到下一个线条作品的起始位置,此时仍有拖尾,会造成一条很难看的直线,因此到达末尾时可以设置不显示拖尾持续几秒钟,防止直线的产生。
![5f0614f77d706787656ac31dbb473349.png](https://i-blog.csdnimg.cn/blog_migrate/c9ca461fa4bf8bdbbf1cfb1098b80c8c.jpeg)
也许有用的代码(这里涉及到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](https://i-blog.csdnimg.cn/blog_migrate/37345d23962c6b459bc8806a313bcf9b.jpeg)
![2939ed0fddacede8ca98d6734f903acb.png](https://i-blog.csdnimg.cn/blog_migrate/3adbf4b7a001bfff37b3655b5f4fc17d.png)
以下是我的重启线条动画的代码,设置了很多用来控制进程的变量,有点散乱(写的时候一腔热血,写完功能做到了就不想理逻辑了啊哈哈。。)不要脸地放出来,仅供参考哈
void
3.列举几个常见的可控属性
线条运动起来了剩下的就是怎么让线条更有可视化的作用了。
- 比如用颜色可视化时间:让不同t的粒子颜色映射到不同颜色上,再让trail继承粒子的颜色,就可以生成可视化了时间数据的渐变颜色线条了。
![c04161d5badf4951684d2a3c88b1e79f.png](https://i-blog.csdnimg.cn/blog_migrate/e21b6adb7a730892c34ea1ce9ba38e50.jpeg)
![3d5f9ede4fe0793bb6c162160c216a7b.png](https://i-blog.csdnimg.cn/blog_migrate/ac821d34180166fc9ee1b63ae80e6f22.jpeg)
![8cc3268d569be4c5842d65899475f216.png](https://i-blog.csdnimg.cn/blog_migrate/dd172ea963514fdbb4e0fcfb176d3efe.jpeg)
- 比如换不同的trail贴图,换blendmode
![765991cc3a2b22a10787f3570a18df16.png](https://i-blog.csdnimg.cn/blog_migrate/dfc6e061103e764dab141ce38515233c.jpeg)
![5c666c52c7f08f236301884ae3281aa6.png](https://i-blog.csdnimg.cn/blog_migrate/74e2d103f55ffa4b5dc09f14df152624.jpeg)
![d6740417d124e76a945a3a325d7ce597.png](https://i-blog.csdnimg.cn/blog_migrate/3bbe4e09183c5ed438a10fa09022fdf7.jpeg)
![62ba08bf0eeecc54c58cb1321aba62ae.png](https://i-blog.csdnimg.cn/blog_migrate/07627f0f63d8bbe40d0b371a570fc9a0.jpeg)
![7af97fa6fd356ce3b357df50987f9171.png](https://i-blog.csdnimg.cn/blog_migrate/e09df441a0595485eb961c4bc232a6da.jpeg)
![0a77f87919d9f66d712683cc823d154d.png](https://i-blog.csdnimg.cn/blog_migrate/7a91925c5dd47c0dfd3d234db7a47039.jpeg)
- 或者在拖尾的大小和颜色上下点文章
![d796b92ac5e766796c8514109e47eb4f.png](https://i-blog.csdnimg.cn/blog_migrate/6dc8f2b586e3235103491a0d35697e26.jpeg)
- 还可以修改trial的lifetime ,让拖尾一段一段的
- .....etc
01 over ,7天前写的草稿,今天才写完,这类文章永远是重要性和紧急性都最低的to do。
所以当初为啥挖坑呢。陷入疑思。
况且感觉第一次写这类教程并不容易,总觉得很多没讲清楚的点,总觉得想讲清楚要多花很多精力,说到这里真心感谢以往看过的有用的教程了。
最后希望起码没有误导读者。下周见02!
- 2020523 更新一个可以平滑插值轨迹数据的插件,源码轻量级,亲测可以修改以自己的目的使用,可直接搜索下载。
![478bfbf76963cba4a0553020a7041330.png](https://i-blog.csdnimg.cn/blog_migrate/52caa5accef0e279ac8ee6dea2a9e9ff.jpeg)