一步步学OpenGL一.docx

一步步学OpenGL一.docx

《一步步学OpenGL一.docx》由会员分享，可在线阅读，更多相关《一步步学OpenGL一.docx（53页珍藏版）》请在冰点文库上搜索。

一步步学OpenGL一

一步步学OpenGL

（一）

一打开一个窗口

背景：

官方OpenGL的文档里并没有提供一个API来进行窗口的创建和操作。

现在的Windows系统包含一个子系统将OpenGL上下文和Windows系统绑定在一起从而对OpenGL提供支持。

在X窗口系统中那个接口称作GLX。

为了支持窗口Windows提供WGL（发音：

Wiggle）接口，MacOS则有CGL。

使用这些接口直接来创建窗口来显示图形通常非常麻烦，所以我们通常使用一个高水平的库来隐藏窗口的创建操作细节。

这里使用的窗口库是GLUT（OpenGLutilitylibrary，freeGLUT是GLUT的开源版本，老GLUT早已停止更新），它提供了一个简化的API来操作窗口，以及支持事件处理，IO控制和其他一些功能。

另外GLUT是一个跨平台的库所以移植性很好。

和GLUT类似的其他替代库还有SDL和GLFW。

源代码详解

（1）glutInit（&argc,argue）;

调用这个函数来初始化GLUT.参数可以直接引用commandline的，而且有一些有用的选项，比如：

‘-sync’和‘-gldebug’，可以禁掉X窗口的异步特征并分别自动检查和显示GL错误。

（2）glutInitDisplayMode（GLUT_DOUBLE|GLUT_RGBA）;

这里配置一些GLUT的选项设置。

GLUT_DOUBLE在多数渲染结束后开启双缓冲机制（维护两个图像缓冲数据，屏幕显示一副图像时在后台同时绘制另一份图像缓冲数据，交替显示）和颜色缓冲。

我们通常需要这两个设置，还有其他的选项设置后面会继续介绍。

（3）

glutInitWindowSize（960,640）;//窗口尺寸

glutInitWindowPosition（200,200）;//窗口位置

glutCreateWindow（"Tutorial01"）;//窗口标题

这几个函数的调用可以设置一些窗口参数并创建一个窗口。

也可以定义窗口的标题。

（4）glutDisplayFunc（RenderScenceCB）;

由于我们是在一个窗口系统中工作的，与运行的程序多数的交互是通过事件回调函数。

GLUT针对与底层窗口系统的交互为我们提供了几个回调函数选项。

这里我们先只用一个主回调来完成一帧图像的所有渲染工作。

这个回调函数会不断地被GLUT内部循环调用。

（5）glClearColor（0.0f,0.0f,0.0f,0.0f）;

这个是我们在OpenGL中遇到的第一个状态（OpenGL是一个状态机）。

OpenGL使用状态方案的原因是渲染是一个非常复杂的任务，不能仅仅通过一个函数接受几个参数来完成（一个合理设计的函数是不会接受大量的参数的）。

对于渲染效果的设置我们需要定义shader着色器，buffer缓冲还有各种各样的flag标志变量。

另外，我们也经常想保存一些相同的配置在多个渲染操作中使用（比如：

如果我们从来不需要禁掉深度检测depthtest，我们没必要在每一个渲染回调中来明确定义它）。

这也是为什么多数的渲染操作配置都是通过在OpenGL状态机中设置flag标志变量和值来完成，而且渲染回调本身通常也被局限于几个参数，参数解决需要绘制的定点数量和他们的偏移量。

调用一个改变状态的函数后，具体的配置保持不变，直到下次再调用这个相同的函数再次改变状态和配置。

上面的函数设置了当帧缓存（帧缓存后面还会介绍）清空后要使用的颜色值。

颜色值有四个通道（RGBA）,使用单位化的值0.0-1.0来表示。

（6）glutMainLoop（）;

这个函数调用传递指令给GLUT现在开始它的内部循环。

在这个循环中它监听窗口系统中的事件并通过我们配置的回调传递出去。

在我们这个例子中，GLUT将只会调用我们注册的那个display回调（RenderScenceCB），在这个回调函数中（RenderScenceCB）我们可以自定义代码来渲染这一帧的图像。

（7）

glClear（GL_COLOR_BUFFER_BIT）;

