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进程)
chromium for android 硬件渲染流程总结