1. 图形渲染框架

下图为 iOS APP 图形渲染框架， APP 在显示可视化的图形时，使用到了 Core Animation 、 Core Graphics、 Core Image 等框架，这些框架在渲染图形时，都需要通过 OpenGL ES / Metal 来驱动 GPU 进行渲染与绘制。

四、iOS中图形图像渲染技术栈及流水线 - 图1

1.1. UIKit

UIKit是 iOS开发者最常用的框架，里面提供了UIView。
UIView供开发者用来:

  • 显示界面(借助于CALayer)
  • 布局子视图
  • 处理用户交互事件(继承自 UIResponder)。

1.2. Core Animation

Core Animation源自于 Layer Kit, 是一个复合引擎,主要职责包含渲染（CALayer）、构建和实现动画。CALayer是用户所能在屏幕上看到一切的基础。

1.3. Core Graphics

Core Graphics是基于Quartz 的高级绘图引擎，主要用于运行时绘制图像。其功能有绘制路径、颜色管理、渐变、阴影、创建图像、图像遮罩、PDF文档创建显示及分析。

1.4. Core Image

Core Image 拥有一系列现成的图像过滤器，可以对已存在的图片进行高效处理。大部分情况下，``Core Image ``` 是在GPU中完成工作，如果GPU忙，会使用CPU进行处理。

2. 三个框架间的依赖关系

Core Animation 、 Core Graphics、 Core Image这个三个框架间也存在着依赖关系。

上面提到CALayer是用户所能在屏幕上看到一切的基础。所以Core Graphics、 Core Image是需要依赖于CALayer来显示界面的。由于CALayer又是Core Animation 框架提供的，所以说Core Graphics、 Core Image是依赖于``Core Animation ```的。

上文还提到每一个 UIView 内部都关联一个 CALayer图层，即backing layer，每一个 CALayer都包含一个content属性指向一块缓存区，即backing store， 里面存放位图（Bitmap）。iOS中将该缓存区保存的图片称为寄宿图。
这个寄宿图有两个设置方式：

  • 直接向content设置CGImage图片，这需要依赖Core Image来提供图片。
  • 通过实现UIView的drawRect方法自定义绘图，这需要借助 Core Graphics来绘制图形，再由CALayer生成图片。
    四、iOS中图形图像渲染技术栈及流水线 - 图2

3. Core Animation 流水线

3.1 工作原理。

CALayer 是如何调用 GPU 并显示可视化内容的呢？下面我们就需要介绍一下 Core Animation 流水线的工作原理。

四、iOS中图形图像渲染技术栈及流水线 - 图3

事实上，app 本身并不负责渲染，渲染则是由一个独立的进程负责，即 Render Server 进程。

App 通过 IPC 将渲染任务及相关数据提交给 Render Server。Render Server 处理完数据后，再传递至 GPU。最后由 GPU 调用 iOS 的图像设备进行显示。

3.2 流水线的详细过程

  • 首先，由 app 处理事件（Handle Events），如：用户的点击操作，在此过程中 app 可能需要更新 视图树，相应地，图层树 也会被更新。
  • 其次，app 通过 CPU 完成对显示内容的计算，如：视图的创建、布局计算、图片解码、文本绘制等。在完成对显示内容的计算之后，app 对图层进行打包，并在下一次 RunLoop 时将其发送至 Render Server，即完成了一次 Commit Transaction 操作。
  • Render Server 主要执行 Open GL、Core Graphics 相关程序，并调用 GPU
  • GPU 则在物理层上完成了对图像的渲染。
  • 最终，GPU 通过 Frame Buffer、视频控制器等相关部件，将图像显示在屏幕上。

对上述步骤进行串联，它们执行所消耗的时间远远超过 16.67 ms，因此为了满足对屏幕的 60 FPS 刷新率的支持，需要将这些步骤进行分解，通过流水线的方式进行并行执行，如下图所示。

四、iOS中图形图像渲染技术栈及流水线 - 图4

3.3 Commit Transaction

在 Core Animation 流水线中，app 调用 Render Server 前的最后一步 Commit Transaction 其实可以细分为 4 个步骤：

  • Layout：主要进行视图构建，包括：LayoutSubviews 方法的重载，addSubview: 方法填充子视图等。
  • Display：视图绘制，这里仅仅是绘制寄宿图，该过程使用CPU和内存
  • Prepare：阶段属于附加步骤，一般处理图像的解码和转换等操作
  • Commit：主要将图层进行打包，并将它们发送至 Render Server。该过程会递归执行，因为图层和视图都是以树形结构存在。

参考文章：iOS 图像渲染原理