glutSwapBuffers（）;

在渲染函数中我们能做的就是清空帧缓存（使用上面定义的颜色，可以尝试任意改变颜色看效果）。

第二个函数是告诉GLUT交换双缓冲机制中前后两个缓存的角色位置，也就是二者换班，后台的缓存放到前台显示，之前显示的缓存继续到后台开始另一帧的缓存工作。

这样在下一个渲染回调循环中交换到当前的缓存将在屏幕上显示。

示例Demo

#include

#include//freeGLUT窗口库

/**

*渲染回调函数

*/

voidRenderScenceCB（）{

//清空颜色缓存

glClear（GL_COLOR_BUFFER_BIT）;

//交换前后缓存

glutSwapBuffers（）;

}

/**

*主函数

*/

intmain（intargc,char**argv）{

//初始化GLUT

glutInit（&argc,argv）;

//显示模式：

双缓冲、RGBA

glutInitDisplayMode（GLUT_DOUBLE|GLUT_RGBA）;

//窗口设置

glutInitWindowSize（480,320）;//窗口尺寸

glutInitWindowPosition（100,100）;//窗口位置

glutCreateWindow（"Tutorial01"）;//窗口标题

//开始渲染

glutDisplayFunc（RenderScenceCB）;

//缓存清空后的颜色值

glClearColor（0.0f,0.0f,0.0f,0.0f）;

//通知开始GLUT的内部循环

glutMainLoop（）;

return0;

}

运行结果：

说明:

demo程序是原作者的代码，适用于多平台，由于在Mac上比较特殊，我在Mac上跑的时候发现GLEW有点问题暂时没解决，导致后面的三角形啥的在mac上没效果。

orz……最后我放弃了在mac用opengl了，坑实在太多，装了双系统在windows上安装vs2013来跑原作者的源代码，就顺利多了。

所以强烈建议还是在visualstudio上跑opengl吧！

学习教程之前配置好开发环境，边看边跑代码效果最好，这里我的环境主要包括：

1.VisualStudio2013；

2.OpenGL，windows默认已内置了OpenGL可直接引入无需再安装（说是微软为了推广自己的DX只提供一个很低的版本，但我的默认就是最新版本，4.3呢！

！

！

）；

二你好顶点

背景

这里要第一次开始使用GLEW（theOpenGLExtensionWranglerLibrary）库。

GLEW可以帮助我们解决一些伴随OpenGL扩展库管理出现的一些头疼的问题，初始化之后，它会检索你平台中所有可用的扩展库，动态的加载并且可以通过简单引用一个头文件来使用。

在这个教程中，我们将第一次使用定点缓冲器对象（VBOs）。

顾名思义，VBO是用来存储顶点的。

我们试图在屏幕上显示的存在于3d世界中的物体，像一个怪物、城堡或者一个简单的旋转的立方体，都是通过连接一组顶点来实现的。

VBOs是在GPU中加载顶点最有效的方式，他们是可以存储在视频内存的缓冲并且可迅速到达GPU处理，所以强烈推荐这种顶点加载方式。

这篇教程和下一篇教程是在这一系列中唯一依赖于固定功能管线的而不是可编程管线，事实上在这所有教程中也没有出现这两种管线的转换，我们只是依靠数据流经管线的方式。

在接下来的教程中将会有关于管线的透彻学习，而现在已经足够可以理解在到光栅化（在屏幕上使用屏幕坐标画点、线、三角形等图元）之前，这些可见的顶点都有他们的XYZ坐标（[-1.0，1.0]），光栅化程序将这些坐标映射到屏幕空间（例如：

如果屏幕宽度是1024，那么X=-1.0就映射到0，X=1.0映射到1023）。

最后，光栅化程序根据在drawcall（下面代码中会讲到）中定义的拓扑结构来绘制这些图元。

由于我们没有将任何shader着色器绑定到渲染管线上，我们的顶点也就没有经过任何变换。

也就是说，我们只是给这些顶点一个给定范围的值来使他们可见。

将X和Y坐标都设置为0可将顶点精确地至于两个坐标轴中间，也就是屏幕的中央。

安装GLEW：

GLEW可在官网下载：

大多数Linux发行版提供预先构建的包。

在Ubuntu上可以通过下面的指令安装：

apt-getinstalllibglew1.6libglew1.6-dev

