浅谈画面撕裂

什么是帧？

timg

这个玩具想必各位小的时候都玩过，就是画很多具有微小变化的单张画，然后按照顺序连续翻页，就会达到一种“动画”的感觉。

我们的显示器也是这样的，你看显示器上是“动画”，就和上面那个简易玩具一样，显示器也是靠连续播放无数张静态画面来达到一个视觉上的错觉，通过人眼的视觉暂留，让你的眼睛误以为这是动画。

显示器都有一个自己的刷新频率，60Hz的显示器一秒钟就是刷新60张画面，144Hz显示器就是一秒钟刷新144张画面。这当中，每一张画面我们都称之为一帧。

显示器的刷新率是固定的，比如60Hz显示器那么他就是固定每隔1/60秒刷新一帧。

显卡的作用

显示器只是一个显示设备，他并不知道自己要显示什么，所以必须有东西来告诉他你要显示什么画面，这个东西就是显卡，显卡的作用就是渲染“帧”，然后把帧发给显示器，显示器收到帧之后，开始往显示器上显示。

逐行扫描

显示器刷新一帧的时候并不是一次性把整个画面全部刷新出来，他是从上到下一行一行逐渐把图片渲染出来的，具体的是什么情况，一张gif就能很好的说明了。除了逐行扫描外还有隔行扫描，至于区别就是一个是一行一行画，一个是隔着一行画。目前大多数显示器采用的都是逐行扫描。老设备带宽不足只能隔行扫描，现在的新设备基本都是逐行扫描了。

v2-29f53207a38e2a067b224cdf47c6b428_b

也就是说60HZ的显示器并不是说屏幕一秒闪60次画面，而是60HZ的显示器一秒可以逐行扫描60次，你看到的帧是一行一行画出来的，而不是一张一张闪的。

画面撕裂

那么这里就有一个很有趣的情况，因为逐行扫描需要时间这个时间是固定的，但是GPU刷新的时间不是固定的，那么GPU很有可能会抢跑，也就是渲染速度超过显示器。

也就是说，当GPU渲染完了上一帧的数据后，这个时候，显示器还没有完成一次完整的信号扫描，这个时候，GPU又在同一个缓冲区渲染了新的数据，导致老的数据被覆盖，但我们的显示器扫描到的时候，就会把新的数据显示出来。

这就是画面撕裂现象，具体的效果看图你们就知道了

image-20200707093238867

帧生成时间

举个例子，以下帧数单指显卡输出帧，而不是显示器的刷新率

第一组：第一帧与第二帧间隔了0.3秒，第二帧与第三针间隔了0.1秒，第三针与第四帧间隔了0.2秒，第四帧与第五帧间隔了0.4秒。

第二组：每一帧都间隔0.25秒

那么这里帧与帧之间的间隔就被我们称之为帧生成时间。

那么你从面板上看，两者都是5 fps，都是一秒5帧，但是由于前者的帧数不平滑，导致实际上流畅度也不如后者。就是因为帧生成时间不平滑。

解决画面撕裂的方案

双缓冲区+垂直同步

那么为了避免显卡“抢跑”这种事情发生，这时候就有一项技术，叫垂直同步，垂直同步的作用就是将GPU的渲染速度和显示器的扫描信号强制进行同步，也就相当于在帧缓存区加了一把锁，如果这个帧缓存区的数据没有渲染完成，那么就不让显示器，来读取其中的数据，还继续显示上一次的数据，知道这个帧缓存区中的数被渲染完毕之后解锁，显示器才能拿到这个帧缓存区中的数据去进行显示。

这样一方面可以解决画面撕裂现象，因此不会出现缓冲还没画完被覆写的情况了。

掉帧问题

由于开启了垂直同步，当我们的GPU渲染的时间太长的时候，这个时候显示器无法拿到新的渲染数据，那么就会继续显示上一个帧缓存区的数据，这个时候我们看到的还是上一次的画面，新的数据只能等到下一次扫描的的时候在显示了。

image-20200707094940232

掉帧并不等于帧率丢失，而是重复显示同一帧画面。

三重缓冲

顾名思义，就是在GPU中开启三个缓冲区，三个缓冲区，依次交替的进行渲染，极大的降低掉帧的情况，但是也并不能完全解决。