隨着互聯網技術的發展，Web 前端也出現了不同分支，除了傳統網頁開發以外，前端圖形領域也逐漸獨立為一個重要方向。雖然目前從整體上來看，前端圖形領域還是比較小眾的領域，但從發展勢頭來看，其未來發展前景還是值得關注。
然而，進入 3D 圖形世界除了能看到炫酷的效果以外還是非常令人生畏的，如果不了解 3D 渲染的原理，反而很容易讓自己陷入泥潭。那麼目前國內外前端圖形領域現狀究竟怎樣？入手前端圖形領域又該有怎樣的準備？帶着以上疑問，InfoQ 特別採訪了螞蟻 Oasis Engine團隊負責人燒鵝。Oasis Engine （以下簡稱 Oasis）是驅動支付寶五福、打年獸等互動遊戲的圖形引擎，由螞蟻集團 RichLab 互動科技團隊自研，剛剛度過開源一周年生日。
燒鵝：前端與圖形學的關係，我們從兩方面來談：
第一，標準方面。往 Web 圖形技術的底層去深究，首先要追溯到國際組織 Khronos Group ，Khronos Group 專注於創立開放標準，免授權費的移動設備接口程序 API , 其制定了 OpenGL 標準，這也是行業領域中最為廣泛接納的 2D/3D 圖形 API。
而後基於 OpenGL 在移動端的分支標準 OpenGL ES，Khronos Group 制定了 WebGL 標準，WebGL 標準提供了 3D 圖形的 API，允許使用 HTML5 中的 Canvas 調用相關接口。後來 W3C 組織制定了 WebGPU 標準，與 WebGL 不同的是，WebGPU 不是 OpenGL 的包裝，而是直接驅動 Vulkan、Metal 和 DirectX 12 等新生代圖形接口，最新版的 Chrome 100 已經默認開啟了 WebGPU 的能力。目前，WebGPU 還是一個草案階段，WebGL 已經發展到 2.0 階段，這兩個標準也是前端實現圖形應用的基礎 API。
第二，領域方面。前端圖形開發可以說是平行於傳統前端開發的領域，通常情況下，普通的前端開發基於 React、Vue 等框架，而前端圖形開發則依靠圖形引擎與遊戲開發框架去開發應用，這一點類似於遊戲開發與傳統軟件開發的區別。
燒鵝：目前從國內外總體發展現狀來看，前端圖形領域還是相對比較年輕的，畢竟從標準上來看，2011 年 3 月 WebGL 1.0 規範發布，距今也僅僅 11 年的時間。不過隨着標準的逐漸成熟，前端圖形引擎也像雨後春筍般湧現出來，就像遊戲開發依賴於遊戲引擎，前端圖形開發也依賴於前端圖形引擎，而一個優秀的前端圖形引擎的出現勢必將會帶動整個生態的發展。
另外，目前整個前端圖形領域發展滯後的原因，除了標準的滯後還有就是人才的缺失。在大多數開發者眼裡，在 Web 里運行圖形的性能遠遠不如原生圖形，與其費力不討好研究 Web 圖形，不如轉而研究原生圖形，這種根深蒂固觀念的影響也導致很多人才並沒有引入到前端圖形領域。
不過，從未來發展趨勢來看，前端圖形領域還是值得關注的。之前受限於各種軟硬件的條件，3D 圖形效果在 Web 上往往不能很好實現，而隨着硬件設備和網絡帶寬的不斷升級，情況已經大大改善。可以預見，前端在未來業務方面也會面臨越來越多的 3D 圖形需求。
其次，目前互聯網公司內前端圖形開發工作大多數還是由 Web 前端工程師擔任，相關需求的增多必然會要求前端工程師逐步具備 3D 圖形開發能力。總的來說，前端圖形領域雖然可能不會有一個爆發式的增長趨勢，但長期會出現相對緩慢的增長趨勢。
燒鵝：Oasis 的發展歷程可以分為兩個重要時期：內部孵化和開源時期。2016 年底，阿里巴巴和螞蟻的移動端業務發展迅速，在 Web 3D 引擎方面，主要依賴於 Three.js 引擎。雖然 Three.js 引擎本身已經成熟，但其畢竟不是為移動端而生，而且本身功能局限於渲染，三方生態又良莠不齊。另一方面，從技術發展戰略上，公司當時已經認識到，面向移動端圖形業務，自身有必要去做一個引擎。
在此契機下，仙劍三遊戲主程景夫加入螞蟻開始了引擎的開發，這也是 Oasis 的前身— R3 項目 ，當時，R3 服務的項目還是比較少的，不過直到現在依舊有跡可循，比如我們經常玩的螞蟻莊園，裡面「星星球」的項目就是由這個引擎驅動的，後來，項目也暫停過一個階段，並沒有太多技術上的突破。
直到 2018 年，RichLab 團隊接手，開始確定做一個開源引擎。2020 年，擁有多年圖形引擎架構和開發經驗的塵沫加入團隊，主導了整個引擎的重構，也是從這時候開始，團隊對引擎功能、性能、易用性等方面有了更高的要求。
燒鵝：組件化架構初衷有兩方面， 首先，就圖形引擎或者遊戲引擎而言，其本身的功能是非常複雜的，除了需要具備三維渲染能力，還需要包含非常多細分領域的功能，比如 2D、3D、UI、音頻、物理、VR/AR、邏輯編寫等等。採用組件化架構，功能本身就是一個模塊，以組件的形式插拔，靈活組合。這樣可以更加優雅地組織場景，避免面向對象編程中繼承式設計帶來的嵌套以及性能損耗。
其次，組件化架構設計對編輯器的可視化展示也是非常友好的。在編輯器上，功能的展示也是扁平羅列出來，從視覺上就可以清楚的判斷哪個功能需要，這對於使用者來說也比較簡單。
當然組件化架構設計也並非一帆風順，在重構過程中，團隊也面臨了諸多挑戰。在組件化架構第一版，我們簡單粗暴地去遞歸遍歷場景中的每個節點和節點下的組件，而非用緩存組件隊列，也沒有設計配套的腳本組件接口，導致性能和功能都存在較大缺陷。後期通過引擎的進一步重構，組件化性能問題才得以解決。
另外，組件化架構和編輯器的有機融合，即組件功能在編輯器里的展示，中間也多涉及交互層的設計，目前團隊也仍在持續解決中。
燒鵝：Oasis 的開發語言採用了 TypeScript，TypeScript 是 JavaScript 的超集，相比弱類型的 JavaScript 具有非常大的優勢。尤其對於大型複雜項目來說，TypeScript 帶來的研發效率優勢非常明顯。
我們用 Typescript 有兩方面的原因，首先對於引擎用戶開發者來說，Typescript 最大的優勢是有代碼提示。作為一個 API 功能非常複雜的引擎來說，查 API 手冊就像翻閱一本新華字典，這對於開發者來說是一種壓力，這種情況下，代碼提示顯得尤為重要。
其次，對於引擎開發者來說，TypeScript 定義了弱類型語言缺失的能力，比如裝飾器、枚舉、類型轉換等等。這些新的類型和方法，能夠幫助開發者減少引擎的代碼量，比如我們用了裝飾器之後，代碼設計非常乾淨，而運用了枚舉，能夠高效地組織代碼結構、提升代碼的健壯性。
燒鵝：Web 圖形引擎性能優化一個核心的思想就是：重 GPU 輕 CPU，在這個思想下面再去做一些針對細節的優化 。
雖然 GPU 在複雜計算方面能力弱一點，但是它能夠同時進行更多簡單的任務，而且就目前現狀來看，JS 相對 C++ 等原生 CPU 語言運行效率更低，所以引擎整體性能優化即重 GPU 輕 CPU，一方面把骨骼動畫、粒子動畫等較大規模的原本 CPU 的計算量轉嫁到 GPU 中，另一方面減少 CPU 到 GPU 的資源傳輸，包括傳輸量和傳輸頻率，通過這種方式，提升了引擎本身性能。
燒鵝：第一，我們繼續深入完善引擎本身更多高級功能，包括物理系統、動畫等，增加更多項目案例，進一步降低開發者的上手成本；第二，我們計劃在年底開放編輯器，打造一些插件功能；第三，我們也將進一步加強開源影響力建設，不拘泥於國內，而是增加國際影響力。
燒鵝：首先，Oasis 開源的意義在於把引擎往更豐富的業務場景裡面去應用，同時也能依靠社區的力量進一步擴大引擎的生態，舉個例子，比如適配微信小程序，可能我們沒有精力去做，但社區裡的開發者會進行相應的完善；其次，開源能夠讓團隊不再拘泥於開發思維而是擴展更多產品、業務思維，這對於自身發展成長也是大有裨益；最重要的一點，選擇開源也希望引擎對整個前端圖形領域有一定的貢獻。很多前端工程師都表示 Oasis Engine 是接觸的第一個圖形引擎，容易上手，這也可以幫助更多對圖形學感興趣的前端工程師們增加對此領域的了解。
當然，真正的開源，是一種可持續、健康的狀態。做開源的話需要做到三點：第一，不要去做所謂的代碼開源，而要做到流程規劃、問題管理等全部開源；第二，不要只停留在國內，而要多接觸國外開發者；第三，持續地做出社區感興趣的應用，擴大影響力。比如，Unity 每年都會做開發者大會，展示引擎的新功能以及酷炫、讓人眼前一亮的效果，他們在內容製作這方面也是值得大家學習的。
燒鵝：隨着時代的變化，一些傳統的前端工程師已經不滿足於現在的界面開發，想去拓寬自己的技術棧，比如圖形學方向。
首先，如果前端開發者不滿足控制 CSS 的盒模型，而是渴望控制的屏幕上的每個像素，去繪製更有想象力的空間，我認為現在是一個轉向前端圖形領域不錯的時機；其次，經驗方面，可以先學圖形學的基礎課程，對圖形學有高屋建瓴的認知，這是很關鍵的，進一步判斷自己是否真正感興趣，如果感興趣的話可以開始上手使用一些引擎，比如 Unity 、Oasis 等，通過對引擎的使用，掌握常見的圖形學裡面的概念，比如燈光、材質等。
另一方面，如果有同學想轉引擎開發工程師的話，需要更深度的學習。因為引擎裡面的分支也是非常複雜的，包括像我們現在做的互動，也只是一個比較窄和小眾的領域。計算機圖形領域是一個非常龐大的領域，需要有很深的知識儲備，掌握基礎知識之後再去挑選自己感興趣的分支領域發展，比如渲染、物理、動畫等等。
Oasis 官網：
https://oasisengine.cn/
Github 地址：
https://github.com/oasis-engine/engine
燒鵝（徐乾偉）：
螞蟻集團 Oasis Engine 團隊負責人，高級前端技術專家，主導了阿里集團和螞蟻集團互動圖形方向的技術發展，目前致力於 Oasis Engine 引擎和編輯器的產品化建設。
留言列表