基于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内容及回放

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-11 14:38
浙ICP备14020137号-1 $访客地图$