关闭

理解WebKit和Chromium: Chromium硬件加速合成

标签: webkit任务transformation存储浏览器工作
1875人阅读 评论(2) 收藏 举报

# Chromium硬件加速合成(hardwareaccelerated compositing)

## 概述

在介绍硬件加速合成之前,让我们先大概了解一下基本的做法是如何渲染生成网页内容的。

一个网页通常可以包含很多层,这个我们在WebKit渲染基础中讲过,例如有透明效果的节点, Canvas节点等,这些节点都可以是页面中的一层,这些层的内容最后组成一个可视化的网页内容,如下图所示。


在没有硬件加速的情况下,浏览器通常是依赖于CPU来渲染生成网页的内容,大致的做法是遍历这些层,然后按照顺序把这些层的内容依次绘制在一个内部存储空间上(例如bitmap),最后把这个内部表示显示出来,这种做法就是软件渲染(software rendering),我们会有专门针对它的介绍。

随着GPU硬件能力的增强,包括在很多小型设备上也是如此,浏览器可以借助于其处理图形方面的性能来对渲染实现加速,本章要介绍的就是利用GPU来实现对页面分层渲染并加速合成网页的可视化结果。

前面我们已经介绍了WebKit中对于渲染所做的一些基础设施,包括Render树和RenderLayer树,对于每一个RenderLayer,我们可以为其单独创建一块内部存储(有些情况下可以为多个layer创建同一块存储),这些存储会被用来保存该层中的内容,浏览器最后会把这些所有的层通过GPU合成起来,形成最终网页渲染的内容,这就是硬件加速合成。

本节主要介绍WebKit中为硬件加速所做的另外一些基础设施,接着是chromium中为硬件加速合成所做的支持,最后介绍chromium中最新的合成器:chromium compositor(cc)。

 ## WebKit 的支持

在建立DOM树后,如前面所述, WebKit会创建相应的Render树和RenderLayer树。如果启用“加速合成(accelerated_compositing)”选项,WebKit会做一些特别的处理。

它为每个RenderLayer创建一个RenderLayerBacking,这个类非常的有用,它是用来管理和控制RenderLayer的合成相关的事情,决定对该层是否做优化,同时包含了很多GraphicsLayer的对象。GraphicsLayer类是一种抽象,用于表示有后端存储(backing store)的渲染surface,同时,也包括作用于之上的各种变换(transformation)和动画(animation)。 RenderLayerBacking类中包含的这些GraphicsLayer有内容层,可能还有前景层(Foreground),剪切层(clipping)等。下图中的WebKit部分是WebKit中为渲染和硬件加速所涉及的类,在此一一介绍。

RenderLayerCompositor: WebKit中渲染部分‘掌控大局’的类, 管理RenderLayer树结构,它通过浏览器的设置来决定是否创建RenderLayer以及是否硬件加速合成,同时也决定是否为RenderLayer创建RenderLayerBacking

RenderLayerBacking:用来管理和控制相对应的RenderLayer的合成行为,包含很多GraphicsLayer对象,这些对象用于表示层内容,前景(foreground)内容等等

GraphicsLayer: 用于表示有后端存储(backingstore)的渲染surface及其相应的变换等,该类是一个抽象类,不同平台的移植有不同的实现


 ## Chromium的支持

WebKit提供了基础设施, 但要实现硬件加速合成,各个移植还有很多事要做,chromium也是如此,见上图中的Chromium部分。

大致地,可以把Chromium中的关于硬件加速合成部分分成两块,第一块是对WebKit接口的具体实现,第二块是Chromium合成的管理和实现部分。

第一块包括上图中Chromium部分的两个类GraphicsLayerChromium和LayerChromium:

         GraphicsLayerChromium:继承自GraphicsLayer,实现了GraphicsLayer的虚函数接口,提供了chromium自已的移植。

         LayerChromium:Chromium中的PlatformLayer类,具体的就是chromium的实际的被合成层的基类,被GraphicsLayerChromium所创建。LayerChromium有多个子类,例如对WebGL和video支持的WebGLLayerChromium,VideoLayerChromium类

第二块则是Chromium部分的CC开头的类和LayerRenderChromium:

