NO.6 - 离屏渲染

1.什么是离屏渲染

1.1渲染方式一：当前屏幕渲染

On-Screen Rendering意为当前屏幕渲染，指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行

非离屏渲染

APP将要渲染的信息提交给CPU，CPU通过一定的处理后提交给GPU。GPU不停的将内容渲染完成放到帧缓冲区中（FrameBuffer），最后显示到屏幕上。

1.2渲染方式二：屏幕渲染

Off-Screen Rendering 离屏渲染： GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作

离屏渲染

GPU把渲染好的的内容存放到离屏渲染缓冲区中，在离屏渲染缓冲区（OffscreenBuffer）中进一步做一些处理后，再提交到帧缓冲区（FrameBuffer）中

总结来说就是：

• 图像/图形渲染的流程:GPU进⾏渲染->帧缓存区⾥ ->视频控制器->读取帧缓存区信息(位图) -> 数模转化(数字信号处->模 拟型号) ->(逐⾏扫描)显示。
• 当帧缓冲区的数据不能直接被视频控制器扫描显示的时候，我们需要开辟一些离屏缓存区来存放一些中间状态的数据，等待全部的图层都渲染到离屏缓存区之后，分别从各个离屏缓存区取出数据，分别做相应的操作(裁剪等)之后，组合存入帧缓存区，再等待屏幕控制器的读取和屏幕刷新

下面通过一个简单案例说明：

实现一个毛玻璃效果

上图是实现一个毛玻璃效果，每次处理一个图层的层级都会先存到一个离屏缓冲区，等到所有层级都渲染完然后在交给帧缓存区组合，最后显示到屏幕上。

2.离屏渲染的检测

模拟器打开color offscreen-rendered,开启后会把那些触发离屏渲染的图层高亮成黄色

开启离屏渲染检测

3.离屏渲染的利弊

劣势

• 创建新缓冲区，要想进行离屏渲染，首先要创建一个新的缓冲区
• 离屏渲染的整个过程，需要多次切换上下文环境：先是从当前屏幕（On-Screen）切换到离屏（Off-Screen），等到离屏渲染结束以后，将离屏缓冲区的渲染结果显示到屏幕上有需要将上下文环境从离屏切换到当前屏幕。而上下文环境的切换是要付出很大代价的
• 离屏渲染需要额外的存储空间，存储空间大小的上限是2.5倍的屏幕像素大小，一旦超过，则无法使用离屏渲染
• 容易掉帧：一旦因为离屏渲染导致最终存入帧缓存区的时候，已经超过了16.67ms，则会出现掉帧的情况

优势

• 用户需要特殊的渲染效果：使用额外的离屏缓冲区（offscreen butter)保存中间状态，最后叠加、处理后绘制在屏幕上，这样就不得不使用离屏渲染
• 效率优势：需要多次使用的效果，提前渲染存入离屏缓冲区，然后复用来提高效率

4.离屏渲染的几种情况

• 使用了 mask 的 layer (layer.mask)
  mask是应用在layer和其所有子layer的组合之上的，而且可能带有透明度,只有到整个layer树画完之后，再统一加上mask，最后和底下其他layer的像素进行组合

• 需要进行裁剪的 layer (layer.masksToBounds / view.clipsToBounds)
  layer包含有三层：border，content，background
  如果只是设置clipsToBounds或者不会触发离屏渲染，clipsToBounds之后作用在backgroundColor和border上，content上不会有圆角，只有同时设置了clipsToBounds和masksToBounds,并且contents有内容或者内容的背景不是透明的才会触发离屏渲染，并实现content圆角裁减
  注：view.clipsToBounds对应layer.cornerRadius

• 设置了组透明度为 YES，并且透明度不为 1 的 layer (layer.allowsGroupOpacity/ layer.opacity)
  CALayer的allowsGroupOpacity属性，UIView 的alpha属性等同于 CALayer opacity属性。GroupOpacity=YES，子layer 在视觉上的透明度的上限是其父 layer 的opacity。
  当父视图的layer.opacity != 1.0时，会开启离屏渲染，opacity并不是分别应用在每一层之上，而是只有到整个layer树画完之后，再统一加上opacity，最后和底下其他layer的像素进行组合
  当父视图的layer.opacity == 1.0时，父视图不用管子视图，只需显示当前视图即可。
  为了让子视图与父视图保持同样的透明度，从 iOS 7 以后默认全局开启了这个功能。我们可以设置layer的opacity值为YES，减少复杂图层合成

• 添加了投影的 layer (layer.shadow)
  layer本身是一块矩形区域，阴影会作用在所有子layer所组成的形状上，只能等全部子layer画完才能得到阴影，当阴影的图形本身（layer和其子layer）都还没有被组合到一起是不能确定阴影的形状和渲染，我们只能另外申请一块内存，把图形本身先画好，再根据渲染结果的形状，添加阴影到frame buffer，最后把内容画上去。
  如果我们能够预先告诉CoreAnimation（通过shadowPath属性）阴影的几何形状，那么阴影可以先被独立渲染出来，不需要依赖layer图形本身，就不需要离屏渲染了，因此可以通过设置shadowPath来优化性能

• 采用了光栅化的 layer (layer.shouldRasterize)
  如果layer的shouldRasterize被设置成YES，在触发离屏绘制的同时，会将光栅化后的内容缓存起来，如果对应的layer及其sublayers没有发生改变，在下一帧的时候可以直接复用。这将在很大程度上提升渲染性能
  使用光栅化时，可以开启“Color Hits Green and Misses Red”来检查该场景下光栅化操作是否是一个好的选择。绿色表示缓存被复用，红色表示缓存在被重复创建。
  使用注意：
  如果layer不能被复用，则不必打开光栅化
  如果layer不是静态的，需要被频繁修改，如处于动画中，那开启离屏渲染反而会影响效率
  离屏渲染缓存内容有时间限制，缓存内容100ms内没有被使用，那么它就会丢弃，无法进行复用了
  离屏渲染缓存空间有限，不能超过2.5倍屏幕像素大小

• 绘制了文字的 layer (UILabel, CATextLayer, Core Text 等)

• 使用高斯模糊（毛玻璃）效果
  iOS的控制屏幕显示推送通知页面或者UIVisualEffectView

• edge antialiasing（抗锯齿）
  设置 allowsEdgeAntialiasing 属性为YES(默认为NO)