图形API简介

OpenGL(Open Graphics Library) 是一个跨编程语言，跨平台的编程语言，跨平台的编程图形程序接口，它将计算机的资源抽象称为一个个OpenGL的对象，对这些资源的操作抽象为一个个的OpenGL指令
OpenGL ES (OpenGL for Embedded Systems) 是OpenGL三维图形API的子集，针对手机、PDA和游戏主机等嵌入式设备而设计，去除了许多不必要和性能较低的API接口。
DirecX 是由很多API组成的，DirecX并不是一个单纯的图形API,最重要的是DirecX是属于Windows上一个多媒体处理框架，并不支持Windows以外的平台，所以不是跨平台框架，按照性质分类，可以分为四大部分、显示部分、声音部分、输入部分和网络部分。
Metal 为游戏开发者推出了新的平台技术，该技术能够为3D图像提高10倍的渲染性能，metal是Apple为了解决3D渲染而推出的框架

图形API目的是解决什么问题

简单来说就是实现图形的底层渲染
A. 比如在游戏开发中，对于游戏场景/游戏人物的渲染
B. 比如在音视频开发中，对于视频解码后的数据渲染
C. 比如在地图引擎，对于地图上的数据渲染
D. 比如在动画中，实现动画的绘制
E. 比如在视频处理中，对于视频加上滤镜效果
OpenGL/OpenGL ES/Metal在任何项目中解决问题的本质就是利用GPU芯片来高效渲染图形图像。
图形API是ios开发者唯一接近GPU的方式。

学习要求：

OpenGL 阶段：

熟悉图形图像API中的专有名词
熟悉图形图像常用处理手段，比如深度测试等。
熟悉图形渲染流程
熟悉API使用

OpenGL ES 阶段：

熟悉掌握GLSL语法
熟悉GLKit框架
OpenGL ES渲染流程
能通过案例灵活运用API

Metal 阶段：

熟悉Metal shading language
熟悉Metal kit
熟悉Metal渲染流程
能通过案例灵活运用API

OpenGL 专业名词解析

