五福背后的 Web 3D 引擎開(kāi)源

相信大家已經(jīng)體驗(yàn)了今年支付寶五福的活動(dòng)，無(wú)論是今年的五福首頁(yè)還是打年獸游戲都是由螞蟻互動(dòng)圖形引擎（代號(hào)：Oasis Engine）驅(qū)動(dòng)的。

Oasis Engine 是螞蟻集團(tuán) Web 3D 互動(dòng)圖形引擎，同時(shí)也是阿里經(jīng)濟(jì)體互動(dòng)技術(shù)方向的首選 Web 3D 引擎，已于 2 月 1 日正式開(kāi)源。感興趣的同學(xué)可以關(guān)注我們的?

Github 社區(qū)：https://github.com/oasis-engine/engine

加入釘釘開(kāi)發(fā)者交流群：31360432。

無(wú)論你是渲染方向、TA 方向、IDE 方向、還是更細(xì)分的領(lǐng)域，只要你和我們一樣有共同的理想和目標(biāo)，歡迎投遞簡(jiǎn)歷到 [email protected]

這篇文章會(huì)和大家介紹 Oasis Engine 的一些概況和 Oasis Engine 的前世今生以及未來(lái)展望。希望通過(guò)這篇文章可以讓大家對(duì) Oasis Engine 有一個(gè)初步了解。

引擎介紹

Oasis Engine 是引擎一款以 Web 為先，移動(dòng)為先的互動(dòng)/創(chuàng)作平臺(tái)。使用組件系統(tǒng)架構(gòu)，并且追求易用和輕量。Oasis Engine 主要包含 Oasis Runtime、Oasis Editor 和 Oasis Store 三部分。接下來(lái)我們會(huì)通過(guò)概述、功能介紹、穩(wěn)定性和性能幾個(gè)維度來(lái)給大家介紹引擎。

概述

Oasis Engine 采用組件系統(tǒng)架構(gòu)，Oasis Engine 不僅需要具備三維渲染能力，還需要包含了非常多來(lái)自各領(lǐng)域的功能，比如 2D、3D、UI、音頻、物理、VR/AR、邏輯編寫等等，這些功能都是開(kāi)發(fā)者的剛需。同時(shí)開(kāi)發(fā)者在使用上也通常希望引擎的結(jié)構(gòu)可以保持清晰，功能可以靈活組合。

除此之外，通常業(yè)務(wù)開(kāi)發(fā)還希望進(jìn)行功能沉淀，其實(shí)這些都是屬于易用性的范疇。在如此功能復(fù)雜度和易用性的權(quán)衡下，我們選擇了組件系統(tǒng)架構(gòu)。在組件系統(tǒng)架構(gòu)下，萬(wàn)物皆組件，任何功能都可以以組件的形式插拔，靈活組合。同時(shí)腳本也是一種特殊的組件，開(kāi)發(fā)者也可以很自然的把業(yè)務(wù)功能沉淀為組件復(fù)用。

Oasis 引擎采用腳本系統(tǒng)進(jìn)行邏輯編寫。我們提供了非常多的腳本生命周期回調(diào)，開(kāi)發(fā)者只需重載需要的回調(diào)函數(shù)即可。

從易用性和可讀性來(lái)說(shuō)，腳本相對(duì)通過(guò)事件編寫邏輯都具有明顯的優(yōu)勢(shì)。尤其在組件系統(tǒng)架構(gòu)中，腳本系統(tǒng)是更自然的一種方式。包括我們?cè)谧鲆婕軜?gòu)時(shí)也從不會(huì)認(rèn)為任何一種架構(gòu)有絕對(duì)的對(duì)錯(cuò)，更多的是權(quán)衡和適合的探討。同時(shí)，我們?cè)谀_本系統(tǒng)也做了很多體驗(yàn)上的優(yōu)化，比如提供了克隆裝飾器，開(kāi)發(fā)者可以根據(jù)屬性的實(shí)際情況選擇不同的克隆裝飾器設(shè)置克隆模式，相對(duì)于手動(dòng)編寫克隆函數(shù)更加的易用。

Oasis 引擎的開(kāi)發(fā)語(yǔ)言采用了 TypeScript ，TypeScript 是 JavaScript 的強(qiáng)類型超集，相比弱類型的 JavaScript 具有非常大的優(yōu)勢(shì)。尤其對(duì)于大型復(fù)雜項(xiàng)目，TypeScript 帶來(lái)了研發(fā)效率提升非常明顯。相信近幾年很多前端開(kāi)發(fā)者已經(jīng)有所體會(huì)。我們也推薦開(kāi)發(fā)者使用 TypeScript 編寫邏輯腳本。

Oasis 引擎在 API 的設(shè)計(jì)上追求嚴(yán)謹(jǐn)性、簡(jiǎn)潔性、易用性等宗旨，聽(tīng)起來(lái)很籠統(tǒng)，但是這背后卻是無(wú)數(shù)的設(shè)計(jì)細(xì)節(jié)堆積起來(lái)的。從體感的維度來(lái)講，清爽、自然、易用、符合開(kāi)發(fā)者直覺(jué)的 API 設(shè)計(jì)就是好設(shè)計(jì)。我們?cè)?API 設(shè)計(jì)上還利用了大量現(xiàn)代化的語(yǔ)法特性，比如函數(shù)重載、裝飾器、async/await、泛型等，這些語(yǔ)法對(duì)于 API 的設(shè)計(jì)非常重要，會(huì)直接提升用戶的研發(fā)體驗(yàn)。

功能介紹

Transform 是引擎的高頻使用功能，無(wú)論是渲染還是物理都需要 Transform 描述坐標(biāo)等相關(guān)信息。所以一個(gè)優(yōu)秀的 Transform 不僅要功能強(qiáng)大，還有具備良好的性能優(yōu)化。

Transfrom 最顯著的一個(gè)特點(diǎn)就是父變換會(huì)影響子變換，比如我們能想到修改父節(jié)點(diǎn)的局部位置會(huì)觸發(fā)自身和子節(jié)點(diǎn)的世界位置變化。但是，實(shí)際情況可能遠(yuǎn)比這復(fù)雜，如果修改父節(jié)點(diǎn)的局部旋轉(zhuǎn)，不僅會(huì)觸發(fā)自身和子節(jié)點(diǎn)的世界旋轉(zhuǎn)變化，還會(huì)觸發(fā)自身和子節(jié)點(diǎn)的世界位置變化。同樣修改局部縮放也有類似的效應(yīng)。我們?cè)?Transform 內(nèi)部做了很多原子化的臟標(biāo)記，基本原則就是不 get 屬性不計(jì)算，如果 get 了屬性也會(huì)根據(jù)臟標(biāo)記判斷是否要重新計(jì)算。

基于 WebGL 開(kāi)發(fā)的引擎通常面臨 JS 沒(méi)有析構(gòu)函數(shù)的困擾。引擎的顯存對(duì)象并不在 JS 的托管范圍之內(nèi)，如果不進(jìn)行處理就會(huì)造成顯存泄漏。于是，Oasis 引擎提供了資源的手動(dòng)釋放函數(shù)，可以直接調(diào)用對(duì)象的銷毀函數(shù)進(jìn)行顯存釋放。但是實(shí)際問(wèn)題更加復(fù)雜，當(dāng)設(shè)計(jì)給開(kāi)發(fā)同學(xué)一個(gè)模型時(shí)，我們并不知道這個(gè)模型對(duì)資源的引用關(guān)系。比如實(shí)體引用了材質(zhì)，材質(zhì)又引用了紋理，他們之間的引用關(guān)系錯(cuò)綜復(fù)雜。首先，我們很難找到這些資源；其次，找到了也很難確保其沒(méi)有被別的模型引用并進(jìn)行安全銷毀。

