看到一篇文章，关于支付宝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开始奔走于支付宝的各个业务团队之间，开始进行业务推广。
2017年，支付宝迎来了“公益红利”，蚂蚁森林和蚂蚁庄园成为最火爆的端内应用，和支付工具相比，它们能显著提高用户的停留时长，并且更用户也很乐意去通过支付宝进行公益活动，增强了支付宝的品牌效应。R3配合蚂蚁庄园，上线了第一款3D小游戏，星星球。用户通过玩星星球可以得到庄园道具奖励，这让星星球的用户量在一周之内用户达到了非常大的数量，这是运气给Web3D带来了第一次起飞，让它在客户端渲染面前站稳了脚跟。从此所有的业务方都希望通过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会朝着平台化的方向发展，在平台上积累我们的最佳实践和经验素材。
相比于传统游戏行业，Web上的3D一直显得“没有技术含量”，受困于手机的性能和网络的限制，Web3D无法渲染很复杂的模型，模型的三角面数量是决定精致程度的关键因素，也是渲染性能的核心指标，可以从数据看到，这几年来，场景的三角面数量有增加，但也有可能是因为手机换代升级导致渲染性能提升。
客户端游戏里一个人物模型可能就上万的三角面，而我们最大的场景面数也才不到3万。全局光照，后处理，蒙皮动画等常见的游戏渲染技术，在我们的应用中都还没有用到。渲染技术在这几年并不是Web3D发展的决定因素，模式创新和技术组合才是强劲的助推器。无论是Unity还是AE，都是非常昂贵的专业软件，而Web编辑器只要一个链接就可以进行协作和分享，将能产生更大的生态。
但Web3D也不是高枕无忧，随着5G技术发展，视频加载速度会非常快，简单的实时渲染会被视频直接替代，游戏引擎Unreal已经开始探索Pixel Streaming技术，通过服务器渲染，将画面传回网页中，只要传输够快，手机的性能就不是问题。同时随着WebAssembly技术地发展，Native代码可以直接被编译到Web运行，那么会有越来越多的跨平台互动游戏产生，从而解决游戏开发的成本问题。也许未来的战争会成为编辑器平台的战争，如果编辑器产物（视频，游戏，JSON）可以相互替代的话，决定胜负的，就是平台赋能的力量了。作为成年人，面包和爱情都想要，良好的体验宛若初恋，但除了营销哪里还有下一块蛋糕？
总结：
文章中提到的Web3D技术有：
- Hilo3D
一个 3D WebGL 渲染引擎
淘宝业务项目使用的web3D框架
-
three.js
- React 360
facebook.github.io/react-360/d…
- layaAir
**LayaAir是开源2D / 3D引擎 **
LayaAir使用WebGL1.0 / WebGL2.0作为图形API并由TypeScript编写。LayaAir专为高性能游戏而设计，并支持TypeScript和JavaScript编程语言。一次开发并发布多目标平台（HTML5，Android，iOS，微信迷你游戏，QQ迷你游戏，百度迷你游戏，小米迷你游戏，OPPO迷你游戏，VIVO迷你游戏，Bilibili迷你游戏） ，阿里巴巴迷你游戏，Facebook即时游戏）