OpenGL 上下文[context]
- 在应用程序调用任何OpenGL的指令之前，需要安排首先创建一个OpenGL的上下文。这个上下文是一个非常庞大的状态机，保存了OpenGL中的各种状态，这也是OpenGL指令执行的基础
- OpenGL的函数不管在那个语言中，都是类似C语言一样的面向过程的函数，本质上都是OpenGL上下文这个庞大的状态机中的某个状态或者对象进行操作，当然你首先把这个对象设置为当前对象。因此，通过对OpenGL指令的封装，是可以将OpenGL的相关调用封装成为一个面向对象的图形API的
- 由于OpenGL上下文是一个巨大的状态机，切换上下文往往会产生较大的开销，但是不同的绘制模块，可能需要使用完全独立的状态管理。因此，可以在应用程序中分别创建多个不同的上下文，在不同线程中使用不同的上下文，上下文之间共享纹理，缓冲区等资源，这样的方案，会比反复切换上下文，或者大量修改渲染状态，更加合理高效的。
OpenGL状态机
状态机是理论上的一种机器.这个⾮常难以理解.所以我们把这个状态机这么理解.状态机描述了⼀个对象在其⽣命周期内所经历的各种状态，状态间的转变，发⽣转变的动因，条件及转变中所执行的活动。或者说，状态机是⼀种行为，说明对象在其生命周期中响应事件所经历的状态序列以及对那些状态事件的响应。因此具有以下特点:
有记忆功能，能记住其当前的状态
可以接收输⼊，根据输⼊的内容和⾃己的原先状态，修改⾃己当前状态，并且可以有对应输出
当进⼊特殊状态(停机状态)的时候，变不再接收输⼊，停止⼯作;
类推到OpenGL 中来,可以这么理解:
- OpenGL可以记录⾃己的状态(如当前所使⽤的颜色、是否开启了混合功能等)
- OpenGL可以接收输⼊(当调⽤OpenGL函数的时候，实际上可以看成 OpenGL在接收我们的输⼊)，如我们调⽤glColor3f，则OpenGL接收到这个输⼊后会修改⾃己的“当前颜⾊”这个状态;
- OpenGL可以进⼊停⽌状态，不再接收输入。在程序退出前，OpenGL总会先停⽌工作的;
渲染:将图形/图像数据转换成3D空间图像操作叫做渲染(Rendering).
顶点数组(VertexArray)和顶点缓冲区(VertexBuffer)
- 画图⼀般是先画好图像的骨架，然后再往骨架⾥面填充颜⾊，这对于 OpenGL也是⼀样的。顶点数据就是要画的图像的⻣架，和现实中不同的是，OpenGL中的图像都是由图元组成。在OpenGLES中，有3种类型的图元:点、线、三⻆角形。那这些顶点数据最终是存储在哪里的呢?开发者可以选择设定函数指针，在调⽤绘制方法的时候，直接由内存传⼊顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组。⽽性能更⾼的做法是，提前分配⼀块显存，将顶点数据预先传⼊到显存当中。这部分的显存，就被称为顶点缓冲区
- 顶点指的是我们在绘制⼀个图形时,它的顶点位置数据.⽽这个数据可以直接存储在数组中或者将其缓存到GPU内存中
管线:在OpenGL 下渲染图形,就会有经历一个一个节点.⽽这样的操作可以理解管线.⼤大家可以想象成流⽔线.每个任务类似流⽔线般执行.任务之间有先后顺序. 管线是⼀个抽象的概念，之所以称之为管线是因为显卡在处理数据的时候是按照⼀个固定的顺序来的，⽽且严格按照这个顺序。就像⽔从⼀根管子的一端流到另一端，这个顺序是不能打破的
固定管线/存储着色器
- 在早期的OpenGL 版本,它封装了很多种着⾊器程序块内置的一段包含了光照、坐标变换、裁剪等等诸多功能的固定shader程序来完成,来帮助开发者来完成图形的渲染. ⽽开发者只需要传⼊相应的参数,就能快速完成图形的渲染. 类似于iOS开发会封装很多API,而我们只需要调用,就可以实现功能.不需要关注底层实现原理
- 但是由于OpenGL 的使⽤场景⾮常丰富,固定管线或存储着⾊器⽆法完成每⼀个业务.这时将相关部分开放成可编程

固定管线/存储着⾊器

