vSync信号和屏幕成像基本流程分析

背景

最近在做Flutter知识学习的时候，有时间会看到vsync信号，不知道所谓何物，所以专门抽时间简单学习了一下，以此篇文章做个记录，具体内容请查看我的参考资料即可

图像生成到缓冲区

• GPU这个概念是由Nvidia公司于1999年提出的。GPU是显卡上的一块芯片，就像CPU是主板上的一块芯片
• 下面矩形框里面的应该就是显卡了
  CPU和显卡知乎解释

image.png

1. CPU 绘制 View 树，计算好图形数据，提交到系统内存中
2. CPU提交完成以后，通知 GPU 计算完成，系统总线会把数据拷贝到 GPU 的显存里
3. GPU 开始处理数据，以特定的 显卡帧率 把数据写到显卡的缓冲区里
4. 视频控制器收到 垂直同步信号 ，逐行读取帧缓冲区的数据，交给显示器
5. 显卡帧率：即 Frame Rate，单位 fps，是指 gpu 生成帧的速率，如 33 fps，60fps，越高越好。

#单缓冲

单缓冲，也就是只有一个缓冲区（buffer），GPU 向 buffer 中写入数据，屏幕从 buffer 中取图像数据、刷新后显示，理想的情况是 显卡帧率 和 屏幕刷新频率 相等，每绘制一帧，屏幕显示一帧。而实际情况是，二者之间没有必然的大小关系，如果没有同步机制，很容易出现问题。

1. 例如，当显卡帧率大于屏幕刷新频率，屏幕准备刷新第2帧的时候，GPU 已经在生成第3帧了，就会覆盖第2帧的部分数据。
2. 当屏幕开始刷新第2帧的时候，缓冲区中的数据一部分是第3帧数据，一部分是第2帧的数据，显示出来的图像就会出现明显的偏差，也就是撕裂（tearing）。

#双缓冲

为了单缓冲的撕裂和效率问题，双缓冲诞生了。
双缓冲有两个缓冲区：frame buffer、back buffer，GPU 向 back buffer 中写数据，屏幕从 frame buffer 中读数据。这样不仅可以提升效率，而且可以避免因为帧率和刷新率不一致，导致图像数据错乱。
但是这两个 buffer怎么去同步呢？这里就需要 垂直同步信号 了
当开启垂直同步后，就会变成这样：

1. GPU 会等待 垂直同步信号 发出后，复制 back buffer 的数据到 frame buffer里（交换两个缓冲区的内存地址）
2. 渲染下一帧数据，写到缓冲区里

这样看来，帧率大于刷新频率时，帧率就会被迫跟刷新频率保持同步，从而避免撕裂现象。
需要注意的是，双缓冲 + 垂直同步信号仍然不能完全保证正常显示，比如说：

1. 收到垂直同步信号时，如果 GPU 正在往缓冲区里写数据，CPU、GPU 绘制一帧的时间超过16ms，也就是一个 屏幕刷新周期 还没有准备完，这时候两个缓冲区不会发生复制。
2. 当屏幕进入下一个刷新周期时，从 frame buffer 中取出的是上一帧数据，即两个刷新周期显示的是同一帧数据，也就是掉帧（Jank）。

为此，引入了 三缓冲，但是仍然避免不了卡顿和延迟的现象，这里就不详细介绍了，可以自行查阅相关资料

显示器部分

• 一贞数据是"扫描枪"先横向扫描，然后再从下一行开头再扫描一行，一直向下扫描到最后一行，从而完成一贞图像

• 换一行有个短暂空白期，这就是水平消隐,简称 hblank（horizontal blank interval

• 完成一贞后从头开始，有个短暂的空白期，这就是垂直消隐,

• 垂直同步信号:当扫描点回到初始点，在准备扫描下一帧的时候，同时发出垂直同步信号，告诉显卡可以渲染下一帧了。这种情况下，显卡的渲染能力会受到屏幕刷新率 的制约。如果显示器刷新频率是60Hz，显卡帧率最多只会达到60。对于高帧率的显卡，开启垂直同步自然会制约其性能发挥。

image.png

参考

理解 VSync

屏幕刷新原理 重点参考这篇

LCD显示器显像的信号HSync ，VSync