浅谈图像撕裂与掉帧产生的原因及解决办法

1. 撕裂

1.1 产生原因

• 图像撕裂就是一张图片在显示的时候发生错位，产生断层，如下图所示：

  
  
  断层.png
• 图像的显示流程：图像->CPU对图像进行解码，解码成功转交GPU->GPU对图像进行渲染->存储到帧缓存区(显存)->视频控制器->视频控制器读取帧缓存区信息(位图，视频控制器只是负责帧缓存区与显示器的对应关系)->数模转化(数字信号处理->模拟信号)->(逐行扫描)显示。
• 撕裂形成原因：在视频控制器进行读取显示图像的时候，当某一帧的内容还未读取完成时，GPU就将新一帧的内容提交到帧缓存区并把两个帧缓存区的内容进行更新后，视频控制器就会把新的一帧内容的下半部分显示到屏幕上，从而造成画面撕裂的情况。究其原因，就是视频显示器的显示速度小于GPU处理图形的速度。

1.2 解决方式

1.2.1 垂直同步（Vsync）

• 定义：垂直同步又称场同步（Vertical synchronization），从CRT显示器的显示原理来看，单个像素组成了水平扫描线，水平扫描线在垂直方向的堆积形成了完整的画面。显示器的刷新率受显卡DAC控制，显卡DAC完成一帧的扫描后就会产生一个垂直同步信号。
• 核心：对帧缓存区进行加锁，防止出现撕裂情况。

1.2.2 双缓冲区（DoubleBuffering）

• 定义：双缓冲区是在帧缓存区中开辟两个缓冲区，一个缓冲区通过视频控制器进行当前帧数据的读取显示，另一个缓冲区进行接收下一帧GPU渲染的图像。两个缓冲区都执行结束，然后再交换缓冲区。
• 核心：利用GPU开辟两个缓冲区，异步并行，最后交换两个缓冲区。

1.3 弊端

• 使用以上两种方法可以解决图片撕裂，但是会产生一个新的问题：掉帧。

2. 掉帧

2.1 产生原因

• 在使用垂直同步或者双缓存区时，都有一个等待显示的过程，从而刷新的时间变慢，刷新的频率降低，视觉上看到的图像就会产生掉帧，流程如下图所示：

  
  
  掉帧/卡顿.png

2.2 解决方式

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

3. 屏幕卡顿原因

• CPU/GPU渲染流水线耗时过长->掉帧。
• 垂直同步Vsync+双缓存区DoubleBuffering以掉帧为代价=>屏幕撕裂。
• 三缓冲区：合理使用CPU/GPU，减少掉帧次数。