• 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持有。VSyncWaiterEngine一样,所有的操作都必须在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方法。

  • 相关阅读:
    Mysql 的安装(压缩文件)和基本管理
    Mysql 数据库安装与配置详解
    Bootstrap的插件
    Bootstrap学习
    移动端单位介绍
    响应式页面-@media介绍
    前端 ---jQuery的补充
    前端 ---- jQuery的ajax
    前端 ----轮播图实现
    安装scrapy时遇到的问题
  • 原文地址:https://www.cnblogs.com/lindeer/p/11184968.html
Copyright © 2020-2023  润新知