OpenGL 渲染基础

一、着色器

从之前的文章，我们应该知道大概OpenGL的一个渲染流程流程：

Snip20201224_9.png
image.png

接下来我们再查看一下OpenGL渲染架构的简化图

Snip20201224_11.png

就 OpenGL 而言，客户端是存储在 CPU 存储器中的，驱动程序将渲染命令与数据组合起来发给服务器执行。
服务器和客户端在功能上是异步的。客户端不断的将数据和命令组合在一起送入缓冲区，缓冲区再发送到服务器执行

Snip20201224_12.png

传递给着色器的属性

• 属性：就是对⼀个顶点都要作出改变的数据元素。实际上，顶点位置本身就是一个属性.。属性可以是浮点类型，整型，布尔类型等。
• Uniform值：通过设置 Uniform 变量就紧接着发送一个图元批次处理命令。Uniform 变量实际上可以无限次的使⽤
• 纹理：对纹理进行采样和筛选。纹理数据的作用不仅仅是表现图形。很多图形文件格式都是以无符号字节形式对颜色分量进行存储的，但我们仍然可以设置浮点纹理。这就是说，任何大型浮点数据块（例如消耗资源很大的函数的大型查询表）都可以通过这种方式传递给着色器

着色器

在OpenGL 核心框架中，并没提供任何内建渲染管线，在提交一个几何图形进行渲染之前，必须实现一个着色器。着色器由GLTools 的 C++ 类 GLShaderManager 管理

• // GLShaderManager 的初始化
  GLShaderManager shaderManager;
  shaderManager.InitializeStockShaders();
• 着色器的种类

单元着色器
GLShaderManager::UserStockShader(GLT_SHADER_IDENTITY,GLfloat vColor[4]);

• 参数一：存储着⾊色器器种类-单元着⾊色器器
• 参数二：颜⾊
  使用场景：绘制默认OpenGL 坐标系(-1,1)下图形. 图形所有⽚片段都会以⼀一种颜⾊色填充

平面着色器
GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLfloat mvp[16],GLfloat vColor[4]);

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

平面（Flat）着色器：将单位着色器进行了扩展，允许为集合图形变换指定一个 4 x 4 的变换矩阵。经常被称作“模型师徒投影矩阵”。这种着色器只使用一个属性 GLT_ATTRIBUTE_VERTEX。

上色着色器
GLShaderManager::UserStockShader(GLT_SHADER_SHADED,GLfloat mvp[16]);

• 参数1: 存储着⾊色器器种类-上⾊色着⾊色器器
• 参数2: 允许变化的4*4矩阵

使⽤用场景: 在绘制图形时, 可以应⽤用变换(模型/投影变化) 颜⾊色将会平滑地插⼊入到顶点之间 称为平滑着⾊.

默认光源着⾊色器器
GLShaderManager::UseStockShader(GLT_SHADER_DEFAULT_LIGHT, GLfoat mvMatrix[16], GLfloat pMatrix[16], GLfloat vColor[4]);

• 参数1：默认光源着色器
• 参数2：模型视图矩阵
• 参数3：投影矩阵
• 参数4：颜色值

使⽤用场景: 在绘制图形时, 可以应⽤用变换(模型/投影变化) 这种着⾊色器器会使绘制的图形产⽣生 阴影和光照的效果.

点光源着色器
GLShaderManager::UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, GLfoat mvMatrix[16], GLfloat pMatrix[16], GLfloat vLightPos[3], GLfloat vColor[4]);

• 参数1：点光源着色器
• 参数2：模型视图矩阵
• 参数3：投影矩阵
• 参数4：视点坐标系中的光源位置
• 参数5：颜色值

使⽤用场景: 在绘制图形时, 可以应⽤用变换(模型/投影变化) 这种着⾊色器器会使绘制的图形产⽣生
阴影和光照的效果.它与默认光源着⾊色器器⾮非常类似,区别只是光源位置可能是特定的.

纹理理替换矩阵着⾊色器器
GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_REPLACE,GLfloat mvMatrix[16],GLint nTextureUnit);

• 参数1: 存储着⾊色器器种类-纹理理替换矩阵着⾊色器器
• 参数2: 模型4*4矩阵
• 参数3: 纹理理单元

使⽤用场景: 在绘制图形时, 可以应⽤用变换(模型/投影变化)这种着⾊色器器通过给定的模 型视图投影矩阵.使⽤用纹理理单元来进⾏行行颜⾊色填充.其中每个像素点的颜⾊色是从纹理理中 获取.

纹理调整着色器
GLShaderManager::UseStockShader(GLT_SHADER_TEXTURE_MODULATE, GLfoat mvMatrix[16], GLfloat vColor, GLint nTextureUnit);

• 参数1: 存储着⾊色器器种类-纹理理调整着⾊色器器
• 参数2: 模型4*4矩阵
• 参数3: 颜⾊色值
• 参数4: 纹理理单元

使⽤用场景: 在绘制图形时, 可以应⽤用变换(模型/投影变化)这种着⾊色器器通过给定的模 型视图投影矩阵. 着⾊色器器将⼀一个基本⾊色乘以⼀一个取⾃自纹理理单元nTextureUnit 的纹 理理.将颜⾊色与纹理理进⾏行行颜⾊色混合后才填充到⽚片段中.

纹理光源着色器
GLShaderManager::UseStockShader(GLT_SHADER_TEXTURE_POINT_LIGHT_DIFF, GLfloat mvMatrix, GLfoat mvMatrix[16], GLfloat vLightPos[3], GLfloat vBaseColor[4], GLint nTextureUnit);

