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
:
- 在UI线程等待
VSync
信号,表示信号到达后执行Animator::BeginFrame
方法; - 如何设置
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
方法。