Flutter Engineことはじめ

@neonankiti

https://gyazo.com/05bfb8c905a8517e0eff0acff5f9f3a6

About Me

https://gyazo.com/27bdad70541d1f9c6bd4867bd179fdc0

Yuki Nanri

Nickname

Bison

What to do

iOS Developer

Android Developer

About Company

https://gyazo.com/cb4d096fe5f36d7e4ebdc16cd942147b

Today's Topic

に入る前に宣伝！！

技術書典5に参加してきました！

完売しました!!!

https://gyazo.com/b46d43d682b4be1d6670912fa119e90b

Flutterの概要

Firebase連携

プラグイン作成(iOS/Android)

電子本もあります！

Today's Topic

Flutter Engineとは？

Embedded API

Flutterにおけるスレッド管理

Flutter Engineへのコントリビューション

Flutter Engineとは？

Flutterアプリを実行する際に必要なソフトウェア群

https://gyazo.com/1f0064413afca714133e4322a28c2b04

ソースコード

コア技術

Skia

2Dグラフィックスのレンダリングライブラリ

Google製

Dart

Dart Core

Dart UI

Skiaを利用できるAPIが提供されている

Dart CodeからPlatform Channelを介して、shellにアクセスできる

OSのPlatformごとにshellは異なっている

ご指摘頂いたEnoさんありがとうございます。

Embedded APIとして各Platformから利用可能な状態になっている

Embedded API

https://gyazo.com/12af1c55799fd4108f2adaa2f34ca311

Embedderという各Platform固有のAPIでEngineに操作を加えることが可能である

各Platformとは、iOS, Android, Fuchsiaである

shell/platform/android

shell/platform/darwin

Flutterにおけるスレッド管理

スレッドの種類

Dart自身が持つスレッドプール(engine, Embedderからはアクセスできない)

各Platform固有のスレッド

Flutter engine自身はスレッド作成・管理を行わない

スレッド作成・管理は各Platform固有の実装で対応する。

Flutter自身は実行スレッドを気にしないため、Embedder側でスレッド割り当てを行う必要がある。

Flutter engineはEmbedderから提供されるTask Runner内でタスクを実行する。

4つのTask Runner

https://gyazo.com/428b85ae91e2d38bcb1e16ca08dc3ec1

Flutter engineのタスクの実行環境で、Embedderが提供する。

Task Runners

Platform Task Runner

UI Task Runner

GPU Task Runner

IO Task Runner

Platform Task Runner

概念

https://gyazo.com/b3e3fb6f419c5f97f542a3ddf297e123

各Platformのメインスレッドで実行するべきタスクの環境を提供するTask Runner

例) Android

メインスレッド = UIスレッド = Linuxプロセス上で生成されるプロセスのこと

Flutter engineを利用する操作には、必ずPlatformのスレッドが必要になる

他のスレッドの場合、スレッドセーフではない。

例えば、Androidの場合、メインスレッド以外でUI操作を行うとクラッシュしてしまう。

Flutter engineの多くのコンポーネントは各Platformにおいてスレッドセーフではない。

一度engineがセットアップされると、Task RunnerはPlatformからのいかなるMessageを処理できる。

プラグインがわざわざ各Platformごとのスレッド処理を追加しなくて良い。

一般的に多くのPlatformにおいて、スレッドセーフに処理を実行するにはメインスレッドでの実行を行う必要がある。

プラグイン(DartVM上)でスレッド処理を追加することは可能である。

メインスレッド上で時間がかかるタスクを行わず、他のワーカースレッドを起動する。

UI Task Runner

Flutterアプリ上でのレンダリング実行のためのengineとのバインディングを行う。

全体像

https://gyazo.com/c1d2272ed20b5804798dfe761f293d17

isolate

How do I write parallel and/or concurrent apps for Flutter? Flutter supports isolates. Isolates are separate heaps in Flutter's VM, and they are able to run in parallel (usually implemented as separate threads). Isolates communicate by sending and receiving asynchronous messages

threadのようなもの？

各frameでの実行内容

①レンダリングが必要なフレームをengineに伝える

②次の垂直同期をEngineに知らせるようにPlatformに伝える

③Engineに垂直同期のタイミングを伝える

④eingineはFlutter上で以下を実行させる

インターポレーターの更新

レイアウト時にWidgetを再編成

Widgetを更新する。

Dart Threadとも呼ばれる(Platform固有の実装がないため)

GPU Task Runner

全体像

https://gyazo.com/bfb0eb532b54091b18690f62599a6f33

GPUにアクセスが必要な処理の実行

UI Task Runnerで作成されたLayer TreeはDart由来なため、Cleintのrendering APIには依存しない。

Skiaが利用しているバックエンドソフトウェアならOK

Vulkan, OpenGL

GPUのリソース生成

フレームバッファ

サーフェースのライフサイクル管理

テクスチャとバッファを各フレームで準備状態にする

注意点

GPU Task RunnerとUI Task Runnerの処理は重くなりやすい。

IO Task Runner

重い処理の実行に利用される

例えば、GPU, UI Task Runnerで実行される重い処理はIO Task Runnerに流す方が良い。

IOで実行する処理の例

圧縮された画像(png, jpeg)の読み込み

GPU Task Runnerでの画像をレンダリングのためにフォーマットする

GPUにアクセスできるのは、GPU Task Runnerのみなので、共通のContextを利用出来る。

Flutter Engineへのコントリビューション

Flutter engineのビルド方法(Android)

環境

Mac OS X, Android Studio

tools

Steps

ローカル環境のダウンロード

git cloneは使わない

code:.gclient

solutions = [

{

"managed": False,

"name": "src/flutter",

"url": "git@github.com:neonankiti/engine.git",

"custom_deps": {},

"deps_file": "DEPS",

"safesync_url": "",

},

]

Gitによる紐付け

git remote add upstream git@github.com:flutter/engine.git

flutterにengineを紐付けているので注意

Test

gclient sync

./flutter/tools/gn --unoptimized

ninja -C out/host_debug_unopt

flutter test --local-engine=host_debug_unopt

ここで落ちた.....。Githubのissueでも同じ人が数人。

まとめ

Flutter FrameworkとEngineの全体像

Flutterにおけるスレッディング処理の全体像

Flutter Engineのビルド方法

We're Recruiting

https://gyazo.com/bea1ca9b71bbdce93867ee5057ba7664