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
目录
相关文章
|
XML JSON 缓存
让UI忙碌的安卓Lottie动画渲染库(二)
上节我们讲述了Lottie开源库如何导入Android Studio但是,开源库是不断迭代的,所以我们也要及时更新
567 0
|
2月前
|
编解码 开发工具 Android开发
Android平台RTSP|RTMP播放器如何实现TextureView渲染
本文介绍了在Android平台上使用TextureView进行RTSP和RTMP视频流渲染的技术背景和实现方法。TextureView相较于SurfaceView具备更高性能、更强功能性和更灵活的绘制方式等优势,但也有必须在硬件加速环境下运行和较高内存占用等局限。文中详细展示了如何在SmartPlayerV2工程中创建和配置TextureView,并通过代码示例解释了如何根据视频分辨率信息调整显示比例,以及处理TextureView的各种生命周期回调。此外,还列举了该播放器SDK支持的多项高级功能,如多实例播放、多种编码格式支持、硬解码能力等,旨在帮助开发者更好地理解和实现高性能的直播播放器。
|
5月前
|
Android开发 开发者
Android开发之通过渲染纹理展示地球仪
该文阐述了如何使用OpenGL为三维物体添加纹理,以增强其真实感。纹理坐标是二维的,用于标记摊平后的“布料”对应物体的哪个部位,类似裁缝制作衣服的过程。在OpenGL中,启用纹理和深度测试是关键,还包括设置纹理参数、分配纹理编号、绑定位图材质等步骤。计算材质的纹理坐标后,通过`glDrawArrays`结合顶点和纹理坐标逐个贴图。最终示例展示了将世界地图贴到球体上形成逼真的地球仪效果。通过控制旋转、平移和缩放,能实现简单的三维动画效果。
68 2
Android开发之通过渲染纹理展示地球仪
|
前端开发 Android开发
前端项目实战壹-安卓4.4/6.0无法安装非原生项目无法渲染样式
前端项目实战壹-安卓4.4/6.0无法安装非原生项目无法渲染样式
61 0
|
5月前
|
XML Java Android开发
Android App开发手机阅读中PDF文件渲染器的讲解及使用(附源码 简单易懂)
Android App开发手机阅读中PDF文件渲染器的讲解及使用(附源码 简单易懂)
219 0
|
XML JSON 前端开发
让UI忙碌的安卓Lottie动画渲染库(一)
今天工作时突然在项目xml布局看到了一个完全不认识的控件,一开始以为是自定义View之类的:
358 0
|
XML 存储 定位技术
Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
232 0
Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
|
API Android开发
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(下)
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(下)
156 0
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(下)
|
API Android开发
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(上)
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(上)
421 0
Android 天气APP(五)天气预报、生活指数的数据请求与渲染(上)
|
缓存 算法 Java
Android硬件加速(二)-RenderThread与OpenGL GPU渲染
Android硬件加速(二)-RenderThread与OpenGL GPU渲染
1127 0
Android硬件加速(二)-RenderThread与OpenGL GPU渲染