9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

5 分钟带你看懂 GCanvas 渲染引擎的演进 (二)

  • 2019-12-17
  • 本文字数:1885 字

    阅读完需:约 6 分钟

5分钟带你看懂 GCanvas渲染引擎的演进(二)

架构演进与优化

以业务先赢的基本原则,保证业务的前提下,架构容器和升级变化过程中,GCanvas 引擎也经历了演进和升级优化。


2017 年的架构


以插件为主的实现,仅支持移动端



最新架构


提供标准接口,链路升级,API 升级,不仅支持移动端还支持服务端



架构变化主要有以下几个方面:


  • 适配支持更多的 JS 框架和库

  • JS 到 Native 调用通路,从模块路由反射升级到 JSBinding

  • 渲染 API 支持 Metal

  • 增加 MacOS 和 Linux 平台支持


► 内功修炼


在快速迭代过重中,保持修炼内功。为保证高性能这个根本,在链路、内核以及底层图形 API 等方面也都做了不少优化与升级。


JS 到 Native 链路优化


从 Weex 调用链路到 JSBinding,Weex 容器的 JS 到 Native 的通路采用模块路由和反射的调用方式调用具体的模块和组件。在 UI 和一些非高频的场景完全能满足需求。


但是对于连续操作、连续动画等高频的 JS 到 Native 通讯的场景,链路上的耗时非常大,导致卡顿产生。这也是为什会 BindingX 和 GCanvas 的 JSBinding 的出现。


BindingX 是另一种解决频发通讯消耗的方案,有兴趣的可以看下 BindingX。(地址戳阅读原文)


GCanvas 的 JSBinding 的实现:通过链路调用的改造,整体帧率平均提升 10 帧左右。Android 和 iOS 的 JSBinding 实现方案类似。


以 iOS 举例说明:iOS 尝试使用 JSExport 和全局方法,两种 JSBinding 方案。


  • 第一种方案,使用 JSExport 和 JSExportAS


@import JavaScriptCore;
@protocol TestObjecJSExport <JSExport>JSExportAs(foo, - (void)foo:(NSString *)msg);@end
复制代码


第二种方案,使用 C Export 将方法和属性用 JSStaticFunction 和 JSStaticValue 进行绑定


//方法JSStaticFunctiontypedef struct {  const char* name;   //方法名  JSObjectCallAsFunctionCallback callAsFunction; //Native方法实现  JSPropertyAttributes attributes; //方法设置} JSStaticFunction;
//属性JSStaticValuetypedef struct {const char* name; //属性名JSObjectGetPropertyCallback getProperty; //Native属性Getter实现JSObjectSetPropertyCallback setProperty; //Native属性Setter实现JSPropertyAttributes attributes; //属性的读写设置} JSStaticValue;
复制代码


两种实现方案,经过测试对比第二种方案在性能更好。原因在于静态 JS 方法是通过方法名到 Native 函数的直接映射,而 JSExport 的方案则需要类型检查,协议校验,再调用 Native 方法中间经过额外的处理。


简单的耗时测试数据对比:



JS 到 Native 数据传输


方法调用与属性访问之外,参数数据的传输也影响每帧耗时,尤其是在 WebGL 的场景,通常有很大顶 点数据需要处理,有几万-几十万字节,甚至更多。JS 到 Native 的大数据传输避免内存拷贝。


JS 与 Native 对象生命周期


JSBinding 的对象生命周期管理,JS 对象与 Native 对象一一对应,在 JS 对象创建触发 JSObjectInitializeCallback 回调,创建 Native 对象,并将 JS 与 Native 建立关联。JS 的 GC 回收对象触发 JSObjectFinalizeCallback 的回调中去释放对应 Native 对象。


帧率优化


除了调用链路对帧率的提升,单帧绘制的 CPU 和 GPU 耗时相关的优化点


  • 顶点数据计算,顶点数据合并提交

  • 优化缓存策略,优化文字相关纹理的缓存

  • 增加状态管理,减少 GPU 提交数据和频次

  • 优化多边形填充效率

  • 抗锯齿等耗时特性可选


w3c 标准完善


  • 支持阴影

  • 支持虚线

  • 支持多 Clip 区域嵌套

  • 支持 Winding Rule 支持


扩展能力,扩展一些非标接口支持 Sketch 渲染,


  • 阴影的扩散

  • 路径的图案填充

  • 路径的高斯模糊

  • 路径的内描边和外描边


底层图形 API 升级


