2.OpenGL的渲染結(jié)構(gòu)與iOS離屏渲染

一最爬、渲染結(jié)構(gòu)

OpenGL的渲染結(jié)構(gòu)

OpenGL 渲染架構(gòu)

Client：是指常見的iOS代碼和OpenGL API方法，這部分是在CPU中運行
Server：是指OpenGL底層的渲染等處理门岔，是運行在GPU中的
attribute屬性爱致，直接用于頂點著色器，不能直接傳遞到片元著色器寒随，通過GLSL代碼間接傳遞到片元著色器蒜鸡。
Uniform 值（只是一個通道胯努，可傳矩陣，可傳單個值）逢防，可直接傳遞到片元著色器和頂點著色器。
Vertex Shader：頂點著色器（可編程）
**Primitive Assembly **（圖元裝配也叫光柵化）：頂點著色器 -> 光柵化（過程開發(fā)者是不可干預(yù)的） -> Fragment Shader, 只能編程Vertex Shader 和 Fragment Shader蒲讯。
Fragment Shader：片元著色器（可編程）
TexTure Data：紋理數(shù)據(jù) -> 頂點著色器忘朝，片元著色器
渲染一個圖形：比如渲染一個正方形如果是渲染為藍(lán)色那么可以直接使用顏色去處理，不用使用紋理判帮，要填充圖片的話局嘁，才需要使用到紋理。

OpenGL 為什么能夠跨平臺有一個很重要的原因是因為OpenGL是沒有自己的窗口系統(tǒng)的晦墙，每個平臺需要使用OpenGL需要配合OpenGL集成一個自己的窗口系統(tǒng)悦昵。

iOS下的渲染架構(gòu)

Core Animation: 本質(zhì)上可以理解為一個復(fù)合引擎，主要職責(zé)包含：渲染晌畅，構(gòu)建和實現(xiàn)動畫但指。

二、離屏渲染

老生常談的離屏渲染抗楔，無非就是cornerRadius,masksToBounds = YES, 我們來探究一下引起離屏渲染的真正因素棋凳。

先來一段簡單的代碼。


    UIButton *btn1 = [[UIButton alloc] initWithFrame:CGRectMake(100, 50, 100, 100)];
    btn1.layer.cornerRadius = 50;
    [btn1 setImage:[UIImage imageNamed:@"Popup_new1"] forState:UIControlStateNormal];
    btn1.clipsToBounds = YES;
    [self.view addSubview:btn1];

    UIButton *btn2 = [[UIButton alloc] initWithFrame:CGRectMake(100, 200, 100, 100)];
    btn2.layer.cornerRadius = 50;
    [btn2 setBackgroundColor:UIColor.redColor];
    btn2.clipsToBounds = YES;
    [self.view addSubview:btn2];

    UIImageView *imgView1 = [[UIImageView alloc] initWithFrame:CGRectMake(100, 400, 100, 100)];
    imgView1.image = [UIImage imageNamed: @"Popup_new1"];
    imgView1.layer.cornerRadius = 50;
    imgView1.layer.masksToBounds = YES;
    imgView1.backgroundColor = [UIColor redColor];
    [self.view addSubview:imgView1];

    UIImageView *imgView3 = [[UIImageView alloc] initWithFrame:CGRectMake(100, 550 , 100, 100)];
    imgView3.image = [UIImage imageNamed: @"Popup_new1"];
    imgView3.layer.cornerRadius = 50;
    imgView3.layer.masksToBounds = YES;
    [self.view addSubview:imgView3];

運行結(jié)果

image.png

以上現(xiàn)象說明了什么连躏。

設(shè)置了cornerRadius和masksToBounds = YES 不一定會造成離屏渲染.

圖片正常渲染剩岳，沒有離屏的時候流程是 APP -> 幀緩存區(qū) -> 顯示到界面上
離屏渲染： APP -> 離屏緩存區(qū) -> 幀緩存區(qū) -> 顯示

為什么單獨只設(shè)置了背景色或者圖片的時候不會離屏，一般情況下 GPU渲染都會遵循畫家算法入热，由遠(yuǎn)至近拍棕，一層一層的渲染，渲染完一個張后幀緩存區(qū)的數(shù)據(jù)會清空勺良。

畫家算法渲染圖片

我們在切圓角的時候绰播，此時是只有一個圖層，渲染好這張圖片直接切了顯示到界面上就可以了郑气。
如果有多張圖層的時候幅垮，先渲染好的圖層需要等待其他的圖層都渲染完成，如果不另外保存起來尾组，那么之前的數(shù)據(jù)都清空了忙芒，那么久沒有辦法去處理圓角了。這個就叫離屏渲染讳侨，需要多開辟一個離屏緩存區(qū)呵萨，用于存放渲染后的數(shù)據(jù)再統(tǒng)一處理。

比較UIButton 和UIImageView
iOS的button setImage 是添加了一個imgaeView的跨跨，所以就有兩個圖層潮峦，所以在切button的圓角時會造成離屏渲染囱皿，而如果只切button中的imageView圓角，是不會的忱嘹，大家可以自己試一試嘱腥。

cornerRadius+masksToBounds 只有在設(shè)置了content且背景不是透明時，才會出現(xiàn)離屏渲染拘悦。

三齿兔、iOS下常用圓角處理方案

方案一

imageView.clipsToBounds = YES;
imageVieiw.layer.cornerRadius = 4.0;

方案二

- (UIImage *)roundedCornerImageWithCornerRadius: (CGFloat)cornerRadius {
    CGFloat w = self.size.width;
    CGFloat h = self.size.height;
    CGFloat scale = [UIScreen mainScreen].scale;

    if (cornerRadius < 0) {
        cornerRadius = 0;
    } else if (cornerRadius > MIN(w, h)) {
        cornerRadius = MIN(w, h) / 2.;
    }
    UIImage *image = nil;
    CGRect imageFrame = CGRectMake(0.0, 0.0, w, h);
    UIGraphicsBeginImageContextWithOptions(self.size, NO, scale);
    [[UIBezierPath bezierPathWithRoundedRect:imageFrame cornerRadius:cornerRadius] addClip];
    [self drawInRect:imageFrame];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

方案三

- (void)addMaskToBounds: (CGRect)maskBounds cornerRadius:(CGFloat)cornerRadius {
    CGFloat w = maskBounds.size.width;
    CGFloat h = maskBounds.size.height;
    CGSize size = maskBounds.size;
    CGFloat scale = [UIScreen mainScreen].scale;
    CGRect imageRect = CGRectMake(0, 0, w, h);

    if (cornerRadius < 0) {
        cornerRadius = 0;
    } else if (cornerRadius > MIN(w, h)) {
        cornerRadius = MIN(w, h) / 2.;
    }
    UIImage *image = nil;
    UIGraphicsBeginImageContextWithOptions(self.size, NO, scale);
    [[UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:cornerRadius] addClip];
    [image drawInRect:imageRect];
    self.roundImage = UIGraphicsGetImageFromCurrentImageContext();
    self.image = self.roundImage;
    UIGraphicsEndImageContext();
}

常見的觸發(fā)離屏渲染的幾種情況

使?了 mask 的 layer (layer.mask)
需要進(jìn)?裁剪的 layer (layer.masksToBounds / view.clipsToBounds)
設(shè)置了組透明度為 YES，并且透明度不為 1 的 layer (layer.allowsGroupOpacity/layer.opacity)
添加了投影的 layer (layer.shadow*)
采?了光柵化的 layer (layer.shouldRasterize)
繪制了?字的 layer (UILabel, CATextLayer, Core Text 等)