flutter: 視窗初始與繪製流程

林鹿發表於2019-07-14
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方法。

相關文章