阅读 746

OpenGL学习(三)-- OpenGL 基础渲染

我的 OpenGL 专题学习目录,希望和大家一起学习交流进步!


一、基础图形管线

渲染管线(rendering pipeline),它是一系列数据处理过程,并且将应用程序的数据转换到最终渲染的图像。下图是 OpenGL 4.3 版本的管线。

管线.png
OpenGl渲染流程.png

OpenGL 中的 图元 只不过是顶点的集合以预定义的方式结合在一起罢了。

通过最近学习 OpenGL 的蓝宝书(《OpenGL超级宝典》),学到了基础渲染这块,为了加深理解,按照书中优化了一下渲染管线的流程图,并在图中添加上了翻译和自己的理解,加深自己的印象并帮助更多学习 OpenGL 的朋友们更好的学习。

OpenGL渲染管线简化流程图:

OpenGL渲染管线简化流程.png

1、客户端-服务器

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

2、着色器

上图中最大的框代表的是 顶点着色器片元着色器。着色器是使用GLSL编写的程序。

顶点着色器 顶点着色器处理从客户端输入的数据,用数学运算来计算光照效果、位移、颜色值等。有几个顶点,顶点着色器就要执行几次。 上图中的 图元组合(Primitive Assembly) 框图意在说明3个顶点已经组合在了一起。

片元着色器 片元着色器来计算片元的最终颜色(尽管在下一个阶段(逐片元的操作)时可能还会改变颜色一次)和它的深度值。在这里我们会使用纹理映射的方式,对顶点处理阶段所计算的颜色值进行补充。如果我们觉得不应该继续绘制某个片元,在片元着色器中还可以终止这个片元的处理,这一步叫做片元的 丢弃(discard)

顶点的着色器和片元着色器之间的区别: 顶点着色(包括细分和几何着色) 决定了一个图元应该位于屏幕的什么位置,而 片元着色 使用这些信息来决定某个片元的颜色应该是什么。

着色器的渲染:

  • 顶点着色器(必要)
  • 细分着色器(可选)
  • 几何着色器(可选)
  • 片元着色器(必要)

3、三种向OpenGL 着色器传递渲染数据的⽅法

属性: 就是对⼀个顶点都要作出改变的数据元素。实际上,顶点位置本身就是一个属性.。属性可以是浮点类型,整型,布尔类型等。

Uniform 值: 通过设置 Uniform 变量就紧接着发送一个图元批次处理命令。Uniform 变量实际上可以无限次的使⽤。 设置一个应用于整个表⾯面的单个颜色值,还可也是一个时间值。

使用下面的函数:

// Use a stock shader, and pass in the parameters needed
GLint UseStockShader(GLT_STOCK_SHADER nShaderID, ...);
复制代码

传递不用的 Uniform 参数可以使用不同的存储着色器: 首先定义一个颜色黑色 vBlack

GLfloat vBlack[] = { 0.0f, 0.0f, 0.0f, 1.0f };
复制代码

声明一个全局的存储着色器变量 shaderManager

GLShaderManager		shaderManager;
复制代码
shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vBlack);
复制代码
//使用 单位着色器
//参数1:简单的使用默认笛卡尔坐标系(-1,1),所有片段都应用一种颜色。GLT_SHADER_IDENTITY
//参数2:着色器颜色
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vGreen);
复制代码
GLShaderManger::UseStockShader(GLT_SHADER_IDENTITY,GLfloat mvp[16],GLfloat vColor[4])
复制代码

纹理: 对纹理进行采样和筛选。纹理数据的作用不仅仅是表现图形。很多图形文件格式都是以无符号字节形式对颜色分量进行存储的,但我们仍然可以设置浮点纹理。这就是说,任何大型浮点数据块(例如消耗资源很大的函数的大型查询表)都可以通过这种方式传递给着色器。

4、使用存储着色器

在OpenGL 核心框架中,并没提供任何内建渲染管线,在提交一个几何图形进行渲染之前,必须实现一个着色器。着色器由GLToolsC++GLShaderManager 管理。他们能够满足进行基本渲染的基本要求,要求不高的程序员,这些存储着色器已经足以满足他们的需求。但随着时间和经验的提升,大部分开发者可能不满足于此,会着手去写着色器,手写的我会在以后的文章里再写出来。

4.1着色器的使用

1)GLShaderManager 的初始化:

