chromium for android 硬件渲染流程总结

render进程中

一.webkit模块

webkit引擎会为网页内容同时创建Dom tree, Render tree和RenderLayer tree.

这三棵树之间的关系参见chrome硬件渲染

每一个Render Object都关联着一个RenderLayer.Render Object与RenderLayer是多对一的关系。

RenderLayer代表了网页某一层的内容。正是由于RenderLayer的存在，网页上的元素才可以按照

正确的顺序合成，从而恰当的显示有交叠的内容，和半透明元素等效果。

触发RenderLayer创建的条件如下：

1.网页的root节点；

2.有明确的CSS position属性(relative,absolute,transform)

3.元素是透明的

4.overflow, alpha mask,或者reflection

5.有css filter(滤镜) 属性

6.有2D加速Context或者3D(webGL)context的 canvas 元素对应的RenderObject.

7.video元素对应的RenderObject。

RenderLayerCompositor负责管理所有RenderLayer的合成，并决定可以作为合成层的Layer.

只有满足以下条件的RenderLayer才可以成为合成层(composited layer).

RenderLayer.h中定义了31个reasons：

CompositingReason3DTransform

CompositingReasonVideo

CompositingReasonCanvas

CompositingReasonPlugin

CompositingReasonIFrame

CompositingReasonBackfaceVisibilityHidden

CompositingReasonAnimation

CompositingReasonFilters

CompositingReasonPositionFixed

CompositingReasonPositionSticky

CompositingReasonOverflowScrollingTouch

CompositingReasonBlending

CompositingReasonAssumedOverlap

CompositingReasonOverlap

CompositingReasonNegativeZIndexChildren

CompositingReasonTransformWithCompositedDescendants

CompositingReasonOpacityWithCompositedDescendants

CompositingReasonMaskWithCompositedDescendants

CompositingReasonReflectionWithCompositedDescendants

CompositingReasonFilterWithCompositedDescendants

CompositingReasonBlendingWithCompositedDescendants

CompositingReasonClipsCompositingDescendants

CompositingReasonPerspective

CompositingReasonPreserve3D

CompositingReasonReflectionOfCompositedParent

CompositingReasonRoot

CompositingReasonLayerForClip

CompositingReasonLayerForScrollbar

CompositingReasonLayerForScrollingContainer

CompositingReasonLayerForForeground

CompositingReasonLayerForBackground

CompositingReasonLayerForMask

被认为是合成层的RenderLayer会创建RenderLayerBacking,RenderLayerBacking

与composited layer是一一对应的关系。RenderLayerBacking控制composited layer

的合成行为，并包含了多个GraphicsLayers。

GraphicsLayer是后端存储的抽象表示。不同平台负责提供具体的后端存储类给GraphicsLayer.

对于chromium for android平台提供的是cc模块的PictureLayer类。

下图是webkit::GraphicsLayer到cc::PictureLayer之间的关系：



当chromium for android硬件渲染流程全解析(render进程)中的流程一完成后，

webkit::RenderLayer tree表示的网页内容就以网页绘制命令的形式转移到cc模块中。

简单的说就是RenderLayer tree中的每个RenderLayer包含的网页信息都以绘制命令的形式存储在了

LayerTreeHostImpl包含的LayerTreeImpl代表的cc::PictureLayer tree中了。

二.cc模块

1.网页内容的光栅化,这个过程是在cpu上执行的,完成后，网页内容以像素形式存储在一块SharedMemory上.

这块SharedMemory可以跨进程使用。是由Render进程向Browser进程发送消息，由Browser进程创建的，

并将sharedMemory的handle传回给Render进程使用。这块SharedMemory还会在GPU进程中使用。

2.网页各层的混合过程。光栅化后，存储网页内容的SharedMemory在GPU进程中作为纹理数据的源上传给gpu，

实现纹理贴图(glTexImage2D)。chromium是分块渲染的策略，TileManager管理的每个Tile最终都对应着一块

texture(ResourceProvider负责分配的),SharedMemory中的网页内容通过glTexImage2D最终渲染到了Tile

对应的texture上。

3.LayerTreeHostImpl::CalculateRenderPasses()记录已经上传了数据源的需要渲染的Tile的信息。

为LayerTreeHostImpl::DrawLayers()做准备.

4.LayerTreeHostImpl::DrawLayers()触发的实际的绘制过程。(glDrawElements).

这个过程会先调用glFramebufferTexture2DEXT,将texture attach到render进程创建的off-screen surface对应的

framebuffer object上，再接着对每个Tile对应的texture调用glDrawElements，这个过程完成后，

网页内容就被渲染到了attach到framebuffer上的textures上了，这些texture会被传递给browser进程。

Browser进程

Browser进程的主要工作是将render进程中包含网页内容的texture合成到on-screen surface。

Browser进程创建的是on-screen surface,网页内容最终要渲染到on-screen surface的back buffer上。

Browser进程调用eglswapbuffer后onscreen surface对应的back buffer和front buffer会互换，

下次屏幕刷新时，front buffer的内容会显示到屏幕上。具体流程参见chromium for android硬件渲染流程全解析(browser进程)