图像撕裂、掉帧

1 图像撕裂

图像撕裂就是一张图片显示的时候，出现了上下断层，如下图：

1.1 出现撕裂的原因

首先我们来看图像显示的过程，CPU解密(从内存copy到显存) ->  GPU进行渲染到帧缓存区里 -> 视频控制器读取帧缓存区信息(位图) -> 数模转换(数字信号->模拟信号) -> 逐行扫描显示图像。

在读取帧缓存区的数据时，当一帧图像扫描到某一个位置，此时，GPU将新的图像渲染到帧缓存区，视频控制器在读取帧缓冲区拿到的是新的位图数据，将其显示到屏幕上，所有造成了图像的撕裂。其根本原因就是GPU渲染的速度大于视频控制器读取的速度，视频控制器还未读取完，帧缓存区数据已经更新。

2 撕裂的解决方案

垂直同步Vsync + 双缓冲区DoubleBuffering

垂直同步

帧缓冲区加锁，保证一帧扫描完，在扫描另一帧，防止撕裂出现

双缓冲区

帧缓冲区开辟两个缓冲区，我们GPU渲染好一帧放到A缓冲区，垂直同步加锁，视频控制器读取A缓冲区的信息直至读取完成、转化显示，A解锁， 与此同时GPU渲染的下一帧放到B缓冲区，B加锁，A扫描完成之后，视频控制器读取B缓冲区的信息直至扫描完成显示，B解锁， 于此往复。

3 掉帧

启用垂直同步Vsync + 双缓冲区DoubleBuffering(解决撕裂) -> 产生掉帧

双缓冲区，虽然接收到Vsync，但是由于CPU、GPU处理速度慢，还没准备好图片数据，视频控制器拿不到FrameBuffer，还是会扫描之前的图像，就会掉帧（重复渲染同一帧数据）

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

屏幕卡顿的原因：

CPU/GPU渲染流水线耗时过长 -> 掉帧

垂直同步Vsync + 双缓冲区DoubleBuffering，以掉帧为代价解决撕裂问题

三缓冲区：合理使用CPU/GPU以减少掉帧次数