flutter架构 flutter源码 LayerTree Impeller源码 Skia DisplayList Op Entity Contents

89 阅读2分钟

Activity到C++主要对象创建流程

image.png

GPU渲染准备

GLES 3D/2D渲染,涉及到EGL平台窗口相关初始化,GLES API调用。

对于EGL主要是:核心对象初始化{EGLDisplay EGLConfig EGLContext EGLSurface},每帧循环{eglMakeCurrent eglSwapBuffer},抓住这两个主线,结合flutter engine的类,很容易把主线搞清楚。

对于GLES API主要是:数据准备(涉及到Entity Contents Command Pipeline等),API调用{glClearColor glClear glViewport glCullFace glBindBuffer glBufferData glUseProgram glVertexAttribPointer glUniform glDrawElements/glDrawArrays},抓住这个主线,可以把渲染搞清楚,其核心在于数据准备,逆着数据准备分析,可以把数据流转搞清楚。

简单总结,GLES 3D/2D渲染总逻辑为:

1 Create EGLDisplay EGLConfig EGLContext

eglGetDisplay()

eglInitialize()

eglChooseConfig()

eglCreateContext()

2 Create EGLSurface

// 依赖平台窗口画布创建完成,对应Android的onSurfaceCreated(Surface)

eglCreateWindwoSurface()

3 渲染循环

while(true) {

  eglMakeCurrent()

  GLES API()

  eglSwapBuffers()

}

1 Create EGLDisplay EGLConfig EGLContext

image.png

2 Create EGLSurface

image.png

image.png

3 渲染循环

注意点:
两个lambda回调函数: submit_callback swap_callback
两个重要函数 Rasterizer::DrawToSurfaceUnsafe() GPUSurfaceGlImpeller::AcquireFrame()

image.png

EGL三步骤层级关系

image.png

EGL三步骤类图

令人困惑的Surface

  • Surface <-- GPUSurface{GL/Vulkan/Metal}
  • SurfaceFrame
  • ScopedFrame

EGL三步骤

  • 1 EGL Create流程
  • 2 onSurfaceCreated -> NotifyCreated流程
  • 3 eglMakeCurrent/eglSwapBuffers

2大流程概要

  • Raster流程
  • RenderPass流程
* Draw(LayerTreePipeline) -> DrawToSurfaceUnsafe(LayerTree)流程  
   * LayerTreePipeline -> LayerTree:  Produce / Consume LayerTree  
   * Surface::AcquireFrame:  
         eglMakeCurrent  
         submit_callback RenderPass流程 {  
                  数据转到Impeller:DisplayListBuilder -> DisplayList -> DlDispatcher -> EntityPassTree{Entity, Contents};  
                  Impeller执行渲染:  
                         Renderer ->AiksContext -> EntityPass -> Entity -> Contents ::Render{Command, CommandBuffer};  
                         EntityPass::EncodeCommands -> RenderPassGLES::EncodeCommandsInReactore -> gl api  
                  }  
         swap_callback: eglSwapBuffers  
   * CompsoitorContext::AcquireFrame  
   * Raster流程:ScopedFrame::Raster -> LayerTree::Paint ->LayerTree -> Op -> DlStorage -> DisplayListBuilder  
   * SurfaceFrame::Submit -> PerformSubmit -> 执行submit_callback  
   * 执行swap_callback eglSwapBuffers

image.png

3+2大流程

image.png

3大流程类图

image.png

Raster流程

Raster流程:ScopedFrame::Raster -> LayerTree::Paint ->LayerTree -> Op -> DlStorage -> DisplayListBuilder

时序图

image.png

类和协作关系

image.png

Layer继承关系

image.png

Paint关系

Layer Paint转发给LayerStateStack和Cache两个体系,具体细节需要进一步研究,但总原则都是转发给DlCanvas,把Op记录到DlStorage。

image.png

Render流程

Dispatch:Op转Entity

image.png

Entity转Command

image.png

执行GPU指令

image.png

Op和Contents数量

image.png

TaskRunner和MessageLoop

层级关系

image.png

流程图

image.png

类和协作

image.png

生产者消费者模型

image.png

Skia和Impeller分流

image.png

Impeller模块依赖关系

image.png

QA

可以私信继续交流~