資源系統(tǒng)是引擎的基礎(chǔ)能力，包含資源的加載和管理等職責(zé)。Oasis 引擎的資源系統(tǒng)加載 API 非常的簡(jiǎn)單易用，并且支持泛型、和異步編程。我們做了資源引用計(jì)數(shù)，開(kāi)發(fā)者只需要關(guān)心實(shí)體節(jié)點(diǎn)的銷毀即可，引擎內(nèi)部會(huì)自動(dòng)維護(hù)引用計(jì)數(shù)，調(diào)用 resourceManager.gc()? 時(shí)，所有引用計(jì)數(shù)為 0 的資產(chǎn)會(huì)自動(dòng)銷毀，從而在功能性和易用性直接找到了平衡。

著色/材質(zhì)系統(tǒng)是引擎的渲染心臟，其好壞一定程度上決定了引擎的健康發(fā)展。Oasis 引擎自定義著色器非常的簡(jiǎn)單，讓開(kāi)發(fā)者專注于著色器邏輯本身。著色器的數(shù)據(jù)設(shè)置也非常簡(jiǎn)單，只需調(diào)用 shaderData 中的相關(guān)接口即可。有過(guò)相關(guān)開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)可能還知道著色器宏功能，在 Oasis 中同樣非常簡(jiǎn)單，只需調(diào)用 enableMacro 接口即可。引用內(nèi)部會(huì)自動(dòng)處理相關(guān)的子著色器編譯。

除了簡(jiǎn)單，Oasis 的整個(gè)著色系統(tǒng)還非常強(qiáng)大，Oasis 還是一個(gè)面向 GPU 友好的引擎，不僅可以通過(guò)材質(zhì)設(shè)置著色數(shù)據(jù)，還可以通過(guò)場(chǎng)景、渲染器、相機(jī)等對(duì)象設(shè)置著色數(shù)據(jù)。另外，還可以非常自然地把蒙皮計(jì)算、粒子軌跡計(jì)算、材質(zhì)著色等模塊放入 GPU 中執(zhí)行，充分發(fā)揮 GPU 的并行運(yùn)算能力。

除了自定義著色器之外，Oasis 引擎還提供了靈活強(qiáng)大的BufferGeometry 系統(tǒng)，開(kāi)發(fā)者可以使用該系統(tǒng)自定義幾何體數(shù)據(jù)。BufferGeometry 系統(tǒng)支持交錯(cuò)頂點(diǎn)緩沖、獨(dú)立頂點(diǎn)緩沖、instance 緩沖和索引緩沖，做過(guò)底層圖形開(kāi)發(fā)的同學(xué)可能會(huì)非常熟悉這些功能。Oasis 的 BufferGeometry 系統(tǒng)幾乎包含了所有 GPU 相關(guān)的幾何體數(shù)據(jù)處理能力。引擎包含簡(jiǎn)單易用的功能是必須的，如果能同時(shí)兼顧靈活和強(qiáng)大那自然是極好的。

我們來(lái)說(shuō)說(shuō) BufferGeometry 具體可以做什么，其實(shí)高級(jí)開(kāi)發(fā)者可以使用它接入任何自定義粒子、拖尾之類的功能。比如 Mars 組件和 Spine 組件就是采用 BufferGeometry 系統(tǒng)接入的。Mars 也是螞蟻集團(tuán)的一款高性能動(dòng)畫和特效軟件，Spine 想必大家都很了解了，一款非常流行的 2D 動(dòng)畫軟件。

穩(wěn)定性和性能

穩(wěn)定性和性能對(duì)引擎來(lái)說(shuō)非常的重要，我們?cè)诜€(wěn)定性和性能方面付出了非常多的努力，在億級(jí)流量的平臺(tái)項(xiàng)目上 crash 率小于萬(wàn)分之 0.3 ：

