5分鐘帶你看懂GCanvas渲染引擎的演進

本文內容大綱：

1、輕量級圖形渲染引擎與應用

2、渲染引擎演進與最佳化之路

3、渲染引擎未來的發展方向

GCanvas 發展

GCanvas 引擎從早期的 H5 效能加速，到 Weex 業務落地，從小遊戲的業務探索，到服務端渲染，再到小程式。經過幾個階段的發展後日漸成熟。
淘系無線架構的不斷升級迭代，GCanvas 隨之保持著更新迭代的步調，在多個業務場景中使用，瞭解下一些應用案例。

應用案例

天貓未來店
天貓未來店的智慧電子標籤，基於 GCanvas JSBinding 的智慧電子標籤

• 支付寶小程式諸葛找房 - 2D
  

• 淘寶商家應用AR試妝 - WebGL

架構演進與最佳化

2017年的架構
以外掛為主的實現，僅支援移動端

最新架構
提供標準介面，鏈路升級，API升級，不僅支援移動端還支援服務端
架構變化主要有以下幾個方面：

• 適配支援更多的 JS 框架和庫

• JS 到 Native 呼叫通路，從模組路由反射升級到 JSBinding

• 渲染 API 支援 Metal

• 增加 MacOS 和 Linux 平臺支援

• 第一種方案，使用 JSExport 和 JSExportAS

@import JavaScriptCore;

@protocol TestObjecJSExport <JSExport>
JSExportAs(foo, - (void)foo:(NSString *)msg);
@end

• 第二種方案，使用 C Export 將方法和屬性用 JSStaticFunction 和 JSStaticValue 進行繫結

//方法JSStaticFunction
typedef struct {
  const char* name;   //方法名
  JSObjectCallAsFunctionCallback callAsFunction; //Native方法實現
  JSPropertyAttributes attributes; //方法設定
} JSStaticFunction;

//屬性JSStaticValue
typedef struct {
const char* name;  //屬性名
JSObjectGetPropertyCallback getProperty; //Native屬性Getter實現
JSObjectSetPropertyCallback setProperty; //Native屬性Setter實現
JSPropertyAttributes attributes; //屬性的讀寫設定
} JSStaticValue;

簡單的耗時測試資料對比：

JS 到 Native 資料傳輸
方法呼叫與屬性訪問之外，引數資料的傳輸也影響每幀耗時，尤其是在 WebGL 的場景，通常有很大頂 點資料需要處理，有幾萬-幾十萬位元組，甚至更多。JS 到 Native 的大資料傳輸避免記憶體複製。

• 頂點資料計算，頂點資料合併提交

• 最佳化快取策略，最佳化文字相關紋理的快取

• 增加狀態管理，減少 GPU 提交資料和頻次

• 最佳化多邊形填充效率

• 抗鋸齒等耗時特性可選

• 支援陰影

• 支援虛線

• 支援多Clip區域巢狀

• 支援Winding Rule支援

• 陰影的擴散

• 路徑的圖案填充

• 路徑的高斯模糊

• 路徑的內描邊和外描邊

• 記憶體資料使用更高效，記憶體資料可共享，

• 儘可能的榨取更多 GPU 效能

• 擺脫 OpenGL 的狀態機，更友好的物件導向程式設計

• 蘋果後續的持續投入和更新

• 豐富的除錯工具，能精確到每個頂點資料和每個素點顏色

• 便捷除錯這著色器語言(Metal Shader Language)

穩定性

未來的方向

• GCanvas 開源社群加大投入增加社群影響力, 請大家積極關注並star

• 更多紋理壓縮格式的支援

• Vulkan 的持續演進

• 更多平臺的支援，IoT 裝置上應用

• 與雲端渲染的融合，提供 Fass 能力

• WebGPU 以及 GPU 計算方向探索

• WebAssembly 的應用