基于Flutter的Canvas探索与应用
如果无法正常显示,请先停止浏览器的去广告插件。
1. 基于Flutter的Canvas探索与应⽤用
讲师:万红波(花名:远湖)
2. 个⼈人介绍
• 万红波,花名远湖。淘系技术部⽆无线开发
专家。
• 主要从事浏览器器内核以及渲染引擎⽅方向的
研究。2018年年⼊入职阿⾥里里巴巴淘系技术部,
主要从事Flutter,⼩小程序渲染引擎相关⼯工
作。⽬目前在AliFlutter团队主要负责底层引
擎以及Canvas相关研究与应⽤用
3. 本次分享您将会了了解到:
* ⼿手淘中⼩小程序如何利利⽤用flutter引擎提⾼高互动游戏的交互体验
* ⼿手淘利利⽤用flutter作为跨平台的独⽴立渲染引擎的探索
4. ⽬目录
• 业务背景
• 业务痛点
• 解决⽅方案
• 技术改造
• 业务效果
• 未来规划
5. 业务背景
⼩小程序作为⼀一个商业化解决⽅方案,这⼏几年年发展迅速,在头部app中占据重要位置
与传统H5相⽐比,其技术特点:
1. 渲染和逻辑分离到独⽴立线程,
通过消息进⾏行行通信
2. 并⾏行行化
3. 安全可控,受约束环境
⼩小程序客户端运⾏行行时架构
6. 业务痛点
⼩小程序的架构给互动游戏业务带来的痛点:
业务通常使⽤用Canvas API进⾏行行每帧的绘制,每⼀一帧通常包含⼤大量量的绘制操作,worker和render通信频繁,渲染性能⼤大幅降
低,⽤用户体验较差
worker->render通信的基本链路路:
1. worker线程执⾏行行drawXXX绘制命令
2. native层拦截到该js api,对该指令进⾏行行序列列化,并封装为消
息,发送给render线程
3. render线程将消息反序列列化,转换为绘制指令的字符串串。
4. 通过evaluateJavaScript在webview中执⾏行行绘制字符串串,最后通
过webview渲染
7. 解决⽅方案(1/4)
在⼩小程序worker环境中直接对接渲染引擎,缩短渲染链路路,减少
通信消耗,提⾼高渲染性能
8. 解决⽅方案(2/4)
独⽴立2D渲染引擎⽅方案:flutter引擎
Flutter渲染流⽔水线:
Flutter线程模型:
选择Flutter的原因:
1.跨平台
2.⾼高性能
3.Skia
9. 解决⽅方案(3/4)
Flutter原⽣生渲染管线
10. 解决⽅方案(4/4)
我们的⽅方案:
1.⾯面向业务,提供标准Web Canvas API
2.通过业务容器器引⼊入JS引擎,并把C++实现的Canvas API
通过binding⽅方式,注⼊入到⼩小程序worker线程
3. 引⼊入Canvas模式渲染管线,和原⽣生dart模式共存。
11. 技术改造(1/3)
渲染流⽔水线改造
1.
2.
3.
4.
系统发出Vsync信号后,调度到worker线程
在worker线程中业务执⾏行行具体的2D绘制操作
绘制操作的指令⽣生成LayerTree
提交LayerTree到GPU线程进⾏行行光栅并上屏
12. 技术改造(2/3)
Canvas渲染管线
13. 技术改造(3/3)
图⽚片加载流程改造
14. 业务效果 (1/2)
在Android低端机上,业务改造前后
⼩小程序进程数据对⽐比:
注:
1. FPS数据由于运动银⾏行行业务没有通过Vsync
来驱动绘制,⽽而是直接通过timer来驱动,使
得CPU占⽤用率较⾼高,且改造后FPS提⾼高很
⼤大。
2. 如果采⽤用VSync来驱动绘制,通过线下测
试,改造后FPS提⾼高30%左右
改造后
改造前
15. 业务效果 (2/2)
1. ⽀支持Lottie动画
2. ⽀支持⽩白鹭游戏引擎
16. 未来规划
1. 接⼊入更更多三⽅方游戏引擎
•
和三⽅方游戏引擎深度合作,探索⾼高阶渲染API的实现
2. ⽀支持WebGL API
3. 探索独⽴立⼩小游戏容器器
17. 【淘系技术】微信公众号
加⼊入我们
yuanhu.whb@alibaba-inc.com
扫码获取本期ppt内容及回放