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 的应用