GLShaderManager		shaderManager;
shaderManager.InitializeStockShaders();
复制代码

2)GLShaderManager 属性:

存储着色器为每个变量都使用一致的内部变量命名规则和相同的属性槽(Attribute Slot)。下表列出了这些属性: 表-GLShaderManager 预定义的标识符

标识符 描述
GLT_ATTRIBUTE_VERTEX 3分量(x, y, z)顶点位置
GLT_ATTRIBUTE_COLOR 4分量(r, g, b, a)颜色值
GLT_ATTRIBUTE_NORMAL 3分量(x, y, z)表面法线
GLT_ATTRIBUTE_TEXTURE0 第一对 2 分量(s ,t)纹理坐标
GLT_ATTRIBUTE_TEXTURE1 第二对 2 分量(s ,t)纹理坐标

4.2 GLShanderManager 的 uniform 值

一般情况,要对几何图形进行渲染,我们需要为读写递交属性矩阵,首先要绑定到我们想要使用的着色程序上,并提供程序的 Uniform 值。GLShanderManager 类可以(暂时)为我们完成这项工作。 useStockShader 函数会选择一个存储着色器并提供这个着色器的 Uniform 值,这些工作通过一次函数调用就能完成:

GLShaderManager::UseStockShader(GLenum shader, ... ...);
复制代码

C 语言(或 C++ 语言)中,......表示函数接受一个可变的参数数量。就这个函数本身而言,它根据我们选择的着色器,从堆栈中提取正确的参数,这些参数就是特定着色器要求的 Uniform 值。

(1) 单位(Identity)着色器 GLT_SHADER_IDENTITY

参数1:单位着色器
参数2:颜色值
GLShaderManager::UseStockShader(GLT_SHADER_IDENTITY, GLfoat vColor[4]);
复制代码

单位(Identity)着色器: 只是简单地使用默认的笛卡尔坐标系(坐标范围 -1.0~1.0)。所有片段都应用同一种颜色,结合图形为实心和未渲染的。这种着色器只使用一个属性 GLT_ATTRIBUTE_VERTEXvColor 参数包含了要求的颜色。

(2) 平面(Flat)着色器 GLT_SHADER_FLAT

参数1:平面着色器
参数2:允许变化的4*4矩阵
参数3:颜色值
GLShaderManager::UseStockShader(GLT_SHADER_FLAT, GLfoat mvp[16], GLfloat vColor[4]);
复制代码

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

(3) 上色(Shaded)着色器 GLT_SHADER_SHADED

GLShaderManager::UseStockShader(GLT_SHADER_SHADED, GLfoat mvp[16]);
复制代码

**上色(Shaded)着色器:**唯一的 Uniform 值就是在几何图形中应用的变换矩阵。GLT_ATTRIBUTE_VERTEXGLT_ATTRIBUTE_COLOR 在这种着色器中都会使用。颜色值将被平滑地插入顶点之间(称为平滑着色)。

(4) 默认光源着色器 GLT_SHADER_DEFAULT_LIGHT

参数1:默认光源着色器
参数2:模型视图矩阵
参数3:投影矩阵
参数4:颜色值
GLShaderManager::UseStockShader(GLT_SHADER_DEFAULT_LIGHT, GLfoat mvMatrix[16], GLfloat pMatrix[16], GLfloat vColor[4]);
复制代码

**默认光源着色器:**这种着色器使对象产生阴影和光照的效果。需要模型视图矩阵、投影矩阵和作为基本色的颜色值等 Uniform 值。所需的属性有 GLT_ATTRIBUTE_VERTEX(顶点分量)和 GLT_ATTRIBUTE_NORMAL(表面法线)。

(5) 点光源着色器 GLT_SHADER_POINT_LIGHT_DIFF

参数1:点光源着色器
参数2:模型视图矩阵
参数3:投影矩阵
参数4:视点坐标系中的光源位置
参数5:颜色值
GLShaderManager::UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, GLfoat mvMatrix[16], GLfloat pMatrix[16], GLfloat vLightPos[3], GLfloat vColor[4]);
复制代码

点光源着色器: 和默认光源着色器很相似,但光源位置可能是待定的。接受 4Uniform,即模型视图矩阵、投影矩阵、视点坐标系中的光源位置和对象的基本漫反射颜色。同样所需的属性有 **GLT_ATTRIBUTE_VERTEX(顶点分量)**和 GLT_ATTRIBUTE_NORMAL(表面法线)

