相信你們已經體驗了今年支付寶五福的活動，不管是今年的五福首頁仍是打年獸遊戲都是由螞蟻互動圖形引擎（代號：Oasis Engine）驅動的。Oasis Engine 是螞蟻集團 Web 3D 互動圖形引擎，同時也是阿里經濟體互動技術方向的首選 Web 3D 引擎，已於2月1日正式開源。
https://github.com/oasis-engine/engine
這篇文章會和你們介紹 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 具備很是大的優點。尤爲對於大型複雜項目，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 爲螞蟻移動端的互動業務而生，採用行業裏先進的組件系統遊戲引擎架構，工程上爲了追求運行時體積的最小化，使用流行的 menorepo 多包單倉庫的開發模式。爲了更方便地解決場景編輯問題，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.io
Oasis Github 社區：
https://github.com/oasis-engine/engine
不管
你是渲染方向、TA 方向、IDE 方向、仍是更細分的領域，只要你和咱們同樣有共同的理想和目標，歡迎投遞簡歷到 chenmo.gl@antgroup.com
本文分享自微信公衆號 - 支付寶技術（Ant-Techfin）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。
