二、OpenGL-图元绘制

音视频开发：OpenGL + OpenGL ES + Metal 系列文章汇总

文本重点了解常见的图元和图元绘制过程，以及OpenGL渲染架构

具体内容：
1、理解渲染架构
2、熟练使用投影方式的API
3、理解图元类型以及图元设置的API，并熟练进行图元绘制

1、OpenGL渲染架构

OpenGL渲染架构.png

客户端是指CPU中执行的代码（C/C++、OpenGL API），服务器端是GPU芯片执行的内容
服务器和客户端在功能上是异步的，客户端不断的把数据块和命令块组合到一起输送到缓冲区，然后缓冲区就会发送到服务器执行
如果服务器停止工作等待客户机，或者客户机停止工作等待服务器组好接收更多的命令和准备，我们把这种情况称为管线停滞
我们写的可编程的片元着色器、顶点着色器代码运行在GPU上，其他的代码都是运行在CPU上

有三种渠道可以将数据传递到GPU上
Attributes（属性）
只能传递到顶点着色器，不能直接传递给片元着色器，只能通过GLSL代码间接传递到片元着色器。
可以传递的数据是经常发生改变的，一般是每个顶点各不相同的变量，比如顶点数据、颜色数据、纹理坐标、光照法线。

uniforms（统一数据）
可以传递给顶点着色器和片元着色器，传递的数据是不易更改的比较统一的数据，比如发生旋转的变换矩阵，进行颜色渲染的渲染矩阵。一般用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量，如当前光源的位置

Texture Data(纹理数据）
可以传递给顶点着色器和片元着色器，但基本没有必要传递给顶点着色器，因为纹理数据就是作用在片元着色器的。

2、不同投影方式的API

投影方式有两种，一种是正投影，一种是透视投影
正投影和透视投影目的都是将3D图形映射成二维平面坐标
图示：

投影方式.png

2.1 正投影

正投影的视景体为正方体/长方体，物体在屏幕上的大小和实际大小相同，不存在远小近大。
场景：适合平面图形渲染（也可以用在立体图形）
调用API

/*
参数明显分别设置x、y、z的最大和最小值
*/
GLFrumstum::SetOrthographic(GLfoat xMin,GLfoat xMax,GLfloat yMin,GLfloat yMax,GLfoat zMin,GLfoat zMax);

具体使用

2.2 透视投影

透视投影的视景体是平截体，透视投影可以做到远小近大，而正投影的大小是不变的，立体图形需要使用透视投影，这样更加逼真。
调用API

/*
fFov:垂直方向上的视场角度
fAspect：窗口的宽度与高度的纵横比（w/h)
fNear：近裁剪面距离
fFar：远裁剪面距离
*/
GLFrumstum::SetPerspective(float fFov, float fAspect,float fNear,float fFar);

具体使用

3、图元

3.1 图元认识

图元是一个能用OpenGL绘图命令绘制的几何体，绘图命令指定了一组顶点属性，描述了图元的集合形状和图元类型，顶点只能决定位置，只有图元装配后才能决定形状。
图元的类型就是顶点的不同连接方式。

3.2 图元类型

图元类型.png

点（GL_POINTS）：
每个顶点在屏幕上都是一个单独点，默认情况下点的大小就是像素的大小。
点的设置：

线（GL_LINES）：
两个顶点之间的线段，默认情况下线段的宽度就是一个像素。

线带（GL_LINES_STRIP）
从第一个顶点依次经过后续顶点而绘制的线条。

线环（GL_LINES_LOOP）
从第一个顶点依次经过后续顶点而绘制的线条，但是最后一个顶点会和第一个顶点连起来，形成环。

三角形（GL_TRIANGLE）
三个顶点定义一个三角形。
三角形图元，逆时针连接起来的就是正三角，顺时针连接起来的是反三角。
还可以主动设置时针方向对应的三角形时正三角还是反三角。
但一般不要改，因为这样就跟其他人不一样了，容易造成误解

三角形带（GL_TRIANGLE_FAN）
两个三角形共用一条边的一组三角形，两个三角形共用两个点。
优点：
1、复用两个顶点，对于绘制大量的三角形，可以节省大量的程序代码和数据存储空间
2、提供运算性能和节省带宽，更少的顶点意味着数据从内存传输到图形卡的速度更快，并且顶点着色器需要处理的次数也更少了。

三角形伞（GL_TRIANGLE_STRIP）
以一个圆点为中心呈扇形排列，共用相邻顶点的一组三角形，总是共用一个顶点。

3.3 图元的设置流程

在上一篇博客中已通过三角形图元的设置演示了，这里不再赘述。

4、固定管线（简单了解）

4.1 认识

固定管线又叫存储着色器，采用固定管线不需要知道修改的是顶点着色器还是片元着色器等，只需要调用已经封装好的方法即可。

4.2 常见的存储着色器类型

单元着色器

/*
参数1:存储着⾊器种类-单元着⾊器
参数2:颜⾊

场景：绘制默认OpenGL坐标系(-1,1)下图形.图形所有⽚段都会以⼀种颜⾊填充
*/
GLShaderManager::UserStockShader(GLT_SHADER_IDENTITY,GLﬂoatvColor[4]);

平面着色器

/*
参数1:存储着⾊器种类-平⾯着⾊器
参数2:允许变化的4*4矩阵
参数3:颜⾊

场景：在绘制图形时,可以应⽤变换(模型/投影变化).
*/
GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLﬂoatmvp[16],GLﬂoat vColor[4]);

默认光源着⾊器

/*
参数1:存储着⾊器种类-默认光源着⾊器
参数2:模型4*4矩阵
参数3:投影4*4矩阵
参数4:颜⾊值

在绘制图形时,可以应⽤变换(模型/投影变化)这种着⾊器会使绘制的图形产⽣阴影和光照的效果.
*/
GLShaderManager::UserStockShader(GLT_SHADER_DEFAULT_LIGHT,GLﬂoat mvMatrix[16],GLﬂoatpMatrix[16],GLﬂoatvColor[4]);

其他的着色器类型可以看着色器类型

其实这个无需记忆，固定管线现在基本不使用

4.3 具体使用

固定管线使用流程在上一篇博客中已经写明，这里不再赘述，

5、图元设置案例

较简单案例：
三角形图元的绘制过程：固定管线渲染流程
较复杂案例（需要有一定OpenGL基础的同学请看）：
OpenGL图元绘制汇总案例：OpenGL图元绘制(综合)