着⾊器程序Shader
- 就全⾯的将固定渲染管线架构变为了可编程渲染管线。因此，OpenGL在实际调⽤绘制函数之前，还需要指定一个由shader编译成的着⾊器程序。常⻅见的着⾊器主要有顶点着⾊器(VertexShader)，⽚元着⾊器 (FragmentShader)/像素着⾊器(PixelShader)，⼏何着⾊器 (GeometryShader)，曲⾯细分着⾊器(TessellationShader)。⽚元着色器和像素着⾊器只是在OpenGL和DX中的不同叫法⽽已。可惜的是，直到 OpenGLES 3.0，依然只⽀支持了顶点着⾊器和⽚元着⾊器这两个最基础的着⾊器。
- OpenGL在处理shader时，和其他编译器一样。通过编译、链接等步骤，⽣成了着⾊器程序(glProgram)，着⾊器程序同时包含了顶点着⾊器和片段着⾊器的运算逻辑。在OpenGL进⾏绘制的时候，⾸首先由顶点着⾊器对传⼊的顶点数据进行运算。再通过图元装配，将顶点转换为图元。然后进⾏光栅化，将图元这种⽮量图形，转换为栅格化数据。最后，将栅格化数据传⼊⽚段着⾊器中进⾏运算。⽚元着⾊器会对栅格化数据中的每一个像素进行运算，并决定像素的颜色
顶点着⾊器VertexShader
- 一般⽤来处理图形每个顶点变换(旋转/平移/投影等)
- 顶点着色器是OpenGL中⽤于计算顶点属性的程序。顶点着⾊器是逐顶点运算的程序，也就是说每个顶点数据都会执行一次顶点着⾊器，当然这是并行的，并且顶点着⾊器运算过程中⽆法访问其他顶点的数据
- 一般来说典型的需要计算的顶点属性主要包括顶点坐标变换、逐顶点光照运算等等。顶点坐标由自身坐标系转换到归一化坐标系的运算，就是在这里发生的。
片元着⾊器程序FragmentShader
- 一般⽤来处理图形中每个像素点颜⾊计算和填充
- 片段着⾊器是OpenGL中⽤于计算⽚元(像素)颜⾊的程序。片段着⾊器是逐像素运算的程序，也就是说每个像素都会执行一次⽚段着⾊器，当然也是并行的
GLSL(OpenGL Shading Language)
- OpenGL着色语言 （OpenGL Shading Language）是用来在OpenGL中着色编程的语言，也即开发人员写的短小的自定义程序，他们是在图形卡的GPU（Graphic Processor Unit图形处理单元）上执行的，代替了固定的渲染管线的一部分，使渲染管线中不同层次具有可编程性。比如：视图转换、投影转换等。GLSL(GL Shading Language)的着色器代码分成2个部分：Vertex Shader(顶点着色器)和Fragment(片元着色器)
光栅化Rasterization
- 是把顶点数据转换为片元的过程，具有将图转化为一个个栅格的作用，特点是每个元素对应帧缓冲区的一像素。
- 光栅化就是把顶点数据转换为片元的过程。片元中的每一个元素对应于帧缓冲区中的一个像素。
- 光栅化其实是一种将几何图元变为二维图像的过程。该过程包含了两部分的工作，第一部分工作：决定窗口坐标中的哪些整型栅格区域被基本图元占用；第二部分工作：分配一个颜色值和一个深度值到各个区域，光栅化过程产生的片元。
- 把物体的数学描述以及与物体相关的颜色信息换为屏幕上用于对应位置的像素及用于填充像素的颜色，这个过程称为光栅化，这是一个将模拟信号转化为离散信号的过程。
纹理
- 纹理可以理解为图片，大家在渲染图形时需要在其编码填充图片。为了使得场景更加逼真。而这里使用的图片。就是常说的纹理。但是在OpenGL，我们更加习惯叫纹理，而不是图片。
混合 （Blending）
- 在测试阶段之后，如果像素依然没有被剔除，那么像素的颜色将会和帧缓冲区中颜色附着上的颜色进行混合，混合的算法可以通过OpenGL的函数进行指定。但是OpenGL提供的混合算法是有限的。如果需要更加复杂的混合算法，一般可以通过像素着色器进行实现，当然性能会比原生的混合算法差一些。
变换矩阵 （Transformation）
- 例如图形想发生平移，缩放，旋转变换，就需要使用变换矩阵。
投影矩阵 Projection
- 用于将3D坐标转换为二维屏幕坐标。实际线条也将在二维坐标下进行绘制。
渲染上屏/交换缓冲区（SwapBuffer）
- 渲染缓冲区一般映射的是系统的资源比如窗口。如果将图像直接渲染到窗口对应的缓冲区，则可以将图像显示到屏幕上。
- 但是，值得注意的是，如果每个窗口只有一个缓冲区，那么在绘制过程中屏幕进行了刷新，窗口可能显示不完整的图像。
- 为了解决这个问题，常规的OpenGL程序至少有两个缓冲区。显示在屏幕上的称为屏幕缓冲区，没有显示的称为离屏缓冲区。在一个缓冲区渲染完成之后，通过将屏幕缓冲区和离屏缓冲区交换，实现图像在屏幕上的显示。
- 由于显示器的刷新一般是逐行进行的，因此为了防止交换缓冲区的时候屏幕上下区域的图像分属于两个不同的帧，因此交换一般会等待显示器刷新完成的信号，在显示器两次刷新的间隔中进行交换，这个信号就被称为垂直同步信号，这个技术称为垂直同步。
- 使用了双缓冲区和垂直同步技术之后，由于总是要等待缓冲区交换之后再进行下一帧的渲染，使得帧率无法完全达到硬件允许的最高水平。为了解决这个问题，引入了三缓冲区技术，在等待垂直同步时，来回交替渲染两个离屏的缓冲区，而垂直同步发生时，屏幕缓冲区和最近渲染完成的离屏缓冲区交换，实现充分利用硬件性能的目的。

