Flutter圖像繪製原理深入分析

題記
—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

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的角色。