OpenGL-你好，正方形

案例练习，在窗口绘制一个正方形，并且用方向键控制移动

如果你是初学者，请先阅读案例--绘制三角形，这篇文章里会对基本函数做详细的解读。这里，我们就不再赘述了。

绘制正方形与绘制三角形基本流程是一样的，不同的是，正方形有4个顶点，三角形有3个顶点，我们只需要在绘制三角形的基础上做一些小小的修改。

为了方便后面的正方形移动，我们事先定义正方形4个顶点到中心点的距离为blockSize

GLfloat blockSize = 0.1f;

由图很容易可以看出，那么正方形的边长为：blockSize *2, 即0.2。

修改顶点数组：

//正方形四个点的坐标
GLfloat vVerts[] = {
    -blockSize, -blockSize, 0.0f,   // A点
    blockSize, -blockSize, 0.0f,    // B点
    blockSize, blockSize, 0.0f,     // C点
    -blockSize, blockSize, 0.0f,    // D点
};

修改setupRC函数中图元连接方式：

//将 GL_TRIANGLES(三角形) 修改为 GL_TRIANGLE_FAN （正方形）,4个顶点
triangleBatch.Begin(GL_TRIANGLE_FAN, 4);

只需要对三角形案例修改上面的代码，我们就可以得到了正方形

绘制正方形

接下来实现通过键位来控制正方形移动

案例目标：通过键盘上的“ 上下左右 ”按钮来控制正方形的移动

要想通过键盘来控制图形，我们需要在main函数中注册一个函数。

glutSpecialFunc(SpecialKeys);

当我们通过键位控制图形的时候，会在SpecialKeys函数中回调。

对于正方形ABCD，当我们移动ABCD的时候，ABCD四个顶点的位置会发生变化，但是ABCD四个顶点的相对位置，并不会改变，我们可以以D点为例，计算D点移动之后D‘的位置信息，最后通过四个顶点之间的相对位置关系，计算出其他顶点更新之后的位置信息。

首先定义移动步长：

//步长
GLfloat stepSize = 0.025f;

当D点向上移动一个键位时，此时D’点坐标x保持不变，y增加一个步长；
当D点向下移动一个键位时，此时D’点坐标x保持不变，y减少一个步长；
当D点向左移动一个键位时，此时D’点坐标y保持不变，x减少一个步长；
当D点向右移动一个键位时，此时D’点坐标y保持不变，x增加一个步长；

实现代码如下：

//key 枚举值，x、y是位置
void SpecialKeys(int key, int x, int y){
    //步长
    GLfloat stepSize = 0.025f;
    
    //取出参考点D点的坐标的x，y值
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[10];
    
    //根据移动方向，更新D点移动后的坐标
    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;
    }
  
    //根据相对位置信息更新其他顶点坐标
    // A点新坐标
    vVerts[0] = blockX;
    vVerts[1] = blockY - blockSize * 2;
    
    // B点新坐标
    vVerts[3] = blockX + blockSize * 2;
    vVerts[4] = blockY - blockSize * 2;

    // C点新坐标
    vVerts[6] = blockX + blockSize * 2;
    vVerts[7] = blockY;

    // D点新坐标
    vVerts[9] = blockX;
    vVerts[10] = blockY;
    printf("(%f,%f)\n",vVerts[9],vVerts[10]);
    
    //更新顶点数据
    triangleBatch.CopyVertexData3f(vVerts);
    
    //重新渲染提交 --> RenderScene
    glutPostRedisplay();
    
}

至此，我们可以完成了，可以通过键位控制正方形移动的功能。

运行代码一直向右移动，正方形移出了窗口边界。

正方形移动出边界了

通常情况下，这不是我们想要的结果，我们要做边界碰撞检测。

在规范化坐标系下，坐标系统是在-1.0~1.0之间的。

当正方形移动到最左边的时候，实际上就是 blockX 到达-1.0点；
当正方形移动到最右边的时候，实际上是 blockX + 边长 到达了1.0点;
当正方形移动到最上边的时候，实际上是 blockY 到达了-1.0点;
当正方形移动到最下边的时候，实际上是 blockY + 边长到达了1.0点

所以我们添加边界检测代码，如下：

