OpenGL第三课:离屏渲染

开启离屏渲染


开启

1.大小:屏幕像素的2.5倍!

首先了解CPU和GPU在计算机中的作用

1、CPU(central processing Unit)中央处理器。是一块超大规模的集成电路,是一台计算机的运算核心和控制核心。它的功能主要是解释计算机指令以及计算机软件的中的数据。

2、GPU(Graphics Processing Unit)图形处理器,是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上图像运算工作的微处理器。是连接计算机和显示终端的纽带。

撕裂

完美情况:在60FPS内每扫描一张图就不断显示不断刷新图像。

掉帧就是因为帧缓存区(旧的数据)显示到了屏幕中而帧缓存区已经拿到了下一帧数据的图像,从而显示到屏幕上出现撕裂的现象。

图像撕裂是我们肉眼看到的一张图片上下发生错位,即断层,其本质是拿到图像后,GPU进⾏渲染->帧缓存区⾥ ->视频控制器->读取帧缓存区信息(位图) -> 数模转化(数字信号处->模 拟型号) ->(逐⾏扫描)显示,当第一帧图像扫描到某个位置时,GPU拿到新的数据并存到帧缓冲区,这个时候视频控制器从帧缓冲区扫描的是新拿到的一帧的图像,最后就形成了在我们肉眼看到的断层现象,即我们看到的一张图片其本质是两张图片组合而来,究其原因就是视频控制器显示速度大于了GPU处理图形的速度

解决撕裂

为了解决撕裂,苹果爸爸引入了: 垂直同步Vsync + 双缓存区 DoubleBuffering

(1)垂直同步Vsync:帧缓存区加锁 防⽌出现撕裂情况

(2)双缓存区 DoubleBuffering :就是GPU开辟AB两个帧缓冲区

执行流程就是当A帧缓冲区拿到第一帧数据,给A缓冲区加上一把锁,屏幕控制器从A拿到数据并逐行扫描完成,A帧缓冲区解锁,并且屏幕控制器指向B帧缓冲区,B帧缓冲区加锁并逐行扫描显示,在屏幕控制器扫描B帧缓冲区的时候,A帧缓冲区拿到GPU传过来的新一帧数据,以此类推,解决撕裂问题

掉帧

掉帧即重复渲染同一帧数据。

为了减少掉帧(注意不是解决,掉帧问题只能尽量的减少,而不是解决,三级缓冲区也有可能出现掉帧),引入三级缓存区,三级缓冲区是为了充分利用CPU/GPU的空余时间,开辟ABC三个帧缓冲区,A显示屏幕, B也渲染好,C再从GPU拿取渲染数据,当屏幕缓冲区和帧缓冲区都弄好了,然后视频控制器再指向帧缓冲区的另外一个,再显示,这样交替,达到减少掉帧的情况,这样做就比二级缓冲区多了一个确认的操作

屏幕卡顿的原因:

1、CPU/GPU渲染流水线耗时过长出现掉帧

2、垂直同步Vsync + 双缓存区DoubleBuffering 以掉帧作为代价解决屏幕撕裂的问题

3、三缓存区:合理使用CPU/GPU,减少掉帧次数。

显示器显示的内容来自帧缓冲区,

视频控制器:控制刷新部件,帧缓冲区与显示器的对应关系进行显示

帧缓存区:颜色值(帧缓冲,显存)

内存:连续的计算机存储器,主要存储刷新图像信息;

位图:60 * 60 = 3600 * 4(RGBA)= 1440;

图形渲染显示流程



毛玻璃显示流

什么是离屏渲染

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

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

app进行额外的渲染和合并->offscreen Buffer组合->frame Buffer->屏幕,离屏渲染一个额外的存储空间(offscreen Buffer)渲染完成写入frame Buffer,离屏渲染的大小限制为屏幕像素点的2.5倍。作者:安静的泼猴链接:https://www.jianshu.com/p/67265c9ef2c4来源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

离屏渲染的性能

不开启离屏渲染的逻辑为帧缓冲区(双缓存区)直接显示到屏幕,画完即可丢弃从而节省空间

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

离屏渲染什么时候被触发

使用了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等)

光栅化使用建议

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

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

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

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

离屏渲染解决办法

UI绘制圆角图片,前台进行设置

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

使用混合图层,在layer上方叠加相应mask形状的半透明layer

sublayer.contents=(id)[UIImage imageNamed:@"xxx"].CGImage;

[view.layer addSublayer:sublayer];

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

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

attributes属性:用来传递顶点数据,投影矩阵,模型矩阵,只能传递到顶点着色器。

Uniform值:统一的批次类,Uniform最常见的应用是在顶点渲染中设置变换矩阵,顶点着色器和片段着色器都可以有Uniform变量

Texture纹理数据:纹理坐标给到顶点着色器,桥接给片元着色器。也可以直接给到片元着色器


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