ios开发者需要学习OpenGL/OpenGL ES

顶点数据是由CPU/GPU来处理？
顶点缓存区：区域（不在内存！->显卡显存中。）
片元着色器
像素着色器
片元函数
GPUImage

坐标系.png

[-1,1]标准化设备坐标系（NDC）

局部空间（物体空间坐标系）
世界空间（世界空间坐标系）
观察空间（照相机坐标系）
裁剪空间（裁剪坐标系）
屏幕空间（屏幕2D坐标系）

物体/世界/照相机空间->右手系
规范化设备坐标：左手系。
x,y,z => 0,1,2
注意OpenGL中坐标系 OpenGL中的物体，世界，照相机坐标系都属于右手坐标系，而规范化设备坐标系（NDC）属于左手坐标系。笼统的说OpenGL使用右手坐标系是不合适的

坐标系

OpenGL希望每次顶点着色后，我们的可见顶点都为标准化设备坐标系（Normalized Device Coordinate, NDC）。也就是说每个顶点的x,y,z都应该在-1到1之间，超出这个范围的顶点将是不可见的。
通常情况下我们会自己设定一个坐标系范围，之后再在顶点着色器中将这些坐标系变换为标准化设备坐标，然后这些标准化设备坐标传入光栅器（Rasterizer）,将他们变换为屏幕上的二维坐标和像素。

将坐标变换为标准化设备坐标，接着再转化为屏幕坐标的过程通常是分布进行的，也是类似于流水线那样。在流水线中，物体的顶点在最终转化为屏幕坐标之前还会被变换到多个坐标系系统（Coordinate System）。将物体的坐标变到几个过渡坐标系（Intermediate Coordinate System）的优点在于在这些特定的坐标系统中，一些操作或运算更加方便和容易，这一点很快就变得明显。对我们来说比较重要的总共有5个不同的坐标系统。

局部空间（local Space）或者称为物体空间（Object Space）
世界空间（World Space）
观察空间（View Space）或者称为视觉空间（Eye Space）
裁剪空间（Clip Space）
屏幕空间（Screen Space）

这是一个顶点在最终被转化为片段之前需要经历的所有不同的状态。为了将坐标从一个坐标系变换到另一个坐标系，我们需要用到几个变换矩阵，最重要的几个分别是模型(Model)、观察(View)、投影(Projection)三个矩阵。
物体顶点的起始坐标在局部空间(Local Space)，这里称为局部坐标(Local Coordinate)，他在之后在变成世界坐标(World Coordinate),观察坐标(View Coordinate),裁剪坐标(Clip Coordinate)，并最后转为屏幕坐标(Screen Coordinate)
的形式结束。

在3D图形中常用的坐标系

世界坐标系
物体坐标系
摄像机坐标系
惯性坐标系
、
世界坐标系：世界坐标系是系统的绝对坐标系，在没建立用户坐标系之前画面上所有的点的坐标都可以在该坐标系的原点来确定各自的位置。世界坐标系始终是固定不变的。

物体坐标系：每个物体都有他独立的坐标系，当物理移动或者改变方向时。该物体相关联的坐标系将随之移动或改变方向。
物体坐标系是以物体本身而言，比如，我先向你发指令，”向前走一步“，是向你的物体坐标系发指令。我并不知道你会往哪个绝对的方向移动。比如说，当你开车的时候，有人会说向左转，有人会说向东。但是，向左转是物体坐标系的概念，而向东则是世界坐标系概念。
在某种情况下，我们可以理解物体坐标系为模型坐标系。因为模型顶点的坐标都是在模型坐标系中描述的。

照相机坐标系：照相机坐标系是和观察者密切相关的坐标系。照相机坐标系和屏幕坐标系相似，差别在于照相机坐标系处于3D空间中，而屏幕坐标系在2D平面里。

照相机坐标系.jpg

惯性坐标系：指的是物体坐标系到世界坐标系的”半途“。惯性坐标系的原点和物体坐标原点重合，但惯性坐标系的轴平行于世界坐标系的轴。