• 測(cè)試方面，我們?cè)诰帉懨總€(gè)功能的同時(shí)都會(huì)增加對(duì)應(yīng)的單測(cè)案例，在 github 也部署了自動(dòng)化 CI 測(cè)試。
• 性能優(yōu)化方面，我們也付出了非常多的努力，比如組件驅(qū)動(dòng)的相關(guān)優(yōu)化、Transform 優(yōu)化、顯存上傳優(yōu)化、數(shù)學(xué)庫(kù)優(yōu)化等等。
• 內(nèi)存優(yōu)化方面，我們提供了 GPU 紋理壓縮功能，可以讓紋理顯存降低約80% ，同時(shí)還提供了良好的資源 GC 管理機(jī)制。在每一個(gè)系統(tǒng)設(shè)計(jì)上，我們都會(huì)綜合考慮性能和內(nèi)存的平衡點(diǎn)，不會(huì)極端盲目的使用“空間換時(shí)間”。

再來(lái)說(shuō)說(shuō)我們目前的性能現(xiàn)狀，基于上圖中的性能測(cè)試案例，和國(guó)外知名 Web3D 引擎也進(jìn)行了性能對(duì)比，同樣的測(cè)試規(guī)模和環(huán)境，Oasis 的性能大約是國(guó)外知名 Web3D 引擎的 2 倍。雖然這個(gè)案例并不是很全面，但至少是某幾塊功能的綜合性能表現(xiàn)。

總結(jié)

最后，我們對(duì)引擎介紹進(jìn)行一下總結(jié)，Oasis 引擎采用組件系統(tǒng)架構(gòu)、邏輯編寫采用腳本系統(tǒng)、引擎源碼使用 TypeScript 編寫。功能上，我們介紹了引擎的幾個(gè)基礎(chǔ)系統(tǒng)，分別是 Transform 系統(tǒng)、資源系統(tǒng)、材質(zhì)/著色系統(tǒng)和 BufferGeometry 系統(tǒng)，相信后續(xù)還會(huì)有機(jī)會(huì)和大家進(jìn)行更多的功能介紹；穩(wěn)定性和性能方面，具備金融級(jí)穩(wěn)定性和領(lǐng)先的性能。

前世今生

接下來(lái)，我們介紹一下 Oasis 引擎的前世今生，套用王小波的“時(shí)代三部曲”，將 Oasis 引擎發(fā)展至今分為三個(gè)階段：黑鐵時(shí)代、青銅時(shí)代和白銀時(shí)代。

黑鐵時(shí)代

第一階段是“黑鐵時(shí)代”（2016年-2018年）。2016年，阿里巴巴和螞蟻的移動(dòng)端業(yè)務(wù)蓬勃發(fā)展，但是面向互動(dòng)需求的圖形技術(shù)還比較落后，以 Web 3D 引擎為例，長(zhǎng)時(shí)間內(nèi)都依賴并不是為移動(dòng)端而生的 Three.js 引擎。在資產(chǎn)標(biāo)準(zhǔn)方面，glTF 2.0 還沒(méi)有誕生，obj + mtl 這種古老的格式還不支持 PBR 等高級(jí)材質(zhì)的能力，雖然 fbx 設(shè)計(jì)師導(dǎo)出方便，但因?yàn)槠潴w積過(guò)大和 Three.js 的加載器不穩(wěn)定導(dǎo)致很多項(xiàng)目在美術(shù)資產(chǎn)進(jìn)引擎階段就流產(chǎn)。2016年底，螞蟻圖形引擎史上第一位英雄出現(xiàn)，景夫（螞蟻高級(jí)圖形技術(shù)專家、仙劍三主程、R3 核心開(kāi)發(fā)者）寫下了第一行螞蟻圖形引擎的代碼，這個(gè)項(xiàng)目被命名成 R3（意為 Render for 3D）。R3 為螞蟻移動(dòng)端的互動(dòng)業(yè)務(wù)而生，采用行業(yè)里先進(jìn)的組件系統(tǒng)游戲引擎架構(gòu)，工程上為了追求運(yùn)行時(shí)體積的最小化，使用流行的 monorepo 多包單倉(cāng)庫(kù)的開(kāi)發(fā)模式。為了更方便地解決場(chǎng)景編輯問(wèn)題，R3 也定義了一套自己的開(kāi)發(fā)工作流，采用行業(yè)里領(lǐng)先的 Unity 編輯器作為場(chǎng)景編輯器，通過(guò)自研的 Unity 插件導(dǎo)出 glTF 文件，供運(yùn)行時(shí)加載解析成場(chǎng)景。