Mac上安装GLEW的教程（需要安装MacPort）:

VisualStudio安装GLEW：

源代码详解

（1）#include

GLEW库引入（一定要在GLUT引入之前引入，否则会编译错误）,如果要引入其他OpenGL头文件，必须要注意将这个头文件放在前面。

为了将项目与GLEW进行连接需要在makefile中添加‘-lGLEW’（Mac上这个在GLEW的安装教程上有说明，需要在BuildingSetting中设置）.

（2）#include"math3d.h"

这个用于OpenGL的3d数学库可到网上自行下载，版本不一样可能变量名和变量初始化函数会不一样,但使用方法都一样。

也可以下载原作者的源码，里面也有这个头文件。

在这个教程中我们开始使用像向量这种辅助数据结构，并且慢慢我们会扩展这个头文件.

（3）

GLenumres=glewInit（）;

if（res!

=GLEW_OK）

{

fprintf（stderr,"Error:

'%s'\n",glewGetErrorString（res））;

}

这里初始化GLEW并检查是否有错误，这个必须在GLUT初始化之后完成.

（4）

Vector3fVertices[1];

Vertices[0]=Vector3f（0.0f,0.0f,0.0f）;

这里创建一个Vector3f结构的数组，并初始化XYZ坐标为0。

这样使该点显示在屏幕中央。

（5）GLuintVBO;

这里在项目中定义一个全局的GLuint引用变量，来操作顶点缓冲器对象。

后面会看到绝大多数OpenGL对象都是通过GLuint类型的变量来引用的.

（6）glGenBuffers（1,&VBO）;

OpenGL定义了几个glGen*前缀的函数来产生不同类型的对象。

它们通常有两个参数：

第一个参数用来定义你想创建的对象的数量，第二个参数是一个GLuint变量的数组的地址，来存储分配给你的引用变量handles（要确保这个数组足够大来处理你的请求！

）。

以后对这个函数的调用将不会重复产生相同的handle对象，除非你先使用glDeleteBuffers删除他们。

注意你不需要在buffer中定义你具体想要做的事情，将其一般化、通用化，具体的工作由下一步来完成。

（7）glBindBuffer（GL_ARRAY_BUFFER,VBO）;

OpenGL使用handle的方式很独特，在很多API中handle可以提供给任何相关的函数并且具体的操作就是通过那个handle来操作完成，在OpenGL中我们需要将handle与一个目标的名称进行绑定，然后在该目标上执行命令。

这些指令只会在与handle绑定的目标上生效直到另外有其他的对象跟这个handle绑定或者这个handle被置空。

目标名GL_ARRAY_BUFFER意思是这个buffer将存储一个顶点的数组。

另外一个有用的目标是GL_ELEMENT_ARRAY_BUFFER,这个的意思是这个buffer存储的是另一个buffer中顶点的标记。

还有很多其他的目标，后面的教程中会看到。

（8）glBufferData（GL_ARRAY_BUFFER,sizeof（Vertices）,Vertices,GL_STATIC_DRAW）;

绑定了我们的对象之后，我们要往里面添加数据。

这个回调函数取得我们之前绑定的目标名参数GL_ARRAY_BUFFER，还有数据的比特数参数，顶点数组的地址，还有一个表示这个数据模式的标志变量。

因为我们不会去改变这个buffer的内容所以这里用了GL_STATIC_DRAW标志，相反的标志是GL_DYNAMIIC_DRAW,这个只是给OpenGL的一个提示来给一些觉得合理的标志量使用，驱动程序可以通过它来进行启发式的优化（比如：

内存中哪个位置最合适存储这个buffer缓冲）。

（9）glEnableVertexAttribArray（0）;

在shader着色器教程中,可看到顶点着色器中使用的属性（位置、法线等）有索引来对它们进行映射,使你能够绑定C/C++程序中的数据和着色器中的属性名称，而且必须要为每一个顶点属性添加索引。

在这个教程暂时不会使用任何着色器，但是我们加载到buffer中的顶点位置在固定功能管线中是被认为是索引为0的顶点属性（当没有着色器绑定时被启用）。

你必须开启每一个顶点的属性，否则渲染管线无法获取这些数据。

（10）glBindBuffer（GL_ARRAY_BUFFER,VBO）;

