今天来学习用OpenGL绘制一个正方形，并通过键盘方向键移动这个正方形。在绘制三角形案例中我们已知道如何通过OpenGL绘制一个图形，这里只需要再注册一个键盘方向键事件的回调函数，在回调函数里改变顶点坐标然后重绘就可以了。
一、 绘制思路
OpenGL移动正方形（坐标更新）
二、 代码实现
1. 准备工作
- 引入"GLTools.h"和<GLUT/GLUT.h>这两个文件；
- 声明一个GLBatch和一个GLShaderManager对象，设置正方形边长和顶点坐标。
- 声明窗口重塑事件、内容显示事件、方向键输入事件的回调函数。因为C语言是由上到下执行的，在main函数里如果需要调用函数，必须提前声明。
#include "GLTools.h"
#include <GLUT/GLUT.h>
GLBatch triangleBatch;
GLShaderManager shaderManger;
//正方形边长的一半
GLfloat blockSize = 0.1f;
//顶点坐标，标准化设备坐标范围（-1.0， 1.0）
//这里采用GL_TRIANGLE_FAN图元装配方式，只传入4个顶点，左下角设为第一个顶点
GLfloat vVerts[] = {
-blockSize, -blockSize, 0,
blockSize, -blockSize, 0,
blockSize, blockSize, 0,
-blockSize, blockSize, 0,
};
//窗口重塑回调函数
void ChangeSize(int w, int h){}
//内容显示回调函数
void RenderScene(void){}
//方向键输入事件
void SpecialKeys(int key, int x, int y){}
2. 设置当前工作目录
glSetWorkingDrectory是GLTools里的函数，用来设置当前工作目录，针对于macOS X。因为在Windows中工作目录默认就是与程序可执行程序相同的目录。但是在macOS X中，程序会将当前工作文件夹改为应用程序捆绑包中的/Resource文件夹。
PS：暂时还不知道这个设置工作目录有什么作用，因为在macOS X上注释掉这一行代码，也是可以正常渲染。只能留待后续解惑，读者中如果有知道的话，请留言告知。
gltSetWorkingDirectory(argv[0]);
3. 设置窗口
这里使用glut库实现窗口相关设置，glutSpecialFunc()函数可以监听特定按键的输入事件，包括：功能键、方向键和 PAGE-UP / PAGE-DOWN / HOME/END / INSERT 键。
在设置窗口显示模式时，其中GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区*：
- GLUT_DOUBLE：双缓存窗口，是指绘图命令实际上是离屏缓存区执行的，然后迅速转换成窗口视图。这种方式可以避免渲染动画时帧与帧之间的闪烁情况。
- GLUT_DEPTH：标志将一个深度缓存区分配为显示的一部分，因此我们能够执行深度测试；
- GLUT_STENCIL：确保我们也会有一个可用的模板缓存区。
//初始化glut库
glutInit(&argc, argv);
//设置窗口显示模式（开启双缓冲机制、RGBA颜色模式、深度测试、模板缓冲区）
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
//设置窗口大小
glutInitWindowSize(500, 500);
//创建窗口，设置窗口标题
glutCreateWindow("Triangle");
//注册事件回调函数
glutReshapeFunc(ChangeSize);
glutDisplayFunc(RenderScene);
glutSpecialFunc(SpecialKeys); //方向键输入事件
4. 初始化glew库
- 初始化glew库：glew库能够识别当前平台支持的OpenGL API，确保OpenGL API对程序完全可用。
- 判断初始化结果：在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题。
GLenum err = glewInit();
if(err != GLEW_OK){
fprintf(stderr, "glew error:%s\n", glewGetErrorString(err));
return 1;
}
5. 设置渲染相关信息
这里进行重置背景色、批次处理图形顶点数据以及设置着色器操作。
因为只是渲染一个正方形，所以选择单元着色器来渲染。
void SetupRC(void){
//重置背景色
glClearColor(0.98f, 0.4f, 0.7f, 1);
//利用三角形批次对象将数据拷贝到上下文，这里选择GL_TRIANGLE_FAN图元装配方式
triangleBatch.Begin(GL_TRIANGLE_FAN, 4);
triangleBatch.CopyVertexData3f(vVerts);
triangleBatch.End();
//初始化着色管理器
shaderManager.InitializeStockShaders();
//设置单元着色器，颜色为红色
GLfloat vRed[] = {1.0f, 0.0f, 0.0f, 1.0f};
shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vRed);
}
6. 实现窗口事件回调函数
6.1 重塑事件回调函数
重塑事件是在窗口第一次显示或窗口大小发生改变时触发。
在回调函数里设置视口大小和窗口大小一致，投影方式默认为正投影。
void ChangeSize(int w, int h){
//0，0代表窗口中视口的左下角坐标，w，h代表像素
glViewport(0, 0, w, h);
}
6.2 内容显示事件回调函数
内容显示事件在重塑事件发生后或主动重绘内容时触发，因此在回调函数里执行图形渲染，处理如下：
- 清空缓存区：缓冲区是一块存有图像信息的存储空间，在每次渲染前都需要清空缓存区。
- 开始渲染：通过三角形批次类发起渲染。
- 交换前后台缓冲区：在前面设置openGL窗口的时候，指定了一个双缓冲区的渲染环境，使得图形在后台缓冲区渲染，所以在渲染完后需要手动交互缓冲区，交由前台显示。
void RenderScene(void){
/*
清除一个或一组特定的缓冲区，当不确定需要清除哪个时，就全部清除掉：
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);
//开始渲染
triangleBatch.Draw();
//渲染完后交换前后台缓冲区，实现双缓冲机制
glutSwapBuffers();
}
6.3 方向键输入事件回调函数
这里主要实现每次方向键输入后移动正方形，处理如下：
- 设置每一步的移动距离。
- 判断输入键方向，计算第一个顶点的移动后的坐标。
- 碰撞检查，防止移动到窗外。
- 更新所有顶点的坐标。
- 利用GLBatch三角形批次类对象更新上下文中的顶点坐标。
- 重绘。
void SpecialKeys(int key, int x, int y){
//设定每次移动距离
GLfloat stepSize = 0.025f;
//计算第一个点移动后的坐标，再根据相对距离更新其他点的坐标
GLfloat blockX = vVerts[0];
GLfloat blockY = vVerts[1];
switch (key) {
case GLUT_KEY_UP: //向上方向键
blockY += stepSize;
break;
case GLUT_KEY_DOWN: //向下方向键
blockY -= stepSize;
break;
case GLUT_KEY_LEFT: //向左方向键
blockX -= stepSize;
break;
case GLUT_KEY_RIGHT: //向右方向键
blockX += stepSize;
break;
default:
break;
}
//判断是否超出边界
if(blockX < -1.0){
blockX = -1.0;
}
else if(blockX > 1.0 - blockSize * 2.f){
blockX = 1.0 - blockSize * 2;
}
if(blockY < -1.0){
blockY = -1.0;
}
else if(blockY > 1.0 - blockSize * 2){
blockY = 1.0 - blockSize * 2;
}
//更新顶点坐标
vVerts[0] = blockX;
vVerts[1] = blockY;
vVerts[3] = blockX + blockSize * 2;
vVerts[4] = blockY;
vVerts[6] = blockX + blockSize * 2;
vVerts[7] = blockY + blockSize * 2;
vVerts[9] = blockX;
vVerts[10] = blockY + blockSize * 2;
//利用批次类更新上下文中的顶点数据
triangleBatch.CopyVertexData3f(vVerts);
//重绘
glutPostRedisplay();
}
7. 开启窗口运行循环
GLUT内部会运行一个本地消息循环，需要手动开启后，才能处理窗口消息事件。
glutMainLoop();
三、程序运行效果
移动正方形.gif
网友评论