作者 | Oasis 團隊
相信大家已經體驗了今年支付寶五福的活動，無論是今年的五福首頁還是打年獸遊戲都是由螞蟻互動圖形引擎（代号：Oasis Engine）驅動的。
Oasis Engine 是螞蟻集團 Web 3D 互動圖形引擎，同時也是阿裡巴巴互動技術方向的首選 Web 3D 引擎，已于 2 月 1 日正式開源。感興趣的同學可以關注我們的 Github 社群：
https://github.com/oasis-engine/engine和加入釘釘開發者交流群：31360432。
無論你是渲染方向、TA 方向、IDE 方向、還是更細分的領域，隻要你和我們一樣有共同的理想和目标，歡迎與我們交流 [email protected]
這篇文章會和大家介紹 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 官網：
https://oasis-engine.github.ioOasis Github 社群：
釘釘開發者交流群：31360432
無論你是渲染方向、TA 方向、IDE 方向、還是更細分的領域，隻要你和我們一樣有共同的理想和目标，歡迎與我們一起交流 [email protected]
作者：Oasis 團隊
文章來源：Alibaba F2E公衆号
來源連結：
https://mp.weixin.qq.com/s?__biz=Mzg4MjE5OTI4Mw==&mid=2247487187&idx=1&sn=305d986d778c9894b84268bd58ecc1e4&chksm=cf5b114ff82c9859c2054a08471025da24f8e76a98ac77c534efd5cd079c1772851973487d88&token=1880522573&lang=zh_CN#rd 關注「Alibaba F2E」
把握阿裡巴巴前端新動态