离屏渲染的理解

什么是离屏渲染

Off-Screen Rendering意为离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作

为什么需要离屏渲染

因为在帧缓冲区渲染一个视图到屏幕中就抛弃的机制.所以当我们有多组视图需要组合随后统一处理的时候.需要在屏缓冲区额外开辟一个离屏的缓冲区去记录这些视图.随后统一处理.最后渲染显示出来

离屏渲染.png

怎么产生离屏渲染

我们首先分析圆角产生离屏渲染的情况:

回顾一下.当我们给一个视图添加cornerRadius时.是给哪些视图添加了圆角?

苹果官方的解答是:

Setting the radius to a value greater than 0.0 causes the layer to begin drawing rounded corners on its background. By default, the corner radius does not apply to the image in the layer’s contents property; it applies only to the background color and border of the layer. However, setting the masksToBounds property to YES causes the content to be clipped to the rounded corners.The default value of this property is 0.0.

即背景视图以及边框等视图,不包含contents视图.所以当我们只设置cornerRadius时.不设置masksToBounds为YES.视图视觉上还是没产生圆角

image.png

随后我们对以下四种情况分别做圆角处理
a.按钮视图设置图片.并且设置圆角cornerRadius和裁剪masksToBounds.会产生离屏渲染
b.按钮视图不设置图片.设置圆角cornerRadius和裁剪masksToBounds.不会产生离屏渲染
c.图片视图不设置背景色.设置圆角cornerRadius和裁剪masksToBounds.不会产生离屏渲染
d.图片视图设置背景色.设置圆角cornerRadius和裁剪masksToBounds.会产生离屏渲染

相关代码如下:

    //设置图片会产生离屏渲染
    UIButton * btn1 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    btn1.frame = CGRectMake(100, 30, 100, 100);
    [btn1 setImage:[UIImage imageNamed:@"WX20201127-92813"] forState:UIControlStateNormal];
    [self.view addSubview:btn1];
    btn1.layer.cornerRadius = 50;
    btn1.layer.masksToBounds = YES;

    //只设置背景色不会产生离屏渲染
    UIButton * btn2 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    btn2.frame = CGRectMake(100, 150, 100, 100);
    btn2.backgroundColor = UIColor.grayColor;
    [self.view addSubview:btn2];
    btn2.layer.cornerRadius = 50;
    btn2.layer.masksToBounds = YES;
    
    //对于图片来说.设置背景色以及图片就会产生离屏渲染.不设置就不会
    UIImageView * img1 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"WX20201127-92813"]];
    img1.frame = CGRectMake(100, 270, 100, 100);
    img1.backgroundColor = UIColor.blueColor;
    img1.layer.cornerRadius = 50;
    img1.layer.masksToBounds = YES;
    [self.view addSubview:img1];
    

    UIImageView * img2 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"WX20201127-92813"]];
    img2.frame = CGRectMake(100, 390, 100, 100);
    img2.layer.cornerRadius = 50;
    img2.layer.masksToBounds = YES;
    [self.view addSubview:img2];

效果如下:


image

那什么情况下会产生离屏渲染呢?
我们得出的表象结论是:

1.按钮添加图片以后做圆角处理
2.图片视图添加背景色和图片以后做圆角处理

接下来.我们将img2进行改进: 给tempView不加背景色不会产生离屏渲染.给tempView添加背景色还是会产生离屏渲染

    UIImageView * img3 = [[UIImageView alloc]init];
    img3.frame = CGRectMake(100, 510, 100, 100);
    img3.layer.cornerRadius = 50;
    img3.layer.masksToBounds = YES;
    [self.view addSubview:img3];
    
    UIView *tempView = [[UIView alloc]init];
    tempView.backgroundColor = UIColor.redColor;
    tempView.frame = img3.bounds;
    [img3 addSubview:tempView];
读取缓存区.png

由此我们可以知道:当我们需要对多个图层进行组合处理时就需要使用到离屏渲染技术.将多个图层组合渲染完毕以后放到帧缓冲区.显示到屏幕中

需要注意的是.以上是组合.而不是叠加.

那么我们平时使用的视图有哪些是组合.并且需要做离屏渲染的呢?

2.mask遮罩
3.光栅化
4.组合视图设置透明度
5.阴影
6.渐变
7.绘制文字
8.系统毛玻璃效果

如何避免离屏渲染?

1.针对圆角的离屏渲染的情况.我们可以通过四种方案.
a.使用一个镂空圆角视图盖在上面
b.使用YYImage里面的圆角方法
C.通过CALayerUIBezierPath结合使用的

        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        UIBezierPath.init(roundedRect: imgRect, cornerRadius: self.layer.cornerRadius).addClip()
        self.image?.draw(in: imgRect)
        self.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

2.如果视图不能被复用.并且不是静态.需要被频繁修改的情况不建议开启光栅化.因为这样会开启离屏渲染会影响效率
3.尽量少使用或不使用透明度
4.异步绘制.减少图层

题外话:
1.离屏渲染缓存内容有时间限制.缓存内容100ms内容如果没有被使用.那么它就会丢弃.无法进行复用
2.离屏渲染缓存空间有限.超过2.5倍屏幕像素大小的话.也会失效.且无法进行复用了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容

  • 1. OpenGL中,GPU屏幕渲染有以下两种方式 On-Screen Rendering 当前屏幕渲染: 是GP...
    MrDemon_阅读 324评论 0 0
  • 屏幕显示图像的原理: 高中物理应该学过显示器是如何显示图像的:需要显示的图像经过CRT电子枪以极快的速度一行一行的...
    青火阅读 27,415评论 18 104
  • 圆角不一定会离屏渲染 离屏渲染的原理 当页面需要进行额外的渲染和合并,需要将layer分次渲染,存到离屏缓冲区(o...
    CrazySnow阅读 545评论 0 1
  • 什么是离屏渲染 当图层属性的混合体被指定为在未预合成之前不能直接在屏幕中绘制时,屏幕外渲染就被唤起了。屏幕外渲染并...
    泽泽伐木类阅读 489评论 0 1
  • 离屏渲染定义 离屏渲染的流程如图: GPU把渲染好的的内容存放到离屏渲染缓冲区中,在离屏渲染缓冲区(Offscre...
    DSMars阅读 155评论 0 0