Flutter图像绘制原理深入分析

简介: 本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

column1 column2
CSDN 网易云课堂教程
掘金 EDU学院教程
知乎 Flutter系列文章

本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程


1 图形绘制原理

在这里插入图片描述

显示器(屏幕)是由一个个物理显示单元(像素点)组成,而每一个像素点可以发出多种颜色,显示器成相的原理就是在不同的物理像素点上显示不同的颜色,最终构成完整的图像。

图形计算和绘制都是由相应的硬件来完成,操作系统一般封装了这些底层硬件操作指令,提供一些封装后的API以供操作系统之上的应用层调用。

然后再将操作系统原生API封装在一个编程框架和模型中,然后定义一种简单的开发规则来开发GUI应用程序,而这一层抽象,就是所谓的 UI 系统。

如Android SDK封装了Android操作系统API,提供了 UI描述文件XML+Java操作DOM的UI系统,而iOS提供了UIKit 系列对View的抽象操作。

1.1 CPU、GPU和显示器协作原理

CPU 全称 central processing unit 是计算机系统的运算和控制核心,是信息处理、程序运行的最终执行单元

GPU 全称 Graphics Processing Unit 是图形处理器,是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上做图像和图形相关运算工作的微处理器

图形处理器一般由三部分组件:
1、显示主芯片显卡的核心,俗称GPU,它的主要任务是对系统输入的图像信息进行构建和渲染。

2、显示缓冲存储器用来存储将要显示的图形信息以及保存图形运算的中间数据。
3、RAMD/A转换器把二进制的数字转换成为和显示器相适应的模拟信号。

从最初诞生的计算机系统系统来讲,CPU、GPU和显示器以一种特定的方式协作:CPU将计算好的显示内容提交给 GPU,GPU渲染后放入帧缓冲区,它们是图像生产者,往帧缓冲区(BufferQueue) 不断填充数据, 显示器可以理解为消费者,然后以固定的频率从帧缓冲区取帧数据(BufferQueue), 然后把渲染后的内容呈现到屏幕上,比如有个屏幕的刷新频率是 60Hz,也就是1秒内会去取60次数据。

显示器是以固定的频率刷新(从GPU取数据),是通过垂直同步信号(如VSync),60Hz的屏幕就会一秒内发出 60次这样的信号, 这个信号是用来同步 CPU、GPU 和显示器的工作的,即提示 CPU 和 GPU 进行下一帧工作的信号。

到后来移动设备的洗礼世界,每部手机类似一个小的计算机系统, Android系统每隔16.6ms发出VSYNC信号,来通知界面进行输入、动画、绘制等动作。

1.2 Vsync 机制

现在的显卡通常可以将CS的帧率渲染到120以上,即120FPS,FPS代表了GPU在一秒内绘制操作的帧数,120FPS代表1秒内绘制120帧,通常使用的显示器只能达到60HZ的刷新率,像这种情况,显卡在1秒内将画面变化了120次,但显示器只有展示其中60帧的能力,显然会丢掉一半的帧数,这种现象是图像的生产能力超出了显示能力,供过于求。

反之,显卡在1秒内将画面变化60次,但显示器有展示120帧的能力,这种就是供不应求,供不应求的情况下,容易产生卡顿的现象。

通过Vsync 机制可以很好的协调上述两种供过于求与供不应求的情况,Vsync 机制可以理解为是显卡与显示器的通信桥梁,显卡在渲染每一帧之前会等待垂直同步信号,只有显示器完成了一次刷新时,发出垂直同步信号,显卡才会渲染下一帧,确保刷新率和帧率保持同步,以达到供需平衡的效果,防止卡顿现象。

2 跨平台开发的 React Native

如下图所示为React Native的技术架构图,ReactJS,自身是不直接绘制UI的,而是调用原生组件执行页面渲染操作,Bridges是一个桥梁,是用来绘制指令给原生组件进行绘制的。
在这里插入图片描述

3 跨平台开发的 Flutter

与 React Native 使用原生组件渲染界面不同,Flutter并不需要使用原生组件来渲染界面,而是使用自带的渲染引擎(Engine层)来绘制页面组件,如下图所示Flutter的技术架构简图。
在这里插入图片描述
Flutter 引擎部分Engine是用C++开发的,Skia部分是开源的二维图形库,提供了适用于多种软硬件平台的通用API,Skia作为渲染/GPU的角色。

在 Flutter 的 Engine 层向 Dart 层的暴露了 Canvas, PictureRecorder 等接口,利用这些接口可以绘制自己想要的图像。

通过直接调用 API 绘制图像,这种更像指令式操作。

在 Flutter 中,通过Flutter Sdk 提供的 Widget 组件组件,可以构建出精美的图像布局,这些 widget 并不是最终显示在 界面的组件,就像 ReactNative 的虚拟 DOM 一样。

每一个一个 Widget 构建 到最终显示在显示器上图像主要经历了三个阶段: Widget --> Element --> RenderObject

关于 Widget、Element、RenderObjec 的绘制过程 将会在 公人号 biglead 我的大前端生涯 中下一节中更新。

4 Flutter Vsync 流程

flutter 中Vsync通信机制如下图所示:
在这里插入图片描述


完毕
公众号 我的大前端生涯

相关实践学习
基于阿里云DeepGPU实例,用AI画唯美国风少女
本实验基于阿里云DeepGPU实例,使用aiacctorch加速stable-diffusion-webui,用AI画唯美国风少女,可提升性能至高至原性能的2.6倍。
相关文章
|
1月前
|
存储 移动开发 安全
Flutter加固原理及加密处理
Flutter加固原理及加密处理
58 0
|
1月前
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
Flutter App混淆加固、保护与优化原理
59 0
|
6天前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
20 2
|
1月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
1月前
|
Web App开发 前端开发 iOS开发
CSS3 转换,深入理解Flutter动画原理,前端基础图形
CSS3 转换,深入理解Flutter动画原理,前端基础图形
|
1月前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
1月前
|
开发框架 Dart API
Flutter引擎工作原理:深入解析FlutterEngine
【4月更文挑战第26天】FlutterEngine是Flutter应用的关键,负责Dart代码转换为原生代码,管理应用生命周期、渲染和事件处理。它初始化Flutter运行时环境,加载并编译Dart代码,创建渲染树,处理事件并实现跨平台兼容。通过理解其工作原理,开发者能更好地掌握Flutter应用内部机制并优化开发。随着Flutter生态系统发展,FlutterEngine将持续提供强大支持。
|
1月前
|
Dart Android开发 开发者
常用框架分析(7)-Flutter
常用框架分析(7)-Flutter
|
1月前
|
存储 安全 数据安全/隐私保护
Flutter应用程序的加固原理
Flutter应用程序的加固原理
37 0
|
1月前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
120 0