• 图形API初识

OpenGL定义:

• OpenGL(Open Graphics Library)是一个跨编程语言、跨平台的编程图形程序接口，它将计算机的资源抽象成为一个个OpenGL的对象，对这些资源的操作抽象为一个个的OpenGL指令。

OpenGL ES定义:

• OpenGL ES(Open Graphics Library For Embedded Systems)是OpenGL三维图形API的子集，针对手机、PDA和游戏主机等嵌入式设备而设计的，去除了许多不必要的和性能较低的API接口。

DirectX定义:

• DirectX是由很多API组成的，DirectX并不是一个单纯的图形API，最重要的是DirectX是属于Windows上多媒体处理框架。并不支持Windows以外的平台，所以不是跨平台框架，按照性质分类，可以分为四大部分，显示部分、声音部分、输入部分和网络部分。

Metal定义:

• Metal：Apple为游戏开发者推出了新的平台技术Metal,该技术能够为3D图像提高10倍的渲染性能，Metal是Apple为了解决3D渲染而推出的框架

• 图形渲染过程

图形渲染过程.png

• 上图所示为 iOS App 的图形渲染技术栈，App使用 Core Graphics、Core Animation、Core Image 等框架来绘制可视化内容，这些软件框架相互之间也有着依赖关系。这些框架都需要通过 OpenGL或者Metal来调用 GPU进行绘制，最终将内容显示到屏幕之上。

• GPU是一个高度并发计算的硬件单元，特别是处理图形图像的并行计算。并行计算的设计让GPU可以高效的混合图像纹理。比CPU计算的更快，更节约能耗。GPU是一个强有力的图形图像硬件，在显示像素方面起着核心作用。它也连接着CPU。从硬件方面讲就是有些总线把他们连接起来了。也有一些框架如OpenGLS，Core Animation,Core Graphic控制GPU和CPU之间的数据传输。为了让像素能够显示到屏幕上面，有一些工作是需要CPU的。然后数据会被传给GPU，然后数据再被处理最后显示到屏幕上面。

参考资料：iOS像的渲染过程

• OpenGL专业名词解释

OpenGL上下文:

• 在应用程序调用任何 OpenGL的指令之前，首先需要创建一个OpenGL的上下文。这个上下文是一个非常庞大大状态机，保存了OpenGL中的各种状态，这也是OpenGL指令执行的基础。

• OpenGL的函数不管在哪个语言中，都是类似C语言一样的面向过程的函数。其本质是对OpenGL上下文这个庞大的状态机中的某个状态或者对象进行操作。通过对OpenGL指令的封装，可以封装成为一个面向对象的图形API。

• 由于OpenGL上下⽂是⼀个巨大的状态机，切换上下文往往会产生较⼤的开销，但是不同的绘制模块，可能需要使⽤完全独立的状态管理。因此，可以在应⽤程序中分别创建多个不同的上下文，在不同线程中使⽤不同的上下文，上下⽂之间共享纹理、缓冲区等资源。这样的方案，会比反复切换上下⽂，或者⼤量修改渲染状态，更加合理高效。

总结：

1. OpenGL上下文是非常庞大的状态机，是执行指令的基础。
2. OpenGL上下文切换造成的开销大，解决方法：可以在不同的上下文之间共享纹理、缓冲区等资源，这样更加高效。

OpenGL状态机:

• 状态机是一个抽象的模型，表示一组状态变量的集合。每个状态变量可以有各种不同的值，或者只能可以打开或关闭等。可以理解为可以保存状态并根据当前状态进行输入输出的一种机器。

总结：

1. 有记忆功能，能记住当前的状态。
2. 可以接收输入，根据输入的内容和之前保存的状态，修改当前的状态并可以有相应的输出。
3. 进入特殊状态（停机状态）的时候，便不再接收输入，停止工作。

渲染:

• 将图形/图像数据转换成3D空间图像操作叫做渲染(Rendering)。简单说把数据变成可视化也叫绘制。

顶点数组和顶点缓存区:

• 顶点数据是要画的图像的骨架，OpenGL中的图像都是有图元组成。在OpenGL ES中，有3种类型的图元：点、线、三⻆形。在调用绘制方法的时候，直接有内存传入顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组。而性能更高的做法是，提前分配一块显存，将顶点数据预先传入到显存中。这部分显存被称为顶点缓冲区