黑鐵時(shí)代留下了幾個(gè)經(jīng)典的作品，今天打開(kāi)螞蟻莊園的“運(yùn)動(dòng)會(huì)”面板，依舊能看到這這些 low ploygon 風(fēng)格的游戲。“星星球”是第一個(gè)使用 R3 引擎的互動(dòng)游戲，甚至當(dāng)時(shí)還開(kāi)發(fā)了 AR 版本，比較先鋒。

青銅時(shí)代

第二階段是“青銅時(shí)代”（2018年-2020年）。螞蟻圖形引擎從體驗(yàn)技術(shù)部移交到了業(yè)務(wù)場(chǎng)景更加豐富的 RichLab 團(tuán)隊(duì)，從 R3 升級(jí)為 Oasis，新團(tuán)隊(duì)開(kāi)始重新思考圖形引擎之于螞蟻互動(dòng)業(yè)務(wù)和前端工程師的意義。在移動(dòng)支付和金融數(shù)字化的背景下，移動(dòng)端業(yè)務(wù)大量的富交互場(chǎng)景需求開(kāi)始涌現(xiàn)，而對(duì)于穩(wěn)定性的要求非常苛刻。為了更快更好地解決業(yè)務(wù)訴求，我們一方面開(kāi)始擁抱前端生態(tài)：

• 用 Typescript 重構(gòu)引擎，使引擎的代碼更加健壯，同時(shí)開(kāi)發(fā)者可以獲得更好的代碼提示體驗(yàn)；
• 融入螞蟻前端開(kāi)發(fā)框架，讓引擎能夠自然地運(yùn)行在 React 等框架中，并且擁有資產(chǎn)沉淀能力；
• 和客戶端以及小程序容器的同學(xué)合作適配了支付寶小程序，讓引擎能夠在更多的環(huán)境中運(yùn)行。

另一方面，我們把重心放到了 3D 研發(fā)提效上。通過(guò)自研的 Oasis Editor 云端場(chǎng)景編輯器，我們實(shí)現(xiàn)了資產(chǎn)管理、場(chǎng)景編輯器、腳本編寫等核心能力。同時(shí)，我們也關(guān)心工作流上下游的銜接問(wèn)題，比如美術(shù)資產(chǎn)的導(dǎo)入問(wèn)題，我們建議使用 fbx 文件作為輸入，然后通過(guò)云端的資產(chǎn)轉(zhuǎn)換和壓縮等能力處理成適合運(yùn)行時(shí)加載的文件；又比如，我們提供不同產(chǎn)物導(dǎo)出的能力，有 React/Rax/小程序等，實(shí)現(xiàn)一處開(kāi)發(fā)多處部署。

白銀時(shí)代

第三個(gè)時(shí)代是“白銀時(shí)代”（2020年-?）。螞蟻圖形引擎史上的第二位英雄出現(xiàn)，塵沫的加入就如普羅米修斯神話為 Oasis 引擎的重生帶來(lái)了火焰。經(jīng)過(guò)八個(gè)月的四次迭代，引擎的功能、性能和易用性都發(fā)生了質(zhì)的變化：

