十离屏渲染

2020-08-05 本文已影响0人王俏

1. OpenGL中，GPU屏幕渲染有以下两种方式

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

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

2.什么是离屏渲染

image

如上图，要在屏幕上显示图3的ImageView，通常GPU的Render Server会遵循 “画家算法” 按秩序先渲染图1的那一层，然后渲染图2的那一层，最后渲染图3，渲染好后的每一层都会存入帧缓存区，然后按照次序绘制到屏幕，当绘制完一层，就会将该层从帧缓存区中移除（以节省空间）

当对图3显示需要进行圆角和裁剪：imageView.clipsToBounds = YES,imageView.layer.cornerRadius=4.0时，渲染完图1，图2，图3，绘制到屏幕上后，还要进行裁减，无法在某一层渲染完成之后，再回过头来擦除/改变其中的某个部分，所以不能按照正常的流程，因此苹果会先渲染好每一层，存入一个缓冲区中，即离屏缓冲区，然后经过层叠加和处理后，再存储到帧缓存去中，然后绘制到屏幕上，这种处理方式叫做离屏渲染

3.如何检测项⽬目中那些图层触发了了离屏渲染问题

image

Instruments的Core Animation 工具中有几个和离屏渲染相关的检查选项：

Color Offscreen-Rendered Yellow

开启后会把那些需要离屏渲染的图层高亮成黄色，这就意味着黄色图层可能存在性能问题。

Color Hits Green and Misses Red

如果shouldRasterize被设置成YES，对应的渲染结果会被缓存，如果图层是绿色，就表示这些缓存被复用；如果是红色就表示缓存会被重复创建，这就表示该处存在性能问题了。

image

上述代码，可以看到1和3产生了离屏渲染

image

4. 离屏渲染有哪些问题

内存开支：开辟离屏缓冲区（大小不超过2.5倍屏幕像素大小）
时间和性能开支：从离屏缓冲区拷贝数据到帧缓冲区，上下文切换耗性能

5. 为什么要要使用离屏渲染

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

6. 常见离屏渲染的几种情况

1) 使用了 mask 的 layer (layer.mask)

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

2) 需要进行裁剪的 layer (layer.masksToBounds / view.clipsToBounds)

layer包含有三层：border，content，background

如果只是设置clipsToBounds或者不会触发离屏渲染，clipsToBounds之后作用在backgroundColor和border上，content上不会有圆角，只有同时设置了clipsToBounds和masksToBounds,并且contents有内容或者内容的背景不是透明的才会触发离屏渲染，并实现content圆角裁减

注：view.clipsToBounds对应layer.cornerRadius

3) 设置了组透明度为 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，减少复杂图层合成

4) 添加了投影的 layer (layer.shadow)

layer本身是一块矩形区域，阴影会作用在所有子layer所组成的形状上，只能等全部子layer画完才能得到阴影，当阴影的图形本身（layer和其子layer）都还没有被组合到一起是不能确定阴影的形状和渲染，我们只能另外申请一块内存，把图形本身先画好，再根据渲染结果的形状，添加阴影到frame buffer，最后把内容画上去。

如果我们能够预先告诉CoreAnimation（通过shadowPath属性）阴影的几何形状，那么阴影可以先被独立渲染出来，不需要依赖layer图形本身，就不需要离屏渲染了，因此可以通过设置shadowPath来优化性能

5) 采用了光栅化的 layer (layer.shouldRasterize)

如果layer的shouldRasterize被设置成YES，在触发离屏绘制的同时，会将光栅化后的内容缓存起来，如果对应的layer及其sublayers没有发生改变，在下一帧的时候可以直接复用。这将在很大程度上提升渲染性能

使用光栅化时，可以开启“Color Hits Green and Misses Red”来检查该场景下光栅化操作是否是一个好的选择。绿色表示缓存被复用，红色表示缓存在被重复创建。

使用注意：

如果layer不能被复用，则不必打开光栅化
如果layer不是静态的，需要被频繁修改，如处于动画中，那开启离屏渲染反而会影响效率
离屏渲染缓存内容有时间限制，缓存内容100ms内没有被使用，那么它就会丢弃，无法进行复用了
离屏渲染缓存空间有限，不能超过2.5倍屏幕像素大小

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

7) 使用高斯模糊（毛玻璃）效果

iOS的控制屏幕显示推送通知页面或者UIVisualEffectView

8） edge antialiasing（抗锯齿）

设置 allowsEdgeAntialiasing 属性为YES(默认为NO)

7. iOS中实现圆角的几种方式

View的layer层参数

/* 设置圆角半径 */
view.layer.cornerRadius = 5;
/* 将边界以外的区域遮盖住 */
view.layer.masksToBounds = YES;

当需要圆角效果时，可以使用一张中间透明图片蒙上去

为UIImage类扩展一个实例函数，仿YYImage做法

