四、iOS中图形图像渲染技术栈及流水线
1. 图形渲染框架
下图为 iOS APP
图形渲染框架, APP
在显示可视化的图形时,使用到了 Core Animation
、 Core Graphics
、 Core Image
等框架,这些框架在渲染图形时,都需要通过 OpenGL ES / Metal
来驱动 GPU
进行渲染与绘制。
![](https://img.haomeiwen.com/i9117381/b493542dd21fdd03.png)
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
生成图片。
框架间的依赖关系.png
3. Core Animation 流水线
CALayer
是如何调用 GPU 并显示可视化内容的呢?下面我们就需要介绍一下 Core Animation 流水线的工作原理。
![](https://img.haomeiwen.com/i9117381/991124cfa392e534.png)
事实上,app 本身并不负责渲染,渲染则是由一个独立的进程负责,即 Render Server
进程。
App 通过 IPC 将渲染任务及相关数据提交给 Render Server
。Render Server
处理完数据后,再传递至 GPU。最后由 GPU 调用 iOS 的图像设备进行显示。
Core Animation 流水线的详细过程如下:
- 首先,由 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 刷新率的支持,需要将这些步骤进行分解,通过流水线的方式进行并行执行,如下图所示。
![](https://img.haomeiwen.com/i9117381/85c971969f27aaf7.png)
Commit Transaction
在 Core Animation 流水线中,app 调用 Render Server
前的最后一步 Commit Transaction 其实可以细分为 4 个步骤:
-
Layout
:主要进行视图构建,包括:LayoutSubviews
方法的重载,addSubview:
方法填充子视图等。 -
Display
:视图绘制,这里仅仅是绘制寄宿图,该过程使用CPU和内存 -
Prepare
:阶段属于附加步骤,一般处理图像的解码和转换等操作 -
Commit
:主要将图层进行打包,并将它们发送至 Render Server。该过程会递归执行,因为图层和视图都是以树形结构存在。
参考文章:iOS 图像渲染原理