在 Chromium 中 viz 的核心逻辑运行在 GPU 进程中,负责接收其他进程产生的 viz::CompositorFrame(简称 CF),然后把这些 CF 进行合成,并将合成的结果最终渲染在窗口上。

可以将这个过程拆解成以下几个步骤来分析:

  1. viz 的初始化;
  2. viz 的架构设计;
  3. CF 的创建;
  4. CF 的合成;
  5. CF 的渲染;

viz 的初始化只是一次性的过程,而且比较枯燥,所以放到最后再介绍。先来看一下 viz::CompositorFrame(简称 CF) 的创建,因为它是 viz 中的核心数据结构。

1. CF 的创建

一个 CF 对象表示一个矩形显示区域中的一帧画面。内部存储了 3 类数据,分别是 CompositorFrameMetadata, TransferableResoruce 和 RenderPass/DrawQuad,如下图所示:

 2. CF 的元数据(Metadata)

viz::CompositorFrameMetadata 记录了 CF 相关的元数据,比如画面的缩放级别,滚动区域,引用到的 Surface 等。需要注意的是这里面还存储了一个 ui::LatencyInfo 对象,该对象记录了从 Chromium 接收到用户的交互事件到画面更新每个阶段的延时信息,具体都有哪些时间被记录了下来,参见 latency_info.h。通过 ui::LatencyInfo 对象可以方便的追踪交互到渲染各阶段的延时信息。

3. CF 引用到的资源(Resource)

viz::TransferableResource 记录了该 CF 引用到的资源,所谓的资源可以理解为一张图片。资源有两种存在形式,一类是存储在内存中的 Software 资源,一类是存储在 GPU 中的 Texture(这样表达并不严格,但目前为止大家都可以先这样理解)。如果没有开启 Chromium 的硬件加速渲染,则只能使用 Software 资源。如果开启了硬件加速,则只能使用硬件加速的资源。

如何创建一个资源呢? 如果是 Software 资源,只需要申请一块内存(如果资源需要夸进程可以使用共享内存),然后将资源的像素数据放进去就可以了。就像下面这样:

上面的代码直接将 SkBitmap 中的像素数据拷贝到共享内存中,然后在 viz::TransferableResource 中引用该共享内存的地址。

如果是 Texture 资源,就要复杂一点,因为需要先初始化 GL Context。关于如何初始化 GL Context 放在后面的 viz 初始化中解释,这里先忽略初始化过程直接看如何创建 GL 资源。示例代码如下:

上面的代码将 SkBitmap 中的像素数据使用 gpu::SharedImageInterface 接口放入 SharedImage 中,然后使用它返回的 Mailbox 创建 viz::TransferableResource。就像代码中注释的那样,不一定非要使用像素数据来创建 SharedImage,也可以使用 GPU-R 和 OOP-R 相关接口来创建 SharedImage。关于 Mailbox,SharedImage 以及 GPU-R 和 OOP-R 的相关内容可以参考Chromium GPU Resource Share (Shared Image)

哪些内容会以资源的形式存在呢? 结果可能出乎你的意料,网页中的每一个 Tile 都引用一个资源。cc 会把网页分成很多的 Tiles,每一个都以 viz::TileDrawQuad 的形式存在,而每一个 viz::TileDrawQuad 只是简单引用一个资源(关于 DrawQuad 见下文)。此时,这些资源就是 cc Raster 的产物。

4. CF 包含的绘制操作(RenderPass/DrawQuad)

viz::RenderPass 由一系列相关的 viz::DrawQuad 构成。可以对一个 RenderPass 单独应用特效,变换,mipmap,缓存,截图(CopyOutputRequest)等。DrawQuad 有很多种类型,分别用于不同的目的:

  • viz::TextureDrawQuad 内部引用一个资源。
  • viz::TileDrawQuad 表示一个 Tile 块(Tile的概念见cc),和 TextureDrawQuad 类似,内部也引用一个资源,DisplayItemList 会被 cc Raster 为 TileDrawQuad;
  • viz::PictureDrawQuad 内部直接存放 DisplayItemList,但是目前只能用于Android WebView;
  • viz::SolidColorDrawQuad 表示一个颜色块;
  • viz::RenderPassDrawQuad 内部引用另外一个 RenderPass 的 Id;
  • viz::SurfaceDrawQuad 内部保存一个 viz::SurfaceId,该 Surface 的内容由其他 CompositorFrameSinkClient 创建,用于 viz 的嵌套,比如 OOPIF,OffscreenCanvas等;

由于 viz::RenderPassDrawQuad 的存在使得 CF 中可以存储一个 RenderPass 树,由于 viz::SurfaceDrawQuad 的存在使得viz可以实现UI的夸进程嵌套。

下面是一个典型的 CF 示例(图片来自这里):

5. 总结

CF 是 viz 中的核心数据结构,它代表某块区域中UI的一帧画面,使用 DrawQuad 来存储 UI 要显示的内容。它代表了 viz 运行时的数据流。

6. 参考文献

https://keyou.github.io/blog/2020/07/29/how-viz-works/

