Fyuse 效果简单分析

Fyuse 展示效果

入口

通过浏览器查看 Fyuse 分享出的链接，可以一窥 Fyuse 的相关技术

我们在此分析一个示例，Nami: https://fyu.se/v/embed/rlhi31gw2g

两个核心 js 文件，用于实现 Fyuse 效果

https://fyu.se/assets/2.0/viewer/js/fyu.min.js

核心代码，代码做了混淆，整理后代码总共不到 1000 行，主要做了两件事情

1. 用于处理所有图片的映射；
2. 用于处理键盘，鼠标及 touch 行为对应的图片转换操作。

https://fyu.se/assets/2.0/viewer/motionhelper.js

用于处理硬件的动作即陀螺仪的旋转角度，交由 fyu.min.js 进一步对应到图片转换上，类似键盘，鼠标，touch 行为

1. 一组 jpg，frames_0.jpg to frames_n.jpg，数量根据拍摄时长确定；
2. 可以看出，视频是做了帧压缩，从单秒的 25 帧，提取出了特定几帧（具体几帧需要详细计算）。

图片变化时，会请求如下地址：

blob:https://fyu.se/34b141c8-3673-453d-a5e5-b354964f994b 这里用到了 html5 的 local storage 特性，每次请求的是 local cache，即页面打开时，我们其实已下载了所有的图片。

总结

Fyuse 的 3D 特效是伪 3D，本质上就是一个视频（or GIF），根据用户行为切换到不同的时间点对应的图片上，从 web 端的实现上看，逻辑不复杂，只有图片的切换，并未使用什么 3D 矩阵运算等算法。

Fyuse 拍摄效果

拍摄完成后，会出现一个点状矩阵图像，这个效果看起来像是建立三维模型，通过各种拍摄尝试，并未对最终查看效果产生影响。

猜测这个效果只是对图片做了特征提取，像是通过边缘检测算法先拿到主体形状，再通过固定宽度取出关键点，构建一个很酷的效果而已。