//key 枚举值，x、y是位置
void SpecialKeys(int key, int x, int y){
    //步长
    GLfloat stepSize = 0.025f;
    
    //取出参考点D点的坐标的x，y值
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[10];
 
    //根据移动方向，更新D点移动后的坐标
    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.0f - 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;
    }
   
    //根据相对位置信息更新其他顶点坐标
    // A点新坐标
    vVerts[0] = blockX;
    vVerts[1] = blockY - blockSize * 2;
    // B点新坐标
    vVerts[3] = blockX + blockSize * 2;
    vVerts[4] = blockY - blockSize * 2;
    // C点新坐标
    vVerts[6] = blockX + blockSize * 2;
    vVerts[7] = blockY;
    // D点新坐标
    vVerts[9] = blockX;
    vVerts[10] = blockY;
    
    //更新顶点数据
    triangleBatch.CopyVertexData3f(vVerts);
    
    //重新渲染提交 --> RenderScene
    glutPostRedisplay();
    
}

至此，边界碰触问题得到了解决。

此案例中我们用到了4个顶点，通过计算其中一个顶点位置信息，根据顶点间相对位置计算其他顶点位置信息。那么，当有100个，1000个顶点的时候呢？

显然是不能够这样做的，为此，我们引入变换矩阵，下面我们利用变换矩阵来实现上面的案例。

利用矩阵实现

我们可以根据x，y移动的距离, 通过平移矩阵 图形顶点位置 * 平移矩阵 = 移动后的图形顶点位置，得到最终的效果。

我们对上面的实现，做一些小小的修改。

首先我们不再需要计算每一个顶点的移动距离，我们只需要记录图形在x，y方向上的整体平移距离。

// 记录移动图形时，在x轴上平移的距离
GLfloat xPos = 0.0f;
// 记录移动图形时，在y轴上平移的距离
GLfloat yPos = 0.0f;
// 步长
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;
  }

不同的是对于边界检测，我们要换个思维来理解一下

我们可以将平移矩阵变化过程中的图形平移的距离理解成根据图形中心点来进行移动的，所以我们要计算的移动距离就是两个中心点之间的平移距离。

当正方形中心点移动到最左边的时候，实际上正方形的最左边已经超出了屏幕的一半边长值，xPos走多了，所以要让xPos - blockSize > -1.0始终成立；即当xPos < (-1.0 + blockSize)时，让其等于(-1.0 + blockSize）。
当正方形中心点移动到最右边的时候，实际上正方形的最右边已经超出了屏幕的一半边长值，xPos走多了，所以要让xPos + blockSize < 1.0始终成立；即当xPos > 1.0- blockSize时，让其等于1.0-blockSize。
当正方形中心点移动到最上边的时候，实际上正方形的最上边已经超出了屏幕的一半边长值，yPos走多了，所以要让yPos + blockSize < 1.0始终成立;即当yPos > 1.0 - blockSize时，让其等于1.0 - blockSize。
当正方形中心点移动到最下边的时候，实际上正方形的最下边已经超出了屏幕的一半边长值，yPos走多了，所以要让yPos -blockSize > -1.0始终成立;即当yPos < -1.0 + blockSize 时，让其等于-1.0 + blockSize。

综上，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;
    }
    
    //碰撞检测 xPos是x轴上平移距离， yPos是y轴上平移距离
    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();
    
}

至此，对于正方形的移动以及边缘碰就做好了，下面我们要应用到着色器中，在三角形以及上面的实现方法时我们用到了 单元着色器 ，当使用平移矩阵的时候，我们需要用到 平面着色器 ，来传入相应的变换矩阵（关于着色器类型的了解，可以阅读渲染架构中关于固定着色器的介绍）

修改代码如下：

//开始渲染
void RenderScene(void)

{
    //1.清除一个或者一组特定的缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
    
    //2.设置颜色RGBA
    GLfloat vRed[] = {1.0f, 0.5f, 0.0f, 1.0f};

    //定义矩阵
    M3DMatrix44f mTransformMatrix;
    
    //平移矩阵
    m3dTranslationMatrix44(mTransformMatrix, xPos, yPos, 0.0f);
    
    //使用平面着色器
    //参数1：存储着色器类型
    //参数2：使用什么矩阵变换
    //参数3：颜色
    shaderManager.UseStockShader(GLT_SHADER_FLAT, mTransformMatrix, vRed);
    
    //提交着色器
    triangleBatch.Draw();
    glutSwapBuffers();
}

至此，利用平移矩阵对于此案例的实现就完成了。