iOS离屏渲染探索

在介绍离屏渲染之前,我们先简单描述一下图形渲染。

图形渲染

我们都知道现在的计算机除了有cpu外,还有一个GPU芯片。那么这两个芯片的作用是啥?
CPU:现在计算机整个系统的运算核心、控制核心。
GPU:可进行绘图运算工作的专用微处理器,是连接计算和显示终端的纽带;GPU主要是用来处理图像信息的功能,被称为图形处理器。

屏幕成像的方式有很多种类型:
1、随机扫描显示:通过光束扫描图像信息。
2、光栅扫描显示:

简单光栅扫描显示系统结构:
15940864335655.png
常用光栅扫描显示系统结构
15940864797887.png
高级光栅扫描显示系统结构
3、屏幕扫描
15940865350393.png

图像显示大致过程:CPU/GPU处理->存放到帧缓冲区->视频控制器去帧缓冲区读取->其他一系列处理->显示器展示(光栅扫描)

有时候会出现屏幕撕裂的情况,那是由于下一帧的图像渲染没有完成,扫描的还是上一帧的图像数据,因此会发生屏幕撕裂的情况。

图像渲染流程:
15940874416177.png
着色器渲染流程:

在渲染过程中,必须是2种着色器,分别是顶点着色器、片元着色器。顶点着色器是第一个着色器,片元着色器是最后一个。顶点着色器处理顶点数据,片元着色器处理像素点颜色。类似于渲染一个正方形,四个顶点由顶点着色器处理,其余的内容分成很多个像素点,由片元着色器处理。

ios下的渲染框架
15940879847910.png

ios下的CoreAnimation:本质上可以理解为一个复合引擎,主要职责包含:渲染、构建和实现动画。

CoreAnimation渲染流水线:
v2-98077db5cb31318ec437f00762870142_r.jpg

离屏渲染(Offscreen rendering)探索

如何检测项目中哪些图层触发了离屏渲染问题:


15940887764593.png

ng)

离屏渲染定义:

在通常情况下,我们在屏幕上显示都是读取帧缓冲区(Frame Buffer)渲染好的的数据,然后显示在屏幕上;而离屏渲染,则是将渲染好的图像放入离屏缓冲区(OffScreen Buffer)等多个图层的数据渲染完,再组合在一起,放入帧缓冲区,然后在屏幕上显示。

离屏渲染的存在的问题:

1、offScreenBuffer空间大小有限制,为屏幕像素点的2.5倍。
2、容易掉帧,产生性能问题。
3、渲染需要时间,会产生性能问题。

离屏渲染触发的几种情况:

1、使用了mask的layer。
2、需要进行裁剪的layer
3、设置了组透明为yes,并且透明度不为1的layer。
4、添加了投影的layer
5、采用了shouldRasterize光栅化
6、绘制了文字的layer

其中,列出一些shouldRasterize光栅化的使用建议:
1、如果layer不能被复用,则没必要打开;
2、如果layer不是静态的,需要被频繁修改,比如处于动画之中,那么开启离屏渲染反而影响效率了。
3、离屏渲染缓存内容有时间限制,缓存内容100ms内容入锅没有被使用,那么它就会丢弃;无法进行复用了。
4、离屏渲染缓存空间有限,超过2.5倍屏幕像素大小的话,也会失效,且无法进行复用了。

那么我们怎么判断离屏渲染是否会触发呢?
我们来探索一下:

  //1.按钮存在背景图片
    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100, 30, 100, 100);
    btn1.layer.cornerRadius = 50;
    [self.view addSubview:btn1];

    [btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
    btn1.clipsToBounds = YES;

    //2.按钮不存在背景图片
    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(100, 180, 100, 100);
    btn2.layer.cornerRadius = 50;
    btn2.backgroundColor = [UIColor blueColor];
    [self.view addSubview:btn2];
    btn2.clipsToBounds = YES;
    
    //3.UIImageView 设置了图片+背景色;
    UIImageView *img1 = [[UIImageView alloc]init];
    img1.frame = CGRectMake(100, 320, 100, 100);
    img1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:img1];
    img1.layer.cornerRadius = 50;
    img1.layer.masksToBounds = YES;
    img1.image = [UIImage imageNamed:@"btn.png"];

    //4.UIImageView 只设置了图片,无背景色;
    UIImageView *img2 = [[UIImageView alloc]init];
    img2.frame = CGRectMake(100, 480, 100, 100);
    [self.view addSubview:img2];
    img2.layer.cornerRadius = 50;
    img2.layer.masksToBounds = YES;
    img2.image = [UIImage imageNamed:@"btn.png"];
Simulator Screen Shot - iPhone SE -2nd generation- - 2020-07-07 at 11.19.13.png

在上面的代码中,创建了两个button,两个imageView,那么为什么1,3会触发离屏渲染,2,4却不会触发离屏渲染呢?

我们分析一下代码:
在两个button按钮当中,第一个与第二个的区别在于一个设置了图片,一个设置了背景颜色,然后共同设置了圆角,mask。从这个结果可以看出,离屏渲染触发的条件就是存在多组不同的layer需要渲染在一个视图上,而GPU无法一次性全部渲染时,才会触发。

在两个imageView中,同样的设置了圆角,mask,图片,和一个有背景色,一个无背景色。有背景颜色的触发了离屏渲染,没有的没触发。
我的理解是:img1中,有背景颜色,图片,圆角,需要将背景颜色,图片都进行裁剪,存在多层图像的加载,因此就会触发离屏渲染。在img2中,只有图片需要裁剪,只存在单层内容需要加载,因此不会触发离屏渲染。

你或许会有疑问?为啥UIButton也只是设置图片,圆角,mask,为什么它就可以触发离屏渲染?其实在UIButton中会有一个UIImageView属性,对UIButton裁剪,则会触发离屏渲染。

15940942356862.png
注意事项:给图层设置layer.cornerRadius只会设置backgroundColor和border的圆角,不会设置content的圆角,除非你同时设置了layer.masksToBounds为YES,才会对content设置圆角属性。
离屏渲染原理:

在我们渲染一组layer时,若不使用离屏渲染,则会出现第一个layer渲染完后,存入帧缓冲区,然后显示在屏幕上,到第二个layer渲染完后,存入帧缓冲区,再显示再屏幕上,第一个layer就会消失,从而出现问题。
那么使用离屏渲染,系统会将每个layer渲染完的结果存放到离屏缓冲区(OffScreen Buffer),最后将这些layer存入帧缓冲区,进而显示到屏幕上,这样就能完整的显示整个图像。

你可能感兴趣的:(iOS离屏渲染探索)