Web|支付宝App探索Web3D动画背后的故事 App|团队|动画|游

【Web|支付宝App探索Web3D动画背后的故事】_原题为 支付宝App探索Web3D动画背后的故事

3D动画和游戏一直是前端领域的难点，支付宝App从2017年春节推出AR红包开始，一直在Web3D领域进行探索和实践。本文将以亲历者的角度，为你讲述这段不断探索和自我突破的经历。

文 / 曾柏然
很荣幸到了五年陈，我做的工作一直和Web3D相关，从头到尾经历了支付宝Web3D发展。本文把这段经历记录下，从技术和业务两方面分析，支付宝Web3D是如何在集团技术中逐渐上位的，并且尝试推演未来的各种可能性。
初生牛犊不怕虎 2016年底，一款Pokemon go的手机AR游戏爆火，大家开始在现实生活中捕捉自己的宝可梦， AR的概念也因此进入大众视野。
也许是受到Pokemon go的启发， 2017年春节，支付宝推出了AR红包，大家扫周围的环境，就能发现朋友藏的红包。产品中红包是一个3D模型，虽然是2016年，但是在支付宝里面做3D动画渲染，这还是第一次。

文章图片

当年的AR红包是多个团队完成的，图像识别是写客户端代码团队实现的，而红包动画是前端团队实现的。其实当时红包动画是由一位游戏开发大佬通过C代码实现的，但这位大佬所在的团队是前端团队。新春之后，前端自然有发展3D渲染的打算，但是客户端团队出于各种的考虑并不想把AR的3D渲染交出去，所以支付宝当时3D渲染分成两条线发展，客户端做AR和3D渲染技术，而前端开始了真正意义上的Web3D探索，他们的代码是纯净的JS ，运行环境是任何一个支持WebGL的浏览器中。
摆在这个团队面前最大的问题是：Web3D要怎么发展？
2017年初，支付宝放弃了在社交方向的尝试，开始回到纯粹的金融理财工具定位， AR因为富有科技感，被看作未来的一个重点方向，客户端渲染开始起飞。而失去AR支持的Web3D ，必须找到新的业务落地，否则这个前端技术团队将不复存在。
除了业务问题，技术上也是非常艰难， Web上主流的3D渲染引擎是ThreeJS ，而这个引擎体积巨大，功能繁多，使用门槛很高，渲染一个3D模型到底是选择.obj还是.fbx文件，都没人知道。 3D模型的文件格式有很多种，而没有一种是适合在Web上渲染的。
恰巧当年Web规范提出了GLTF的Web模型格式，这个格式在今后成为了每个Web引擎必须完美遵循的规范。前端团队重新来过，不使用ThreeJS ，写了一个全新的渲染引擎“R3”（Render for 3D），同时做了一个Unity的插件，可以直接将Unity的模型导出到Web进行展示，配套了组件开发模式和特效系统，解决了3D渲染的基本问题。当年“R3”团队的Leader开始奔走于支付宝的各个业务团队之间，开始进行业务推广，而这是运气给Web3D带来了第一次起飞，让它在客户端渲染面前站稳了脚跟。
2017年，支付宝迎来了“公益红利” ，蚂蚁森林和蚂蚁庄园成为最火爆的端内应用，和支付工具相比，它们能显著提高用户的停留时长，并且更用户也很乐意去通过支付宝进行公益活动，增强了支付宝的品牌效应。
R3配合蚂蚁庄园，上线了第一款3D小游戏——星星球。用户通过玩星星球可以得到庄园道具奖励，这让星星球的用户量在一周之内用户达到了非常大的数量，从此所有的业务方都希望通过Web3D复制这个“增长奇迹” 。
但其实，星星球的上线非常坎坷，在技术上遇到了诸多挑战。

文章图片

因为第一次大量使用WebGL ，我们收到了很多底层的不兼容问题，这些问题大多数是由于系统驱动引起的，这部分代码对于前端来说是黑盒，由于支付宝的网页都是跑在UC浏览器内核，当时我们求助了UC团队，他们通过修改浏览器的行为来绕过系统兼容问题，让我们的WebGL相对稳定。而对于非常老版本的安卓系统，我们只能放弃，等待时间来清洗历史遗留问题。
时至今日， WebGL在稳定性上已经完全达标，不可用率也低到忽略不计。
“下一个爆款”的困境蚂蚁森林和蚂蚁庄园的狂奔，让更多业务方看到了游戏的力量，很多业务方都找过来要做“养成游戏” ， R3团队选择了做“惠星球” ，游戏通过做任务升级建筑获得一定奖励，游戏的制作精细程度和开发工作量是“星星球”的10倍以上。