OpenGL 专业名词注解

1：图形API简介

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

• OpenGL ES（OpenGL for Embedded System）是OpenGL三维图形API的子集，针对手机，PDA，游戏主机等嵌入式的设备，去除了许多不必要的性能低的API接口。

• DirectX 是由很多API组成的，他并不是一个单纯的图形API，最重要的是DirectX属于Windows上一个多媒体处理框架，不支持非Windows平台，按性质分为显示部分，声音部分，输入部分，网络部分。

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

OpenGL、OpenGL ES、Metal主要是利用GPU芯片来高效的渲染图像。图形API是iOS开发者唯一接触GPU的方式。

2：OpenGL专业名词注解

1：OpenGL上下文(context)

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

• OpenGL的函数不管在哪个语⾔中，都是类似C语⾔一样的面向过程的函数。本质上都是对OpenGL上下⽂这个庞⼤的状态机中的某个状态或者对象进行操作。通过对 OpenGL指令的封装，可以将OpenGL的相关调⽤封装成为⼀个⾯向对象的图形API。

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

一句话：上下文content，是执行OpenGL指令的预备，是一个庞大的状态机。OpenGL的函数式是面向过程的，可以指令封装成面向对象的图形API。上下文的切换开销很大，不同线程使用不同content，但可以共享纹理，缓冲区等资源。

2：OpenGL状态机

状态机是理论上的⼀种机器。这个⾮常难以理解，所以我们把这个状态机这么理解，状态机描述了⼀对象在其⽣命周期内所经历的各种状态，状态间的转变，发⽣转变的动因，条件及转变中所执⾏的活动。或者说，状态机是⼀种⾏为，说明对象在其⽣命周期中响应事件所经历的状态序列，以及对那些状态事件的响应。

因此具有以下特点：

