支付宝 App 3D 动画和小游戏背后的故事

曾柏然阿里巴巴终端技术

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

文 / 曾柏然

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

初生牛犊不怕虎

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

也许是受到Pokemongo的启发，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倍以上。

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

令人惊喜的是，“江山代有才人出”，农场团队的同学用星星球留下的3D模型，东拼西凑做出来一个小鸡登山赛。这是一个魔性的休闲竞技游戏，上线一个月用户量打破了星星球的记录，成为支付宝2018年流量最高的Web3D应用。

登山赛的兴起仍然依赖蚂蚁农场入口，而农场有了星星球和登山赛两款游戏后，必须探索农场之外的场景，“公益”性质的农场不会发展成一个“游戏中心”。

普通的支付宝业务大多数是H5页面，有一定的工具属性或者商品属性。支付宝像一个集市一样，保罗了各种业务，业务为了增强自己的认知，也会定期搞营销活动。营销活动大多数时候是发优惠券或者红包，而发放的形式比较单一，用户感知很差，很多时候用户都忘记自己领了红包，业务方花了钱，却没有达到效果。

设计团队和开发共同倒腾出来“堆堆乐”的休闲小游戏，并且第一次进行了“游戏化运营”的探索，从纯玩小游戏变成了“氪金”营销工具。堆堆乐在游戏模式上加入了技巧的成分，需要用户花时间练习才能玩得好，当然再厉害的用户也会有Game Over的时候，如果用户失败的时候，可以通过分享游戏链接的方式获得一次复活的机会，出于时间成本和损失厌恶的心理，大多数用户会选择分享。

堆堆乐上线之后，分享率是普通营销活动的10倍，这个数据吓到了当时所有的运营。

“无往不利”的商人们又在堆堆乐上进行进一步包装，换了一套场景皮肤，成为2019年余额宝6周年生日活动。

这次活动用户每天可玩次数只有3次，每日冲顶可以获得余额宝体验金奖励。如果3次内没有冲顶，就需要做任务来“充值”游戏次数，这些任务就是业务转化的指标。更有趣的是，活动期间还引入了游戏中的“限时购买”机制，限时任务的完成量是普通任务的2倍，可以说是一次教科书般的“游戏化运营”。

活动持续了两周，用户复访率居高不下，有非常高的粘性，当时能在微博上搜到很多用户炫耀自己分数高，或者吐槽手指不灵活，还有用户分享游戏攻略，吸引了相当多的年轻人参与。

余额宝的大活动，将堆堆乐的用户量级推到了登山赛两倍，成为2019年访问量最高的Web3D应用，余额宝活动结束后，堆堆乐通过几次换皮，又承接了其他的营销活动。值得一提的是，这款游戏采用了集团的3D引擎Hilo3D，引入了物理引擎，增加了动态阴影和光照，在画面和可玩性上都有提升。

同样使用了Hilo3D的2020年1月的新春红包，让我们全球用户在浩瀚的星空中传递福气，在视觉渲染效果上达到了新的高度。我们在设计场景的时候，用了大量传统年俗的元素，春联，团聚，烟花等等，通过精美的画面让用户在手机端感受曾经的年味。

随着这些尝试，Web3D走出了农场，坐上了了大促的头把交椅，近几年支付宝的每次大促营销都会看到Web3D的炫酷作品。但Web3D也陷入了“开张吃半年”的窘境，每年的顶级大促只是是冰山一角，冰山下看不到的是普通H5页面，小型活动，这些业务基数大，单个业务开发时间短，上线快，流量相对较少，争取不到3D资源，如果需要做动画的时候，他们全部转向了Lottie，一个来自Airbnb的技术。

Lottie 的爆发与挑战

Lottie的动画来源于After Effect，一个设计界稳坐王位的视频后期软件。它最大的好处在于动画上线不需要写代码，设计师直接导出一个JSON文件，就可以在页面上播放，节省了非常多的开发时间。使用After Effect基本上是设计的必修课，受众非常广。

2018下半年开始，支付宝中大量的营销活动开始使用Lottie做特效方案，其中比较有代表性的是18年双十一“提鹅”、“年年有余”。

反观3D开发中不可缺少的建模，很少有互联网公司的设计师知道如何建模，对他们来说“减面”“烘培”“绑定骨骼”就和“JAVA”“C++”一样熟悉但又陌生。做一个Web3D项目，建模都可能会倒腾一个月，这对于小业务来说是完全不可接受的。但每年的顶级大促活动屈指可数，为了解决“开张一次吃半年”的窘境，降低开发成本成了Web3D推广的关键因素。

2018年下半年，有团队重新拾起“R3”的衣钵，为了降低开发成本，他们做了一个网页3D编辑器。但实际上编辑器的开发难度远高于引擎本身。编辑器做了大半年，因为交互不友好，实际上开发成本并没有降低，甚至没有一个3D项目是用编辑器完成的，加上Lottie站上那年双十一的舞台中心，大家对于Web3D的态度又开始“暧昧”起来。