总结：

1. 顶点数据是由GPU来处理的，GPU访问内存顶点数组存储到内存中。
2. 顶点缓存区在显卡的显存中。
3. 顶点指的是在绘制图形时其顶点位置数据。而这个数据是可以直接存储在数组中或者其缓存在GPU内存中。

管线:

• 管线包含一系列处理阶段，顶点数据和像素数据进行处理，最后组合到一起写到帧缓冲区。在OpenGL下渲染图形会经历一个个节点，这样的操作可以理解为管线。类似流水线上的任务执行。任务之间有先后顺序。管线是显卡在处理数据的时候按照一个固定的顺序来的，而且严格按照这个顺序且这个顺序不能打破。

总结：

管线可以理解成为流水线，固定一个顺序依次执行且顺序不能被打破。

固定管线和存储着色器:

• 在早期的OpenGL版本中，它封装了很多种着色器程序块内置的一段包含了光照、坐标变换、裁剪等等诸多功能的固定shader程序来完成，来帮助开发者完成图形渲染，而开发者只需要传入相应的参数，就能快速完成图形的渲染，只需要调用就可以实现功能。

• 但是由于OpenGL的使⽤场景⾮常丰富，固定管线或存储着⾊器⽆法完成每一 个业务，这时将相关部分开放成可编程。

总结：

固定管线是固定不可编程的，只需传入相应的参数就能完成图形的渲染。由于功能有限，后期相关部分开放成可编程的形式。

着色器程序Shader:

• 着色器Shader是用来实现图像渲染的，用来替代固定渲染管线的可编程程序。

• OpenGL在实际调用绘制函数之前还需要指定一个由shader编译成的着色器程序。常见的着色器主要有顶点着色器（VertexShader）、片段着色器（FragmentShader）/像素着色器（PixelShader）、几何着色器（GeometryShader）、曲面细分着色器（TessellationShader）。片段着色器和像素着色器只是中期OpenGL和DX中的不同叫法而已。直到OpenGL ES 3.0依然只支持顶点着色器和片段着色器这两个最基础的着色器。

• OpenGL在处理shader时，和其他编译器一样。通过编译、链接等步骤，生成了着色器程序（glProgram），着色器程序同时包含了顶点着色器和片段着色器的运算逻辑。在OpenGL进行绘制的时候，首先由顶点着色器对传入的顶点数据进行运算。在通过图元装配，将顶点转换为图元。然后进行光栅化，将图元这种矢量图形，转换为栅格化数据。最后将栅格化数据传入片段着色器中进行运算。片段着色器会对格栅化数据中的每一个像素进行运算，并决定像素的颜色。

总结：

1. 着色器Shader是用来实现图像渲染的，用来替代固定渲染管线的可编程程序。
2. 常见的着色器主要有顶点着色器（VertexShader）、片段着色器（FragmentShader）/像素着色器（PixelShader）、几何着色器（GeometryShader）、曲面细分着色器（TessellationShader）。
3. 在OpenGL进行绘制的时候，首先由顶点着色器对传入的顶点数据进行运算。在通过图元装配，将顶点转换为图元。然后进行光栅化，将图元这种矢量图形，转换为栅格化数据。最后将栅格化数据传入片段着色器中进行运算。片段着色器会对格栅化数据中的每一个像素进行运算，并决定像素的颜色。

顶点着色器:

• 顶点着色器VertexShader是用OpenGL中用于计算顶点属性的程序。一般用来处理图形每个顶点的变换【旋转/平移/投影等】。顶点着色器是逐顶点运算的程序，也就是说每个顶底数据都会执行一次顶点着色器。是并行完成的。主要完成的工作：1. 基于点操作的矩阵乘法位置变换。2. 根据光照公式计算每点的color值。3. 生成或者转换纹理坐标。

总结：

顶点着色器VertexShader是用OpenGL中用于计算顶点属性的程序。并行计算，且运算过程中⽆法访问其他顶点的数据。用来处理图形每个顶点的变换。

片元着色器:

