• 离屏渲染

  • 什么是离屏渲染
    如果要在显示屏上显示内容，我们至少需要一块与屏幕像素数据量一样大的frame buffer，作为像素数据存储区域，而这也是GPU存储渲染结果的地方。如果有时因为面临一些限制，无法把渲染结果直接写入frame buffer，而是先暂存在另外的内存区域，之后再写入frame buffer，那么这个过程被称之为离屏渲染。

    离屏渲染（Offscreen Rendering）GPU在当前屏幕缓冲区以外开辟了一个缓冲区进行操作。

    渲染结果先经过了offscreen buffer，再到frame buffer.png

    app进行额外的渲染和合并->offscreen Buffer组合->frame Buffer->屏幕，离屏渲染一个额外的存储空间（offscreen Buffer）渲染完成写入frame Buffer,离屏渲染的大小限制为屏幕像素点的2.5倍。

  • 离屏渲染的性能
    不开启离屏渲染的逻辑为帧缓冲区（双缓存区）直接显示到屏幕，画完即可丢弃从而节省空间。

    离屏渲染需要在屏幕外开辟内存空间，提前使用CPU渲染复杂的视图，保证视频控制器能够及时地从缓存区读到新的渲染结果。它在 GPU面临性能瓶颈时，将压力转移一部分给比较空闲的 CPU，然而 CPU 的渲染能力远没有 GPU 高效，有点杀鸡出牛刀的意思。同时这也是一种以空间换取时间的策略。离屏渲染的整个过程，需要多次切换上下文环境；等到离屏渲染结束以后，将离屏缓冲区的渲染结果显示到屏幕上有需要将上下文环境从离屏切换到当前屏幕。而上下文环境的切换是要付出很大代价的。

• 如何检测离屏渲染

1. 模拟器
   模拟器在工作栏上面的Debug -> Color Off-Screen Rendered
2. 真机
   真机在工作栏上面的Debug -> View Debugging -> Rendering -> Color Off-Screen Rendered Yellow
   代码如下：

//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"];

检测出现的离屏渲染的结果如下：

image.png

首先我们可以从代码中得出结论：设置圆角并不一定会触发离屏渲染。那什么样的情况下会触发离屏渲染呢？下面探讨一下

图片来自CC老师.png

• 由图可以看出视图的层次结构:视图由背景色backgroundColor、内容contents、边缘borderWidth&borderColor构成

  image.png

通过官方文档解释可知设置layer.cornerRadius只会设置backgroundColor和border圆角,不会设置content圆角；除非同时设置了layer.masksToBounds为true（对应的view为clipsToBounds属性）。此时两个属性相结合，产生离屏渲染。这也就说明了上面代码为什么1和3触发了离屏渲染，而2和4没有触发离屏渲染
由于视图是由多个图层组合的，当进行圆角操作是会触发离屏渲染。
应用cornerRadius和maskToBounds进行圆角+裁剪触发离屏渲染。

• 离屏渲染什么时候被触发

  • 使用了mask的layer（mask.layer）
  • 需要进行裁剪的layer（layer.maskToBounds/View.clipsToBounds）
  • 设置了组透明度为YES，并且透明度不为1的layer（layer.allowsGroupOpacity/layer.opacity）
  • 添加了投影的layer（layer.shadow）
  • 采用了光栅化的layer（layer.shouldRasterize）
  • 绘制了文字的layer（UILable、CATextLayer、CoreText等）

• 光栅化使用建议

  1. 如果layer不能被复用，则没有必要打开光栅化。

  2. 如果layer不是静态的，需要被频繁修改，比如处于动画之中，那么开启离屏渲染反而影响效率了。

  3. 离屏渲染缓存内容有时间限制，缓存内容100ms内容如果没有被使用，那么就会被丢弃；无法进行复用了。

  4. 离屏渲染缓存空间有限，超过2.5倍屏幕像素大小的话，也会失效且无法进行复用了。

• 离屏渲染解决办法

  1. UI绘制圆角图片，前台进行设置

  2. 对于 contents 无内容或者内容的背景透明(无涉及到圆角以外的区域)的layer，直接设置layer的 backgroundColor 和 cornerRadius 属性来绘制圆角。

  3. 使用混合图层，在layer上方叠加相应mask形状的半透明layer
     sublayer.contents=(id)[UIImage imageNamed:@"xxx"].CGImage;
     [view.layer addSublayer:sublayer];

  4. -(UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius corners:(UIRectCorner)corners borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor borderLineJoin:(CGLineJoin)borderLineJoin此方法为YY_image处理圆角的方法，你可以去下载YY_image查看源码

• OpenGL渲染架构图分析

转自CC老师.png

上面的管线分成了客户端和服务器端。
客户端是存储在CPU存储器中的，并在应用程序或者在内存的驱动程序中执行。驱动程序将渲染命令和数据组合起来，发送给服务器执行。
客户端不断的将数据块和命令组合起来送入缓冲区，缓存区会发送到 服务器端执行。服务器端将执行这些缓冲区的内容，客户端又做好了下一次发送渲染数据和命令的准备。

• 着色器提供数据的三种方式

1. attributes属性：用来传递顶点数据，投影矩阵，模型矩阵,只能传递到顶点着色器。
2. Uniform值：统一的批次类,Uniform最常见的应用是在顶点渲染中设置变换矩阵,顶点着色器和片段着色器都可以有Uniform变量
3. Texture纹理数据：纹理坐标给到顶点着色器，桥接给片元着色器。也可以直接给到片元着色器