使用OpenGL绘制一个可移动的正方形

背景：根据初学的知识绘制一个可移动的正方形，并且做边界检测。

其具体流程图如下：

配置OpenGL环境这里就不说了。

1.首先我们需要在入口main.cpp文件中导入三个文件：

#include "GLShaderManager.h"

GLTool 着色器管理器（shader Mananger）类。没有着色器，我们就不能在OpenGL（核心框架）进行着色。着色器管理器不仅允许我们创建并管理着色器，还提供一组“存储着色器”，他们能够进行一基本的渲染操作。

#include "GLTools.h"

GLTool.h头文件包含了大部分GLTool中类似C语言的独立函数。

#include <GLUT/GLUT.h>

2.定义着色管理器、批次容器、步长、顶点坐标

//定义一个，着色管理器

GLShaderManager shaderManager;

//简单的批次容器，是GLTools的一个简单的容器类。

GLBatch triangleBatch;

//blockSize 边长

GLfloat blockSize = 0.1f;

//正方形的4个点坐标

GLfloatvVerts[] = {

-blockSize,-blockSize,0.0f,

blockSize,-blockSize,0.0f,

blockSize,blockSize,0.0f,

-blockSize,blockSize,0.0f

};

3、在main函数中初始化，注册函数

int main(intargc,char*argv[]){

//设置当前工作目录，针对MAC OS X

/* `GLTools`函数`glSetWorkingDrectory`用来设置当前工作目录。实际上在Windows中是不必要的，因为工作目录默认就是与程序可执行执行程序相同的目录。但是在Mac OS X中，这个程序将当前工作文件夹改为应用程序捆绑包中的`/Resource`文件夹。`GLUT`的优先设定自动进行了这个中设置，但是这样中方法更加安全。

gltSetWorkingDirectory(argv[0]);

//初始化GLUT库,这个函数只是传说命令参数并且初始化glut库

glutInit(&argc, argv);

/* 初始化双缓冲窗口，其中标志GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指

双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区

--GLUT_DOUBLE`：双缓存窗口，是指绘图命令实际上是离屏缓存区执行的，然后迅速转换成窗口视图，这种方式，经常用来生成动画效果；

--GLUT_DEPTH`：标志将一个深度缓存区分配为显示的一部分，因此我们能够执行深度测试；

--GLUT_STENCIL`：确保我们也会有一个可用的模板缓存区。

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);

//GLUT窗口大小、窗口标题

//glutInitWindowSize(600, 800);

glutInitWindowSize(500, 500);

glutCreateWindow("Triangle");

GLUT 内部运行一个本地消息循环，拦截适当的消息。然后调用我们不同时间注册的回调函数。我们一共注册2个回调函数：

1）为窗口改变大小而设置的一个回调函数

2）包含OpenGL 渲染的回调函数

//注册重塑函数

glutReshapeFunc(changeSize);

//注册显示函数

glutDisplayFunc(RenderScene);

//注册特殊函数

glutSpecialFunc(SpecialKeys);

初始化一个GLEW库,确保OpenGL API对程序完全可用。

在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题

GLenumstatus =glewInit();

if(GLEW_OK!= status) {

printf("GLEW Error:%s\n",glewGetErrorString(status));

return1;

}

//设置我们的渲染环境

setupRC();

glutMainLoop();

return 0;

}

4、初始化渲染环境setupRC

在这个函数中我们设置背景颜色、设置固定管线渲染、设置图形顶点数据。代码如下：

void RenderScene(void){

//1.清除一个或者一组特定的缓存区

/*缓冲区是一块存在图像信息的储存空间，红色、绿色、蓝色和alpha分量通常一起分量通常一起作为颜色缓存区或像素缓存区引用。

OpenGL 中不止一种缓冲区（颜色缓存区、深度缓存区和模板缓存区）

清除缓存区对数值进行预置

参数：指定将要清除的缓存的

GL_COLOR_BUFFER_BIT :指示当前激活的用来进行颜色写入缓冲区

GL_DEPTH_BUFFER_BIT :指示深度缓存区

GL_STENCIL_BUFFER_BIT:指示模板缓冲区

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);

//2.设置一组浮点数来表示红色

GLfloatvRed[] = {1.0,0.0,0.0,1.0f};

//传递到存储着色器，即GLT_SHADER_IDENTITY着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形

shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);

//提交着色器

triangleBatch.Draw();

//在开始的设置openGL 窗口的时候，我们指定要一个双缓冲区的渲染环境。这就意味着将在后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到可能伴随着动画帧与动画帧之间的闪烁的渲染过程。缓冲区交换平台将以平台特定的方式进行。

//将后台缓冲区进行渲染，然后结束后交换给前台

glutSwapBuffers();

}

5、注册显示函数RenderScene

我们在显示函数中设置背景颜色，设置存储着色器，代码如下：

void RenderScene(void){

//1.清除一个或者一组特定的缓存区

缓冲区是一块存在图像信息的储存空间，红色、绿色、蓝色和alpha分量通常一起分量通常一起作为颜色缓存区或像素缓存区引用。

OpenGL 中不止一种缓冲区（颜色缓存区、深度缓存区和模板缓存区）

清除缓存区对数值进行预置

参数：指定将要清除的缓存的

GL_COLOR_BUFFER_BIT :指示当前激活的用来进行颜色写入缓冲区

GL_DEPTH_BUFFER_BIT :指示深度缓存区

GL_STENCIL_BUFFER_BIT:指示模板缓冲区

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);

//2.设置一组浮点数来表示红色

GLfloatvRed[] = {1.0,0.0,0.0,1.0f};

//传递到存储着色器，即GLT_SHADER_IDENTITY着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形

shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);

//提交着色器

triangleBatch.Draw();

//将后台缓冲区进行渲染，然后结束后交换给前台

glutSwapBuffers();

}

6、注册重塑函数changeSize

通过实现注册后的函数changSize，我们能调整窗口大小，代码如下：

/* 在窗口大小改变时，接收新的宽度&高度。*/

void changeSize(int w,int h){

/*x,y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x,y 都是为0*/

glViewport(0,0, w, h);

}

7.注册特殊函数SpecialKeys，监听键盘移动

想要使得正方形移动，我们有两种方法去移动：

（1）坐标更新。

当我们通过键盘移动时，我们以一个顶点的坐标为目标点，通过计算这个顶点移动后的坐标值来计算出其他的几个顶点的坐标值，在计算时我们需要注意顶点坐标的边界检测问题，具体代码如下：

void SpecialKeys(int key,int x,int y){

GLfloatstepSize =0.025f;

GLfloatblockX =vVerts[0];

GLfloatblockY =vVerts[10];

printf("v[0] = %f\n",blockX);

printf("v[10] = %f\n",blockY);

if(key ==GLUT_KEY_UP) {

blockY += stepSize;

}

if(key ==GLUT_KEY_DOWN) {

blockY -= stepSize;

}

if(key ==GLUT_KEY_LEFT) {

blockX -= stepSize;

}

if(key ==GLUT_KEY_RIGHT) {

blockX += stepSize;

}

//触碰到边界（4个边界）的处理

//当正方形移动超过最左边的时候

if(blockX < -1.0f) {

blockX = -1.0f;

}

//当正方形移动到最右边时

//1.0 - blockSize * 2 = 总边长 - 正方形的边长 = 最左边点的位置

if(blockX > (1.0-blockSize*2)) {

blockX =1.0f-blockSize*2;

}

//当正方形移动到最下面时

//-1.0 - blockSize * 2 = Y（负轴边界） - 正方形边长 = 最下面点的位置

if(blockY < -1.0f+blockSize*2) {

blockY = -1.0f+blockSize*2;

}

//当正方形移动到最上面时

if(blockY >1.0f) {

blockY =1.0f;

}

printf("blockX = %f\n",blockX);

printf("blockY = %f\n",blockY);

// Recalculate vertex positions

vVerts[0] = blockX;

vVerts[1] = blockY -blockSize*2;

printf("(%f,%f)\n",vVerts[0],vVerts[1]);

vVerts[3] = blockX +blockSize*2;

vVerts[4] = blockY -blockSize*2;

printf("(%f,%f)\n",vVerts[3],vVerts[4]);

vVerts[6] = blockX +blockSize*2;

vVerts[7] = blockY;

printf("(%f,%f)\n",vVerts[6],vVerts[7]);

vVerts[9] = blockX;

vVerts[10] = blockY;

printf("(%f,%f)\n",vVerts[9],vVerts[10]);

triangleBatch.CopyVertexData3f(vVerts);

glutPostRedisplay();

}

（2）矩阵

当在简单图形绘制并且顶点数据少时我们可以通过所有的顶点数据更新就能完成移动，但是当要绘制的图形复杂或者顶点数据非常多的时候，这个时候如果再去移动所有的顶点坐标时将会变成无比的麻烦和冗杂，为此我们可以通过另外一种方式来进行移动，即矩阵。通过x和y的移动距离生成平移距离然后得到平移后的图形：

原图形*平移矩阵=平移后的图形。

矩阵变换时，显示函数RenderScene也需要做对应的修改，代码如下：

void RenderScene(void){

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);

GLfloatvRed[] = {1.0f,0.0f,0.0f,0.0f};

M3DMatrix44fmFinalTransform,mTransfromMatrix,mRotationMartix;

//平移

m3dTranslationMatrix44(mTransfromMatrix, xPos, yPos, 0.0f);

//每次平移时，旋转5度

staticfloatyRot =0.0f;

yRot +=5.0f;

m3dRotationMatrix44(mRotationMartix,m3dDegToRad(yRot),0.0f,0.0f,1.0f);

//将旋转和移动的矩阵结果合并到mFinalTransform （矩阵相乘）

m3dMatrixMultiply44(mFinalTransform, mTransfromMatrix, mRotationMartix);

//将矩阵结果提交给固定着色器（平面着色器）中绘制

shaderManager.UseStockShader(GLT_SHADER_FLAT,mFinalTransform,vRed);

triangleBatch.Draw();

//执行交换缓存区

glutSwapBuffers();

}

对应的SpecialKeys函数代码如下：

void SpecialKeys(int key,int x,int y){

GLfloatstepSize =0.025f;

if(key ==GLUT_KEY_UP) {

yPos+= stepSize;

}

if(key ==GLUT_KEY_DOWN) {

yPos-= stepSize;

}

if(key ==GLUT_KEY_LEFT) {

xPos-= stepSize;

}

if(key ==GLUT_KEY_RIGHT) {

xPos+= stepSize;

}

//碰撞检测

if(xPos< (-1.0f+blockSize)) {

xPos= -1.0f+blockSize;

}

if(xPos> (1.0f-blockSize)) {

xPos=1.0f-blockSize;

}

if(yPos< (-1.0f+blockSize)) {

yPos= -1.0f+blockSize;

}

if(yPos> (1.0f-blockSize)) {

yPos=1.0f-blockSize;

}

glutPostRedisplay();

}