八卦娱乐网主页 >  音乐资讯  > 正文

支付宝App探索Web3D动画背后的故事

甘诺颖 2020-07-27 04:15:14 八卦娱乐网 148℃

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

  文/曾柏然

  很荣幸到了五年陈,我做的工作一直和Web3D相关,从头到尾经历了支付宝Web3D发展。本文把这段经历记录下,从技术和业务两方面分析,支付宝Web3D是如何在集团技术中逐渐上位的,并且尝试推演未来的各种可能性。

  初生牛犊不怕虎

  2016年底,一款Pokemon go的手机AR游戏爆火,大家开始在现实生活中捕捉自己的宝可梦,AR的概念也因此进入大众视野。

  也许是受到Pokemon go的启发,2017年春节,支付宝推出了AR红包,大家扫周围的环境,就能发现朋友藏的红包。产品中红包是一个3D模型,虽然是2016年,但是在支付宝里面做3D动画渲染,这还是第一次。


支付宝App探索Web3D动画背后的故事

  当年的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复制这个“增长奇迹”。

  但其实,星星球的上线非常坎坷,在技术上遇到了诸多挑战

支付宝App探索Web3D动画背后的故事

  因为第一次大量使用WebGL,我们收到了很多底层的不兼容问题,这些问题大多数是由于系统驱动引起的,这部分代码对于前端来说是黑盒,由于支付宝的网页都是跑在UC浏览器内核,当时我们求助了UC团队,他们通过修改浏览器的行为来绕过系统兼容问题,让我们的WebGL相对稳定。而对于非常老版本的安卓系统,我们只能放弃,等待时间来清洗历史遗留问题。

  时至今日,WebGL在稳定性上已经完全达标,不可用率也低到忽略不计。

  “下一个爆款”的困境

  蚂蚁森林和蚂蚁庄园的狂奔,让更多业务方看到了游戏的力量,很多业务方都找过来要做“养成游戏”,R3团队选择了做“惠星球”,游戏通过做任务升级建筑获得一定奖励,游戏的制作精细程度和开发工作量是“星星球”的10倍以上。

  

支付宝App探索Web3D动画背后的故事

  然而“惠星球”并没有取得预期的效果,首先业务上线就一波三折,从开发到上线经历了8个月,对于3周迭代一次的前端项目来说,仿若隔世,上线后流量也远不及星星球。出于团队发展的考虑,“R3”团队不再进行支付宝的互动游戏开发,转到了其他项目,之后由支付宝的其他团队进行Web3D项目探索。

相关文章
热门浏览
热门标签