Chromimum Android渲染介绍

柔情只为你懂 2022-09-29 04:12 25阅读 0赞

从概念上一个使用硬件加速(AC)时，页面显示的结构是Viewport -> Layer(s) -> Tile(s)，所谓的纹理就是Tile上显示的内容。分块最大的好处就是重绘的单元变小，更利于降低系统开销。  
(Tile翻成瓦片，还不如瓷砖呢 ^\_^!)  
![Basic Concept][]

详情可参考:[开启硬件加速时Web页面绘制流程][Web]。  
从WebKit内核到Chromium的cc模块，其对应关系如下:  
![cc\_layers][cc_layers]

Chormium通过impl-side painting实现了多线程的渲染([Design Document][])。其目的是将WebKit内核的页面内容绘制与实际显示隔离开来，再将painting操作分为recording和rasterization。  
其中一个重要的概念是Main Thread(side)和Impl Thread(side)。  
![impl-side-painting][]  
Main Thread运行于Render线程，包括RenderWidget，LayerTreeHost等。Impl Thread运行于Compositor线程，包括LayerTreeHostImpl等。两者通过一个Proxy进行线程的通讯。基本的渲染路径就像是dot绘图一样，先录制脚本，再生成图像。它使用的对象是SkPicture, 它能做到类似Display List的功能，能够记录，再播放。这也是跨进程渲染的基础（必然需要一个编码及解码的过程。）。  
步骤如下:  
\* 在Main Thread里，Chromium/WebKit的渲染到一个图形后端(SkPicture)存储起来, 由LayerTreeHost管理整个Layer Tree。 这个过程叫Record，并没有真正绘制。  
\* 将这些数据提交到Impl Thread里的LayerTreeHostImpl进行给制，这个过程是Upload,还有一个Commit。  
\* LayerTreeHostImpl再通过AwContents，使用Android的GL功能进行合成绘制，这个过程叫Rastering (光栅化，其实就是用位图显示的概念,对应于矢量方式绘图.)。

结构上，LayerTreeHost与LayerTreeHostImpl构成了Main Thread和Impl Thread的交互界面。

初始化时，流程从RenderViewImpl的创建开始，如下图所示(ThreadProxy是Proxy的实现):  
![initialize][]

为了更好地安排Main Thread与Impl Thread的任务队列，还会有一个Scheduler负责任务安排。 以下是类的关系，可以看到它们的生命周期管理:  
![basic\_class\_diagrams][basic_class_diagrams]

## Main Thread(Side) ##

LayerTreeHost/LayerTreeHostImpl只是组织和事务处理的类，实际绘制时是以OutputSurface为基础的，可以理解为图形后端。Android WebView和CC都是基于对OutputSurface的操作来完成后面的合成的。Chromium WebView使用同步合成器，即SynchronousCompositor，在UI线程上使用系统的GL能力绘制。后面有一串以SynchronousCompositor命名的类。

首先当LayerTreeHostImpl准备好后，会向LayerTreeHost请求OutputSurface, 最终由RenderWidget通过SynchronousCompositorFactory创建出一个OutputSurface,并交给LayerTreeHostImpl管理(scoped\_ptr)。  
![content\_side][content_side]

## Impl Thread(Side) ##

在Impl side, AwContents中合成器管理操作是由BrowserViewRenderer负责的，它将主要通过SynchronousCompositorImpl来向LayerTreeHostImpl和OutputSurface提供服务的。  
Android WebView的设计中一个WebContents对应一个合成器，所以SynchronousCompositorOutputSurface通过routingid就可以确认所对应的SynchronousCompositorImpl。  
Android上将Impl Thread实际是跑在UI线程上的，即child compositor运行在UI线程上。详细的说明参考 Urbercomp in Android WebView，里面有详细的说明。

以下为主要类的关系:  
![impl\_side][impl_side]  
参考资料: [Android 4.4 Browser渲染机制解析][Android 4.4 Browser]。

附上OutputSurface的初始化及绑定流程如下:  
![OutputSurface][]  
当开始绘制时，为了支持DrawGL函数(下面有介绍)，还会创建一个OutputSurface。析构时依次析构，流程如下:  
![OutputSurface2][]

## TileSet & Layer ##

对应于上面的TileSet和Layer,Chromium是由PictureLayerImpl来实现的。以下为其类图，没有深入研究，仅作参考:  
更为系统的介绍看这里[Chromium Graphics: 再谈Chromium WebView硬件渲染模式的演进][Chromium Graphics_ _Chromium WebView]。

## 参考 ##

1.  [Web页面渲染及合成加速（二）][Web 1]
2.  [Chromium Graphics: 再谈Chromium WebView硬件渲染模式的演进][Chromium Graphics_ _Chromium WebView]
3.  [开启硬件加速时Web页面绘制流程][Web]
4.  [Impl-Side Painting][Design Document]
5.  [Android Graphics Architecture][]

[Basic Concept]: /images/20220708/d4a278707c57430fb121a4c3ced7c843.png
[Web]: http://blog.csdn.net/qq295445028/article/details/8183418
[cc_layers]: /images/20220708/08ccdba1967c431ba5f1bd4b439d35bf.png
[Design Document]: http://www.chromium.org/developers/design-documents/impl-side-painting
[impl-side-painting]: /images/20220708/98409ccb62be463c83f1330069292317.png
[initialize]: /images/20220708/3eb877c36a9f4f2fb332127342389796.png
[basic_class_diagrams]: /images/20220708/916d7852a349426d9df108166ccf0eea.png
[content_side]: /images/20220708/92d1098cac3e4fd183fffc73c41af57d.png
[impl_side]: /images/20220708/e7e02cdce3064e3f8bde625ebfdbb63a.png
[Android 4.4 Browser]: http://blog.csdn.net/qq295445028/article/details/18406745
[OutputSurface]: /images/20220708/2eb2e4bf817849e1b9f6cf293d72b56d.png
[OutputSurface2]: /images/20220708/8395004adeaa4547bcf2979e6e2de466.png
[Chromium Graphics_ _Chromium WebView]: http://blog.csdn.net/hongbomin/article/details/40896313
[Web 1]: http://blog.csdn.net/qq295445028/article/details/8244598
[Android Graphics Architecture]: https://source.android.com/devices/graphics/architecture.html