【OpenGL入门】使用固定着色器渲染一个正方形，并通过键盘控制移动

前言

在学习OpenGL之前，我们需要选择一套OpenGL的编译环境，这里介绍的是MacOS系统下学习使用OpenGL来渲染图形。
我们还需要GLUT工具包，GLUT帮助我们不用过多的去考虑窗口系统的内容。GLUT并不是OpenGL所必须的，但是它会给我们的学习带来一定的方便。

GLUT代表OpenGL Utility Tookit。Mark J.Kilgard 为了使OpenGL应用程序结构能够真正独立于窗口系统构思了GLUT库。

GLUT/GLTools

• GLUT

#include 

在Mac 系统下，#include
在Windows 和 Linux上，我们使用freeglut的静态库版本并且需要添加一个宏。

• GLToos

#include "GLShaderManager.h"
#include "GLTools.h"

#include 移入了GLTool 着色器管理器（shader Mananger）类。没有着色器，我们就不能在OpenGL（核心框架）进行着色。着色器管理器不仅允许我们创建并管理着色器，还提供一组“存储着色器”，他们能够进行一些初步基本的渲染操作。
#include GLTool.h头文件包含了大部分GLTool中类似C语言的独立函数。

渲染一个三角形

1.GLUT初始化，设置DisplayMode和窗口大小、窗口标题

    //初始化GLUT库,传入命令参数并且初始化glut库
    glutInit(&argc, argv);
    //初始化DisplayMode
    /*
     GLUT_DOUBLE  - 双缓冲窗口
     GLUT_RGBA    - RGBA颜色模式
     GLUT_DEPTH   - 深度测试
     GLUT_STENCIL - 模板缓冲区
     */
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    //设置GLUT窗口大小
    glutInitWindowSize(800, 600);
    //设置GLUT窗口标题
    glutCreateWindow("Triangle");

• GLUT_DOUBLE：双缓存窗口，是指绘图命令实际上是离屏缓存区执行的，然后迅速转换成窗口视图，这种方式，经常用来生成动画效果；
• GLUT_DEPTH：标志将一个深度缓存区分配为显示的一部分，因此我们能够执行深度测试；
• GLUT_STENCIL：确保我们也会有一个可用的模板缓存区；

2.设置重塑函数、渲染函数

    //注册重塑函数
    glutReshapeFunc(changeSize);
    //注册显示函数
    glutDisplayFunc(renderScene);

当窗口大小改变时，会回调changeSize方法；
当屏幕需要渲染时，会回调renderScene方法，稍后我们来实现这两个方法。

3.初始化GLEW库，确保OpenGL API对程序可用

    /*
     初始化一个GLEW库,确保OpenGL API对程序完全可用。
     在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题。
     */
    GLenum status = glewInit();
    if (GLEW_OK != status) {
        printf("GLEW Error:%s\n",glewGetErrorString(status));
        return 1;
    }

4.设置渲染环境

void setupRC()
{
    //设置清屏颜色（背景颜色）
    glClearColor(0.98f, 0.40f, 0.7f, 1);
    
    //没有着色器，在OpenGL 核心框架中是无法进行任何渲染的。初始化一个渲染管理器。
    shaderManager.InitializeStockShaders();
    
    //指定顶点，我们要渲染一个三角形，所以需要三个顶点
    //每个点的坐标都是3D笛卡尔坐标系(x, y, z)
    GLfloat vVerts[] = {
        -0.5f,0.0f,0.0f,
        0.5f,0.0f,0.0f,
        0.0f,0.5f,0.0f
    };
    
    triangleBatch.Begin(GL_TRIANGLES, 3);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();
    
}

顶点数组vVerts[]中的数据单位并不是像素，它是一个相对值，与设置的窗口大小有关。

5.changeSize()、renderScene()

接下来我们实现一下changeSize()和renderScene()这两个函数。

void changeSize(int w,int h)
{
    /*
      x,y 参数代表窗口中视图的左下角坐标，w、h为窗口的宽高
     */
    glViewport(0, 0, w, h);
    
}