(6) 纹理替换矩阵 GLT_SHADER_TEXTURE_REPLACE

GLShaderManager::UseStockShader(GLT_SHADER_TEXTURE_REPLACE, GLfoat mvMatrix[16], GLint nTextureUnit);
复制代码

**纹理替换矩阵:**着色器通过给定的模型视图投影矩阵,使用绑定到 nTextureUnit(纹理单元) 指定的纹理单元的纹理对几何图形进行变换。片段颜色是从纹理样本中直接获取的。所需的属性有 **GLT_ATTRIBUTE_VERTEX(顶点分量)**和 GLT_ATTRIBUTE_NORMAL(表面法线)

(7) 纹理调整着色器 GLT_SHADER_TEXTURE_MODULATE

GLShaderManager::UseStockShader(GLT_SHADER_TEXTURE_MODULATE, GLfoat mvMatrix[16], GLfloat vColor, GLint nTextureUnit);
复制代码

纹理调整着色器: 这种着色器将一个基本色乘以一个取自纹理单元 nTextureUnit 的纹理。所需的属性有 GLT_ATTRIBUTE_VERTEX(顶点分量)GLT_ATTRIBUTE_TEXTURE0(纹理坐标)

(8) 纹理光源着色器 GLT_SHADER_TEXTURE_POINT_LIGHT_DIFF

参数1:纹理光源着色器
参数2:模型视图矩阵
参数3:投影矩阵
参数4:视点坐标系中的光源位置
参数5:几何图形的基本色
参数6:将要使用的纹理单元
GLShaderManager::UseStockShader(GLT_SHADER_TEXTURE_POINT_LIGHT_DIFF, GLfloat mvMatrix, GLfoat mvMatrix[16], GLfloat vLightPos[3], GLfloat vBaseColor[4], GLint nTextureUnit);
复制代码

纹理光源着色器: 这种着色器将一个纹理通过漫反射照明计算进行调整(相乘),光线在视觉空间中的位置是给定的。这种着色器接受 5Uniform 值,即模型视图矩阵、投影矩阵、视觉空间中的光源位置、几何图形的基本色和将要使用的纹理单元。所需的属性有 GLT_ATTRIBUTE_VERTEX(顶点分量)GLT_ATTRIBUTE_NORMAL(表面法线)GLT_ATTRIBUTE_TEXTURE0(纹理坐标)

二、OpenGL 基础图元

OpenGL 图元的模式标识:

图元类型 OpenGL 枚举量
GL_POINTS
线 GL_LINES
条带线 GL_LINE_STRIP
循环线 GL_LINE_LOOP
独立三角形 GL_TRIANGLES
三角形条带 GL_TRIANGLE_STRIP
三角形扇面 GL_TRIANGLE_FAN

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;

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

还可以通过使用程序点大小模式来设置点大小。

// 3.通过使用程序点大小模式来设置点大小
glEnable(GL_PROGRAM_POINT_SIZE);
// 这种模式下允许我们通过编程在顶点着色器或几何着色器中设置点大小。着色器内建变量:gl_PointSize,并且可以在着色器源码直接写
 gl_PointSize = 5.0;
复制代码

(2)线

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

void glLineWidth(GLfloat width);
复制代码
// 设置独立线段宽度为1.5f;
glLineWidth(1.5f);
复制代码

(3)线带

**线带(line strip)**连续地从一个顶点到下一个顶点绘制的线段,以形成一个真正连接点的线条。 (为了把图形连接起来,每个连接的顶点会被选定 2 次。一次作为线段的终点、一次作为下一条线段的起点),这次是作为 GL_LINE_STRIP 绘制的。

(4)线环

线环(line loop) 是线带的一种简单拓展,在线带的基础上额外增加了一条连接着一批次中最后一个点和第一个点的线段。

2、绘制三角形

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

(1)单独的三角形

如下图是使用 GL_TRIANGLES 绘制的两个三角形:

