簡介： Oasis 從開源走向新的起點，用 3D 化的互動和表達讓世界變得更美好。

相信大家已經體驗了今年支付寶五福的活動，無論是今年的五福首頁還是打年獸遊戲都是由螞蟻互動圖形引擎（代號：Oasis Engine）驅動的。

Oasis Engine 是螞蟻集團 Web 3D 互動圖形引擎，同時也是阿里巴巴互動技術方向的首選 Web 3D 引擎，已於 2 月 1 日正式開源。

這篇文章會和大家介紹 Oasis Engine 的一些概況和 Oasis Engine 的前世今生以及未來展望。希望透過這篇文章可以讓大家對 Oasis Engine 有一個初步瞭解。

引擎介紹

Oasis Engine 是引擎一款以 Web 為先，移動為先的互動/創作平臺。使用元件系統架構，並且追求易用和輕量。Oasis Engine 主要包含 Oasis Runtime、Oasis Editor 和 Oasis Store 三部分。接下來我們會透過概述、功能介紹、穩定性和效能幾個維度來給大家介紹引擎。

概述

Oasis Engine 採用元件系統架構，Oasis Engine 不僅需要具備三維渲染能力，還需要包含了非常多來自各領域的功能，比如 2D、3D、UI、音訊、物理、VR/AR、邏輯編寫等等，這些功能都是開發者的剛需。同時開發者在使用上也通常希望引擎的結構可以保持清晰，功能可以靈活組合。

除此之外，通常業務開發還希望進行功能沉澱，其實這些都是屬於易用性的範疇。在如此功能複雜度和易用性的權衡下，我們選擇了元件系統架構。在元件系統架構下，萬物皆元件，任何功能都可以以元件的形式插拔，靈活組合。同時指令碼也是一種特殊的元件，開發者也可以很自然的把業務功能沉澱為元件複用。

Oasis 引擎採用腳本系統進行邏輯編寫。我們提供了非常多的指令碼生命週期回撥，開發者只需過載需要的回撥函式即可。

從易用性和可讀性來說，指令碼相對透過事件編寫邏輯都具有明顯的優勢。尤其在元件系統架構中，腳本系統是更自然的一種方式。包括我們在做引擎架構時也從不會認為任何一種架構有絕對的對錯，更多的是權衡和適合的探討。同時，我們在腳本系統也做了很多體驗上的最佳化，比如提供了克隆裝飾器，開發者可以根據屬性的實際情況選擇不同的克隆裝飾器設定克隆模式，相對於手動編寫克隆函式更加的易用。

Oasis 引擎的開發語言採用了 TypeScript ，TypeScript 是 JavaScript 的強型別超集，相比弱型別的 JavaScript 具有非常大的優勢。尤其對於大型複雜專案，TypeScript 帶來了研發效率提升非常明顯。相信近幾年很多前端開發者已經有所體會。我們也推薦開發者使用 TypeScript 編寫邏輯指令碼。

Oasis 引擎在 API 的設計上追求嚴謹性、簡潔性、易用性等宗旨，聽起來很籠統，但是這背後卻是無數的設計細節堆積起來的。從體感的維度來講，清爽、自然、易用、符合開發者直覺的 API 設計就是好設計。我們在 API 設計上還利用了大量現代化的語法特性，比如函式過載、裝飾器、async/await、泛型等，這些語法對於 API 的設計非常重要，會直接提升使用者的研發體驗。

功能介紹

Transform 是引擎的高頻使用功能，無論是渲染還是物理都需要 Transform 描述座標等相關資訊。所以一個優秀的 Transform 不僅要功能強大，還有具備良好的效能最佳化。

Transfrom 最顯著的一個特點就是父變換會影響子變換，比如我們能想到修改父節點的區域性位置會觸發自身和子節點的世界位置變化。但是，實際情況可能遠比這複雜，如果修改父節點的區域性旋轉，不僅會觸發自身和子節點的世界旋轉變化，還會觸發自身和子節點的世界位置變化。同樣修改區域性縮放也有類似的效應。我們在 Transform 內部做了很多原子化的髒標記，基本原則就是不 get 屬性不計算，如果 get 了屬性也會根據髒標記判斷是否要重新計算。

基於 WebGL 開發的引擎通常面臨 JS 沒有解構函式的困擾。引擎的視訊記憶體物件並不在 JS 的託管範圍之內，如果不進行處理就會造成視訊記憶體洩漏。於是，Oasis 引擎提供了資源的手動釋放函式，可以直接呼叫物件的銷燬函式進行視訊記憶體釋放。但是實際問題更加複雜，當設計給開發同學一個模型時，我們並不知道這個模型對資源的引用關係。比如實體引用了材質，材質又引用了紋理，他們之間的引用關係錯綜複雜。首先，我們很難找到這些資源；其次，找到了也很難確保其沒有被別的模型引用並進行安全銷燬。

