導語：
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倍以上。
然而“惠星球”并沒有取得預期的效果，首先業務上線就一波三折，從開發到上線經歷了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超牛逼的團隊，除了上述這些技術產品之外，智能化業務體驗平臺、Serverless(SFF)、工程化等技術領域，甚至旅行、音樂、Vlog 等生活娛樂領域也都是我們團隊的專長～
RichLab前端團隊目前已有 50+ 人，分布在杭州、北京、重慶，如果你對以上技術感興趣，或者想要和我們一起實現普惠金融，歡迎投遞簡歷到 zbr80259@antgroup.com。
