正方形移动f

绘制流程

正方形绘制.png

与案例01---- 三角形案例相比,除了绘制的图形换成正方形之外，这边我增加了移动代码。

代码实现

正方形图形绘制

// blockSize 边长
GLfloat blockSize = 0.1f;

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

准备好正方形的4个顶点，边长数据。
就下来就到 SetupRC 函数中，存储顶点数据、设置图元连接方式

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

接着就是command + R 一个正方形的图形出来了。但是这时候的正方形就如同木头桩子是的不会动，那怎么才能让它动起来呢？关键地方到了，请往下看。

移动正方形

注册特殊函数

glutSpecialFunc(SpecialKeys);

通过特殊函数，我们可以获得它键盘4个方向的按键响应

具体实现

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);
    
    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;
    }
    
//    // 触碰四个边界的处理
//    // 当正方形移动超过最左边的时候
//    if (blockX < -1.0f) {
//        blockX = -1.0f;
//    }
//    // 当正方形移动到最右边的时候
//    if (blockX > 1.0f - blockSize * 2) {
//        blockX = 1.0f - blockSize * 2;
//    }
//    // 当正方形移动到最下面的时候
//    if (blockY < -1.0f + blockSize * 2) {
//        blockY = -1.0f + blockSize * 2;
//    }
//    // 当正方形移动到最上面的时候
//    if (blockY > 1.0f) {
//        blockY = 1.0f;
//    }
    // Recalculate vertex positions
    vVerts[0] = blockX;
    vVerts[1] = blockY - blockSize * 2;
    
    vVerts[3] = blockX + blockSize * 2;
    vVerts[4] = blockY - blockSize * 2;
    
    vVerts[6] = blockX + blockSize * 2;
    vVerts[7] = blockY;
    
    vVerts[9] = blockX;
    vVerts[10] = blockY;
    
    triangleBatch.CopyVertexData3f(vVerts);
    glutPostRedisplay();
}

其中key对应4个方向按键，上下左右按键分别对应于GLUT_KEY_UP、GLUT_KEY_DOWN、GLUT_KEY_LEFT和GLUT_KEY_RIGHT；
x和y是捕捉的当按键事件发生时显示窗口上鼠标点所处的位置，需要注意的是x和y是以左上角为起点（0,0），右下角为终点（windowWidth，windowHeight）。

这下算是大功告成了，但是当我们一直往右滑动，发现正方形不见了？

进行图形到边界处理

正方形超边界

如图正方形往右滑动消失了一小块了。这时候我们要打开SpecialKeys里面注释的代码，来处理正方形超出边界的时候的情况。

// 触碰四个边界的处理
    // 当正方形移动超过最左边的时候
    if (blockX < -1.0f) {
        blockX = -1.0f;
    }
    // 当正方形移动到最右边的时候
    if (blockX > 1.0f - blockSize * 2) {
        blockX = 1.0f - blockSize * 2;
    }
    // 当正方形移动到最下面的时候
    if (blockY < -1.0f + blockSize * 2) {
        blockY = -1.0f + blockSize * 2;
    }
    // 当正方形移动到最上面的时候
    if (blockY > 1.0f) {
        blockY = 1.0f;
    }

正方形移动简图.png

通过代码我们可以发现，我们移动图形主要是对他的每个顶点做了变动然后

矩阵代替顶点计算

到此移动正方形的功能已经都已经实现了。细心的我们可以看看能不能优化一下。
上面SpecialKeys函数中我们可以发现，我们每移动一下都得需要将每个顶点x,y值重新设一遍，这样的话非常麻烦。要是我们一百顶点呢？估计我们得设置疯了。
这时候我们就引入矩阵的概念。

增设 x,y变量

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

此用来记录x,y轴的变量。这时候是xPos,yPos以原点(0,0)（也是正方形中心点，此时正方形处在x,y轴的中心位置）为起始值。

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();
}

其次SpecialKeys函数里面我们不需要再对顶点重新设置。我们只需要计算xPos,yPos的变化值。再调用glutPostRedisplay通知openGL调用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.设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0,0.0,0.9,1.0f};
    
    // 新增代码 定义一个矩阵变量
    M3DMatrix44f mTransformMatrix;
    
    // 使用3d数学库中的平移函数 获取矩阵的值
    m3dTranslationMatrix44(mTransformMatrix, xPos, yPos, 0.0f);
    
    // 将矩阵结果交给着色器 进行绘制
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,mTransformMatrix,vRed);
    
    // 提交着色器
    triangleBatch.Draw();
    
    // 在开始的设置openGL                                                                                         窗口的时候，我们指定要一个双缓冲区渲染环境。这就意味着将后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到可能伴随着动画帧与动画帧之间的闪烁的渲染过程。缓冲区交换平台将平台特定的方式进行
    // 将后台缓冲区进行渲染，然后结束后家还给前台
    glutSwapBuffers();
}

这部分代码重要之处就是使用了矩阵。

首先创建了一个M3DMatrix44f变量，此变量通过m3dTranslationMatrix44函数根据xPos，yPos获取变换矩阵。
然后使用存储着色器的时候将此变换矩阵传递给着色器，内部再跟显存上的顶点做运算，计算出每个顶点实际的位置(这里还需要验证)。

好了，到此我们已经用矩阵代替了顶点计算完成正方形移动的代码改动了。

这里还有一点强调，就是使用存储着色器的时候一定要注意。有些着色器传入矩阵没有效果。所以这边我们用的平面着色器。

OpenGL 02案例 ---- 正方形移动