• 参数1：纹理光源着色器
• 参数2：模型视图矩阵
• 参数3：投影矩阵
• 参数4：视点坐标系中的光源位置
• 参数5：几何图形的基本色
• 参数6：将要使用的纹理单元

使⽤用场景: 在绘制图形时, 可以应⽤用变换(模型/投影变化)这种着⾊色器器通过给定的模 型视图投影矩阵. 着⾊色器器将⼀一个纹理理通过漫反射照明计算进⾏行行调整(相乘).

二、基本图元

图元	描述
GL_POINTS	每个顶点在屏幕上都是单独点
GL_LINES	每⼀一对顶点定义⼀一个线段
GL_LINE_STRIP	个从第⼀一个顶点依次经过每⼀一个后续顶点⽽而绘制的线条
GL_LINE_LOOP	和GL_LINE_STRIP相同,但是最后⼀一个顶点和第⼀一个顶点连接起来了了.
GL_TRIANGLES	每3个顶点定义⼀一个新的三⻆角形
GL_TRIANGLE_STRIP	共⽤用⼀一个条带(strip)上的顶点的⼀一组三⻆角形
GL_TRIANGLE_FAN	以⼀一个圆点为中⼼心呈扇形排列列,共⽤用相邻顶点的⼀一组三⻆角形

Snip20201224_15.png

1.OpenGL点/线

(1)点

点 是最简单的图像。每个特定的顶点在屏幕上都仅仅是一个单独的点。默认的情况下，点的大小是一个像素的大小。我们可通过调用glPointSize改变默认点的大小：

//  1.最简单也是最常用的 4.0f,表示点的大小
   glPointSize(4.0f);
    
// 2.设置点的大小范围和点与点之间的间隔
GLfloat sizes[2] = {2.0f,4.0f};
GLfloat step = 1.0f;

// 获取点大小范围和最小步长（增量）
glGetFloatv(GL_POINT_SIZE_RANGE,sizes);
glGetFloatv(GL_POINT_GRAULARITY,&step); 

(2)线

个线段就是2个顶点之间绘制的。
默认情况下，线段的宽度是一个像素。改变线段唯一的方式是使用函数 glLineWidth：

// 设置独立线段宽度为1.5f;
glLineWidth(1.5f);

2 OpenGl 三角形

(1).绘制三角形

对于OpenGL光栅化最欢迎的是三角形，3个顶点成一个三角形。三角形类型来自于顶点

Snip20201224_16.png

(2.)三角形的环绕方式

Snip20201224_17.png

在绘制第一个三角形的时候，线条是按照从v0-v1,再到v2.最后再回到v0的一个闭合三角形，这个是沿着顶点顺时针方向。这种顺序与方向结合来指定顶点的方式成为环绕。在默认情况下，OpenGl认为具有逆时针方向环绕的多边形为正面，这就意味着上图左边是正面，右边是反面
如果想改变OpenGL这个默认行为，可以调用下面的函数

参数：GL_CW | GL_CCW
GL_CCW：表示传入的mode会选择逆时针为前向
GL_CW：表示顺时针为前向。
默认：GL_CCW。逆向时针为前向。

(3).OpenGl 三角形带

对于很多表面或者形状而言，我们会需要绘制几个相连的三角形，这个时候我们使用GL_TRIANGLE_STRIP图元绘制一串相连三角形，从而节省时间

Snip20201224_18.png

优点

1.用前3个顶点指定第一个三角形之后，对于接下来的每一个三角形，
只需要再指定1个顶点，需要绘制大量的三角形时，采用这种方法可以节省大量的程序代码和数据存储空间

2.提供运算性能和节省带宽。更少的顶点意味着
数据从内存传输到图形卡的速度更快，并且顶点着色器需要处理的次数也更少了

(4).OpenGL 三角形扇

Snip20201224_19.png

对于很多表面或者形状而言，我们会需要绘制几个相连的三角形，这个时候我们可以使用GL_TRIANGLE_FAN图元绘制一组围绕一个中心点相连的三角形，通过4个顶点所产生的包括3个三角形的三角形扇。 第一个顶点 V0 构建了扇形的原点，用前3个顶点指定了最初的三角形之后，后续的每个顶点都和原点（V0）以及之前紧挨着它的那个顶点(Vn-1)形成接下来的三角形。

3.OpenGL 工具类

GLBatch 是在GLTools中包含的一个简单的容器类
使用 GLBatch 类非常简单。首先对批次进行初始化，告诉这个类它代表哪种图元，其中包括的顶点数，以及（可选）一组或两组纹理坐标。

大概的操作有如下几个方面：

• 1.初始化

void GLBatch::Begain(GLeunm primitive,GLuint nVerts,GLuint nTexttureUnints = 0);

• 参数1：图元
• 参数2：顶点数
• 参数3：一组或者2组纹理坐标（可选）
• 2.复制表面法线

void GLBatch::CopyVertexData3f(GLfloat *vVerts);

• 3.复制颜色数据

//复制颜色
void GLBatch::CopyColorData4f(GLfloat *vColors);

• 4.复制纹理坐标数据

//复制纹理坐标
void GLBatch::CopyTexCoordData2f(GLFloat *vTextCoords,GLuint uiTextureLayer);

• 5.结束数据复制

//结束绘制
void GLBatch::End(void);

• 6.绘制图形

//绘制图形
void GLBatch::Draw(void);