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）可以相互替代的話，決定勝負的，就是平臺賦能的力量了。
作爲成年人，麪包和愛情都想要，良好的體驗宛若初戀，但除了營銷，哪裏還有下一塊蛋糕？
本文轉載自公衆號支付寶技術（ID：Ant-Techfin）。
原文鏈接：