这里我们再次绑定我们的buffer准备开始drawcall回调。

在这个小程序中我们只有一个顶点的缓冲因此每一帧都调用这个回调是很冗余的，在更加复杂的程序中，将会有很多的buffer缓冲来存储不同的模型，你必须用将要调用的buffer来不断更新管线的状态。

（11）glVertexAttribPointer（0,3,GL_FLOAT,GL_FALSE,0,0）;

这个回调告诉管线怎样解析bufer中的数据。

第1个参定义了属性的索引，再这个例子中我们知道这个索引默认是0，但是当我们开始使用shader着色器的时候，我们既要明确的设置着色器中的属性索引同时也要检索它；

第2个参数指的是属性中的元素个数（3个表示的是：

X,Y,Z坐标）；

第3个参数指的是每个元素的数据类型；

第4个参数指明我们是否想让我们的属性在被管线使用之前被单位化，我们这个例子中希望我们的数据保持不变的被传送；

第5个参数（称作’stride‘）指的是缓冲中那个属性的两个实例之间的比特数距离。

当只有一个属性（例如：

buffer只含有一个顶点的位置数据）并且数据被紧密排布的时候将该参数值设置为0。

如果我们有一个包含位置和法向量（都是有三个浮点数的vector向量，一共6个浮点数）两个属性的数据结构的数组的时候，我们将设置参数值为这个数据结构的比特大小（6*4=24）；

最后一个参数在前一个例子中非常有用。

我们需要在管线发现我们的属性的地方定义数据结构中的内存偏移值。

在有位置数据和法向量数据的结构中，位置的偏移量为0，而法向量的偏移量则为12。

（12）glDrawArrays（GL_POINTS,0,1）;

最后，我们调用函数毁回调来绘制几何图形。

之前所有的指令都非常重要，但它们只是设置了绘制指令的每一步的准备工作。

这个指令才是GPU真正开始工作的地方。

这个指令将整合这个指令收到的绘制参数和之前为这一个点的图形建立的状态数据来将结果渲染在屏幕上。

OpenGL提供了集中不同类型的drawcall绘制回调，每一种各自适用于不同的案例情况。

一般情况下可以将他们分成两类：

顺序绘制和索引绘制。

顺序绘制较简单，GPU经过你的顶点缓冲区，一个一个的挨着处理每一个顶点，并根据drawcall中定义的拓扑结构来解析他们。

例如：

如果你定义了三角形GL_TRIANGLES，那么第0-2个顶点成为第一个三角形，第3-5个顶点成为第二个等等。

如果你想让多个三角形共用同一个顶点你仍然要在缓冲区多次定义存储这个顶点，很浪费空间。

索引绘制相比顺序绘制更加复杂而且额外有一个索引缓冲区。

索引缓冲区存储着顶点缓冲区中顶点的索引标志。

GPU以和上面描述的类似的模式扫描索引缓冲区，索引0-2表示第一个三角形等等以此类推。

如果两个三角形共用一个顶点只需要在索引缓冲区定义两次这个顶点的索引即可，顶点缓冲区只需要存储一个顶点数据。

在游戏中索引绘制更常用，因为多数游戏模型是使用三角形图元来组成模型的表面（人的皮肤，城堡的墙等等），这些相连的三角形很多要共用一个顶点。

在这个教程中我们使用最简单的drawcall：

glDrawArrays。

这是一个顺序绘制所以没有索引缓冲器。

第一个参数我们定义拓扑结构为每一个顶点只表示一个点;下一个参数是第一个要绘制的顶点的索引，在我们这个例子中我们想从最开始的缓冲开始绘制，所以参数设置为0，但这也使我们能够在同一个缓冲区存储多个模型，然后根据它的偏移量选择其中一个进行绘制;最后一个参数是要绘制的顶点数。

（13）glDisableVertexAttribArray（0）;

当顶点短时间内不会被使用的时候及时禁用他们是个很好的习惯，当着色器不用他们的时候让他们可用无非是自找麻烦。

示例Demo

#include

#include//GLEW扩展库

#include//freeGLUT图形库

#include"ogldev_math_3d.h"//用于OpenGL的3d数学库,这里主要用到了顶点这个数据结构，下载原作者的源码可以找到这个头文件，

