導語：
3D動畫和游戲一直是前端領(lǐng)域的難點，支付寶App從2017年春節(jié)推出AR紅包開始，一直在Web3D領(lǐng)域進行探索和實踐。本文將以親歷者的角度，為你講述這段不斷探索和自我突破的經(jīng)歷。
文/曾柏然
很榮幸到了五年陳，我做的工作一直和Web3D相關(guān)，從頭到尾經(jīng)歷了支付寶Web3D發(fā)展。本文把這段經(jīng)歷記錄下，從技術(shù)和業(yè)務(wù)兩方面分析，支付寶Web3D是如何在集團技術(shù)中逐漸上位的，并且嘗試推演未來的各種可能性。
初生牛犢不怕虎
2016年底，一款Pokemon go的手機AR游戲爆火，大家開始在現(xiàn)實生活中捕捉自己的寶可夢，AR的概念也因此進入大眾視野。
也許是受到Pokemon go的啟發(fā)，2017年春節(jié)，支付寶推出了AR紅包，大家掃周圍的環(huán)境，就能發(fā)現(xiàn)朋友藏的紅包。產(chǎn)品中紅包是一個3D模型，雖然是2016年，但是在支付寶里面做3D動畫渲染，這還是第一次。
當年的AR紅包是多個團隊完成的，圖像識別是寫客戶端代碼團隊實現(xiàn)的，而紅包動畫是前端團隊實現(xiàn)的。其實當時紅包動畫是由一位游戲開發(fā)大佬通過C代碼實現(xiàn)的，但這位大佬所在的團隊是前端團隊。新春之后，前端自然有發(fā)展3D渲染的打算，但是客戶端團隊出于各種的考慮并不想把AR的3D渲染交出去，所以支付寶當時3D渲染分成兩條線發(fā)展，客戶端做AR和3D渲染技術(shù)，而前端開始了真正意義上的Web3D探索，他們的代碼是純凈的JS，運行環(huán)境是任何一個支持WebGL的瀏覽器中。
擺在這個團隊面前最大的問題是：Web3D要怎么發(fā)展?
2017年初，支付寶放棄了在社交方向的嘗試，開始回到純粹的金融理財工具定位，AR因為富有科技感，被看作未來的一個重點方向，客戶端渲染開始起飛。而失去AR支持的Web3D，必須找到新的業(yè)務(wù)落地，否則這個前端技術(shù)團隊將不復存在。
除了業(yè)務(wù)問題，技術(shù)上也是非常艱難，Web上主流的3D渲染引擎是ThreeJS，而這個引擎體積巨大，功能繁多，使用門檻很高，渲染一個3D模型到底是選擇.obj還是.fbx文件，都沒人知道。3D模型的文件格式有很多種，而沒有一種是適合在Web上渲染的。
恰巧當年Web規(guī)范提出了GLTF的Web模型格式，這個格式在今后成為了每個Web引擎必須完美遵循的規(guī)范。前端團隊重新來過，不使用ThreeJS，寫了一個全新的渲染引擎“R3”(Render for 3D)，同時做了一個Unity的插件，可以直接將Unity的模型導出到Web進行展示，配套了組件開發(fā)模式和特效系統(tǒng)，解決了3D渲染的基本問題。當年“R3”團隊的Leader開始奔走于支付寶的各個業(yè)務(wù)團隊之間，開始進行業(yè)務(wù)推廣，而這是運氣給Web3D帶來了第一次起飛，讓它在客戶端渲染面前站穩(wěn)了腳跟。
2017年，支付寶迎來了“公益紅利”，螞蟻森林和螞蟻莊園成為最火爆的端內(nèi)應(yīng)用，和支付工具相比，它們能顯著提高用戶的停留時長，并且更用戶也很樂意去通過支付寶進行公益活動，增強了支付寶的品牌效應(yīng)。
R3配合螞蟻莊園，上線了第一款3D小游戲——星星球。用戶通過玩星星球可以得到莊園道具獎勵，這讓星星球的用戶量在一周之內(nèi)用戶達到了非常大的數(shù)量，從此所有的業(yè)務(wù)方都希望通過Web3D復制這個“增長奇跡”。
但其實，星星球的上線非常坎坷，在技術(shù)上遇到了諸多挑戰(zhàn)
因為第一次大量使用WebGL，我們收到了很多底層的不兼容問題，這些問題大多數(shù)是由于系統(tǒng)驅(qū)動引起的，這部分代碼對于前端來說是黑盒，由于支付寶的網(wǎng)頁都是跑在UC瀏覽器內(nèi)核，當時我們求助了UC團隊，他們通過修改瀏覽器的行為來繞過系統(tǒng)兼容問題，讓我們的WebGL相對穩(wěn)定。而對于非常老版本的安卓系統(tǒng)，我們只能放棄，等待時間來清洗歷史遺留問題。
時至今日，WebGL在穩(wěn)定性上已經(jīng)完全達標，不可用率也低到忽略不計。
“下一個爆款”的困境
螞蟻森林和螞蟻莊園的狂奔，讓更多業(yè)務(wù)方看到了游戲的力量，很多業(yè)務(wù)方都找過來要做“養(yǎng)成游戲”，R3團隊選擇了做“惠星球”，游戲通過做任務(wù)升級建筑獲得一定獎勵，游戲的制作精細程度和開發(fā)工作量是“星星球”的10倍以上。
然而“惠星球”并沒有取得預(yù)期的效果，首先業(yè)務(wù)上線就一波三折，從開發(fā)到上線經(jīng)歷了8個月，對于3周迭代一次的前端項目來說，仿若隔世，上線后流量也遠不及星星球。出于團隊發(fā)展的考慮，“R3”團隊不再進行支付寶的互動游戲開發(fā)，轉(zhuǎn)到了其他項目，之后由支付寶的其他團隊進行Web3D項目探索。
令人驚喜的是，“江山代有才人出”，農(nóng)場團隊的同學用星星球留下的3D模型，東拼西湊做出來一個小雞登山賽。這是一個魔性的休閑競技游戲，上線一個月用戶量打破了星星球的記錄，成為支付寶2018年流量最高的Web3D應(yīng)用。
登山賽的興起仍然依賴螞蟻農(nóng)場入口，而農(nóng)場有了星星球和登山賽兩款游戲后，必須探索農(nóng)場之外的場景，“公益”性質(zhì)的農(nóng)場不會發(fā)展成一個“游戲中心”。
普通的支付寶業(yè)務(wù)大多數(shù)是H5頁面，有一定的工具屬性或者商品屬性。支付寶像一個集市一樣，保羅了各種業(yè)務(wù)，業(yè)務(wù)為了增強自己的認知，也會定期搞營銷活動。營銷活動大多數(shù)時候是發(fā)優(yōu)惠券或者紅包，而發(fā)放的形式比較單一，用戶感知很差，很多時候用戶都忘記自己領(lǐng)了紅包，業(yè)務(wù)方花了錢，卻沒有達到效果。
設(shè)計團隊和開發(fā)共同倒騰出來“堆堆樂”休閑小游戲，并且第一次進行了“游戲化運營”的探索，從純玩小游戲變成了“氪金”營銷工具。堆堆樂在游戲模式上加入了技巧的成分，需要用戶花時間練習才能玩得好，當然再厲害的用戶也會有Game Over的時候，如果用戶失敗的時候，可以通過分享游戲鏈接的方式獲得一次復活的機會，出于時間成本和損失厭惡的心理，大多數(shù)用戶會選擇分享。
堆堆樂上線之后，分享率是普通營銷活動的10倍，這個數(shù)據(jù)嚇到了當時所有的運營。
“無往不利”的商人們又在堆堆樂上進行進一步包裝，換了一套場景皮膚，成為2019年余額寶6周年生日活動。
這次活動用戶每天可玩次數(shù)只有3次，每日沖頂可以獲得余額寶體驗金獎勵。如果3次內(nèi)沒有沖頂，就需要做任務(wù)來“充值”游戲次數(shù)，這些任務(wù)就是業(yè)務(wù)轉(zhuǎn)化的指標。更有趣的是，活動期間還引入了游戲中的“限時購買”機制，限時任務(wù)的完成量是普通任務(wù)的2倍，可以說是一次教科書般的“游戲化運營”。活動持續(xù)了兩周，用戶復訪率居高不下，有非常高的粘性，當時能在微博上搜到很多用戶炫耀自己分數(shù)高，或者吐槽手指不靈活，還有用戶分享游戲攻略，吸引了相當多的年輕人參與。
余額寶的大活動，將堆堆樂的用戶量級推到了登山賽的兩倍，成為2019年訪問量最高的Web3D應(yīng)用，余額寶活動結(jié)束后，堆堆樂通過幾次換皮，又承接了其他的營銷活動。值得一提的是，這款游戲采用了集團的3D引擎Hilo3D，引入了物理引擎，增加了動態(tài)陰影和光照，在畫面和可玩性上都有提升。
同樣使用了Hilo3D的2020年1月的新春紅包，讓我們?nèi)蛴脩粼诤棋男强罩袀鬟f福氣，在視覺渲染效果上達到了新的高度。我們在設(shè)計場景的時候，用了大量傳統(tǒng)年俗的元素，春聯(lián)，團聚，煙花等等，通過精美的畫面讓用戶在手機端感受曾經(jīng)的年味。
隨著這些嘗試，Web3D走出了農(nóng)場，坐上了了大促的頭把交椅，近幾年支付寶的每次大促營銷都會看到Web3D的炫酷作品。但Web3D也陷入了“開張吃半年”的窘境，每年的頂級大促只是冰山一角，冰山下看不到的是普通H5頁面，小型活動，這些業(yè)務(wù)基數(shù)大，單個業(yè)務(wù)開發(fā)時間短，上線快，流量相對較少，爭取不到3D資源，如果需要做動畫的時候，他們?nèi)哭D(zhuǎn)向了Lottie，一個來自Airbnb的技術(shù)。
Lottie的爆發(fā)與挑戰(zhàn)
Lottie的動畫來源于After Effect，一個設(shè)計界穩(wěn)坐王位的視頻后期軟件。它最大的好處在動畫上線于不需要寫代碼，設(shè)計師直接導出一個JSON文件，就可以在頁面上播放，節(jié)省了非常多的開發(fā)時間。使用After Effect基本上是設(shè)計的必修課，受眾非常廣。
2018下半年開始，支付寶中大量的營銷活動開始使用Lottie做特效方案，其中比較有代表性的是18年雙十一提鵝、年年有余。
反觀3D開發(fā)中不可缺少的建模，很少有互聯(lián)網(wǎng)公司的設(shè)計師知道如何建模，對他們來說“減面”“烘培”“綁定骨骼”就和“JAVA”“C++”一樣熟悉但又陌生。做一個Web3D項目，建模都可能會倒騰一個月，這對于小業(yè)務(wù)來說是完全不可接受的。但每年的頂級大促活動屈指可數(shù)，為了解決“開張一次吃半年”的窘境，降低開發(fā)成本成了Web3D推廣的關(guān)鍵因素。
2018年下半年，有團隊重新拾起“R3”的衣缽，為了降低開發(fā)成本，他們做了一個網(wǎng)頁3D編輯器。但實際上編輯器的開發(fā)難度遠高于引擎本身。編輯器做了大半年，因為交互不友好，實際上開發(fā)成本并沒有降低，甚至沒有一個3D項目是用編輯器完成的，加上Lottie站上那年雙十一的舞臺中心，大家對于Web3D的態(tài)度又開始“曖昧”起來。
阿里有句老話“因為相信所以看見”，3D的探索不但沒有被砍掉，上層反而持續(xù)投入。根據(jù)他們分析，業(yè)界比較有名的H5游戲引擎有兩款：laya 和cocos， 雖然laya的性能做得更好，但是cocos因為編輯器的優(yōu)勢，擁有了更多的用戶。游戲行業(yè)Unity也是因為編輯器生態(tài)擁抱了很多的開發(fā)者。2019年中旬，Web編輯器的定位被加強，團隊開始重視編輯器的交互，優(yōu)化編輯器到H5的開發(fā)調(diào)試流程，讓編輯器中的場景能夠一行代碼引入H5中調(diào)試。在內(nèi)部做項目時，強制使用編輯器，讓編輯器不再是個玩具。
盡管磕磕絆絆，一邊修編輯器，一邊做項目，終于在2019年下半年做出了大量的Web3D作品。從以前半年一個項目，到一個月發(fā)布2-3個3D項目，確實證明了生產(chǎn)力的提升。它們重啟“R3”之后改名“Oasis”，oasis是綠洲的意思，希望3D的綠洲能覆蓋到未來的方方面面。
另外，因為建模問題始終無法繞開，而2D動畫一直是主流，所以有人干脆提出“用3D渲染2D”的想法，做出更炫酷的2D動畫，這套方案被命名為“火星(Mars)”。
歌舞演出的時候，經(jīng)常會有煙花和煙霧來襯托氛圍，這類特效如果在動畫里實現(xiàn)，需要用到粒子系統(tǒng)。粒子系統(tǒng)是由大量相似的小元素組成，比如說下雨動畫，雨滴都很類似，但是雨滴的數(shù)量很大，這個時候用3D技術(shù)就展現(xiàn)出了絕對優(yōu)勢，因為GPU可以并行計算粒子的運動。而Lottie只支持圖層動畫，通過貼圖的各種運動來進行動畫，但貼圖元素一旦多起來，就會遇到嚴重的性能問題。而粒子系統(tǒng)的調(diào)參非常消耗時間，也需要專門的編輯器配合。
為了能直接和Lottie競爭，火星的網(wǎng)頁編輯器仿照了AE，設(shè)計師在火星編輯器上的產(chǎn)物將直接被開發(fā)進行使用。對于圖層動畫進行自動合并渲染，精靈圖優(yōu)化，引入壓縮紋理降低內(nèi)存開銷，充分發(fā)揮了3D渲染的技術(shù)優(yōu)勢，經(jīng)實測，在元素較多的動畫下內(nèi)存比CSS動畫還要低。
雖然目前3D的業(yè)務(wù)占有量仍不及Lottie，但生產(chǎn)成本已經(jīng)降低了許多。戲謔地說，Oasis的編輯器像是低配的Unity，而Mars的編輯器則像是低配版的AE，隨著開發(fā)/設(shè)計師開始使用網(wǎng)頁編輯器，Web3D的生態(tài)會越來越大。有趣的是，視覺效果就像是工資，一旦提升上去了，人們就很難接受下降。Lottie的視覺表達能力有限，隨著更多的炫酷3D特效出現(xiàn)，它將慢慢無法滿足視覺需求。
推演未來
寫歷史不僅用來懷念過去，更重要的是推演未來。當然我也不是預(yù)言家，以下言論僅供參考。
我們能看到Web3D這三年來“技術(shù)落地，業(yè)務(wù)探索，降低成本”的整體發(fā)展路線，其實這是符合技術(shù)演進的基本模式的。《創(chuàng)新者的窘境》是很經(jīng)典的技術(shù)分析書籍，其中就提到了新技術(shù)的發(fā)展路線，首先在新的領(lǐng)域扎根，隨著新的領(lǐng)域不斷擴大，新技術(shù)慢慢降低成本從而替代舊技術(shù)。Web3D目前最大的短板在于生態(tài)，由于此領(lǐng)域相對復雜，入行的前端開發(fā)和設(shè)計都很少，隨著技術(shù)門檻的降低，會有更多愿意嘗鮮的人進入，當這些人做出產(chǎn)品后，又會正向吸引其他比較保守的人。所以Web3D會朝著平臺化的方向發(fā)展，在平臺上積累我們的最佳實踐和經(jīng)驗素材。
相比于傳統(tǒng)游戲行業(yè)，Web上的3D一直顯得“沒有技術(shù)含量”，受困于手機的性能和網(wǎng)絡(luò)的限制，Web3D無法渲染很復雜的模型，模型的三角面數(shù)量是決定精致程度的關(guān)鍵因素，也是渲染性能的核心指標，可以從數(shù)據(jù)看到，這幾年來，場景的三角面數(shù)量有增加，但不排除是因為手機換代升級導致渲染性能提升。
客戶端游戲里，一個人物模型可能就有上萬的三角面，而我們最大的場景全部面數(shù)也才不到3萬。全局光照，后處理，蒙皮動畫等常見的游戲渲染技術(shù)，在我們的應(yīng)用中都還沒有用到。渲染技術(shù)在這幾年并不是Web3D發(fā)展的決定因素，模式創(chuàng)新和技術(shù)組合才是強勁的助推器。無論是Unity還是AE，都是非常昂貴的專業(yè)軟件，而Web編輯器只要一個鏈接就可以進行協(xié)作和分享，將能產(chǎn)生更大的生態(tài)。
但Web3D也不是高枕無憂，隨著5G技術(shù)發(fā)展，視頻加載速度會非常快，簡單的實時渲染會被視頻直接替代，游戲引擎Unreal已經(jīng)開始探索Pixel Streaming技術(shù)，通過服務(wù)器渲染，將畫面?zhèn)骰鼐W(wǎng)頁中，只要傳輸夠快，手機的性能就不是問題。同時隨著WebAssembly技術(shù)地發(fā)展，Native代碼可以直接被編譯到Web運行，那么會有越來越多的跨平臺互動游戲產(chǎn)生，從而解決游戲開發(fā)的成本問題。
也許，未來的戰(zhàn)爭會成為編輯器平臺的戰(zhàn)爭，如果編輯器產(chǎn)物(視頻，游戲，JSON)可以相互替代的話，決定勝負的，就是平臺賦能的力量了。
作為成年人，面包和愛情都想要，良好的體驗宛若初戀，但除了營銷哪里還有下一塊蛋糕?
喜歡這篇文章嗎?本文作者來自螞蟻集團RichLab，一個Web3D超牛逼的團隊，除了上述這些技術(shù)產(chǎn)品之外，智能化業(yè)務(wù)體驗平臺、Serverless(SFF)、工程化等技術(shù)領(lǐng)域，甚至旅行、音樂、Vlog 等生活娛樂領(lǐng)域也都是我們團隊的專長～
RichLab前端團隊目前已有 50+ 人，分布在杭州、北京、重慶，如果你對以上技術(shù)感興趣，或者想要和我們一起實現(xiàn)普惠金融，歡迎投遞簡歷到 [email protected]。
