flutter: 窗口初始與繪製流程

環境: flutter sdk v1.7.8+hotfix.3@stable

對應 flutter engine: 54ad777f

這裏關注的是C++層面的繪製流程，平臺怎樣驅動和響應繪製與渲染的過程，並非Dart部分的渲染。

結合以前的分析，在虛擬機實例的構造函數中調用了一個重要方法DartUI::InitForGlobal(), 調用流程再羅列一下：

DartVMRef::Create
  DartVMRef::DartVMRef
     DartVM::Create
       DartVMData::Create
       DartVM::DartVM
         DartUI::InitForGlobal()
複製代碼

實現體很明瞭，註冊了各類類對象的方法，也就是說，這些在dart語言繼承NativeFieldWrapperClass2的類都有一份在C++層的實現，也說明了DartSDK是如何提供接口綁定與C++層的實現，至關於java語言中的jni。 另外還有針對Isolate的初始化，不過只是設置了一個能夠import的路徑，並不重要：

DartIsolate::CreateRootIsolate
  DartIsolate::CreateDartVMAndEmbedderObjectPair
    DartIsolate::LoadLibraries
      DartUI::InitForIsolate
        Dart_SetNativeResolver
複製代碼

視口設置

咱們知道RuntimeController持有一個Window實例，看Window實例被建立以後作了哪些製做：

RuntimeController::RuntimeController
  Window::Window
  DartIsolate::CreateRootIsolate
    DartIsolate::DartIsolate
    DartIsolate::SetWindow => UIDartState::SetWindow
      WindowClient::UpdateIsolateDescription => RuntimeController::UpdateIsolateDescription
        RuntimeDelegate::UpdateIsolateDescription => Shell::UpdateIsolateDescription
          ServiceProtocol::SetHandlerDescription
  Window::DidCreateIsolate
    library_.Set("dart:ui")
  RuntimeController::FlushRuntimeStateToIsolate
    RuntimeController::SetViewportMetrics
      Window::UpdateWindowMetrics
        library_, _updateWindowMetrics
複製代碼

操做從最裏層的Window一直傳遞到了Shell,最重要的一個做用是初始化了ViewPort(視口：用做畫布的大小，分辨率等尺寸信息)，再跟一下ViewPort被初始化後又如何被設置的：

FlutterView.onSizeChanged
  FlutterView.updateViewportMetrics
    FlutterJNI.setViewportMetrics
      FlutterJNI.nativeSetViewportMetrics
      ::SetViewportMetrics
        AndroidShellHolder::SetViewportMetrics
          [async:ui]Engine::SetViewportMetrics
            RuntimeController::SetViewportMetrics
              Window::UpdateWindowMetrics
            Engine::ScheduleFrame
複製代碼

這裏從Java調用到C++，FlutterView.onSizeChanged這個操做是在FlutterView實例建立以後被系統調用的（而FlutterView的建立發生在Activity.onCreate時機），顯然是響應平臺層的通知，這符合咱們的認知預期，由於畫布的大小可能由於用戶操做發生變化，dart層須要被動響應。

須要注意的是響應onSizeChanged在Platform線程，調用Engine::SetViewportMetrics切到了UI線程，銘記**Engine的全部的操做都是在UI線程**。

啓動畫幀

Engine在經過RuntimeController設置了窗口的尺寸以後，調用了另外一個重要方法ScheduleFrame,因而看它的實現：

Engine::ScheduleFrame
  Animator::RequestFrame
    [async:ui]Animator::AwaitVSync
      VsyncWaiter::AsyncWaitForVsync
        callback_= {Animator::BeginFrame}
        VsyncWaiter::AwaitVSync => VsyncWaiterAndroid::AwaitVSync
          [async:platform]FlutterJNI.asyncWaitForVsync
            AsyncWaitForVsyncDelegate.asyncWaitForVsync => VsyncWaiter.asyncWaitForVsyncDelegate
              Choreographer.getInstance().postFrameCallback
      Delegate::OnAnimatorNotifyIdle => Shell::OnAnimatorNotifyIdle
        Engine::NotifyIdle
複製代碼

通知VSync

這裏操做有些凌亂，首先切到UI線程，又切到Platform線程，其實就是爲了調用平臺接口，搞清這個最終目的。 終於涉及到了繪製圖像所須要的關鍵類Animator和VSyncWaiter:

1. 在UI線程等待VSync信號，表示信號到達後執行Animator::BeginFrame方法；
2. 如何設置VSync信號？經過調用平臺接口，平臺操做必須都在Platform線程，因而從UI線程切到Platform線程，目的是去調用android的Choreographer.postFrameCallback，這樣又執行了一串從C++調到java的過程。

響應VSync

由於是在java層調用的VSync回調，只能先在Java層響應因而有:

FrameCallback.doFrame <= VsyncWaiter.asyncWaitForVsyncDelegate
  FlutterJNI.nativeOnVsync
    VsyncWaiterAndroid::OnNativeVsync
      VsyncWaiterAndroid::ConsumePendingCallback
    VsyncWaiter::FireCallback
      [async:ui]callback() => Animator::BeginFrame
複製代碼

在VSync信號到達以後，最終在UI線程響應了Animator::BeginFrame，且看其實現：

Animator::BeginFrame
  Animator::Delegate::OnAnimatorBeginFrame => Shell::
    Engine::BeginFrame
      Window::BeginFrame
        library_."_beginFrame" => hooks.dart:_beginFrame
          UIDartState::FlushMicrotasksNow
            tonic::DartMicrotaskQueue::RunMicrotasks
        library_."_drawFrame" => hooks.dart:_drawFrame
複製代碼

最終的最終回到了dart層，並調用了其兩個重要方法：_beginFrame和_drawFrame，完成了幀的繪製。

VSync建立

另外羅列一下VSyncWaiter建立時機:

Shell::CreateShellOnPlatformThread
  PlatformView::CreateVSyncWaiter => PlatformViewAndroid::CreateVSyncWaiter
    VsyncWaiterAndroid()
  Animator::Animator
  Engine::Engine
複製代碼

它是與建立Shell一樣的時機，也就是說在Platform線程由PlatformView::CreateVSyncWaiter建立的，並被Animator持有，而Animator又是被Engine持有。VSyncWaiter與Engine同樣，全部的操做都必須在UI線程中執行

窗口渲染

窗口的渲染是由Dart層的Window完成的，其實調用了C++層的實現：

("Window_render", Render)
  Render() (window.cc:30)
    Scene=
    WindowClient::Render
      Scene::takeLayerTree
      RuntimeDelegate::Render => Engine::Render
        ProducerContinuation::Complete(layer_tree)
        Animator::Delegate::OnAnimatorDraw => Shell::OnAnimatorDraw(layer_tree_pipeline_)
        [async:gpu]Rasterizer::Draw => android_shell_holder.cc:76
          Rasterizer::DoDraw
            Rasterizer::DrawToSurface
              Surface::AcquireFrame
              ExternalViewEmbedder::BeginFrame
              CompositorContext::AcquireFrame
              ScopedFrame::Raster
              SurfaceFrame::Submit
              ExternalViewEmbedder::SubmitFrame
              FireNextFrameCallbackIfPresent
            Rasterizer::Delegate::OnFrameRasterized

"Window_scheduleFrame", ScheduleFrame
複製代碼

這裏涉及的對象更多了，並且緊密的與Dart層的繪製與渲染機制關聯。值得注意的是具體的繪製操做（光柵化）是在GPU線程進行。

另外Dart層的Window也須要主動的調度幀，所以也綁定了ScheduleFrame方法。