Chromimum Android渲染介绍

简介: 从概念上一个使用硬件加速(AC)时,页面显示的结构是Viewport -> Layer(s) -> Tile(s),所谓的纹理就是Tile上显示的内容。

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

详情可参考:开启硬件加速时Web页面绘制流程
从WebKit内核到Chromium的cc模块,其对应关系如下:
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

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

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
参考资料: Android 4.4 Browser渲染机制解析

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

TileSet & Layer

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

参考

  1. Web页面渲染及合成加速(二)
  2. Chromium Graphics: 再谈Chromium WebView硬件渲染模式的演进
  3. 开启硬件加速时Web页面绘制流程
  4. Impl-Side Painting
  5. Android Graphics Architecture
目录
相关文章
|
存储 传感器 编解码
Android OpenGL 渲染图像读取哪家强
glReadPixels 是 OpenGL ES 的 API ,OpenGL ES 2.0 和 3.0 均支持。 使用非常方便,下面一行代码即可搞定,但是效率也是最低的。
1135 0
Android OpenGL 渲染图像读取哪家强
|
4月前
|
XML Java Android开发
Android App开发手机阅读中PDF文件渲染器的讲解及使用(附源码 简单易懂)
Android App开发手机阅读中PDF文件渲染器的讲解及使用(附源码 简单易懂)
82 0
|
XML 存储 定位技术
Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
188 0
Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
|
API Android开发
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(下)
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(下)
126 0
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(下)
|
API Android开发
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(上)
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(上)
343 0
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(上)
|
缓存 算法 Java
Android硬件加速(二)-RenderThread与OpenGL GPU渲染
Android硬件加速(二)-RenderThread与OpenGL GPU渲染
1003 0
Android硬件加速(二)-RenderThread与OpenGL GPU渲染
|
Android开发 异构计算
【Android 性能优化】布局渲染优化 ( CPU 渲染优化 | 减少布局的嵌套 | 测量布局绘制时间 | OnFrameMetricsAvailableListener | 布局渲染优化总结 )
【Android 性能优化】布局渲染优化 ( CPU 渲染优化 | 减少布局的嵌套 | 测量布局绘制时间 | OnFrameMetricsAvailableListener | 布局渲染优化总结 )
364 0
|
Android开发 开发者 异构计算
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(二)
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(二)
225 0
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(二)
|
Android开发 开发者 异构计算
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(一)
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(一)
368 0
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(一)
|
存储 缓存 前端开发
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
165 0
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )