OpenGL渲染基础

一、基础图形管线

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

opengl01.png
opengl02.png

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

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

OpenGL渲染管线简化流程图:

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

4.1着色器的使用

  1. GLShaderManager 的初始化:
GLShaderManager     shaderManager;
shaderManager.InitializeStockShaders();
  1. 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_VERTEX。vColor参数包含了要求的颜色。

(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_VERTEX 和 **GLT_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]);

点光源着色器:和默认光源着色器很相似,但光源位置可能是待定的。接受 4 个 Uniform 值,即模型视图矩阵、投影矩阵、视点坐标系中的光源位置和对象的基本漫反射颜色。同样所需的属性有 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);

纹理光源着色器:这种着色器将一个纹理通过漫反射照明计算进行调整(相乘),光线在视觉空间中的位置是给定的。这种着色器接受 5 个 Uniform 值,即模型视图矩阵、投影矩阵、视觉空间中的光源位置、几何图形的基本色和将要使用的纹理单元。所需的属性有 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 绘制的两个三角形:

opengl04.png

绘制金字塔

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

opengl05.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个三角形的环绕方向完全相反。

opengl06.png

正面与背面:

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

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

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

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

(3) 三角地带

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

opengl07.png

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

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

(4) 三角形扇

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

opengl08.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一样方便。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容

  • 一、着色器 从之前的文章,我们应该知道大概OpenGL的一个渲染流程流程: 接下来我们再查看一下OpenGL渲染架...
    coder_feng阅读 330评论 0 0
  • 学习目标: 1.OpenGL渲染架构(掌握) OpenGL数据传递的3种方式(理解) OpenGL提供的着色器(掌...
    小破孩丫阅读 533评论 0 1
  • OpenGl渲染架构 Client:这里的客户端指的是我们在应用程序中编写的C/C++代码,以及OpenGL的相关...
    Maji1阅读 261评论 0 1
  • 由于OpenGL是基于C的API,因此它非常便携且受到⼴泛支持。作为C API,它与基于Objective-C的C...
    吕建雄阅读 394评论 0 0
  • 目标: 掌握OpenGL渲染架构图 理解OpenGL数据传递的三种方式 掌握OpenGL提供的存储着色器 正投影 ...
    SPIREJ阅读 469评论 0 0