亿级前端项目中的 3D 技术-支付宝 2020 年新春活动的背后

[dtysky]

前言

新春红包项目，作为每年用户基数最大的支付宝活动之一，对整个项目组的技术都是一个很大的考验。而作为前端，我们的技术考验就是如何在保证稳定性的同时，为用户不断带来更好的创新体验。

而今年的新春红包项目相比以前，多了不少互动图形方面技术的运用，尤其是第一次对 3D （ WebGL ）技术的引进。对于新春这个亿万量级的活动而言，这无疑是个巨大的挑战。但作为合格的工程师，效果和稳定性的平衡是我们的一贯的追求，经过了前期的积累，我们使用自研的 Web3D 游戏引擎以及特效编辑器，学习了许多在整个横向前端领域、做的相对最好的游戏领域的经验，最终达到了比较复杂 3D 场景下极低的异常率。

我们的成果

我们在此次新春活动的两个场景中都达到了极好的效果和稳定性的平衡：

1. 首页 3D 展示：5 个复杂模型的内存总开销为峰值 30M，稳定 20M，对整体稳定性无影响。
2. 福满全球：3D+UI 总内存开销峰值 70M，稳定 40M，加 Webview 总开销 100M 。

全文

图片视频太多我就不发全文了。总之如果对我们团队有兴趣，除了文末的联系方式，也可以直接私信我。

全文： https://zhuanlan.zhihu.com/p/115989449

[251243021]

看到头像和文章就知道是瞬光大小姐了