阿里妹導讀：圖像作為人類感知世界的視覺基礎，是我們在這個信息化時代獲取信息、表達信息及傳遞信息的重要手段，而生成圖像最高效準確的方式就是由計算機生成、顯示、繪制，這些技術又統稱計算機圖形技術。計算機圖形技術已經是許多產業的技術基礎，比如動畫、影視特效、游戲、設計、廣告、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 渲染，使得許多用戶場景都發生了改變，比如：

淘寶商品展示區域，可以向用戶展示更直觀的 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 具備以下特點：

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）程序在結構上的對比：

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 真的很难吗，瞧瞧支付宝怎么做？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。