发现个酷炫的动效用 webgl 写的，想知道这个雾化的轨迹计算是啥？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1862 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天发现个网站： https://www.coloros.com/topic/coloros7.html

这个网站的“专属艺术名片”页面，随着鼠标移动有雾化的彩色跟随

想知道这个是如何计算轨迹的？

有人能给出个大致方向吗？

雾化

动效

轨迹

WEBGL

28 条回复 • 2019-11-23 03:43:42 +08:00

meteor957

2019-11-22 14:28:51 +08:00

这动画确实挺秀

Rhonin

2019-11-22 14:29:11 +08:00

这就是个 canvas 吧，mousemove 事件？

mengkun

2019-11-22 14:43:07 +08:00

用的是这个开源组件： https://github.com/PavelDoGreat/WebGL-Fluid-Simulation

----------
题外话，coloros 这个页面感觉是实习生写的。这一连串的函数……无力吐槽
https://i.loli.net/2019/11/22/Ia41eto5GnZFJCh.png

Alander

2019-11-22 14:48:49 +08:00

@mengkun 哈哈哈哈哈，十分感谢帮我找到这个组件，可是你是如何找到这个组件的呢？

Alander

2019-11-22 14:49:19 +08:00

@Rhonin 是的，确实是监听 mousemove 事件，只是好奇这个雾化的怎么做的

JerryCha

2019-11-22 14:49:39 +08:00

@mengkun j...jQuery ？？？？？
我还以为国内早就已经全面 ARV 化了。

Alander

2019-11-22 14:52:14 +08:00

@JerryCha 哈哈哈哈哈，在做这种小应用的时候，原生 + JQuery 可能更加快速能够出页面

mengkun

2019-11-22 14:54:36 +08:00

@Alander 因为昨天晚上我也在思考和你这同样的问题……然后就研究了一下这个页面的源代码，然后就在 Github 上给找到了……

meteor957

2019-11-22 14:55:47 +08:00

@mengkun 请问老哥截图中看代码用的啥插件啊，可以格式化混淆后的 js 吗

Alander

2019-11-22 14:56:25 +08:00

@mengkun 哈哈哈哈哈哈，看来大家都比较好奇呀

Alander

2019-11-22 15:01:08 +08:00

@meteor957 格式化的话本身 chrome 的 devtools 就可以啊

mengkun

2019-11-22 15:02:18 +08:00

@meteor957 插件是 iFormatTool，作者 @MaiCong
格式化功能只能简单的排下版

lvA

2019-11-22 15:04:24 +08:00

是我机子垃圾吗有点卡啊

coloz

2019-11-22 15:07:09 +08:00

@lvA 1050ti 的笔记本表示，加载的时候卡

Alander

2019-11-22 15:08:03 +08:00

@coloz
@lvA
我公司辣鸡台式机感觉都很流畅啊，不知道啥情况

yejinmo

2019-11-22 15:18:38 +08:00

有没有有闲心的大佬提取下这个效果做 Wallpaper Engine 的壁纸啊。。

Atukey

2019-11-22 15:52:29 +08:00

@yejinmo 好主意~

yejinmo

2019-11-22 15:57:30 +08:00

@Atukey #17

js 被压缩混淆了。。看的头疼

Jiajin

2019-11-22 16:18:31 +08:00

这动画效果是挺帅的

yangheng4922

2019-11-22 16:20:52 +08:00

@yejinmo 已经有了网页的我之前用过

wednesdayco

2019-11-22 16:20:56 +08:00

我记得是 nvdia 出的源码

yangheng4922

2019-11-22 16:32:27 +08:00

@yejinmo
https://yh4922.github.io/fluid_wallpaper/
仓库： https://github.com/yh4922/fluid_wallpaper
从 upupoo 上下载的

hyy1995

2019-11-22 17:22:19 +08:00

挺酷

secondwtq

2019-11-22 19:22:22 +08:00

推荐 https://www.shadertoy.com/
显卡不好慎开

realpg

2019-11-22 19:28:11 +08:00

以前还没有前端这个词的时候
搞博客就喜欢搞这些没用的跟随鼠标特效

现在这只是浏览器 API 多了更酷炫一点

Les1ie

2019-11-22 19:30:02 +08:00

@yangheng4922 #22 少侠好功夫

secondwtq

2019-11-22 19:32:48 +08:00

@realpg 博客上面搞确实没用 ...
这个用来宣传产品比放博客上稍微强那么一点点吧

Cassius

2019-11-23 03:43:42 +08:00 via Android

@yejinmo
https://steamcommunity.com/sharedfiles/filedetails/?id=1748506393