老青菜

iOS 屏幕渲染分析

2020-06-01

关于 iOS 的渲染架构,Advanced Graphics and Animations for iOS Apps 这里有介绍。(官方 WWDC14 419 已经找不到了)

整个渲染架构大致分4层:

UIKit
常用的视图层框架,供APP应用层使用。

Core Animation
图形渲染和动画的基础,负责组合屏幕上不同的可视内容 layer ,存储为树状层级结构layer tree

Meta/Core Graphics
Meta 负责处理 GPU 渲染(以前用的是 OpenGL ES );Core Graphics负责处理 CPU 渲染。

Graphics HardWare
图形硬件操作。

CALayer

上面提到的layerUIView的属性之一,负责渲染和动画,提供可视内容(bitmap)的呈现。

UIView负责了交互事件的处理,提供了对CALayer部分功能的封装。

Core Animation Pipeline

接下来我们来看一下Core Animation Pipeline渲染流水线,一共分为6个过程。

Handle Events

APP 响应事件,可能会改变布局和界面层次,这一步工作在 CPU 上。

Commit Transaction

APP 通过Core Animation处理显示内容,比如布局计算、图片解码等,之后把计算好的图层树layer tree编码打包发给Render Server,这一步工作在 CPU 上。

Decode

Render Server收到打包好的图层树,调用Core Animation进行解码,这一步工作在 CPU 上。

Draw Calls

解码完成后,Core Animation会调用下层渲染框架(OpenGL ES/Metal)生成Draw Calls绘制调用,告诉 GPU 需要渲染的信息,包含primitives图元信息,由 CPU 发起。

关于Draw Calls,可以看这个 视频

Render

渲染,准备frame buffer/back buffer缓冲区数据,等待下一个垂直信号VSync来读取frame buffer/back buffer缓冲区数据,这一步工作在 GPU 上。

Display

屏幕显示,视频控制器读取帧缓冲区的数据,交给显示器显示。

Commit Transaction

我们知道,Commit Transaction这一阶段,主要是 APP 处理显示内容(布局计算、图片解码等),之后把图层树编码打包发给Render Server,接下来看一下详细的流程,一共包含了4个阶段。

Layout

构建阶段,处理视图的构建和布局,大概包括以下工作:

  1. 调用重载的 layoutSubviews 方法。

  2. 创建视图,并通过 addSubview 方法添加子视图。

  3. 计算视图布局,即所有的 Layout Constraint

这个阶段是在 CPU 中进行,我们应该尽量减少非必要的视图创建、简化布局、减少视图层级深度,保证视图平坦。

Display

绘制阶段,视图绘制,得到图元primitives数据,一般是三角形、线段、顶点。

如果重写了drawRect方法,调用Core Graphics绘制方法得到 bitmap 数据,那么系统会额外申请一块内存,用于暂存绘制好的 bitmap。

Prepare

准备提交阶段,解码图片,图片格式转换。

Commit

打包提交阶段,递归图层树 layer tree ,打包并发送到Render Server。如果图层树太复杂,对性能会影响,所以建议减少视图层级。

Tile Based Rendering Rendering Pass

我们知道,当Render Server收到 Commit Transaction提交过来的图层树layer tree之后,会先交给Core AnimationDecode解码,再调用 Meta/OpenGL生成Draw Calls绘制调用,交给 GPU,执行Render

接下来我们看下Render的具体过程,如下图:

  1. GPU 收到 Command Buffer,即OpenGL/Meta的渲染指令。

  2. Tiler,调用顶点着色器,把顶点数据进行分块(Tiling),存储到Parameter Buffer中。

  3. Renderer,调用片元着色器,进行像素渲染,得到bitmap,存储到Render Buffer

  4. 最后交给Display显示。

参考链接

WWDC14 419

Apple Core Animation Programming Guide

iOS 渲染原理解析

关于iOS离屏渲染的深入研究

Tags: 性能
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章