为什么要引入惯性坐标系?因为物体坐标系转换到惯性坐标系只需要旋转，从惯性坐标系转换到世界坐标系只需要平移。

惯性坐标系.jpg

坐标转换的全局图

OpenGL最终的渲染设备是2D的，我们需要将3D表示的场景转换为最终的2D形式，前面使用模型变换和视觉变换将物体坐标转到照相机坐标系后，需要进行投影变换，将坐标从照相机坐标系转换为裁剪坐标系，经过透视除法后，变换到规范化设备坐标系(NDC),最后进行视口变换后，3D坐标才变换到屏幕上的2D坐标，这个过程入下图：

坐标系变换

在上面的图中，注意，OpenGL只定义了裁剪坐标系、规范化设备坐标系、屏幕坐标系，而局部坐标系、世界坐标系、照相机坐标系都是为了方便用户设计而自定义的坐标系，他们的关系如下图：

用户自定义变换&OpenGL变换.jpg

图中左边的过程包括模型变换、视变换、投影变换，这些变换可以由用户根据需要自行制定，这些内容在顶点着色器中完成；
图中右边的两个步骤，包括透视除法、视口变换，这两个步骤是OpenGL自行执行的，在顶点着色器处理后的阶段完成。

将坐标系统组合在一起

我们为上述的每一个步骤创建一个变换矩阵：模型矩阵、观察矩阵、投影矩阵。一个顶点坐标将会根据根据以下过程被变换到裁剪坐标
Vclip = Mpro * Mview * Mmodel * Vlocal
这一系列的变换从右往左读。最后顶点应该被赋值到顶点着色器中的gl_postion,OpenGL将会自动进行透视除法和裁剪

OpenGL 然后对裁剪坐标执行透视除法从而将他们变换到标准化设备坐标。OpenGL会使用glViewPort内部的参数来将标准化设备坐标映射到屏幕坐标，每个坐标关联一个屏幕上的点。这个过程称为视口变换

模型变换

局部坐标系(模型坐标系)是为了方便构造模型而设立的坐标系，建立模型时我们无需关心最终对象显示在屏幕那个位置。
模型变换的主要目的是通过变换使得用顶点属性定义或者3d建模软件构造的模型，能够按照需要，通过缩小、平移等操作放置到场景中合适的位置，通过模型变换后，物体放置在一个全局的世界坐标系中，世界坐标系是所有物体交互的一个公共坐标系

视变换

视变换是为了方便观察场景中物体而建立的坐标系，在这个坐标系中相机是个假设的概念，是为了便于计算而引入的。相机坐标系中的坐标，就是从相机的角度来解释世界坐标系中的位置

视变换.jpg

OpenGL中相机始终位于原点，指向 -Z轴，而以相反的方式来调整场景中物体，从而达到相同的观察效果。例如要观察-Z轴方向的一个立方体的右侧面，可以有两种方式：

1.立方体不懂，让相机绕着+y轴，旋转+90度，此时相机镜头朝向立方体右侧面，实现目的

相机不动，让立方体绕着+y轴，旋转-90度，此时也能实现同样的目的。注意这时相机没有旋转。

着色器渲染流程

着色器渲染流程.

OpenGL的渲染架构

OpenGL的渲染架构.png

Client:表示CPU上写的代码,比如OpenGL API和C/C++代码
Server:表示调用GPU芯片
Attributes(ins):比如经常变化的值，比如：顶点坐标，颜色，位移，纹理坐标，光照法线。(只能传到顶点着色器，不能传到片元着色器，通过GLSL代码间接传到片元着色器)
Uniforms:比较统一的，不太变化的。比如发生旋转，如何实现的？每个顶点 * 旋转矩阵。所以旋转矩阵就是uniforms ，还有就是转换矩阵（可以传到顶点着色器和片元着色器）
Vertex Shader(顶点着色器)：主要接受Attribute和Uniforms参数Texture Data传到顶点着色器没有任何意义。
Fragment Shader(片元着色器)：Attributes是跟片元着色器没有直接通道的。如果传进来了一个颜色值，需要先传给顶点着色器，然后间接传给片元着色器。

