04-OpenGL渲染基础

目标：

• 掌握OpenGL渲染架构图
• 理解OpenGL数据传递的三种方式
• 掌握OpenGL提供的存储着色器
• 正投影 / 透视投影API的使用
• OpenGL常见图元

一、OpenGL渲染架构图

OpenGL渲染架构图(转自:凡几多)

• attribute 属性(顶点着色器/不能直接传递到片元着色器，通过GLSL代码间接传递)

  • 颜色数据
  • 顶点数据
  • 纹理坐标
  • 光照计算表面法线

• uniforms 值(直接传递到片元着色器/顶点着色器)

  • 传递不怎么改变的值

• texture Data 纹理数据

  • 在顶点着色器、片段着色器中都可以对纹理数据进行采样和筛选。
  • 典型的应用场景：片段着色器对一个纹理值进行采样，然后在一个三角形表面应用渲染纹理数据。
  • 纹理数据，不仅仅表现在图形，很多图形文件格式都是以无符号字节（每个颜色通道8位）形式对颜色分量进行存储的。

二、固定管线着色器

使用存储着色器最方便之处是,你不要考虑到渲染中到底是顶点着色器还是片元着色器.所以你在使用存储着色器时,不需要思考传递数据时,该有那种方式传送.你只需要传递不同存储器所需要的数据到参数列表就可以了. 至于它的底层是如何实现的,并不需要关心.因为这一切它已经封装起来了.

固定管线着色器都是用UserStockShader函数调用

存储着色器初始化

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

• 单元着色器

GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLfloat mvp[16],GLfloat vColor[4]);

参数1: 存储着色器种类-平⾯着⾊器 
参数2: 允许变化的4*4矩阵
参数3: 颜⾊
使⽤用场景: 在绘制图形时, 可以应用变换(模型/投影变化).

• 平面着色器

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,G Lfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vBaseColor[4],GLint nTextureUnit);

参数1: 存储着⾊器种类-纹理光源着色器 
参数2: 模型4*4矩阵
参数3: 投影4*4矩阵
参数4: 点光源位置
参数5: 颜色值(⼏何图形的基本色) 
参数6: 纹理单元
使⽤场景: 在绘制图形时, 可以应用变换(模型/投影变化)
这种着色器通过给定的模型视图投影矩阵. 
着⾊器将⼀个纹理通过漫反射照明计算进行调整(相乘).

三、OpenGL 7种基本图元

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

基本图元.png

1. 点和线

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

void glPointSize(GLfloat size);

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

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

// 4.通过使用程序点大小模式来设置点大小
glEnable(GL_PROGRAM_POINT_SIZE);

// 5.这种模式下允许我们通过编程在顶点着色器或几何着色器中设置点大小。着色器内建变量：gl_PointSize，并且可以在着色器源码直接写
 gl_PointSize = 5.0;

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

void glLineWidth(GLfloat width);

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

• (3) 线带
  线段连续从一个顶点到下一个顶点绘制的线段，以形成一个真正链接的点的线段。
  （为了把图形连接起来，每个连接的顶点会被选定2次。一次作为线段的终点、一次作为下一条线段的起点）

• 线环（line loop）
  是线带的一种简单拓展，在线带的基础上额外增加一条将线带闭合。

2. 绘制三角形

（1）单独的三角形

可能存在的最简单的实体多边形就是三角形，它只有3个边。光栅化硬件最欢迎三角形。并且现在OpenGL已经是OpenGL中支持的唯一一种多边形。每3个顶点定义一个新的三角形。

绘制三角形

（2）环绕

在绘制第一个三角形时，线条是按照从V0-V1，再到V2。最后再回到V0的一个闭合三角形。
这种顺序与方向结合来指定顶点的方式称为环绕。

下图的2个三角形的环绕方向完全相反。

三角形环绕方式

正面与背面：

在默认的情况下，OpenGL认为具有逆时针方向环绕的多边形是正面的。而右侧的顺时针方向三角形是三角形的背面。

//定义前向和背向的多变形：
glFrontFace(mode)
参数：GL_CW | GL_CCW
GL_CCW：表示传入的mode会选择逆时针为前向
GL_CW：表示顺时针为前向。
默认：GL_CCW 逆向时针为前向。

（3）三角地带

对于很多表面和形状来说，我们可能需要绘制几个相连的三角形。我们可以使
用GL_TRIANGLE_STRIP图元绘制一串相连的三角形。

三角地带

使用三角带而不是分别指定每个三角形，这样做的优点：

• 1. 用前3个顶点指定第1个三角形之后，对于接下来的每一个三角形，只需要再指定1个顶点。需要绘制大量的三角形时，采用这种方法可以节省大量的程序代码和数据存储空间。
• 2 .提供运算性能和节省带宽。更少的顶点意味着数据从内存传输到图形卡的速度更快，并且顶点着色器需要处理的次数也更少了。

（4）三角形扇

除了三角形带之外，还可以使用GL_TRIANGLE_FAN创建一组围绕一个中心点的相连三角形。
通过4个顶点所产生的包括3个三角形的三角形扇。 第一个顶点v0构建了扇形的原点，用前3个顶点指定了最初的三角形之后，后续的每个顶点都和原点（V0）以及之前紧挨着它的那个顶点(Vn-1)形成接下来的三角形。

三角形扇

四、简单的批次容器

GLTools 库中包含额一个简单的容器类，叫做GLBatch。这个类可以作为7种图元的简单批次容器使用。而且它知道在使用GL_ShaderManager支持的任意存储着色器时如何对图元进行渲染。

//首先对批次进行初始化，告诉这个类它代表哪种图元，其中包括的顶点数，以及（可选）一组或两组纹理坐标。
void GLBatch::Begain(GLeunm primitive,GLuint nVerts,GLuint nTexttureUnints = 0);
/*
参数1：图元
参数2：顶点数
参数3：一组或者2组纹理坐标（可选）
*/
//复制表面法线
void GLBatch::CopyNormalDataf(GLfloat *vNorms);

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

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

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