iOS图像撕裂和掉帧问题分析

1. 什么是图像撕裂

图像撕裂是我们所观看到的一张图片发生上下错位,出现了明显的断层,如下图:


image.png

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

2. 如何解决撕裂

双缓冲区

双缓冲区是在帧缓存区中开辟两个缓冲区,一个缓冲区通过视频控制器进行当前帧数据的读取显示,另一个缓冲区进行接收下一帧GPU渲染的图像。两个缓冲区都执行结束,然后再交换缓冲区。

这里解释一下什么是垂直同步Vsync

电子枪从上到下逐行扫描,扫描完成后显示器就呈现一帧画面。然后电子枪回到初始位置进行下一次扫描。为了同步显示器的显示过程和系统的视频控制器,显示器会用硬件时钟产生一系列的定时信号。当电子枪换行进行扫描时,显示器会发出一个水平同步信号(horizonal synchronization),简称 HSync;而当一帧画面绘制完成后,电子枪回复到原位,准备画下一帧前,显示器会发出一个垂直同步信号(vertical synchronization),简称 VSync。显示器通常以固定频率进行刷新,这个刷新率就是 VSync 信号产生的频率。虽然现在的显示器基本都是液晶显示屏了,但其原理基本一致。


image.png

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

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

(2)双缓存区 DoubleBuffering :就是GPU开辟AB两个帧缓冲区,显示到屏幕上的叫屏幕缓冲区,未显示到屏幕上的叫离屏缓冲区,图片渲染的时候,在离屏缓冲区渲染,渲染完成后,两个缓冲区交换。这样渲染完成的图片就可以显示出一张完整的图片了。从而去解决撕裂问题。

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

3. 掉帧

当采用垂直同步Vsync + 双缓存区 DoubleBuffering时又会产生一个新的问题,出现了一个新的问题--->掉帧

特别说明:掉帧不是因为丢失了一帧的数据就叫掉帧!
掉帧指的是重复渲染同⼀帧数据,可以理解为我们所说的屏幕卡顿了。

撕裂和掉帧的取舍?
如果一旦屏幕产生撕裂,用户可能会觉得是手机本身的问题。
掉帧,则只是会使用户感觉手机产生了卡顿,何况掉帧的概率也比较小,并不是时时出现卡顿,所以相比于撕裂,掉帧相对而言是更可取的。

image.png

以60fps举例,每帧画面的处理时间大概在16.7ms(1s/60 ≈16.7ms),当超过这个时间就会出现掉帧,如上图:当接收接收Vsync ,由于cpu/gpu还没处理完图⽚数据(大于了16.7ms) -> 拿不到FrameBuffer ->这个时候屏幕控制器只能显示同一帧的数据,即: 掉帧(重复渲染同⼀帧数据)。

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

总结:屏幕卡顿原因:

  1. CPU/GPU 渲染流⽔线耗时过⻓->掉帧

  2. 垂直同步Vsync + 双缓存区 DoubleBuffering 以掉帧作为代价->解决屏幕撕裂

  3. 三缓存区: 合理充分使⽤CPU/GPU 减少掉帧次数;

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