投影

投影.png

平面图形：-> 正投影没有远小近大。
立体图形： -> 透视投影，有远小近大效果

正投影

正投影.png

透视投影

透视投影.png

透视投影算法.png

存储着色器初始化

GLShaderManager的初始化
GLShaderManager shaderManager;
shaderManager.InitializeStockShaders();

单元着色器

GLShaderManager::UserStockShader(GLT_SHADER_IDENTITY,GLfloat vColor[4]);
参数1:存储着色器种类-->单元着色器
参数2：颜色
使用场景：绘制默认OpenGL坐标(-1,1)下图形，图形所有片段都会以一种颜色填充。

平面着色器

GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLfloat mvp[16],GLfloat vColor[4]);
参数1：存储着色器种类--> 平面着色器
参数2：允许变化的4*4矩阵
参数3：颜色
使用场景：在绘制图形时，可以应用变换(模型/投影变换).

上色着色器

GLShaderManager::UserStockShader(GLT_SHADER_SHADED,GLfloat mvp[16]);
参数1：存储着色器种类-->上色着色器
参数2：允许变化4*4矩阵
使用场景：在绘制图形时，可以应用变换(模型/投影变换). 颜色将会平滑地插入到顶点之间称为平滑着色。

默认光源着色器

GLShaderManager::UserStockShader(GLT_SHADER_DEFAULT_LIGHT,GLfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vColor[4]);
参数1：存储着色器种类--> 默认光源着色器
参数2：模型4 * 4矩阵
参数3：投影4 * 4矩阵
参数4：颜色值
使用场景：在绘制图形时，可以应用变换(模型/投影变换)。这种着色器会使绘制的图形产生阴影和光照的效果。

点光源着色器

GLShaderManager::UserStockShader(GLT_SHADER_POINT_LIGHT_DIEF,GLfloat mvMatrix[16], GLfloat pMatrix[16], GLfloat vLightPos[3], GLfloat vColor[4]);
参数1：存储着色器--> 点光源着色器
参数2：模型4 * 4矩阵
参数3：投影4 * 4矩阵
参数4：点光源的位置
参数5：漫反射颜色值
使用场景：在绘制图形时，可以应用变换(模型/投影变换)，这种着色器会使绘制的图形产生阴影和光照的效果。它与默认光源着色器非常类似，区别只是光源位置可能是特定的。

纹理替换矩阵着色器

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_REPLACE, GLfloat mvMatrix[16], GLint nTextureUnit);
参数1：存储着色器种类--> 纹理替换矩阵着色器
参数2：模型4 * 4矩阵
参数3：纹理单元
使用场景：在绘制图形时，可以应用变换(模型/投影变换)，这种着色器通过给定的模型视图投影矩阵。使用纹理单元进行颜色填充，其中每个像素点的颜色是从纹理中获取。

纹理调整着色器

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_MODULATE,GLfloat mvMatrix[16],GLfloat vColor[4], GLint nTextureUnit);
参数1：存储着色器种类--> 纹理调整着色器
参数2：模型4 * 4矩阵
参数3：颜色值
参数4：纹理单元
使用场景：在绘制图形时，可以应用变换(模型/投影变换)，这种着色器通过给定的模型视图投影矩阵。着色器将一个基本色乘以一个取自纹理单元nTextureUnit的纹理。将颜色与纹理进行颜色混合后才能填充到片段中。

纹理光源着色器

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_POINT_LIGHT_DIEF,GLfloat mvMetrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vBaseColor[4],GLint nTextureUnit);
参数1：存储着色器种类--> 纹理光源着色器
参数2：模型4 * 4矩阵
参数3：投影4 * 4矩阵
参数4：点光源位置
参数5：颜色值(几何图形的基本色)
参数6：纹理单元
使用场景：在绘制图形时，可以应用变换(模型/投影变换)，这种着色器通过给定的模型视图投影矩阵。着色器将一个纹理通过漫反射照明计算进行调整(相乘)。

OpenGL 7种基本图元

OpenGL 7种基本图元.png

基本图元.png

OpenGL入门 - 1