G3D 渲染引擎簡介

G3D 是一款基於 WebGL 的 JavaScript 3D 渲染引擎，藉助 GCanvas，G3D 能夠運行在 Weex，ReactNative 等 hybrid 環境下。G3D 由淘寶終端團隊推出，並於 2018 年 3 月與 GCanvas 同時宣佈正式開源。

那麼就會有同窗問了，G3D 和 three.js 有什麼不一樣呀？G3D 和 GCanvas 到底是什麼關係啊？這篇文章，就聊一聊 G3D 這個產品的前因後果。

G3D 官網，GCanvas 官網

爲何有 G3D

G3D 的起源要從 GCanvas 提及。

GCanvas 在 Weex 和 React Native 環境下提供了瀏覽器環境中 Canvas 的繪圖能力，手機淘寶 App 的 Weex 容器已經內置了 GCanvas。和 Canvas 同樣，GCanvas 的繪圖能力包括 2D 上下文和 WebGL 上下文的繪圖能力。2D 上下文相對較爲簡單，能夠直接拿來使用；而 WebGL 上下文比較複雜，從 WebGL API 到真正的 3D 應用之間每每還須要一層 3D 渲染引擎，社區中的 three.js，Babylon.js 等就是這類 3D 渲染引擎中的翹楚。

GCanvas 開發團隊曾嘗試把 three.js 和 Babylon.js 接入到 GCanvas 環境中來，遇到了一些困難：

社區中的 WebGL 渲染引擎依賴了大量的 DOM API 和原生對象，在 Weex 與 React Native 環境中不存在這些 API 與原生對象。開發團隊也曾嘗試對 Babylon.js 和 three.js 進行改造，但發現成本比較高，並且後續跟進原版項目 bugfix 與功能迭代的難度也比較大。
如 GCanvas 文檔所述， GCanvas 目前僅支持 WebGL API 的一個子集。直接引入 Babylon.js 和 three.js，在 GCanvas 環境下還暫時沒法正常工做。
因爲 three.js 和 Babylon.js 的體積已經比較巨大，其中不少功能在手機淘寶的業務場景中暫時用不到。所以，即便可以成功改造，巨大的 JS 體積也會拖垮手淘中不少頁面的性能。
因此，GCanvas 開發團隊決定從零開始開發一個小型的 WebGL 渲染引擎 G3D，並以此做爲 GCanvas 3D 能力的輔助。能夠預見，G3D 和 GCanvas WebGL 將會是相輔相成，互相促進，共同發展；而且在較長一段時間內，G3D 將是使用 GCanvas WebGL 能力，除了直接操做原生 WebGL API 以外的惟一選擇。

G3D 有哪些功能

G3D 具備 3D 渲染引擎的基本功能：

定義場景，定義透視相機。
光照方面，目前支持 1)環境光；2)平行光；3)點光；4)穹頂光。
材質方面，目前支持 1)基於馮氏反射模型的馮式面材質（朗伯面是馮氏面的一種特殊狀況）；2) 非光照材質。
幾何體方面，目前支持直接建立的幾何體包括立方體，球體，圓柱，圓錐，折線；固然更多狀況下是能夠經過解析模型數據建立幾何體。
模型解析方面，目前支持 1) OBJ/MTL 模型；2) STL 模型這兩種模型格式。
交互：支持 3D點選/拖拽（因爲 GCanvas framebuffer 仍未正常，此功能僅在瀏覽器中有效）。
動畫：支持骨骼動畫和蒙皮動畫。
值得注意的是，因爲 G3D 須要運行在 Hybrid 環境下，沒法依賴 DOM API，因此與 three.js，Babylon.js 等瀏覽器環境的引擎相比，G3D 沒法支持諸如聲音播放，文件加載等非渲染核心功能。舉例來講，若是使用 three.js 加載模型，只須要調用相關方法傳入模型的 url 便可，three.js 會自動加載和解析模型；但在使用 G3D 時，你須要手動獲取該文件的內容（Hybrid 與瀏覽器會不同），而後將內容字符串傳入 G3D.MeshBuilder 的相關方法。

G3D 的將來

目前 G3D 已經在淘寶 3D 定製等業務中有所使用，在將來的半年到一年裏，G3D 主要的目的有兩個：

追趕 Babylon.js 和 three.js 的高階功能，如陰影、Shader材質、預處理、法線紋理、光線追蹤等等，在其過程當中推進 GCanvas WebGL 的完善，同時賦能業務和社區。
進一步打通 G3D 與建模-動畫工具鏈的通道，完善模型-材質數據結構，提高渲染效果，達到「（Blender 等工具中）所見即（G3D渲染出）所得」的開發體驗，最大程度地下降 3D 項目的開發成本。

本文同步分享在 博客「xiangzhihong8」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。