在 iOS12 之后,苹果将 OpenGL ES API 设为废弃,在已支持的设备上 OpenGL ES 的调用都已映射到 Metal 相应的后端实现,Metal 替换 OpenGL 势在必行。GCanvas 也已投入开发 Metal,可选择使用 Metal 作为渲染的后端。已完成了 2D 的绝大部分能力。


选择 Metal 会带来以下方面的收益:


  • 内存数据使用更高效,内存数据可共享,

  • 尽可能的榨取更多 GPU 性能

  • 摆脱 OpenGL 的状态机,更友好的面向对象编程

  • 苹果后续的持续投入和更新

  • 丰富的调试工具,能精确到每个顶点数据和每个素点颜色

  • 便捷调试这着色器语言(Metal Shader Language)


在内核升级优化的过程中,也有很多同学积极参与其中来在此表示感谢。

稳定性

增加了 API 的自动化测试以及 CI 建立保障稳定性。

未来的方向

GCanvas 开源社区加大投入增加社区影响力, 请大家积极关注并 star


更多纹理压缩格式的支持


Vulkan 的持续演进


更多平台的支持,IoT 设备上应用


与云端渲染的融合,提供 Fass 能力


WebGPU 以及 GPU 计算方向探索


WebAssembly 的应用


本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/8NafSk2Yfl1eCEDNBeYy1g


活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2019-12-17 14:11550

评论

发布
暂无评论
发现更多内容

Linux之netstat命令

入门小站

Linux

Android开发:获取安卓App版本号的方法步骤

三掌柜

8月日更

netty系列之:自动重连

程序那些事

Java Netty 程序那些事 响应式系统

Rust从0到1-模式-相关语法

rust 语法 模式 Patterns Syntax

Mybatis自定义拦截器与插件开发

码农参上

8月日更

Web 框架 Gin | Gin 介绍

xcbeyond

Go 语言 gin 8月日更

如果面试官问你 JVM,额外回答逃逸分析技术会让你加分!

陈皮的JavaLib

Java 面试 JVM 逃逸分析 8月日更

small-spring 代码贡献者3个月,敢说精通Spring了,分享我的总结!

小傅哥

spring 小傅哥 cglib aware BeanPost

【Flutter 专题】70 图解自定义 ACEStepper 步进器

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 8月日更

手撸二叉树之将有序数组转换为二叉搜索树

HelloWorld杰少

数据结构与算法 8月日更

LeetCode题解:781. 森林中的兔子,贪心,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

Hive企业级性能优化

五分钟学大数据

hive hive性能优化

【设计模式】代理模式

Andy阿辉

C# 后端 设计模式 8月日更

oeasy教您玩转vim - 14 - # 行头行尾

o

JavaScript Array 方法详解

程序员海军

JavaScript 方法 大前端 array 引航计划

金融级IT架构:网商银行是如何进行数字化落地的

博文视点Broadview

一文带你了解 TreeMap ,LinkedHashMap 的主要特点

4ye

Java 后端 hashmap LinkedHashMap 8月日更

Prometheus监控的4个黄金指标

Rubble

Prometheus 8月日更

Android开发:引入重复包报错Error:Execution failed for task ‘:app:transform...’解决方法

三掌柜

8月日更 8月

全球增长最快的对象存储开源系统MinIO

liuzhen007

8月日更

在线年龄计算器

入门小站

工具

命令行操作Java程序的那些事~

Bob

Java 命令行 8月日更

Go语言那些事儿之管道的关闭

Regan Yue

Go 语言 8月日更 管道

从0开始的TypeScriptの五:webpack打包typescript

空城机

JavaScript typescript 大前端 8月日更

MinIO Client 使用(一)

耳东@Erdong

Minio 8月日更 mc minio client

失败的小项目-外卖cps

箭上有毒

8月日更

在openEuler上做开发?这个大赛拿出30万寻找开源的yyds

华为云开发者联盟

开源 操作系统 服务器 openEuler 鲲鹏

Vue进阶(二十七):Vuex 之 getters, mapGetters, ...mapGetters详解

No Silver Bullet

Vue vuex 8月日更

七夕赶上服务器架构升级,女朋友的约会怎么办

华为云开发者联盟

华为云 FunctionGraph DevStar Serverless架构 服务器架构

Django 做个小后台,细节在完善一点点,滚雪球学 Python 第三阶段

梦想橡皮擦

8月日更

【LeetCode】从上到下打印二叉树Java题解

Albert

算法 LeetCode 8月日更

  • 扫码添加小助手
    领取最新资料包
5分钟带你看懂 GCanvas渲染引擎的演进(二)_文化 & 方法_韦青_InfoQ精选文章