OpenGL入门（二）-- 案例：正方形键位控制

在上一篇已经了解三角形的绘制，本篇了解一下正方形的键位控制，经过上一篇的铺垫，那么正方形的绘制就变的很简单了，首先看一下效果：

效果展示如下：

具体流程如下：

主要实现部分：

• 绘制正方形
• 特殊键移动控制

绘制正方形

其实正方形绘制，只需在三角形绘制的基础上做少许修改，便可。

具体修改如下：

• 定义顶点到中心点的距离，则 边长 = 2 * blockSize

//blockSize 边长
GLfloat blockSize = 0.1f;

• 修改顶点数组

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

• 修改图元连接方式
  在setupRC函数中，修改批次类的图元连接方式

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

特殊键移动控制

特殊键位移动控制，主要是指上下左右方向键控制正方形的移动，实现方式可以有下面两种：

• 坐标更新

  适用于顶点较少的图形，对每一个顶点一一更新

• 矩阵变换

  当图形顶点非常多时，使用矩阵，同时更新

坐标更新

坐标更新的逻辑主要是在SpecialKeys函数中，顶点坐标的更新是根据相对顶点逐个进行更新，并手动调用渲染。

• 定义步长
• 找个一个相对顶点
• 更新x,y
• 边界碰撞处理（不处理，正方形会移动到屏幕外）
• 更新顶点数据
• 手动调用渲染

自定义的三个函数流程如下：

具体代码实现如下：

void SpecialKeys(int key, int x, int y){
    // ✅ 定义步长
    GLfloat stepSize = 0.025f;
    // ✅ 找一个相对的顶点，这里以左上角顶点为相对顶点，
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[10];
    
    printf("v[0] = %f\n",blockX);
    printf("v[10] = %f\n",blockY);
    
    // ✅ 更新x,y
    if (key == GLUT_KEY_UP) {
        
        blockY += stepSize;
    }
    
    if (key == GLUT_KEY_DOWN) {
        
        blockY -= stepSize;
    }
    
    if (key == GLUT_KEY_LEFT) {
        blockX -= stepSize;
![](https://user-gold-cdn.xitu.io/2020/7/9/173313c589dc0b9c?w=4910&h=5022&f=png&s=817886)
![](https://user-gold-cdn.xitu.io/2020/7/9/173313c934e62989?w=4910&h=5022&f=png&s=817886)
    }
    
    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);
    // ✅ 重新提交渲染 ，调用 RenderScene
    glutPostRedisplay();
}

矩阵变换

矩阵方式，主要是根据X轴和Y轴移动的距离，生成一个矩阵，通过 图形和矩阵相乘 最终得到移动后的图形。

主要涉及两个函数：

• SpecialKeys函数：

  • 定义步长及两个全局变量（相对于x轴和y轴的平移距离）

  • 根据方向，计数平移距离

  • 处理边缘碰撞

    可以将初始化的平移距离理解为正方形的中心，移动时，中心点变化，移动的距离就是先后两个中心点的平移距离

  • 手动触发重新渲染

• RenderScene函数：

  • 清理特定缓存区

  • 根据平移距离计算平移矩阵

  • 将矩阵结果交给存储着色器（平面着色器）中绘制

    在位置更新方式中，使用的是单元着色器，而矩阵方式中，涉及的矩阵是4*4的，单元着色器不够用，所以使用平面着色器

两个函数的流程图如下：

SpecialKeys函数实现如下：

void SpecialKeys(int key, int x, int y){
    // ✅ 步长
    GLfloat stepSize = 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();
    
}

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 mTransfromMatrix;
    
    // ✅ 平移
    m3dTranslationMatrix44(mTransfromMatrix, xPos, yPos, 0.0f);

    // ✅ 将矩阵结果 提交给固定着色器（平面着色器）中绘制
    //当单元着色器不够用时，使用平面着色器
    //参数1：存储着色器类型
    //参数2：使用什么矩阵变换
    //参数3：颜色
    shaderManager.UseStockShader(GLT_SHADER_FLAT,mTransfromMatrix,vRed);
    triangleBatch.Draw();
    
    // ✅ 执行交换缓存区
    glutSwapBuffers();

}

完整代码见GitHub