Fluent rendering mechanism - GPU thread rendering

Flutter The way , The actual rendering process does not depend on native rendering , But through C/C++ Compiling Skia The rendering engine completes the interface rendering . Draw the interface Dart The code will be compiled into native code , But here's the thing Skia Finish rendering .Flutter Built in Skia Rendering engine , So that even if the user's mobile phone is not updated to the latest version of the mobile phone operating system, it can maintain the latest rendering performance .

perform Flutter Graphics related code in the engine （Skia）, This thread is connected to GPU signal communication , obtain Layer Tree And perform rasterization and synthesis on the screen , take Layer Tree It's on the screen .

GPU Thread flow

1.1 GPU Drawing flow chart of thread

Flutter The rendering mechanism is UI Thread execution to compositeFrame() The procedure is called in multiple layers , The task of rasterizing Post To GPU Thread to execute .GPU Once the thread is idle, it will execute Rasterizer Of draw() operation . In the figure LayerTree::Paint() Process is an important operation , Will nest calls to different layer Of Paint The process , such as TransformLayer,PhysicalShapeLayer,ClipRectLayer,PictureLayer When it's done, it's done flush() Send the data to GPU.

1.2 Surface Class diagram

ClassSurface

Three different AndroidSurface, See section 2.6.3, The explanation is as follows ：

• Hardware VSYNC The way , And on VULKAN, Then AndroidSurfaceVulkan, This is the current default ;
• Hardware VSYNC The way , And not open VULKAN, Then AndroidSurfaceGL;
• Using software to simulate VSYNC The way , Then AndroidSurfaceSoftware;

1.3 Layer Class diagram

LayerTree Of root_layer originate SceneBuilder Process initialization , The first call PushLayer() Of layer It becomes root_layer_, The following calls form a tree structure . From above , You know ContainerLayer share 9 A subclass , These subclasses combine to form a layer tree, The specific combination depends on the business user , stay LayerTree Of Prepoll and Paint The procedure calls these layer Methods , Let's take a look at this 9 Classes ：

1. ClipRectLayer： Rectangular clipping layer , Rectangle and clipping behavior parameters can be specified , Among them, cutting behavior is Clip.none,hardEdge,antiAlias,antiAliasWithSaveLayer Four actions ;
2. ClipRRectLayer： Rounded rectangle clipping layer , You can specify rounded rectangles and clipping behavior parameters , The same as above ;
3. ClipPathLayer： Path clipping layer , Path and clipping behavior parameters can be specified , The same as above ;
4. OpacityLayer： Transparent layer , You can specify transparency and offset parameters , The offset is the offset from the origin of the canvas coordinate system to the origin of the caller coordinate system ;
5. ShaderMaskLayer： Coloring layer , Shaders can be specified 、 Matrix and mixed mode parameters ;
6. ColorFilterLayer： Color filters , You can specify color and blending mode parameters ;
7. Transformayer： Transform layers , Transformation matrix parameters can be specified ;
8. BackdropFilterLayer： Background filter , Background map parameters can be specified ;
9. PhysicalShapeLayer： Physical shape layer , Eight parameters such as color can be specified .

Source code analysis

From the perspective of source code Flutter Rendering and rendering mechanism , The two threads directly related to rendering are UI Threads and GPU Threads ：

• UI Threads ： running UI Task Runner, yes Flutter Engine Used to perform Dart root isolate Code , Convert it to layer tree View structure ;
• GPU Threads ： The thread is still CPU On the implementation , running GPU Task Runner, Handle layer tree, Turn it into GPU Command and send to GPU.

adopt VSYNC Signals make UI Threads and GPU Orderly and periodic rendering interface of threads , In this paper, VSYNC The production process of 、UI Threads work in the drawing of engines and frameworks .

• When rendering is needed, it will call Engine Of ScheduleFrame() To register VSYNC Signal callback , Once the callback is triggered doFrame() After execution , The callback method will be removed , That is to say, one callback is registered at a time ;

• When you need to draw again, you need to call again ScheduleFrame() Method , The only important parameter of this method regenerate_layer_tree Decide whether to regenerate in the frame drawing process layer tree, Or directly reuse the last layer tree;

• UI Thread drawing process , The core is to implement WidgetsBinding Of drawFrame() Method , And then it creates layer tree View tree

• Give it to GPU Task Runner take layer tree The information provided is transformed into platform executable GPU Instructions .

  Flutter Threading model

  

  Embedder There are four Runner, four Runner They are as follows . Each of them Flutter Engine Each corresponds to a UI Runner、GPU Runner、IO Runner, But all the Engine Share a Platform Runner.
  
  
  
  

mark 【 One click access to 】 Practical hybrid development Flutter3.0 manual

GPU Runner

GPU Runner Not directly responsible for rendering operations , He is responsible for GPU Related management and scheduling . When layer tree When the message comes ,GPU Runner Submit it to the specified rendering platform , The rendering platform is Skia Configured , Different platforms may have different implementations .

GPU Runner Relatively independent , except Embedder No other thread can submit rendering information to it .

At the end of the article

This paper combines Flutter The official description of the framework and rendering process , This paper briefly introduces the process and implementation of rendering , Let the reader be right about Flutter Basic understanding of rendering , Convenient for future development and exploration . by Flutter Make a little contribution to ecology , expect Flutter More and more good ！