//这里运行可能会报错找不到vector3、matrix3x3、matrix4x4以及作者的ogldev_util头文件（作者源代码内有提供，后面会加入），暂时先将报错的都注释掉即可

GLuintVBO;

/**

*渲染回调函数

*/

staticvoidRenderScenceCB（）{

//清空颜色缓存

glClear（GL_COLOR_BUFFER_BIT）;

//开启顶点属性

glEnableVertexAttribArray（0）;

//绑定GL_ARRAY_BUFFER缓冲器

glBindBuffer（GL_ARRAY_BUFFER,VBO）;

//告诉管线怎样解析bufer中的数据

glVertexAttribPointer（0,3,GL_FLOAT,GL_FALSE,0,0）;

//开始绘制几何图形（绘制一个点）

glDrawArrays（GL_POINTS,0,1）;

//禁用顶点数据

glDisableVertexAttribArray（0）;

//交换前后缓存

glutSwapBuffers（）;

}

/**

*创建顶点缓冲器

*/

staticvoidCreateVertexBuffer（）

{

//创建含有一个顶点的顶点数组

Vector3fVertices[1];

//将点置于屏幕中央

Vertices[0]=Vector3f（0.0f,0.0f,0.0f）;

//创建缓冲器

glGenBuffers（1,&VBO）;

//绑定GL_ARRAY_BUFFER缓冲器

glBindBuffer（GL_ARRAY_BUFFER,VBO）;

//绑定顶点数据

glBufferData（GL_ARRAY_BUFFER,sizeof（Vertices）,Vertices,GL_STATIC_DRAW）;

}

/**

*主函数

*/

intmain（intargc,char**argv）{

//初始化GLUT

glutInit（&argc,argv）;

//显示模式：

双缓冲、RGBA

glutInitDisplayMode（GLUT_DOUBLE|GLUT_RGBA）;

//窗口设置

glutInitWindowSize（480,320）;//窗口尺寸

glutInitWindowPosition（100,100）;//窗口位置

glutCreateWindow（"Tutorial02"）;//窗口标题

//开始渲染

glutDisplayFunc（RenderScenceCB）;

//检查GLEW是否就绪，必须要在GLUT初始化之后！

GLenumres=glewInit（）;

if（res!

=GLEW_OK）{

fprintf（stderr,"Error:

'%s'\n",glewGetErrorString（res））;

return1;

}

//缓存清空后的颜色值

glClearColor（0.0f,0.0f,0.0f,0.0f）;

//创建顶点缓冲器

CreateVertexBuffer（）;

//通知开始GLUT的内部循环

glutMainLoop（）;

return0;

}

三第一个三角形

背景

这篇教程非常简短，我们只是扩展前一个教程来渲染一个三角形。

这篇教程中我们依然使用那个单位化的盒子模型。

可见的点必须在这个盒子内，这样他们将可以通过视窗的变换映射到窗口中可见的坐标上。

当俯视Z坐标轴的负方向时这个单位化盒子看上去如下图：

点（-1.0,-1.0）映射到盒子的左下角，（-1.0，1.0）映射到左上角等等。

如果将三角形的顶点往盒子外扩展移到盒子外，这个三角形将会被裁剪，只能看到三角形的一部分。

源代码详解：

（1）

Vector3fVertices[3];

Vertices[0]=Vector3f（-1.0f,-1.0f,0.0f）;

Vertices[1]=Vector3f（1.0f,-1.0f,0.0f）;

Vertices[2]=Vector3f（0.0f,1.0f,0.0f）;

这我们扩展上个教程中的顶点数组使其包含三个顶点；

（2）glDrawArrays（GL_TRIANGLES,0,3）;

在绘制函数中有两个变化：

画三角形而不是点，画三个顶点而不是一个。

示例Demo

#include

#include//GLEW扩展库

#include//freeGLUT图形库

#include"ogldev_math_3d.h"//用于OpenGL的3d数学库

GLuintVBO;

/**

*渲染回调函数

*/

staticvoidRenderScenceCB（）{

//清空颜色缓存

glClear（GL_COLOR_BUFFER_BIT）;

//开启顶点属性

glEnableVertexAttribArray（0）;

//绑定GL_ARRAY_BUFFER缓冲器

glBindBuffer（GL_ARRAY_BUFFER,VBO）;

//告诉管线怎样解析bufer中的数据

glVertexAt