• 有记忆功能，能记住其当前的状态
• 可以接收输⼊，根据输⼊的内容和⾃⼰的原先状态，修改⾃⼰当前状态，并且可以有对应输出
• 当进⼊特殊状态（停机状态）的时候，变不再接收输⼊，停⽌⼯作；`

1: 状态机在OpenGL可以这么理解，OpenGL可以记录自己的状态（当前所使用的颜色、是否开启了混合功能等）;

2: 可以接输入（当调用OpenGL函数的时候，实际上可以看成OpenGL在接受我们的输入），如我们调用glColor3f，则OpenGL接收到这个输入后会修改自己的“当前颜色”这个状态;

3: OpenGL可以进入停止状态，不再接收输入。在程序退出前，OpenGL总会先停止工作。

一句话：可理解为一个对象在生命周期内，经历的状态，状态间的转变，转变原因，条件，以及转变中的活动。

3：渲染

将图形or图像数据，转化为2D空间图像的操作，叫做渲染。

4：顶点数组和顶点缓冲区

画图⼀般是先画好图像的⻣架，然后再往⻣架⾥⾯填充颜⾊，这对于OpenGL也是⼀样的。

顶点数据就是要画的图像的⻣架，和现实中不同的是，OpenGL中的图像都是由图元组成。

在OpenGLES中，有3种类型的图元：点、线、三⻆形。

那这些顶点数据最终是存储在哪⾥的呢？开发者可以选择设定函数指针，在调⽤绘制⽅法的时候，直接由内存传⼊顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组。

⽽性能更⾼的做法是: 提前分配⼀块显存，将顶点数据预先传⼊到显存当中。这部分的显存，就被称为顶点缓冲区。顶点缓存区在显卡显存中。

顶点指的是我们在绘制⼀个图形时,它的顶点位置数据，⽽这个数据可以直接存储在数组中或者将其缓存到GPU内存中。

5：管线

管线: 在OpenGL下渲染图形,就会有经历⼀个⼀个节点。⽽这样的操作可以理解管线。⼤家可以想象成流⽔线，每个任务类似流⽔线般执⾏，任务之间有先后顺序，** 管线是⼀个抽象的概念**，之所以称之为管线是因为显卡在处理数据的时候是按照⼀个固定的顺序来的，⽽且严格按照这个顺序。就像⽔从⼀根管⼦的⼀端流到另⼀端，这个顺序是不能打破的。

可以理解为：一条固定操作步骤顺序的流水线

6：固定管线/存储着⾊器

在早期的OpenGL版本，它封装了很多种着⾊器程序块，程序块内置的⼀段包含了光照、坐标变换、裁剪等等诸多功能的固定Shader程序来完成，来帮助开发者来完成图形的渲染，⽽开发者只需要传⼊相应的参数,就能快速完成图形的渲染。

类似于iOS开发会封装很多API,⽽我们只需要调⽤,就可以实现功能，不需要关注底层实现原理。但是由于OpenGL的使⽤场景⾮常丰富,固定管线或存储着⾊器⽆法完成每⼀个业务，这时将相关部分开放成可编程。

一个带有参数的API，只需要传入必要的参数即可，后期可自定义了。

7：着⾊器程序(Shader)

全⾯的将固定渲染管线架构变为了可编程渲染管线。

OpenGL在实际调⽤绘制函数之前，还需要指定⼀个由Shader编译成的着⾊器程序。

常⻅的着⾊器主要有：
顶点着⾊器（VertexShader），⽚段着⾊器（FragmentShader）/像素着⾊器（PixelShader），⼏何着⾊器（GeometryShader），曲⾯细分着⾊器(TessellationShader)。

⽚段着⾊器和像素着⾊器只是在OpenGL和DX中的不同叫法⽽已。可惜的是，直到OpenGLES 3.0，依然只⽀持了顶点着⾊器和⽚段着⾊器这两个最基础的着⾊器。OpenGL在处理shader时，和其他编译器⼀样。通过编译、链接等步骤，⽣成了着⾊器程序（glProgram），着⾊器程序同时包含了顶点着⾊器和⽚段着⾊器的运算逻辑。

在OpenGL进⾏绘制的时候，⾸先由顶点着⾊器对传⼊的顶点数据进⾏运算，再通过图元装配，将顶点转换为图元，然后进⾏光栅化，将图元这种⽮量图形，转换为栅格化数据。最后，将栅格化数据传⼊⽚段着⾊器中进⾏运算。⽚段着⾊器会对栅格化数据中的每⼀个像素进⾏运算，并决定像素的颜⾊。

着色流程

8：顶点着⾊器(VertexShader)

• ⼀般⽤来处理图形每个顶点变换(旋转/平移/投影等)；
• 顶点着⾊器是OpenGL中⽤于计算顶点属性的程序。顶点着⾊器是逐顶点运算的程序，也就是说每个顶点数据都会执⾏⼀次顶点着⾊器，当然这是并⾏的，并且顶点着⾊器运算过程中⽆法访问其他顶点的数据。
• ⼀般来说典型的需要计算的顶点属性主要包括顶点坐标变换、逐顶点光照运算等等。顶点坐标由⾃身坐标系转换到归⼀化坐标系的运算，就是在这⾥发⽣的。

9：⽚元/片段/像素着⾊器程序(FragmentShader)

• ⼀般⽤来处理图形中每个像素点颜⾊计算和填充。
• ⽚段着⾊器是OpenGL中⽤于计算⽚段（像素）颜⾊的程序。⽚段着⾊器是逐像素运算的程序，也就是说每个像素都会执⾏⼀次⽚段着⾊器，当然也是并⾏的。

10：GLSL(OpenGL Shading Language)

GLSL着色语⾔是⽤来在OpenGL中着⾊编程的语⾔，是在图形卡的GPU上执⾏的。代替了固定的渲染管线的⼀部分，使渲染管线中不同层次具有可编程性。⽐如：视图转换、投影转换等。GLSL(GL Shading Language)的着⾊器代码分成2个部分: Vertex Shader(顶点着⾊器)和Fragment(⽚断着⾊器)。

11：光栅化(Rasterization)

把顶点数据转换为⽚元的过程，具有将图转化为⼀个个栅格组成的图象的作⽤，特点是每个元素对应帧缓冲区中的⼀像素。

• 光栅化就是把顶点数据转换为⽚元的过程，⽚元中的每⼀个元素对应于帧缓冲区中的⼀个像素。
• 光栅化其实是⼀种将⼏何图元变为⼆维图像的过程。该过程包含了两部分的⼯作。第⼀部分⼯作：决定窗⼝坐标中的哪些整型栅格区域被基本图元占⽤；第⼆部分⼯作：分配⼀个颜⾊值和⼀个深度值到各个区域。光栅化过程产⽣的是⽚元。
• 把物体的数学描述以及与物体相关的颜⾊信息转换为屏幕上⽤于对应位置的像素及⽤于填充像素的颜⾊，这个过程称为光栅化，这是⼀个将模拟信号转化为离散信号的过程。

12：纹理(Texture)

纹理可以理解为图⽚。 在渲染图形时需要在顶点围成的区域中填充图⽚，使得场景更加逼真。⽽这⾥使⽤的图⽚，就是常说的纹理。只是在OpenGL，我们更加习惯叫纹理，⽽不是图⽚。

13：混合(Blending)

在测试阶段之后，如果像素依然没有被剔除，那么像素的颜⾊将会和帧缓冲区中颜⾊附着上的颜色进⾏混合，混合的算法可以通过OpenGL的函数进行指定。但是OpenGL提供的混合算法有限。如果需要更加复杂的混合算法，一般可以通过片段着⾊器进⾏实现，当然性能会⽐原⽣的混合算法差⼀些。

14：变换矩阵(Transformation)

例如图形想发⽣平移,缩放,旋转变换.就需要使⽤变换矩阵。

15：投影矩阵(Projection)

⽤于将3D坐标转换为⼆维屏幕坐标,实际线条也将在⼆维坐标下进⾏绘制。

16：视口、窗口

视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。

窗口的坐标是逻辑坐标，与设备无关，可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。

对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。

程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。视口是设备自己的坐标，窗口是逻辑坐标。

17：渲染上屏/交换缓冲区(SwapBuffer)

渲染缓冲区⼀般映射的是系统的资源，⽐如窗⼝。如果将图像直接渲染到窗⼝对应的渲染缓冲区，则可以将图像显示到屏幕上。

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

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

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

使⽤了双缓冲区和垂直同步技术之后，由于总是要等待缓冲区交换之后再进⾏下⼀帧的渲染，使得帧率⽆法完全达到硬件允许的最⾼⽔平。为了解决这个问题，引⼊了三缓冲区技术，在等待垂直同步时，来回交替渲染两个离屏的缓冲区，⽽垂直同步发⽣时，屏幕缓冲区和最近渲染完成的离屏缓冲区交换，实现充分利⽤硬件性能的⽬的。

18：CPU and GPU扮演的角色

• CPU(Central Processing Unit)：现代计算机整个系统的运算核心、控制核⼼；
• GPU(Graphics Processing Unit)：可进行绘图运算⼯作的专⽤微处理器，是连接计算机和显示终端的纽带；

CPU：可处理逻辑复杂，依赖性高的task，有并发的能力；
GPU：计算单元，高并发，不能处理依赖性高的task，使用GLSL语言；

19：iOS 渲染框架

• UIKIt 主要负责 组建的布局，事件的相应（UIResponder）（事件响应穿过视图树）。
• Core Animation 复合引擎；尽快组合屏幕上的可视内容，这些可视内容可被分解成独立的图层CALayer，图层存储在一个叫做图层树的体系中。本质上CALayer是用户看到屏幕上一切的基础。
• Core Graphics 基于Quartz高级绘图引擎，主要用于运行时绘制图像。
• Core Image 处理运行前创建的图像；有一些列的图像过滤器，对已存在的图像进行高效处理，大部分会在GPU中完成工作。
• OpenGL ES
• Metal Core Animation、Core Image、SceneKit、SpriteKit 等等渲染框架都是构建于 Metal 之上的。

20：Core Animation渲染流水线

Core Animation渲染流水线
事实上，app 本身并不负责渲染，渲染则是由一个独立的进程负责，即 Render Server 进程。

App 通过 IPC 将渲染任务及相关数据提交给 Render Server。Render Server 处理完数据后，再传递至 GPU。最后由 GPU 调用 iOS 的图像设备进行显示。

Core Animation 流水线的详细过程如下：

• 首先，由 app 处理事件（Handle Events），如：用户的点击操作，在此过程中 app 可能需要更新 视图树，相应地，图层树 也会被更新。
• 其次，app 通过 CPU 完成对显示内容的计算，如：视图的创建、布局计算、图片解码、文本绘制等。在完成对显示内容的计算之后，app 对图层进行打包，并在下一次 RunLoop 时将其发送至 Render Server，即完成了一次 Commit Transaction 操作。
• Render Server 主要执行 Open GL、Core Graphics 相关程序，并调用 GPU
  GPU 则在物理层上完成了对图像的渲染。
• 最终，GPU 通过 Frame Buffer、视频控制器等相关部件，将图像显示在屏幕上。

对上述步骤进行串联，它们执行所消耗的时间远远超过 16.67 ms，因此为了满足对屏幕的 60 FPS 刷新率的支持，需要将这些步骤进行分解，通过流水线的方式进行并行执行。

Render server