- (UIImage *)imageWithCornerRadius:(CGFloat)radius ofSize:(CGSize)size{
    /* 当前UIImage的可见绘制区域 */
    CGRect rect = (CGRect){0.f,0.f,size};
    /* 创建基于位图的上下文 */
    UIGraphicsBeginImageContextWithOptions(size, NO, UIScreen.mainScreen.scale);
    /* 在当前位图上下文添加圆角绘制路径 */
    CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius].CGPath);
    /* 当前绘制路径和原绘制路径相交得到最终裁剪绘制路径 */
    CGContextClip(UIGraphicsGetCurrentContext());
    /* 绘制 */
    [self drawInRect:rect];
    /* 取得裁剪后的image */
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    /* 关闭当前位图上下文 */
    UIGraphicsEndImageContext();
    return image;
}

使用时，对图片进行圆角处理

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)];
/* 创建并初始化UIImage */
UIImage *image = [UIImage imageNamed:@"icon"];
/* 添加圆角矩形 */
image = [image imageWithCornerRadius:50 ofSize:imageView.frame.size];
[imageView setImage:image];

YYImage的处理如下：

- (UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius 
 corners:(UIRectCorner)corners 
 borderWidth:(CGFloat)borderWidth 
 borderColor:(UIColor *)borderColor 
 borderLineJoin:(CGLineJoin)borderLineJoin { 
 if (corners != UIRectCornerAllCorners) { 
 UIRectCorner tmp = 0; 
 if (corners & UIRectCornerTopLeft) tmp |= UIRectCornerBottomLeft; 
 if (corners & UIRectCornerTopRight) tmp |= UIRectCornerBottomRight; 
 if (corners & UIRectCornerBottomLeft) tmp |= UIRectCornerTopLeft; 
 if (corners & UIRectCornerBottomRight) tmp |= UIRectCornerTopRight; 
 corners = tmp; 
 } 
 UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale); 
 CGContextRef context = UIGraphicsGetCurrentContext(); 
 CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height); 
 CGContextScaleCTM(context, 1, -1); 
 CGContextTranslateCTM(context, 0, -rect.size.height); 
 CGFloat minSize = MIN(self.size.width, self.size.height); 
 if (borderWidth < minSize / 2) { 
 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners 
cornerRadii:CGSizeMake(radius, borderWidth)]; 
 [path closePath]; 
 CGContextSaveGState(context); 
 [path addClip]; 
 CGContextDrawImage(context, rect, self.CGImage); 
 CGContextRestoreGState(context); 
 } 
 if (borderColor && borderWidth < minSize / 2 && borderWidth > 0) { 
 CGFloat strokeInset = (floor(borderWidth * self.scale) + 0.5) / self.scale; 
 CGRect strokeRect = CGRectInset(rect, strokeInset, strokeInset); 
 CGFloat strokeRadius = radius > self.scale / 2 ? radius - self.scale / 2 : 0; 
 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:strokeRect byRoundingCorners:corners cornerRadii:CGSizeMake(strokeRadius, 
borderWidth)]; 
 [path closePath]; 
 path.lineWidth = borderWidth; 
 path.lineJoinStyle = borderLineJoin; 
 [borderColor setStroke]; 
}

Core Graphics方式
用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100,100,100,100)];

imageView.image = [UIImage imageNamed:@"xx"];

//开始对imageView进行画图

UIGraphicsBeginImageContextWithOptions(imageView.bounds.size,NO,1.0);

//使用贝塞尔曲线画出一个圆形图

[[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];

[imageView drawRect:imageView.bounds];

imageView.image = UIGraphicsGetImageFromCurrentImageContext();

//结束画图

UIGraphicsEndImageContext();

[self.view addSubview:imageView];

CAShapeLayer 方式

使用CAShapeLayer(属于CoreAnimation)与贝塞尔曲线可以实现不在view的drawRect方法中画出一些想要的图形，CAShapeLayer动画渲染直接提交GPU当中，相较于view的drawRect方法使用CPU渲染而言，其效率高，能大大优化内存使用

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; 
imageView.image = [UIImage imageNamed:@"myImg"]; 
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init]; 
//设置大小 
maskLayer.frame = imageView.bounds; 
//设置图形样子 
maskLayer.path = maskPath.CGPath;
imageView.layer.mask = maskLayer; 
[self.view addSubview:imageView];

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

十离屏渲染

1. OpenGL中，GPU屏幕渲染有以下两种方式

2.什么是离屏渲染

3.如何检测项⽬目中那些图层触发了了离屏渲染问题

4. 离屏渲染有哪些问题

5. 为什么要要使用离屏渲染

6. 常见离屏渲染的几种情况

7. iOS中实现圆角的几种方式

猜你喜欢

热点阅读

十 离屏渲染

1. OpenGL中，GPU屏幕渲染有以下两种方式

2.什么是离屏渲染

3.如何检测项⽬目中那些图层触发了了离屏渲染问题

4. 离屏渲染有哪些问题

5. 为什么要要使用离屏渲染

6. 常见离屏渲染的几种情况

7. iOS中实现圆角的几种方式

猜你喜欢

热点阅读

十离屏渲染