绘制三角形.png
绘制金字塔 下面绘制 4 个三角形组成金字塔形的三角形。我们可以使用方向键来旋转金字塔,从不同角度进行观察。但是这个金字塔木有底面,所以我们可以看到它的内部。
金字塔无底.png
代码如下:

    //通过三角形创建金字塔
    GLfloat vPyramid[12][3] = {
        -2.0f, 0.0f, -2.0f,
        2.0f, 0.0f, -2.0f,
        0.0f, 4.0f, 0.0f,
        
        2.0f, 0.0f, -2.0f,
        2.0f, 0.0f, 2.0f,
        0.0f, 4.0f, 0.0f,
        
        2.0f, 0.0f, 2.0f,
        -2.0f, 0.0f, 2.0f,
        0.0f, 4.0f, 0.0f,
        
        -2.0f, 0.0f, 2.0f,
        -2.0f, 0.0f, -2.0f,
        0.0f, 4.0f, 0.0f};
    
    //GL_TRIANGLES 每3个顶点定义一个新的三角形
    triangleBatch.Begin(GL_TRIANGLES, 12);
    triangleBatch.CopyVertexData3f(vPyramid);
    triangleBatch.End();
复制代码

(2)环绕

将顺时针方向绘制的三角形用逆时针的方式绘制。 如下图,在绘制第一个三角形时,线条是按照从 V0-V1,再到 V2。最后再回到 V0 的一个闭合三角形。 这个是沿着顶点顺时针方向。 这种顺序与方向结合来指定顶点的方式称为 环绕。 下图的 2 个三角形的环绕方向完全相反。

三角形环绕.png

正面与背面:

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

为什么区分正背面很重要?

因为我们常常希望为一个多边形的正面和背面分别设置不同的物理特征。我们可以完全隐藏一个多边形的背面,或者给它设置一种不同的颜色和反射属性。纹理图像在背面三角形中也是相反的。在一个场景中,使所有的多边形保持环绕方向的一致,并使用正面多边形来绘制所有实心物体的表面是非常重要的。

如果想改变 OpenGL 这个默认行为,可以调用下面的函数: glFrontFace(GL_CW);

参数:GL_CW | GL_CCW

  • GL_CCW:表示传入的mode会选择逆时针为前向(默认:GL_CCW)
  • GL_CW:表示顺时针为前向。

(3) 三角地带

对于很多表面和形状来说,我们可能需要绘制几个相连的三角形。我们可以使用 GL_TRIANGLE_STRIP 图元绘制一串相连的三角形。从而节省大量的时间。

三角形带.png

使用三角带而不是分别指定每个三角形,这样做有两个优点:

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

(4) 三角形扇

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

三角形扇.png

3、一个简单批次容器

GLTools 库中包含额一个简单的容器类,叫做 GLBatch。这个类可以作为7种图元的简单批次容器使用。而且它知道在使用 GL_ShaderManager 支持的任意存储着色器时如何对图元进行渲染。 使用 GLBatch 类非常简单。首先对批次进行初始化,告诉这个类它代表哪种图元,其中包括的顶点数,以及(可选)一组或两组纹理坐标。

参数1:图元
参数2:顶点数
参数3:一组或者2组纹理坐标(可选)
void GLBatch::Begain(GLeunm primitive,GLuint nVerts,GLuint nTexttureUnints = 0);
复制代码

然后,至少要复制一个由3分量(x, y, z)顶点组成的数组。

//复制表面法线
void GLBatch::CopyVertexData3f(GLfloat *vVerts);
复制代码

还可以选择复制表面发现、颜色和纹理坐标。

//复制表面法线
void GLBatch::CopyNormalDataf(GLfloat *vNorms);
//复制颜色
void GLBatch::CopyColorData4f(GLfloat *vColors);
//复制纹理坐标
void GLBatch::CopyTexCoordData2f(GLFloat *vTextCoords,GLuint uiTextureLayer);
复制代码

完成上述工作以后,可调用End来表明已经完成了数据复制工作,并且将设置内部标记,以通知这个类包含哪些属性。

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

实际上,可以在任何我们想要的时候进行复制,只要不改变累的大小即可。 而一旦调用 End 函数,就不能再增加新的属性了(也就是说我们现在也不能确定是否要有表面法线了)。

关于提交属性的 OpengGL 实际内部运行机制实际上比这要复杂的多。GLBatch 类只是一个便利类(convenience class),就像使用GLUT一样方便。

以上的总结参考了并部分摘抄了以下文章,非常感谢以下作者的分享!:

1、《OpenGL超级宝典 第5版》

2、《OpenGL编程指南(英文第八版)》

3、作者CC老师_HelloCoder的《004--OpenGL 图元》

转载请备注原文出处,不得用于商业传播——凡几多