屏幕图像渲染原理

第一步骤：顶点着色器（Vertex Shader）

GPU收到图像3D数据模型后，首先通过顶点着色器将3D图像模型计算成屏幕上展示的2D图像模型，并对顶点数据做一些处理。

第二步骤：形状装配（Shape Assembly），又称 图元装配

然后使用图元装配器将这些2D Vertex转成基本的图元信息，图元指屏幕中图像的基本表示单位（点，线，三角形）。

第三步骤：几何着色器（Geometry Shader）

然后将这些图元元素数组传递给几何着色器，由几何着色器根据图像效果生成更细微的图元信息，来表现图像效果。

第四步骤：光栅化（Rasterization）

然后使用光栅化将达到展示效果的图元信息转换成一系列的像素。转换成像素的规则是以三角形图元覆盖在屏幕像素图层上，按照每个像素中心是否在图元三角形的内层，在内侧的都被选中的成为图像像素，根据像素生成片段模型，每个片段模型存储了一个像素渲染所需要的所有信息。

第五步骤：片段着色器（Fragment Shader）

然后将这些片段数据传递给片段着色器，片段着色器会计算每个像素所在的坐标是否超出了屏幕展示之外，对于屏幕之外的像素直接剪裁掉，只留下对展示有用的片段，提示渲染效率。

第六步骤：测试与混合（Tests and Blending）

测试与混合，在一个UI页面中用两套对应关系的树，一个是视图树，一个图层树。对应稍微复杂一点的视图如：按钮，它里面可以设置背景色，标题，这两种属性在显示时是有上下级关系的。而GPU在往帧缓冲区通过画家算法做深度优先遍历不断绘制图形时，是以与视图树对应的图层树中的图层为单位的，所以再将图层绘制到帧缓冲区之前要把图层内的多层属性进行测试与混合。

测试与混合阶段的操作内容是根据每个像素片段的深度和alpha值进行计算，像素深度Z在上面的显示，下面的忽略。像素alpha值小于1的则会对应上下两个深度的像素进行混合计算，得出要展示的像素效果。 

经过这2个阶段，GPU得到了整棵图层树的位图，为后面往帧缓冲区做画家算法深度优先绘制提供了位图数据。

 

帧缓冲区中数据的使用对应的就是屏幕图像显示原理了，屏幕图像显示的原理是和CRT 显示器原理一样的。

CRT电子枪从上到下进行逐行扫描，当一行像素扫描完后电子枪换行到下一行等待显示器时钟发送水平同步信号HSync,等收到HSync信号后开始扫描，扫描完成后换行到下一个行，继续等待水平同步信号。当一帧页面显示完成后，扫描枪会回到屏幕开始的位置等待显示器时钟发送垂直同步信号VSync, 等收到垂直同步信号后先进行双帧缓冲区交互，然后通知CPU，GPU开始渲染下一帧数据，然后再开始新一轮的帧画面的扫描。HSync水平同步信号和VSync垂直同步信号是为了同步显示器的显示过程和系统视频控制器的读取过程的。

显示器以固定的频率进行刷新，这个固定频率就是VSync垂直同步信号的频率。