資源系統是引擎的基礎能力，包含資源的載入和管理等職責。Oasis 引擎的資源系統載入 API 非常的簡單易用，並且支援泛型、和非同步程式設計。我們做了資源引用計數，開發者只需要關心實體節點的銷燬即可，引擎內部會自動維護引用計數，呼叫 resourceManager.gc() 時，所有引用計數為 0 的資產會自動銷燬，從而在功能性和易用性直接找到了平衡。

著色/材質系統是引擎的渲染心臟，其好壞一定程度上決定了引擎的健康發展。Oasis 引擎自定義著色器非常的簡單，讓開發者專注於著色器邏輯本身。著色器的資料設定也非常簡單，只需呼叫 shaderData 中的相關介面即可。有過相關開發經驗的同學可能還知道著色器宏功能，在 Oasis 中同樣非常簡單，只需呼叫 enableMacro 介面即可。引用內部會自動處理相關的子著色器編譯。

除了簡單，Oasis 的整個著色系統還非常強大，Oasis 還是一個面向 GPU 友好的引擎，不僅可以透過材質設定著色資料，還可以透過場景、渲染器、相機等物件設定著色資料。另外，還可以非常自然地把蒙皮計算、粒子軌跡計算、材質著色等模組放入 GPU 中執行，充分發揮 GPU 的並行運算能力。

除了自定義著色器之外，Oasis 引擎還提供了靈活強大的 BufferGeometry 系統，開發者可以使用該系統自定義幾何體資料。BufferGeometry 系統支援交錯頂點緩衝、獨立頂點緩衝、instance 緩衝和索引緩衝，做過底層圖形開發的同學可能會非常熟悉這些功能。Oasis 的 BufferGeometry 系統幾乎包含了所有 GPU 相關的幾何體資料處理能力。引擎包含簡單易用的功能是必須的，如果能同時兼顧靈活和強大那自然是極好的。

我們來說說 BufferGeometry 具體可以做什麼，其實高階開發者可以使用它接入任何自定義粒子、拖尾之類的功能。比如 Mars 元件和 Spine 元件就是採用 BufferGeometry 系統接入的。Mars 也是螞蟻集團的一款高效能動畫和特效軟體，Spine 想必大家都很瞭解了，一款非常流行的 2D 動畫軟體。

穩定性和效能

穩定性和效能對引擎來說非常的重要，我們在穩定性和效能方面付出了非常多的努力，在億級流量的平臺專案上 crash 率小於萬分之 0.3 ：

測試方面，我們在編寫每個功能的同時都會增加對應的單測案例，在 github 也部署了自動化 CI 測試。效能最佳化方面，我們也付出了非常多的努力，比如元件驅動的相關最佳化、Transform 最佳化、視訊記憶體上傳最佳化、數學庫最佳化等等。記憶體最佳化方面，我們提供了 GPU 紋理壓縮功能，可以讓紋理視訊記憶體降低約80% ，同時還提供了良好的資源 GC 管理機制。在每一個系統設計上，我們都會綜合考慮效能和記憶體的平衡點，不會極端盲目的使用“空間換時間”。

再來說說我們目前的效能現狀，基於上圖中的效能測試案例，和國外知名 Web3D 引擎也進行了效能對比，同樣的測試規模和環境，Oasis 的效能大約是國外知名 Web3D 引擎的 2 倍。雖然這個案例並不是很全面，但至少是某幾塊功能的綜合性能表現。

總結

最後，我們對引擎介紹進行一下總結，Oasis 引擎採用元件系統架構、邏輯編寫採用腳本系統、引擎原始碼使用 TypeScript 編寫。功能上，我們介紹了引擎的幾個基礎系統，分別是 Transform 系統、資源系統、材質/著色系統和 BufferGeometry 系統，相信後續還會有機會和大家進行更多的功能介紹；穩定性和效能方面，具備金融級穩定性和領先的效能。

前世今生

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

黑鐵時代

第一階段是“黑鐵時代”（2016年-2018年）。2016年，阿里巴巴和螞蟻的移動端業務蓬勃發展，但是面向互動需求的圖形技術還比較落後，以 Web 3D 引擎為例，長時間內都依賴並不是為移動端而生的 Three.js 引擎。在資產標準方面，glTF 2.0 還沒有誕生，obj + mtl 這種古老的格式還不支援 PBR 等高階材質的能力，雖然 fbx 設計師匯出方便，但因為其體積過大和 Three.js 的載入器不穩定導致很多專案在美術資產進引擎階段就流產。

