查看原文
其他

【第2012期】支付宝Web3D发展史

曾柏然 前端早读课 2021-12-03

前言

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)可以相互替代的话,决定胜负的,就是平台赋能的力量了。

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

关于本文 作者:@曾柏然 原文:https://mp.weixin.qq.com/s/iTcFoCNcdc6ncSqZevNaeA

为你推荐


【第1879期】《Web 3D来了!体验不一样的春节活动》技术篇


【第1875期】如何在页面极速渲染3D模型


欢迎自荐投稿,前端早读课等你来

: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存