Chromium VIZ工作流的更多相关文章

  1. Apache DolphinScheduler新一代分布式工作流任务调度平台实战-上

    概述 定义 dolphinscheduler 官网地址 https://dolphinscheduler.apache.org/ dolphinscheduler GitHub地址 https://g ...

  2. QT5利用chromium内核与HTML页面交互

    在QT5.4之前,做QT开发浏览器只能选择QWebkit,但是有过使用的都会发现,这个webkit不是出奇的慢,简直是慢的令人发指,Release模式下还行,debug下你就无语了,但是webkit毕 ...

  3. Oozie分布式任务的工作流——Spark篇

    Spark是现在应用最广泛的分布式计算框架,oozie支持在它的调度中执行spark.在我的日常工作中,一部分工作就是基于oozie维护好每天的spark离线任务,合理的设计工作流并分配适合的参数对于 ...

  4. Oozie分布式任务的工作流——邮件篇

    在大数据的当下,各种spark和hadoop的框架层出不穷.各种高端的计算框架,分布式任务如乱花般迷眼.你是否有这种困惑!--有了许多的分布式任务,但是每天需要固定时间跑任务,自己写个调度,既不稳定, ...

  5. 解析大型.NET ERP系统核心组件 查询设计器 报表设计器 窗体设计器 工作流设计器 任务计划设计器

    企业管理软件包含一些公共的组件,这些基础的组件在每个新项目立项阶段就必须考虑.核心的稳定不变功能,方便系统开发与维护,也为系统二次开发提供了诸多便利.比如通用权限管理系统,通用附件管理,通用查询等组件 ...

  6. .Net开源工作流Roadflow的使用与集成

    序言 最近公司要整理公司内部oa系统,需要使用到工作流,所以就开始了开源工作流挑选,使用,到集成到公司内部系统的工作. 首先在网上搜了文档,自己也有补充,整理啦国内几款工作流的比较,由于没有个个击破式 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(42)-工作流设计-表建立

    系列目录 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工作流设计,非常简便,再配合第三方编辑器,可以直接生成表单,我没有刻意的浏览很多工作流的实际设计,我认为工作流 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统(43)-工作流设计-字段分类设计

    系列目录 建立好42节的表之后,每个字段英文表示都是有意义的说明.先建立,就知道表的关系和用处了,当然,我的设计只是一个参考,你可能有很多改进的地方. 我们的工作流具体细节流程是这样的: 最终我们的模 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(44)-工作流设计-设计表单

    系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请

    系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分支执行. 起草的同时,我们分解流转的规则中的审批人并保存,具体流程如下 接下来创建DrafContoller控制器,此控制器只 ...

随机推荐

  1. Hexo博客Next主题相册搭建

    参考文章,小红鸡 参考文章,主题美化 效果展示:相册 在blog文件夹/source下创建photos文件夹,在photos文件夹创建index.md文件,编辑index.md文件,写入以下代码: & ...

  2. 初始elasticSearch

    elasticSearch 大致印象 为什么用? mysql更擅长于crud等操作,当一张表达到百万级别时,检索速度过慢 es检索速度快 基本概念 Index索引(两层意思) 动词:类似mysql的i ...

  3. Django: Invalid block tag on line 5: 'static', expected 'endblock'. Did you forget to register or load this tag?

    错误释义:在第5行中无效的块标签:'static',期望的'endblock'.你忘记登记或装载这个标签了吗? 错误原因:没有引入static文件 {% extends 'base.html' %} ...

  4. [POI2007]GRZ-Ridges and Valleys 题解

    (2022-12-28 ) AcWing 1106 洛谷 P3456 题目大意 找出一个图中所有大于(或小于)周围相邻的非连通块点的所有连通块个数. 就是说,对于一个连通块: 如果它周围的点都低于它, ...

  5. npm与package.json的联系

    在nodejs编写的脚手架项目中,npm是不可缺少的包管理工具,当使用npm初始化时,会生成package.json文件来对项目进行整体的管理和描述   以下是新建的练习项目中package.json ...

  6. 介绍vue3的钩子函数activated和deactivated使用场景

    activated和deactivated是Vue3中的两个生命周期钩子函数. activated钩子函数在组件被激活时调用,通常用于恢复组件的状态或执行一些初始化操作.例如,如果一个组件被从路由中激 ...

  7. 一款开源免费、更符合现代用户需求的论坛系统:vanilla

    对于个人建站来说,WordPress相信很多读者都知道了.但WordPress很多时候我们还是用来建立自主发布内容的站点为主,适用于个人博客.企业主站等.虽然有的主题可以把WordPress变为论坛, ...

  8. 解决使用sqlalchemy时MySQL密码含有特殊字符问题

    前言 当MySQL密码中含有特殊字符时,使用sqlalchemy大概率连不上,这时候就需要from urllib.parse import quote_plus as urlquote. 示例代码 f ...

  9. Linux第四章(80X86保护模式及其编程)

    80X86保护模式及其编程 80X86基础知识 保护模式内存管理 各种保护措施 中断和异常处理 任务管理 保护模式编程的初始化 一个简单的多任务内核 4.1 80X86系统寄存器和系统指令 为了协助处 ...

  10. Windows校验文件MD5和SHA值的方法

    1.需求背景 下载或传输文件后,需要计算文件的MD5.SHA256等校验值,以确保下载或传输后的文件和源文件一致 2.校验方法 如上图所示,可以使用Windows自带的certutil命令来计算一个文 ...