2016年底，螞蟻圖形引擎史上第一位英雄出現，景夫（螞蟻高階圖形技術專家、仙劍三主程、R3 核心開發者）寫下了第一行螞蟻圖形引擎的程式碼，這個專案被命名成 R3（意為 Render for 3D）。R3 為螞蟻移動端的互動業務而生，採用行業裡先進的元件系統遊戲引擎架構，工程上為了追求執行時體積的最小化，使用流行的 monorepo 多包單倉庫的開發模式。為了更方便地解決場景編輯問題，R3 也定義了一套自己的開發工作流，採用行業裡領先的 Unity 編輯器作為場景編輯器，透過自研的 Unity 外掛匯出 glTF 檔案，供執行時載入解析成場景。

黑鐵時代留下了幾個經典的作品，今天開啟螞蟻莊園的“運動會”面板，依舊能看到這這些 low ploygon 風格的遊戲。“星星球”是第一個使用 R3 引擎的互動遊戲，甚至當時還開發了 AR 版本，比較先鋒。

青銅時代

第二階段是“青銅時代”（2018年-2020年）。螞蟻圖形引擎從體驗技術部移交到了業務場景更加豐富的 RichLab 團隊，從 R3 升級為 Oasis，新團隊開始重新思考圖形引擎之於螞蟻互動業務和前端工程師的意義。在移動支付和金融數字化的背景下，移動端業務大量的富互動場景需求開始湧現，而對於穩定性的要求非常苛刻。為了更快更好地解決業務訴求，我們一方面開始擁抱前端生態：

用 Typescript 重構引擎，使引擎的程式碼更加健壯，同時開發者可以獲得更好的程式碼提示體驗；

融入螞蟻前端開發框架，讓引擎能夠自然地執行在 React 等框架中，並且擁有資產沉澱能力；

和客戶端以及小程式容器的同學合作適配了支付寶小程式，讓引擎能夠在更多的環境中執行。

另一方面，我們把重心放到了 3D 研發提效上。透過自研的 Oasis Editor 雲端場景編輯器，我們實現了資產管理、場景編輯器、指令碼編寫等核心能力。同時，我們也關心工作流上下游的銜接問題，比如美術資產的匯入問題，我們建議使用 fbx 檔案作為輸入，然後透過雲端的資產轉換和壓縮等能力處理成適合執行時載入的檔案；又比如，我們提供不同產物匯出的能力，有 React/Rax/小程式等，實現一處開發多處部署。

白銀時代

第三個時代是“白銀時代”（2020年-?）。螞蟻圖形引擎史上的第二位英雄出現，塵沫的加入就如普羅米修斯神話為 Oasis 引擎的重生帶來了火焰。經過八個月的四次迭代，引擎的功能、效能和易用性都發生了質的變化：

功能方面，引擎的實體/元件系統、腳本系統、資源系統、材質/Shader 系統等基礎系統能力達到了行業先進水平；易用性方面，對引擎的核心繫統進行了重新設計和思考，API 細節上完全拋棄了之前元件用物件傳參的模式，透過 set/get 屬性來控制，充分利用 Typescript 語言的特性，讓開發者充分享受到“猜測 API”的爽快感；效能方面，引擎的綜合性能增強到了青銅時代的四倍，其中 BufferGeometry 系統、材質/Shader 系統的單項效能均達到了之前版本的十倍以上，大幅領先國外知名 Web 3D 引擎。

除了在技術上的不斷升級，Oasis 團隊也非常重視業務落地，我們服務了阿里巴巴和螞蟻集團內眾多事業部的專案，在各個業務方中獲得良好的口碑，在各個客戶端中也驗證了引擎的相容性和穩定性。

未來展望

白銀時代也是一個開源的時代，事實上 Oasis 引擎的研發迭代早在青銅時代就進入內部開源，按照開源的工作模式透過里程碑和 issue 管理功能迭代。如今引擎雖然在基礎功能上已經能夠滿足業務需求，但未來我們希望把引擎放在一個更大的舞臺，透過開源的方式把引擎的能力進一步增強。比如物理引擎方面，目前我們正在透過 WebAssembly 的方式將其整合到引擎中。在引擎的完整性方面，我們首先會補充 2D 圖形的能力，同時讓引擎能夠渲染更多互動中所需的精靈型別，比如 Spine 和 Lottie；更遠的目標是實現引擎的跨平臺，雖然目前僅支援 WebGL 1.0 和 2.0，但可以看到引擎的 API 如 WebCanvas 等都已經是跨平臺引擎的介面設計了，未來會根據需求優先順序實現 Metal/Vulkan/WebGPU 等新型圖形語言介面的接入。

坦白來說， Oasis 還處於發展期，今天開源也只是 Oasis 新的起點，未來還有很長的路要走。希望 Oasis 引擎可以用自己的方式為國產 3D 引擎事業盡一份力，也希望 Oasis 團隊可以不忘初心，我們將用 3D 化的互動和表達讓世界變得更美好，實現我們心中的綠洲。