void renderScene(void)
{

    //1.在渲染之前，清除一个或者一组特定的缓存区
    /*
     缓冲区是一块存在图像信息的储存空间。
     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.设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0,1.00,0.0,0.5f};
    
    //传递到存储着色器，即GLT_SHADER_IDENTITY着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
    
    //提交着色器
    triangleBatch.Draw();
    
    //在开始的设置openGL 窗口的时候，我们指定要一个双缓冲区的渲染环境。这就意味着将在后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到可能伴随着动画帧与动画帧之间的闪烁的渲染过程。缓冲区交换平台将以平台特定的方式进行。
    //将后台缓冲区进行渲染，然后结束后交换给前台
    glutSwapBuffers();
    
}

6.接下来最后一步，也是最重要的一步

启动GLUT的MainLoop,监听用户鼠标键盘输入、窗口大小改变、物体转动、重绘等等程序响应。

    glutMainLoop();

好了，运行一下，我们来看看效果。

三角形

渲染一个正方形

如果我们想把三角形变成正方形，改如何修改呢？
想一想，我们刚刚设置了顶点数组

//指定顶点，我们要渲染一个三角形，所以需要三个顶点
    //每个点的坐标都是3D笛卡尔坐标系(x, y, z)
    GLfloat vVerts[] = {
        -0.5f,0.0f,0.0f,
        0.5f,0.0f,0.0f,
        0.0f,0.5f,0.0f
    };

设置了三个顶点，那么是不是我们再添加一个顶点就可以了呢？这几个点的坐标改如何修改呢？

正方形的顶点数组

为了方便后续对这个正方形进行移动控制，我们设置一个正方形边长GLfloat blockSize = 0.1f，这里的1.0f同样也是一个相对值。

//blockSize 边长
GLfloat blockSize = 0.1f;

//正方形的4个点坐标
GLfloat vVerts[] = {
        -blockSize, -blockSize, 0.0f,
        blockSize, -blockSize, 0.0f,
        blockSize, blockSize, 0.0f,
        -blockSize, blockSize, 0.0f
};

这样就可以了吗？
上面我们传入的设置是GL_TRIANGLES三角形，并设置的是3个顶点。
我们需要修改为GL_TRIANGLE_FAN或者GL_QUADS，并设置为4个顶点。（感兴趣的同学可以多试几个GLenum primitive的效果）

    //修改为GL_TRIANGLE_FAN ，4个顶点
    triangleBatch.Begin(GL_TRIANGLE_FAN, 4);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();

正方形的效果

运行一下，看下效果。

正方形

键盘控制正方形的移动

上面讲到，启动GLUT的MainLoop后，可以监听到键盘的输入，我们设置一下监听的回调函数，

   //注册特殊函数
   glutSpecialFunc(specialKeys);

接下来我们来实现一下这个函数

void specialKeys(int key, int x, int y){
    //设置每次按键移动的距离
    GLfloat stepSize = 0.025f;
    //拿到两个顶点，以这两个顶点来计算移动
    GLfloat blockX = vVerts[0];//第一个顶点的x坐标
    GLfloat blockY = vVerts[10];//第四个顶点的y坐标
    
    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();
}

好了，再运行一下，试一下效果吧~

在OpenGL游戏开发中，最基本的就是要考虑边界和碰撞问题。

提问：如果我们要移动一个有着100个顶点的图片怎么办？一个顶点一个顶点的计算吗？

平移矩阵

我们利用平移矩阵来解决顶点数据过多问题。
先设置两个全局变量xPos、yPos，代表图形的中心点坐标。

GLfloat xPos = 0.0f;
GLfloat yPos = 0.0f;

重新实现renderScene()方法

void RenderScene(void) {

    //同样的，先清空一下特定的缓存区
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    //设置颜色 红色
    GLfloat vRed[] = {1.0f,0.0f,0.0f,0.0f};
    //定义矩阵变量
    M3DMatrix44f mFinalTransform, mTransfromMatrix, mRotationMartix;
    //平移
    m3dTranslationMatrix44(mTransfromMatrix, xPos, yPos, 0.0f);
    //每次平移时，旋转5度
    static float yRot = 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();    
}

再运行一下，试下效果吧~

转载请备注原文出处，不得用于商业传播-H.Ekko