• 片元着色器FragmentShader是用OpenGL中用于计算片段（像素）颜色的程序。一般用来处理图形每个像素点颜色的计算和填充。片元着色器是逐像素运算的程序，也就是说每个像素都会执行一次片段着色器。是并行完成的。通过应用光照值、凹凸贴图、阴影、镜面高光、半透明等处理来计算像素颜色并输出。

总结：

片元着色器FragmentShader是用OpenGL中用于计算片段（像素）颜色的程序。并行计算，且运算过程中⽆法访问其他顶点的数据。用来处理图形每个像素点颜色的计算和填充。

• GLSL（OpenGL Shading Language）着色语言是用来在OpenGL中着色编程的语言，也即开发人员写的短小的自定义程序，他们是在图形卡的GPU上执行的，代替了谷底的渲染管线的一部分，使渲染管线中不同层次具有可编程性。比如视图转换、投影转换等。GLSL的着色器代码分为2个部分Vertex Shader(顶点着色器)和Fragment Shader(片元着色器)。

光栅化:

• 光栅化就是将数据转化成可见像素的过程。具有将图转化为一个个栅格组成的图像的作用，特点是每个元素对应帧缓冲区的一个像素。

• 光栅化就是把顶点数据转换为片元的过程。片元中的每一个元素对应于帧缓冲区的一个像素。其实是一种将几何图元变为二维图像的过程。该过程包含了2个部分的工作。第⼀部分工作：决定窗⼝坐标中的哪些整型栅格区域被基本图元占⽤；第⼆部分⼯作：分配一个颜⾊值和⼀个深度值到各个区域。

• 把物体的数学描述以及与物体相关的颜色信息转换为屏幕上用于对应位置的像素及⽤于填充像素的颜⾊，这个过程称为光栅化。这是⼀个将模拟信号转化为离散信号的过程。

总结：

光栅化就是将数据转化成可见像素的过程。顶点数据转换为片元的过程。该过程包含了2个部分的工作。1、决定窗⼝坐标中的哪些整型栅格区域被基本图元占⽤；2、分配一个颜⾊值和⼀个深度值到各个区域。

纹理:

• 纹理可以理解为2D图片（也有1D和3D纹理），它可以用来添加物体的细节。在OpenGL中习惯叫纹理，而不是图片。
• 纹理也可以被用来存储大量的数据，可以发送到着色器上。

混合:

• 混合Blending是为了渲染不同的透明度级别的一种技术。

变换矩阵:

• 变换矩阵Transfomation是用于图形的平移，缩放，旋转。

投影矩阵:

• 投影矩阵Projection是将3D坐标转换为2D屏幕坐标。

渲染上屏/交换缓冲区:

• 渲染缓冲区一般映射的是系统的资源比如窗口。如果将图像直接渲染到窗口对应的渲染缓冲区，则图像显示到屏幕上。

• 但值得注意的是，如果每个窗口只有一个缓冲区，那么在绘制的过程中屏幕进行刷新，窗口可能显示出不完整的图像。

• 为了解决这个问题，常规的OpenGL程序至少都会有两个缓冲区。显示在屏幕上的称为屏幕缓冲区，没有显示在屏幕上的称为离屏缓冲区。在一个缓冲区渲染完成之后，通常将屏幕缓冲区和离屏缓冲区交换，实现图像在屏幕上显示。

• 由于显示器的刷新一般是逐行进行的，因此为了防止交换缓冲区的时候屏幕上下区域的图像分属于两个不同的帧，因此交换一般会等待显示器刷新完成的信号，在显示器两次刷新间隔中进行交换，这个信号就被称为垂直同步信号，这个技术被称为垂直同步。

• 使用了双缓冲区和垂直同步技术之后，由于总是要等待缓冲区交换之后在进行下一帧的渲染，使得帧率无法完全达到硬件允许的最高水平。为了解决这个问题，引入了三缓冲区技术，在等待垂直同步时，来回交替渲染两个离屏的缓冲区，而垂直同步发生时，屏幕缓冲区和最近渲染完成的离屏缓冲区交换，实现充分利用硬件性能的目的。

总结：

交换缓冲区SwapBuffer可以理解为系统的资源，如窗口。
渲染上屏将图像直接渲染到窗口对应的缓冲区。