作者：RichLab 前端 文樓
寫在最前：歡迎來到「花唄借唄前端團隊」技術專欄，我們將與大家分享前端各領域的高質量技術文章，包括但不限於移動端、小程式、互動技術/資料視覺化、Node.js 全棧/中後臺、基礎架構、個人思考，不限於原創與翻譯。我們也歡迎優質文章的投稿。
編者按：這是一篇關於 3D 互動開發的長文，它會從基礎知識入手，由淺入深地講解螞蟻金服在 3D 互動領域的探索之路。如果你對互動技術感興趣，千萬別錯過這篇文章！
影像作為人類感知世界的視覺基礎，是我們在這個資訊化時代獲取資訊、表達資訊及傳遞資訊的重要手段，而生成影像最高效準確的方式就是由計算機生成、顯示、繪製，這些技術又統稱計算機圖形技術。計算機圖形技術已經是許多產業的技術基礎，比如動畫、影視特效、遊戲、設計、廣告、AR、VR、資料視覺化等等。為了更貼近人類真實感受，提升感官體驗，這些產業會優先選擇 3D 影像來呈現。比方說以下我們熟知的這些。
（圖片源自網路）
近些年來計算機圖形技術一直是國內外重點研究的方向，它本身是一個很深的領域，無論是學術深度研究，還是內容工業化產出探索，需要解決的難題都非常之多。其中游戲、電影等領域在這方面已經發展得比較成熟，但 Web 端的計算機圖形技術才剛剛起步。
螞蟻金服歷來十分重視互動體驗，因此這一塊也是我們的重點研究方向，尤其是 Web 端的計算機圖形技術。最初，我們只是簡單應用計算機圖形技術服務我們的產品，後來逐步參與到這個領域的探索之中，在基礎能力建設、工具平臺、工作流和落地場景方面，形成了一整套解決方案。
接下來，想把我們在探索過程中遇到的問題及相應的解法，拿出來跟大家分享一下，歡迎探討交流。
首先，我們先簡單瞭解一些前置知識。
實時圖形渲染
實際上，3D 影像的渲染分為離線渲染和實時渲染。
離線渲染注重的是影像的真實感，對計算量和計算時間要求並不苛刻，可能需要計算機運算數小時甚至數天才能渲染出一幀影像，通常運用在動畫電影、廣告插畫這種對質量要求較高的領域。
而實時渲染則對計算時間非常嚴格。在人機互動場景下，隨著使用者的操作控制，螢幕需要實時重新整理，繪製流暢的動畫反饋給使用者。這就要求計算機在短時間內渲染出一幅影像並即時顯示出來，緊接著開始準備下一幅影像。實時渲染僅僅依靠 CPU 的計算能力是難以完成的，還需要藉助 GPU 的平行計算能力。實時渲染主要運用於人機互動場景、以及根據不同資料展示不同影像的渲染場景，比如遊戲、資料視覺化、AR、VR 等。
在網際網路領域，我們接觸的大多數場景都屬於實時渲染的範疇。雖然目前實時渲染在渲染效果上做了些閹割，但是我們相信，隨著各項技術的發展，實時渲染效果會越來越逼真，以前只能通過離線渲染才能達到的效果將來也能實時渲染出來，未來的虛擬現實及擴增實境定會一次又一次地震撼我們的眼球。
Web 端 3D 影像渲染
高效繪製 3D 影像，必須依賴控制硬體能力和圖形繪製介面。為了讓瀏覽器也具備高效繪製 3D 影像的能力，2011 年 WebGL 工作組釋出了 WebGL 規範，並很快在各瀏覽器上落地。有了 WebGL 後，就可以在 Web 端做出炫麗的 3D 效果，利用 Web 的跨終端、跨客戶端和靈活動態的特性，使用者無需下載 3D 應用客戶端，即可低成本獲取及按需載入 3D 內容，同時，它還能低成本與支付寶等超級 APP 中的產品內容相結合，充分利用其流量優勢。
Web 端的特性加上 3D 渲染，使得許多使用者場景都發生了改變，比如：
- 淘寶商品展示區域，可以向使用者展示更直觀的 3D 商品模型，使使用者全方位瀏覽商品。
- 3D 裝修設計這種一次性需求，無需再花時間下載一個專業軟體，開啟瀏覽器也可獲得全景體驗。
- 在 Web 端製作的 3D 小遊戲，幾乎無需下載時間，即可讓使用者低成本嘗試、無阻礙傳播，更容易匹配到目標使用者。
- 瀏覽器中的地圖可以用 3D 方式呈現，模型按需載入，動態渲染。
（高德 3D 地圖）
還有很多 Web 端的 3D 應用場景，這裡暫不一一列舉了。
有些場景聽似不復雜，但是，想直接利用 WebGL 完成可並不簡單。 WebGL 本身只提供最基礎的圖形繪製 API, 你需要充分了解 WebGL 的內部細節，學習如何通過著色器語言進行 GPU 程式設計、用複雜數學知識解決空間關係和光影效果計算等問題。
所以，我們希望基於 WebGL 封裝出一個對應用開發者友好的引擎，提供大量常用 API, 簡化整個 3D 工程的建設過程。於是 Oasis 3D 應運而生。
Oasis 3D
Oasis 3D（綠洲引擎，以下簡稱 Oasis 3D）是我們螞蟻金服自研的一款輕量化的 3D 引擎，它提供豐富的功能元件，支援複雜的 3D 圖形渲染，開發者毋需學習複雜的圖形學知識，利用 Oasis 3D 便能輕鬆建立出複雜的 3D 場景，大大降低了 3D 場景的製作難度。
在 Web 端 3D 引擎領域， Oasis 3D 具備以下特點：
- 微核心架構。Oasis 3D 核心提供了基礎的渲染能力，但並不侷限於此，你可以針對不同場景對 Oasis 3D 擴充套件為不同引擎，如遊戲引擎、動畫引擎、資料視覺化渲染引擎、AR 場景 3D 渲染引擎等。Oasis 3D 吸取了 Unix 思想，它每一個模組都遵循了「do one thing, and do it well」的理念，在領域內完成了複雜且內聚的功能集合，只對外暴露最易懂簡單的介面，組合起強大複雜的整體，又不影響整體功能的可維護性。目前， Oasis 3D 在螞蟻金服體系內主要應用於互動遊戲及互動大屏上，為了支撐這些場景， Oasis 3D 封裝了常用的圖形功能模組，基本支撐了我們日常的應用開發：
- SceneGraph 場景結構。圖形應用中常見的複雜場景，場景之間的空間關係，都可以通過 SceneGraph 管理；
- 3D 渲染基礎功能：光源、網格、幾何體、材質系統、相機；
- 渲染增強功能：陰影、後處理系統、場景霧化；
- 外部模型支援 glTF 2.0 以及配套 PBR 材質；
- 豐富多樣的動畫系統：骨骼動畫、插值動畫、粒子動畫系統；
- 一系列強大的功能元件沉澱：碰撞檢測、HUD 平行顯示、射線投射、幀緩衝拾取、有限狀態機、數學庫等等；
2. 基於元件開發。基於元件開發（CBD）和傳統的物件導向程式設計（OOP）都可用於擴充套件一個類的功能，但是在設計思路上有非常大的不同。傳統的物件導向程式設計（OOP）中，會設計一個基類，在需要擴充套件特性的時候，以繼承基類的方式產生派生類。這種方法非常直觀，但是在需要擴充套件的特性漸多的時候，會有很大的問題。
例如，有一個動物基類 Animal, 如果有一類動物會飛，就得生成擴充套件類 FlyAnimal; 如果有一類動物會游泳，就得生成擴充套件類 SwimAnimal. 但是，如果有一類動物同時會飛會游泳呢？首先，你是沒有辦法同時繼承 FlyAnimal 和 SwimAnimal 的，因為這兩個類有共同的基類；其次，如果我們基於 Animal 擴充套件生成 FlySwimAnimal 類，就必須將 FlyAnimal 和 SwimAnimal 的程式碼重寫一遍，相當於類似的程式碼我們寫了兩遍。
基於元件開發（CBD)，在功能擴充套件方面就不存在上述問題。如上面的例子，有一個動物基類 Animal, 如果要擴充套件飛行的能力，可以實現元件 FlyComponent; 如果要擴充套件游泳的能力，可以實現元件 SwimComponent. 而使用的時候，只要將所需元件新增到 Animal 中。如果有一類動物同時會飛和游泳，只需給這類動物同時新增 FlyComponent 和 SwimComponent 元件，即可達到擴充套件效果。
以下兩圖是物件導向程式設計（OOP）與基於元件開發（CBD）程式在結構上的對比：
（OOP 與 CBD 對比）
不難看出，在 3D應用中，基於元件開發（CBD）比物件導向程式設計（OOP）更適合做功能擴充套件，結構簡單清晰。同時，也極大地避免了繼承造成的程式碼耦合。這就非常適合視覺化開發。
3. 移動端友好。Oasis 3D 本身很輕量，可以做到按需載入，在移動端網速被限制情況也能載入顯示。針對移動端瀏覽器， Oasis 3D 還做了一系列優化，形成了一些最佳實踐方案。
經歷了螞蟻金服千萬級業務的洗禮，Oasis 3D 在移動端適配了上千種機型，做到了穩定且可信賴。
綜上，採用了更適合 Web 端 3D 引擎模式和思想的 Oasis 3D ，為移動端環境做了更多的考慮，相對於市面上其他引擎頗具優勢。
專案歷程
螞蟻金服近年來一直在探索 3D 專案的落地， Oasis 3D 經歷了一個個專案的磨練，不斷迭代優化，總結實踐經驗，逐步形成了一個高效的 3D 工作流。
2017 年 Oasis 3D 問世之際，就接連承接了螞蟻莊園-星星球遊戲（當年我也玩！）、網商銀行兩週年粒子陣列特效、花唄雙十一特效、借唄唄殼鯨魚特效等等專案。
（螞蟻莊園-星星球遊戲）
2018 年， Oasis 3D 用心做好的一件事情就是優化 API、釋出新版本，建立官網並在阿里集團內推廣。我們還深入探索了移動端的專案落地，比如惠星球、螞蟻莊園的小雞登山等專案，更多采用了移動端友好的 Low poly 風格進行設計，採用大量烘焙貼圖替代複雜的光照和陰影，如此一來，視覺效果及效能均大大優化，使用者體驗也明顯提升。
（惠星球）
（螞蟻莊園-小雞登山遊戲）
同時，我們在視覺化大屏專案上也做了嘗試，並圓滿完成了承接公司業務大屏的重要任務。
（支付寶大屏）
Oasis 工作流
雖然 Oasis 3D 為 3D 專案落地首發奇功，但整個研發過程還是比較艱辛的，過程中暴露了 Web 端 3D 專案製作的一系列問題：
- 定製化開發過多。尤其是移動端專案，渲染能力受到裝置極大限制，在不影響效果的情況下，還要做到流暢執行，所以經常會採用一些定製化的方案解決，用取巧的方式實現。這就要求使用者熟練掌握 Oasis 3D 引擎原理，必要時還要做一些定製化開發，整體開發難度高，效率低。
- 上手成本高。前端工程師對計算機圖形技術和遊戲領域工作流並不熟悉，導致只有少部分工程師能 hold 住 3D 專案。
- 沉澱少，創意難。產品線的設計師大多並不擅長 3D 設計，不知道該如何設計，或者設計出來的方案不一定能落地。設計師需要了解實際執行環境的特點進行模設計，最好是直接根據當前環境支援的效果進行擴充套件，由於目前能參考的 Web 端 3D 沉澱案例比較少，所以也加大了 3D 專案落地的難度。
- 工作流程繁瑣。模型美術做出的模型轉換成優質可執行資源的過程比較繁瑣，還需要藉助 Unity 進行配置後轉換，工作流繁重。
這些問題都是 Web 端 3D 專案落地遇到的阻力，這使得這項技術在螞蟻體系內推廣複用也困難重重。
所以，我們不僅要解決引擎層面的問題，更重要的是要讓 Web 3D 專案落地變得簡單，並且讓更多人輕鬆掌握這項能力。這就倒逼著我們同時從引擎功能、工具及工作流、平臺生態三方面同時建設。
於是我們基於 Oasis 3D 開發了 3D 內容編輯器——Oasis Editor.
Oasis Editor 是一個線上編輯器，它重新定義了 3D 工程的工作流，通過 Oasis Editor 提供的的工作流，你可以視覺化編輯 3D 場景與互動邏輯。包括場景搭建、場景美化、動畫編輯、遊戲邏輯編輯在內的功能都可以線上完成。
（Oasis Editor）
整個 Oasis Editor 具有以下優點：
- 豐富的功能元件。Oasis Editor 支援豐富的資源型別，可通過自定義擴充套件功能將定製化需求擴充套件為全新的功能元件。
- 美術資源無縫對接。Oasis Editor 會自動完成大部分 3D 資源的轉換及上傳工作，完全省掉 Unity 轉換工作。
（不同美術資源對接流對比圖）
- 各類動畫視覺化編輯。Oasis Editor 為工程師或設計師提供了各種動畫編輯功能，如插值動畫編輯、粒子動畫編輯，這讓我們告別了原來在程式碼中反覆調整引數、再給設計師瀏覽的工作流，設計師可以直接使用編輯器調整引數，參與到專案開發中——把專業的事交給專業的人去做。
- 線上平臺生態。Oasis Editor 配套了 3D 內容平臺，提供專案迭代管理和資源共享能力。
另外，Oasis Editor 會盡量覆蓋我們 3D 開發的方方面面。比如，在計算機圖形技術中，最專業的部分是利用各種圖形演算法和可程式設計著色器介面實現各種特效和模擬效果，應用開發工程師其實很難介入這部分工作。但是很多專業的著色器都是可以複用的，視覺化著色器編輯器和著色器內容管理平臺也非常重要。後續我們計劃將這部分功能與 Oasis Editor 工程打通，這樣不僅可以向使用者通盤展示我們所支援的著色器效果，又可以減少很多定製化開發的工作量。
總的來說，我們希望通過 Oasis Editor 簡化 3D 開發過程中那些繁瑣且有難度的工作，讓開發者對 Oasis 3D 引擎無感知，通過 Oasis 工作流就能完成整個專案的開發，讓 3D 開發的能力觸手可及。
總結
瀏覽器為了實現基礎通用性，提供給使用者的是最基礎的繪製介面，使用者能夠完全自由地在畫布上控制每一個片源點的顯示，但過分的自由也是把雙刃劍——你的想象力和圖形學知識體系完全限制了你能渲染出什麼樣的作品，而大部分人並不具備這樣的專業能力，這就使得目前 Web 端 3D 專案落地變得極其困難。就好比我們想造一座摩天大樓，但瀏覽器只提供了最基礎的砂石材料——這無疑是天方夜譚。
與建大樓一樣，我們 Web 端 3D 工程一定也是逐漸趨向工業化發展的。 Oasis 體系會將底層專業的事情包攬掉，只提供給使用者高效易用的工具以及內容豐富的平臺。
我們一直在努力建設中，很快 Oasis 體系將會面向阿里體系外的使用者開放，為所有 Web 端 3D 專案開發者提供服務，敬請期待！
最後，感謝你認真閱讀這麼長的一篇文章，拋個彩蛋吧～
? 我們團隊還會陸續出品 3D 技術領域的系列文章，感興趣的夥伴請多多關注哦~
「花唄借唄前端團隊」致力於與你共享高質量的技術文章
歡迎關注我們的專欄，將文章分享給你的好友，共同成長 :-)
我們團隊正在急招：互動圖形技術、前端/全棧開發、前端架構、大資料開發等方向任選，期望層級 P6+～P7，團隊技術氛圍好，上升空間大，簡歷可以直接砸給我哈 shudai.lyy@alibaba-inc.com