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