OpenGL之iOS下的图片渲染流程解释

975 阅读3分钟

在我们的iOS项目开发中,当我们在屏幕中显示一张图片,一个UIView、UILabel或者UIButton时,iOS系统到底如何将它们显示在屏幕上的呢?

屏幕显示

以如下的登录注册界面为例

这个界面上有Label,button,image等控件,通过布局将它们显示在了屏幕上的相应位置,那么它们在显示到屏幕上的时候是如何被渲染到屏幕上的呢?

UIView和CALayer的关系

首先我们要搞明白UIView和Layer到底有什么关系和区别!

  • UIKit使用UIResponder作为响应对象,来响应系统传递过来的事件并进行处理。UIApplication、UIViewController、UIView、和所有从UIView派生出来的UIKit类(包括UIWindow)都直接或间接地继承自UIResponder类。
  • 在 UIResponder中定义了处理各种事件和事件传递的接口, 而 CALayer直接继承 NSObject,并没有相应的处理事件的接口。
  • 每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提供。两者都有树状层级结构,layer 内部有 SubLayers,View 内部有 SubViews.但是 Layer 比 View 多了个AnchorPoint;
  • 在 View显示的时候,UIView 作为 Layer 的 CALayerDelegate,View 的显示内容由内部的 CALayer显示;
  • CALayer 是默认修改属性支持隐式动画的,在给 UIView 的 Layer 做动画的时候,View 作为 Layer 的代理,Layer 通过 actionForLayer:forKey:向 View请求相应的 action(动画行为);
  • layer 内部维护着三分 layer tree,分别是 presentLayer Tree(动画树),modeLayer Tree(模型树), Render Tree (渲染树),在做 iOS动画的时候,我们修改动画的属性,在动画的其实是 Layer 的 presentLayer的属性值,而最终展示在界面上的其实是提供 View的modelLayer;
  • 两者最明显的区别是 View可以接受并处理事件,而 Layer 不可以。

关于更详细的解释,请移步详解CALayer 和 UIView的区别和联系

iOS屏幕渲染的本质

通过对UIView和UILayer关系和区别的理解我们知道,我们在使用UIView进行界面的布局时,本质上是对CALayer进行布局,系统最终是将CALayer转换成位图渲染到屏幕上。

CALayer渲染流程

着色器渲染流程

当图片在屏幕上显示时,首先我们先通过frame,获取到顶点数组,将顶点数据通过"顶点着色器"进行处理,以点、线或三角形的形式进行顶点的连接;然后通过光栅化,并使用“片色着色器"将图片的像素点渲染到顶点数据所框住的区域内。

iOS下的渲染框架

CoreAnimation通过OpenGL ES 或者 Metal驱动GPU 将图片通过“着色器渲染流程”渲染到屏幕上

CoreAnimation框架

CoreAnimation渲染流水线

  • 第一步:处理各种事件,Handle Events;
  • 第二步:CoreAnimation 将图片提交到GPU;
  • 第三步:Render Server渲染图片;

Render Server操作分析

待更新。。。