簡介： 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 化的交互和表達讓世界變得更美好，實現我們心中的綠洲。
作者：Oasis 團隊
本文為阿里雲原創內容，未經允許不得轉載