Flutter画像レンダリングの原理の詳細な分析

碑文
-ビットとピースの蓄積から始めて、世界に剣を構え、どこへ行っても、つまり毎日投げるように完璧を目指して努力する必要があります。

**	あなたが必要があるかもしれません
CSDN	NetEase Cloud Classroomチュートリアル
ナゲット	EDU Academyチュートリアル
ほとんど知っている	Flutterシリーズの記事

この記事では、CPU、GPU、モニター表示画像、Vsyncメカニズム、Flutter Vsyncプロセスの連携原理について説明します

1グラフィック描画原理

ここに画像の説明を挿入

ディスプレイ（画面）は物理的なディスプレイユニット（ピクセル）で構成され、各ピクセルは複数の色を放出できます。表示フェーズの原則は、異なる物理的なピクセルに異なる色を表示し、最終的に完全な画像。

グラフィックスの計算と描画はすべて対応するハードウェアによって行われます。オペレーティングシステムは通常、これらの基本的なハードウェア操作命令をカプセル化し、オペレーティングシステムのアプリケーションレイヤーが呼び出すためのいくつかのカプセル化されたAPIを提供します。

次に、オペレーティングシステムのネイティブAPIをプログラミングフレームワークとモデルにカプセル化し、シンプルな開発ルールを定義してGUIアプリケーションを開発します。このレベルの抽象化は、いわゆるUIシステムです。

たとえば、Android SDKはAndroidオペレーティングシステムAPIをカプセル化し、UI記述ファイルXML + Javaを使用してDOMを操作するUIシステムを提供し、iOSはViewで一連のUIKit抽象操作を提供します。

1.1 CPU、GPU、ディスプレイの連携原理

CPU中央処理装置の正式名称は、コンピュータシステムの計算および制御コアであり、情報処理およびプログラム操作の最終実行単位です。

GPUの正式名称はグラフィックスプロセッシングユニットです。これはグラフィックプロセッサであり、パーソナルコンピュータ、ワークステーション、ゲームコンソール、および一部のモバイルデバイス（タブレット、スマートフォンなど）での画像およびグラフィックス関連の操作に特化したマイクロプロセッサです。

グラフィックスプロセッサは、一般に3つの部分で構成され
ます。1.メインチップグラフィックスカードのコアを表示します。一般にGPUと呼ばれ、その主なタスクは、システムによって入力された画像情報を構築してレンダリングすることです。
2.表示バッファメモリは、表示するグラフィック情報を格納し、グラフィック操作の中間データを保存するために使用されます。
3. RAMD / Aコンバーターは、2進数をディスプレイに適したアナログ信号に変換します。

元のコンピューターシステムから、CPU、GPU、ディスプレイは特定の方法で連携します。CPUは計算された表示コンテンツをGPUに送信し、GPUはレンダリング後にそれをフレームバッファーに入れます。これらは画像プロデューサーです。フレームバッファー（BufferQueue）は常にデータで満たされます。ディスプレイはコンシューマーとして理解でき、フレームデータ（BufferQueue）はフレームバッファーから一定の頻度でフェッチされ、レンダリングされたコンテンツは画面のリフレッシュなどの画面に表示されます。周波数は60 Hzです。つまり、データは1秒以内に60回フェッチされます。

ディスプレイは固定周波数でリフレッシュされ（GPUからデータをフェッチするため）、垂直同期信号（VSyncなど）を通じて、60 Hzの画面がそのような信号を1秒以内に60回送信します。この信号は、CPU、GPU、ディスプレイを同期するために使用されます次のフレームで動作するようにCPUとGPUを促す信号。

モバイルデバイスの後の洗礼の世界では、各携帯電話は小さなコンピューターシステムに似ていました。Androidシステムは、1SYNCごとにVSYNC信号を発行して、入力、アニメーション、描画アクションを実行するようにインターフェイスに通知しました。

1.2 Vsyncメカニズム

現在のグラフィックスカードは通常、CSフレームレートを120、つまり120FPSを超えてレンダリングできます。FPSは、GPUが1秒で描画するフレームの数を表します。120FPSは、1秒で120フレームを表します。通常使用されるディスプレイは60HZにしか到達できません。このようなリフレッシュレート、グラフィックカードは画像を1秒間に120回変更しますが、モニターには60フレームしか表示できないため、明らかにフレームの半分が失われます。この現象は、画像生成能力が表示能力を超えることです、供給過剰。

逆に、グラフィックカードは1秒以内に60回画像を変更しますが、モニターは120フレームを表示する能力がありますが、これは供給不足であり、供給が供給を超えるとラグが発生しやすくなります。

Vsyncメカニズムは、供給過剰と供給不足の上記2つの状況をうまく調整できます。Vsyncメカニズムは、グラフィックスカードとディスプレイ間の通信ブリッジとして理解できます。グラフィックスカードは、各フレームをレンダリングする前に垂直同期信号を待ちます。ディスプレイがリフレッシュを完了するときのみ、垂直同期信号を送信すると、グラフィックスカードが次のフレームをレンダリングし、リフレッシュレートとフレームレートが同期していることを確認して、供給と需要のバランスの効果を達成し、スタック現象を防止します。

2クロスプラットフォーム開発のためのReact Native

次の図は、React Nativeの技術アーキテクチャ図を示しています。ReactJS自体はUIを直接描画しませんが、ページレンダリング操作を実行するためにネイティブコンポーネントを呼び出します。ブリッジは、ネイティブコンポーネントが描画するための命令を描画するために使用されるブリッジです。
ここに画像の説明を挿入

3クロスプラットフォーム開発のためのFlutter

ネイティブコンポーネントを使用してインターフェイスをレンダリングするReact Nativeとは異なり、Flutterはネイティブコンポーネントを使用してインターフェイスをレンダリングする必要はありませんが、次の図に示すように、独自のレンダリングエンジン（エンジンレイヤー）を使用してページコンポーネントを描画します。Flutterの技術アーキテクチャスケッチ。
ここに画像の説明を挿入
Flutterエンジンのエンジン部分はC ++で開発されており、Skia部分は、さまざまなソフトウェアおよびハードウェアプラットフォームに共通のAPIを提供するオープンソースの2次元グラフィックライブラリです。Skiaはレンダリング/ GPUとして機能します。