2-2.渲染流程补充

CPU与GPU

cpu-gpu.png
(其中绿色的是计算单元，橙红色的是存储单元，橙黄色的是控制单元。)
CPU(Central Processing Unit):
现代计算机整个系统的运算核心、控制核心。
GPU(Graphics Processing Unit):
可进行绘图运算工作的专⽤微处理器，是连接计算机和显示终端的纽带。 image.png

根据上图可以了解到，CPU主要是发出指令，指挥者角色，GPU相当于工人，工作着

CPU:适合比较复杂的计算工作
GPU:适合高并发并依赖性比较低的工作

CPU与GPU区别
GPU采用了数量众多的计算单元和超长的流水线，但只有非常简单的控制逻辑并省去了Cache。
而CPU不仅被Cache占据了大量空间，而且还有有复杂的控制逻辑和诸多优化电路，相比之下计算能力只是CPU很小的一部分

计算机显示方式演变

随机扫描显示

随机扫描显示.png
图片是由一系列直线段构成的。通过指示光束从屏幕上的一个点移动到下一个点, 在屏幕上绘制每个线段, 在该点上其x和y坐标定义每个点。画完图后。系统循环回到第一行, 并每秒设计图像的所有行30至60次。

光栅扫描显示

光栅扫描显示.png

光栅扫描显示基于对像素的强度控制, 该像素以屏幕上称为“光栅”的矩形框的形式出现。光栅扫描系统可以存储每个像素位置的信息, 因此适用于真实显示对象。光栅扫描提供每秒60到80帧的刷新速率。
光栅扫描是从屏幕的左上角，一行一行的逐行进行扫描，绘制出图形。类似打印机。

原始光栅扫描显示系统结构

原始光栅扫描显示系统结构.png

常用光栅扫描显示系统结构

常用光栅扫描显示系统结构.png

目前先进的光栅扫描显示系统结构

目前先进的光栅扫描显示系统结构.png

屏幕撕裂

屏幕撕裂.png

产生原因：当得到图像后，GPU进⾏渲染--->帧缓存区⾥ --->视频控制器--->读取帧缓存区信息(位图) ---> 数模转化(数字信号处---->模拟信号) ---->(逐⾏扫描)显示。当第一帧图像扫描到某个位置时，GPU拿到新的数据并存到帧缓冲区，这个时候视频控制器从帧缓冲区扫描的是新拿到的帧的图像。因为我们看到的一张图片其本质是两张图片组合而来，由于视频控制器显示速度小于了GPU处理图形的速度，所以就形成了在我们肉眼看到的断层现象。

屏幕撕裂分析.png

屏幕上的图片上半部分是上一帧的显示数据，而下半部分显示的后面的数据，这样就出现了撕裂

如何去解决：
垂直同步Vsync + 双缓存区 DoubleBuffering
详解:

双缓存区.png

在扫描中增加了一个锁，再扫描完一张图片后再显示下一帧的图片，这样就防止了撕裂，但是在CPU与GPU计算过程到渲染到屏幕上有一个等待时间，所以我们增加了Back Buffer与Primary Buffer双缓冲区.
在屏幕上显示Primary Surface的缓冲结果的时候，Back Buffer中会缓存下一帧的结果，等需要显示下一帧的时候则从Back Buffer中拿到缓冲结果，而同时Primary Surface会进行存储再下一帧的数据，这就形成双缓冲区的结果会依次显示到显示器上，这样就完全解决了撕裂

掉帧

掉帧.png
启用垂直同步+双缓冲区后解决了撕裂问题，但是会出现如上情况：在显示A的时候，CPU与GPU还在处理B的数据，还没有结果给到缓存区，所以在显示下一帧的时候还会显示A,造成了 重复渲染同一帧数据，这个就叫掉帧。所以就又出现了三缓存区。

屏幕卡顿的原因：

1.CPU/GPU渲染流水线耗时过长
2.垂直同步Vsync + 双缓存区 Double Buffering 以掉帧作为代价去解决屏幕撕裂
3.三缓存区：也不能完全解决掉帧，只能减少掉帧次数