3D 真的很難嗎，瞧瞧支付寶怎麼作？

阿里妹導讀：圖像做爲人類感知世界的視覺基礎，是咱們在這個信息化時代獲取信息、表達信息及傳遞信息的重要手段，而生成圖像最高效準確的方式就是由計算機生成、顯示、繪製，這些技術又統稱計算機圖形技術。計算機圖形技術已是許多產業的技術基礎，好比動畫、影視特效、遊戲、設計、廣告、AR、VR、數據可視化等等。爲了更貼近人類真實感覺，提高感官體驗，這些產業會優先選擇 3D 圖像來呈現。今天，咱們就來了解支付寶的3D圖像技術。

近些年來計算機圖形技術一直是國內外重點研究的方向，它自己是一個很深的領域，不管是學術深度研究，仍是內容工業化產出探索，須要解決的難題都很是之多。其中游戲、電影等領域在這方面已經發展得比較成熟，但 Web 端的計算機圖形技術纔剛剛起步。

螞蟻金服從來十分重視交互體驗，所以這一塊也是咱們的重點研究方向，尤爲是 Web 端的計算機圖形技術。最初，咱們只是簡單應用計算機圖形技術服務咱們的產品，後來逐步參與到這個領域的探索之中，在基礎能力建設、工具平臺、工做流和落地場景方面，造成了一整套解決方案。

接下來，想把咱們在探索過程當中遇到的問題及相應的解法，拿出來跟你們分享一下，歡迎探討交流。

首先，咱們先簡單瞭解一些前置知識。

實時圖形渲染

實際上，3D 圖像的渲染分爲離線渲染和實時渲染。

離線渲染注重的是圖像的真實感，對計算量和計算時間要求並不苛刻，可能須要計算機運算數小時甚至數天才能渲染出一幀圖像，一般運用在動畫電影、廣告插畫這種對質量要求較高的領域。

而實時渲染則對計算時間很是嚴格。在人機交互場景下，隨着用戶的操做控制，屏幕須要實時刷新，繪製流暢的動畫反饋給用戶。這就要求計算機在短期內渲染出一幅圖像並即時顯示出來，緊接着開始準備下一幅圖像。實時渲染僅僅依靠 CPU 的計算能力是難以完成的，還須要藉助 GPU 的並行計算能力。實時渲染主要運用於人機交互場景、以及根據不一樣數據展現不一樣圖像的渲染場景，好比遊戲、數據可視化、AR、VR 等。

在互聯網領域，咱們接觸的大多數場景都屬於實時渲染的範疇。雖然目前實時渲染在渲染效果上作了些閹割，可是咱們相信，隨着各項技術的發展，實時渲染效果會愈來愈逼真，之前只能經過離線渲染才能達到的效果未來也能實時渲染出來，將來的虛擬現實及加強現實定會一次又一次地震撼咱們的眼球。

Web 端 3D 圖像渲染

高效繪製 3D 圖像，必須依賴控制硬件能力和圖形繪製接口。爲了讓瀏覽器也具有高效繪製 3D 圖像的能力，2011 年 WebGL 工做組發佈了 WebGL 規範，並很快在各瀏覽器上落地。有了 WebGL 後，就能夠在 Web 端作出炫麗的 3D 效果，利用 Web 的跨終端、跨客戶端和靈活動態的特性，用戶無需下載 3D 應用客戶端，便可低成本獲取及按需加載 3D 內容，同時，它還能低成本與支付寶等超級 APP 中的產品內容相結合，充分利用其流量優點。

Web 端的特性加上 3D 渲染，使得許多用戶場景都發生了改變，好比：

1. 淘寶商品展現區域，能夠向用戶展現更直觀的 3D 商品模型，使用戶全方位瀏覽商品。
2. 3D 裝修設計這種一次性需求，無需再花時間下載一個專業軟件，打開瀏覽器也可得到全景體驗。
3. 在 Web 端製做的 3D 小遊戲，幾乎無需下載時間，便可讓用戶低成本嘗試、無阻礙傳播，更容易匹配到目標用戶。
4. 瀏覽器中的地圖能夠用 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 場景的製做難度，想更深刻了解，內網訪問oasis 3D官網：https://oasis3d.alipay.com。

在 Web 端 3D 引擎領域， Oasis 3D 具有如下特色：

1.微內核架構。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）程序在結構上的對比：

不難看出，在 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 會自動完成大部分 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 項目開發者提供服務，敬請期待！

PS：團隊正在急招：互動圖形技術、前端/全棧開發、前端架構、大數據開發等方向任選，指望層級 P6+～P7，團隊技術氛圍好，簡歷能夠直接砸郵箱哦：xingdi.cxd@alibaba-inc.com

---

本文做者：文樓

閱讀原文

本文來自雲棲社區合做夥伴「阿里技術」，如需轉載請聯繫原做者。