阿里有句老话“因为相信所以看见”，3D的探索不但没有被砍掉，上层反而持续投入。根据他们分析，业界比较有名的H5游戏引擎有两款：laya 和cocos，虽然laya的性能做得更好，但是cocos因为编辑器的优势，拥有了更多的用户。游戏行业Unity也是因为编辑器生态拥抱了很多的开发者。2019年中旬，Web编辑器的定位被加强，团队开始重视编辑器的交互，优化编辑器到H5的开发调试流程，让编辑器中的场景能够一行代码引入H5中调试。在内部做项目时，强制使用编辑器，让编辑器不再是个玩具。

尽管磕磕绊绊，一边修编辑器，一边做项目，终于在2019年下半年做出了大量的Web3D作品。从以前半年一个项目，到一个月发布2-3个3D项目，确实证明了生产力的提升。它们重启“R3”之后改名“Oasis”，oasis是绿洲的意思，希望3D的绿洲能覆盖到未来的方方面面。

另外，因为建模问题始终无法绕开，而2D动画一直是主流，所以有人干脆提出“用3D渲染2D”的想法，做出更炫酷的2D动画，这套方案被命名为“火星(Mars)”。

歌舞演出的时候，经常会有烟花和烟雾来衬托氛围，这类特效如果在动画里实现，需要用到粒子系统。粒子系统是由大量相似的小元素组成，比如说下雨动画，雨滴都很类似，但是雨滴的数量很大，这个时候用3D技术就展现出了绝对优势，因为GPU可以并行计算粒子的运动。而Lottie只支持图层动画，通过贴图的各种运动来进行动画，但贴图元素一旦多起来，就会遇到严重的性能问题。而粒子系统的调参非常消耗时间，也需要专门的编辑器配合。

为了能直接和Lottie竞争，火星的网页编辑器仿照了AE，设计师在火星编辑器上的产物将直接被开发进行使用。对于图层动画进行自动合并渲染，精灵图优化，引入压缩纹理降低内存开销，充分发挥了3D渲染的技术优势，经实测，在元素较多的动画下内存比CSS动画还要低。

虽然目前3D的业务占有量仍不及Lottie，但生产成本已经降低了许多。戏谑地说，Oasis的编辑器像是低配的Unity，而Mars的编辑器则像是低配版的AE，随着开发/设计师开始使用网页编辑器，Web3D的生态会越来越大。

有趣的是，视觉效果就像是工资，一旦提升上去了，人们就很难接受下降。Lottie的视觉表达能力有限，随着更多的炫酷3D特效出现，它将慢慢无法满足视觉需求。

推演未来

写历史不仅用来怀念过去，更重要的是推演未来。当然我也不是预言家，以下言论仅供参考。

我们能看到Web3D这三年来“技术落地，业务探索，降低成本”的整体发展路线，其实这是符合技术演进的基本模式的。《创新者的窘境》是很经典的技术分析书籍，其中就提到了新技术的发展路线：首先在新的领域扎根，随着新的领域不断扩大，新技术慢慢降低成本从而替代旧技术。

Web3D目前最大的短板在于生态，由于此领域相对复杂，入行的前端开发和设计都很少，随着技术门槛的降低，会有更多愿意尝鲜的人进入，当这些人做出产品后，又会正向吸引其他比较保守的人。所以Web3D会朝着平台化的方向发展，在平台上积累我们的最佳实践和经验素材。

相比于传统游戏行业，Web上的3D一直显得“没有技术含量”，受困于手机的性能和网络的限制，Web3D无法渲染很复杂的模型，模型的三角面数量是决定精致程度的关键因素，也是渲染性能的核心指标，可以从数据看到，这几年来，场景的三角面数量有增加，但不排除是因为手机换代升级导致渲染性能提升。

客户端游戏里，一个人物模型可能就有上万的三角面，而我们最大的场景全部面数也才不到3万。全局光照、后处理、蒙皮动画等常见的游戏渲染技术，在我们的应用中都还没有用到。渲染技术在这几年并不是Web3D发展的决定因素，模式创新和技术组合才是强劲的助推器。无论是Unity还是AE，都是非常昂贵的专业软件，而Web编辑器只要一个链接就可以进行协作和分享，将能产生更大的生态。

但Web3D也不是高枕无忧，随着5G技术发展，视频加载速度会非常快，简单的实时渲染会被视频直接替代，游戏引擎Unreal已经开始探索Pixel Streaming技术，通过服务器渲染，将画面传回网页中，只要传输够快，手机的性能就不是问题。同时随着WebAssembly技术的发展，Native代码可以直接被编译到Web运行，那么会有越来越多的跨平台互动游戏产生，从而解决游戏开发的成本问题。

也许，未来的战争会成为编辑器平台的战争，如果编辑器产物（视频，游戏，JSON）可以相互替代的话，决定胜负的，就是平台赋能的力量了。

作为成年人，面包和爱情都想要，良好的体验宛若初恋，但除了营销，哪里还有下一块蛋糕？

喜欢这篇文章吗？本文作者来自蚂蚁集团RichLab，一个Web3D超牛逼的团队，欢迎与他们交流： zbr80259@antgroup.com。

关注「Alibaba F2E」

把握阿里巴巴前端新动向

继续滑动看下一个