LayerRendererChromium:一个很重要的类,负责实现合成功能,利用GL来绘制被合成的各个CCLayerImpl层

         CCLayerImpl:该类主要是负责一个层的绘制(drawing)工作,由LayerChromium创建,同样构成一个树型结构,被CCLayerTreeHostImpl来管理。每个对象可以有自己的渲染surface对象,也可以使用其祖先的,这取决于具体的策略。

         CCRenderSurface:渲染的surface类,被CCLayerImpl所创建和使用,有自己的存储后端

         CCLayerTreeHost:  一个CCLayerImpl树的客户端类,用于响应Chromium的合成请求后,处理LayerChromium准备工作,并把请求最后传递给CCProxy,由其转发给具体的实现者,该类被主线程所调用

         CCProxy:一个代理抽象类,用于将主线程的合成操作桥接到具体的合成器实现,合成器的线程可能并非主线程。

         CCSingleThreadProxy:CCProxy的子类,该类表明合成任务没有在单独的线程中执行,该类将客户端的请求发送到合成的具体类CCLayerTreeHostImpl,并响应合成器调用客户端的回调函数

         CCThreadProxy:CCProxy的子类,将合成任务放在单独的新线程中执行, 目前没有被使用

         CCLayerTreeHostImpl:该类主要管理CCLayerImpl树及相应的状态,接受来自CCProxy的请求,将实际的合成任务交给LayerRendererChromium来处理

 在早期的版本中,Chromium中对合成的支持主要就是LayerRenderChromium,该类负责处理所有关于合成方面的工作。后来, Chromium新引入了CC(chromium compositor)的设计。

 ## Chromium Compositor

为了把合成这一功能独立出来,chromium设计了一套新的合成架构chromium compositor(后面简称CC)。

Chromium定义了自己的层(CCLayerImpl)和层的后端存储方式(CCRenderSurface),所以它的合成任务是基于它们来完成。从架构上来讲,新的CC设计了一套更加灵活的机制来实现合成:合成的任务可以放在独立的线程中来做,而不仅仅是当前线程,该机制的好处是合成不会阻碍当前线程的响应,比较灵活。

结合上面的类图,我们来理解一下其内部的机制。简单来讲,可以把合成分成调用端和实现端。调用段由CCLayerTreeHost来提供相应的接口,被render的主线程调用,当需要合成时,就会调用CCLayerTreeHost::composite来完成, 这里它可以被看成调用端。但是实际的实现者却不是该类,而是CCLayerTreeHostImpl(和LayerRenderChromium),它们是实现端。它们这两端如何连接起来呢?答案是CCProxy,它提供了一组抽象的接口,而它的子类(CCSingleThreadProxy和CCThreadProxy)来决定具体的实现,它们可以让合成在调用端的线程来完成,也可以创建一个独立的线程来完成。目前,在Renderer进程中的合成是在主线程中来完成的。

假以时日,我们有理由相信, chromium compositor应该会被抽取出来,形成一个独立的库,这样它会被同时用在网页的合成和chromium主界面的合成,借助于灵活的架构,合成的工作也不会影响正常的主界面对用户的响应。

 ## GPU硬件加速合成过程

在了解这些基础模块类之后,下面让我们来看看合成是如何来完成的。下图给出的是一个完整的Renderer进程的合成过程。


来解释一下这个过程。Browser进程或者页面发起一个失效(Invalidate)的请求后,Renderer进程会调度一个任务来更新相关区域。当该任务被调度执行时,如果硬件加速合成被打开后,Renderer进程便开始执行对网页的合成。

合成任务由CC来管理和执行的。首先,调用CCSingleThreadProxy::commitIfNeeded,它主要做两件事,第一件,CCLayerTreeHost::updateLayers为合成做更新LayerChromium的准备工作,包括创建RenderSurface,设置绘制的区域,计算和设置需要更新的层。第二件,如果CCLayerImpl树来没有建立的话,那么就根据LayerChromium树来建立它。

再次,就是来绘制并合成相关的层,CCLayerTreeHostImpl::drawLayers基于CCLayerImpl树做绘制工作,把需要的绘制的所有层以此重新绘制并合成,该任务由LayerRenderChromium类负责处理完成(调用GPU Process来完成GL的绘制)。

最后,调用swapbuffers把命令发给GPU进程用来交换前后端buffer,完成了页面的显示。

 ## 源文件目录

WebKit/Source/WebCore/platform/graphics/chromium/

         与硬件加速相关的chromium移植的相关类

WebKit/Source/WebCore/platform/graphics/chromium/cc

         Chromium新的合成器CC,包含所有CC的基础和管理类

 ## 参考文献

1.      http://www.chromium.org/developers/design-documents/aura/graphics-architecture

2.      http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

3.      http://www.chromium.org/developers/design-documents/rendering-architecture-diagrams

 By zhuyongsheng2010@gmail.com

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:939666次
    • 积分:8125
    • 等级:
    • 排名:第2579名
    • 原创:17篇
    • 转载:350篇
    • 译文:1篇
    • 评论:39条