Chromium硬件加速渲染的UI合成过程讲义.docVIP

Chromium硬件加速渲染的UI合成过程分析 在Chromium中，Render端和WebGL端绘制出来的UI最终是通过Browser端显示在屏幕上的。换句话说，就是Browser端负责合成Render端和WebGL端的UI。这涉及到不同OpenGL上下文之间的资源传递和同步问题。其中，资源传递问题通过Mailbox机制解决，同步问题通过Sync Point机制解决。本文接下来就分析Browser端合成Render端和WebGL端UI的过程。 Render端负责绘制的是网页UI。在Chromium中，网页UI被抽象为一棵Layer Tree，每一个Layer都用一个Layer对象描述，如图1最左边的图所示： WebGL端负责绘制的是网页中的canvas标签。在Chromium中，网页中的canvas标签被抽象为一个TextureLayer对象，作为一个Layer出现在用来描述网页UI的一棵Layer Tree中。 Render端在内部维护了三棵Tree。除了上述的Layer Tree外，另外两棵Tree分别是Pending Layer Tree和Active Layer Tree。在Pending Layer Tree和Active Layer Tree中，每一个Layer都用一个LayerImpl对象描述。相应地，网页中的canvas标签在Pending Layer Tree和Active Layer Tree中被抽象为一个TextureLayerImpl对象。 Layer Tree由Render端的Render线程维护，而Pending Layer Tree和Active Layer Tree由Render端的Compositor线程维护。Render线程通过解析网页内容得到Layer Tree。Pending Layer Tree相当于是Layer Tree的一个副本。每当Layer Tree发生变化时，Compositor线程都会将其同步（Synchronize）到Pending Layer Tree中去。Pending Layer Tree经过光栅化（Rasterize）处理后，就变成Active Layer Tree。Active Layer Tree代表的是一个可以被Browser端合成的UI。 Layer Tree和Pending Layer Tree的存在使得Render线程和Compositor线程可以并发绘制网页的UI，如图2所示： 这相当于是网页UI的某一帧绘制分为两部分。前半部分由Render线程处理，后半部分由Compositor线程处理。其中，第N+1帧的前半部分和第N帧的后半部分可以并发处理。这一点类似于Android 5.0应用程序UI硬件加速渲染机制，具体可以参考这个系列的文章。其中，这里的Render线程和Compositor线程就相当于Android 5.0应用程序进程中的Main线程和Render线程。 从前面一文可以知道，Render端执行GPU命令绘制网页UI时，只不过是将要执行的GPU写入到一个GPU命令缓冲区中，然后由GPU进程从这个GPU命令缓冲区读出GPU命令，并且调用相应的OpenGL函数执行它们。这个过程实际上是增加了网页渲染过程中的并行度，也就是Render端在GPU命令缓冲区写入GPU命令的同时，GPU进程从GPU命令缓冲区读出GPU命令进行处理。这样可以很好地利用设备的多核特性。这一点也是Chromium的硬件加速渲染与Android的硬件加速渲染的重要区别之一。 Pending Layer Tree和Active Layer Tree的存在使用Browser端在任何时刻都有网页UI可以合成。Active Layer Tree描述网页内容发生变化前的一帧UI。对Pending Layer Tree进行光栅化是一个漫长的过程。如果没有Active Layer Tree的存在，那么就会导致在Pending Layer Tree光栅化期间，Browser端没有网页UI可以显示在屏幕上。 早期，Render端先通过一个称为GL Renderer的渲染器将Active Layer Tree绘制在一个纹理中，然后再将绘制好的纹理传递给Browser端合成，如图3所示： Active Layer Tree中的每一个Layer都对应有一个Render Pass，这些Render Pass组成一个Render Pass List。其中，每一个Render Pass又包含有一个Quad List。Quad List由一系列的Draw Quad组成。一个Dra