• 功能方面，引擎的實(shí)體/組件系統(tǒng)、腳本系統(tǒng)、資源系統(tǒng)、材質(zhì)/Shader 系統(tǒng)等基礎(chǔ)系統(tǒng)能力達(dá)到了行業(yè)先進(jìn)水平；
• 易用性方面，對(duì)引擎的核心系統(tǒng)進(jìn)行了重新設(shè)計(jì)和思考，API 細(xì)節(jié)上完全拋棄了之前組件用對(duì)象傳參的模式，通過(guò) set/get 屬性來(lái)控制，充分利用 Typescript 語(yǔ)言的特性，讓開(kāi)發(fā)者充分享受到“猜測(cè) API”的爽快感；
• 性能方面，引擎的綜合性能增強(qiáng)到了青銅時(shí)代的四倍，其中 BufferGeometry 系統(tǒng)、材質(zhì)/Shader 系統(tǒng)的單項(xiàng)性能均達(dá)到了之前版本的十倍以上，大幅領(lǐng)先國(guó)外知名 Web 3D 引擎。

除了在技術(shù)上的不斷升級(jí)，Oasis 團(tuán)隊(duì)也非常重視業(yè)務(wù)落地，我們服務(wù)了阿里巴巴和螞蟻集團(tuán)內(nèi)眾多事業(yè)部的項(xiàng)目，在各個(gè)業(yè)務(wù)方中獲得良好的口碑，在各個(gè)客戶端中也驗(yàn)證了引擎的兼容性和穩(wěn)定性。

未來(lái)展望

白銀時(shí)代也是一個(gè)開(kāi)源的時(shí)代，事實(shí)上 Oasis 引擎的研發(fā)迭代早在青銅時(shí)代就進(jìn)入內(nèi)部開(kāi)源，按照開(kāi)源的工作模式通過(guò)里程碑和 issue 管理功能迭代。如今引擎雖然在基礎(chǔ)功能上已經(jīng)能夠滿足業(yè)務(wù)需求，但未來(lái)我們希望把引擎放在一個(gè)更大的舞臺(tái)，通過(guò)開(kāi)源的方式把引擎的能力進(jìn)一步增強(qiáng)。比如物理引擎方面，目前我們正在通過(guò) WebAssembly 的方式將其集成到引擎中。在引擎的完整性方面，我們首先會(huì)補(bǔ)充 2D 圖形的能力，同時(shí)讓引擎能夠渲染更多互動(dòng)中所需的精靈類型，比如 Spine 和 Lottie；更遠(yuǎn)的目標(biāo)是實(shí)現(xiàn)引擎的跨平臺(tái)，雖然目前僅支持 WebGL 1.0 和 2.0，但可以看到引擎的 API 如 WebCanvas 等都已經(jīng)是跨平臺(tái)引擎的接口設(shè)計(jì)了，未來(lái)會(huì)根據(jù)需求優(yōu)先級(jí)實(shí)現(xiàn) Metal/Vulkan/WebGPU 等新型圖形語(yǔ)言接口的接入。坦白來(lái)說(shuō)， Oasis 還處于發(fā)展期，今天開(kāi)源也只是 Oasis 新的起點(diǎn)，未來(lái)還有很長(zhǎng)的路要走。希望 Oasis 引擎可以用自己的方式為國(guó)產(chǎn) 3D 引擎事業(yè)盡一份力，也希望 Oasis 團(tuán)隊(duì)可以不忘初心，我們將用 3D 化的交互和表達(dá)讓世界變得更美好，實(shí)現(xiàn)我們心中的綠洲。

相關(guān)引用

Oasis 官網(wǎng)：https://oasis-engine.github.io

Oasis Github 社區(qū)：https://github.com/oasis-engine/engine

釘釘開(kāi)發(fā)者交流群：31360432

無(wú)論你是渲染方向、TA 方向、IDE 方向、還是更細(xì)分的領(lǐng)域，只要你和我們一樣有共同的理想和目標(biāo)，歡迎投遞簡(jiǎn)歷到 [email protected]

關(guān)于我們

我們將為你帶來(lái)最前沿的前端資訊。