三、OpenGL案例二 — 绘制正方形并控制移动

在绘制之前先了解方法的执行顺序和各自的业务。
首先看main函数

int main(int argc,char* argv[])
{
    
    //设置当前工作目录，针对MAC OS X
    
    gltSetWorkingDirectory(argv[0]);   
    //初始化GLUT库  
    glutInit(&argc, argv); 
    /*初始化双缓冲窗口，其中标志GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指
     双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区*/
  glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    //GLUT窗口大小，标题窗口
    glutInitWindowSize(600,600);
    glutCreateWindow("Triangle");
   
    //注册回调函数
    glutReshapeFunc(ChangeSize);
    glutDisplayFunc(RenderScene);
    //驱动程序的初始化中没有出现任何问题。
    GLenum err = glewInit();
    if(GLEW_OK != err) {
        fprintf(stderr,"glew error:%s\n",glewGetErrorString(err)); 
        return 1; 
    }
    //调用SetupRC
    SetupRC();
    glutMainLoop();
    return 0; 
}

main函数做了一系列初始化的工作

• 初始化GLUT库
• 初始化双缓冲窗口、RGBA颜色模式、深度测试、模版缓冲区
• 设置窗口大小，窗口标题
• 注册回调函数
  1.glutReshapeFunc()
  2.glutDisplayFunc()
• 手动调用SetupRC()

setRC()函数

//为程序作一次性的设置
void SetupRC()
{
    //设置背影颜色
    glClearColor(0.3f,0.4f,0.5f,1.0f);
    
    //初始化着色管理器
    shaderManager.InitializeStockShaders();
    
    //批次处理
    triangleBatch.Begin(GL_TRIANGLES,3);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();
}

这个函数只执行一次，在main函数中手动触发

• 设置窗口背景颜色
• 初始化着色管理器
• 利用GLBatch 三角形批次类将数据传递到着色器

ChangeSize函数

//窗口大小改变时接受新的宽度和高度，其中0,0代表窗口中视口的左下角坐标，w，h代表像素
void ChangeSize(int w,int h)
{
    glViewport(0,0, w, h);   
}

ChangeSize在main函数中注册，自动触发，触发条件是

• 第一次创建窗口
• 窗口尺寸发生改变

处理的业务

• 设置OpenGL视口
• 设置OpenGL投影方式等

RenderScene函数

void RenderScene(void)
{
    //清除一个或一组特定的缓冲区
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    
    //设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0f,0.5f,0.0f,1.0f};
    
    //传递到存储着色器，即GLT_SHADER_IDENTITY着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
    
    //提交着色器
    triangleBatch.Draw();
    
    //将在后台缓冲区进行渲染，然后在结束时交换到前台
    glutSwapBuffers();
    
}

RenderScene在main函数中注册

• 自动触发
• 开发者手动调用 glutPostRedisplay();

处理的业务

• 清理缓存区(颜色，深度，模板缓存区等)
• 使用存储着色器绘制图形

因此绘制正方形只要改变顶点数组和传递数据的GLBatch即可。

image.png

定义图形顶点到坐标轴的距离为blockSize,则四个顶点的坐标为

GLfloat blockSize = 0.1f;
GLfloat vVerts[] = {
    
    -blockSize,blockSize,0.0f,
    blockSize,blockSize,0.0f,
    blockSize,-blockSize,0.0f,
    -blockSize,-blockSize,0.0f,
};

再将GLBatch的设置函数修改为

triangleBatch.Begin(GL_TRIANGLE_FAN,4);

即可，command+R 绘制出了正方形

image.png

现在想通过键盘的方向键控制它的移动，先在main函数中注册特殊键位回调方法

glutSpecialFunc(SpecialKeys);

初始化3个变量记录X轴方向的偏移量、Y轴方向的偏移量和每一步偏移大小

GLfloat blockX = 0.0f;//记录X轴方向的偏移量
GLfloat blockY = 0.0f;//记录Y轴方向的偏移量
GLfloat stepSize = 0.025f;//每一步偏移大小

为了防止正方形移出屏幕视口之外，做了边界处理。

• 正方形在最左边时，blockX = blockSize - 1.0f;
• 正方形在最右边是正好相反，blockX = 1.0f - blockSize ;
• 正方形在最上边时，blockY = 1.0f - blockSize
• 正方形在最下边时，blockY = blockSize - 1.0f;

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

定义了一个新的数组存储移动之后的顶点坐标，然后通过批次类将数据传递给着色器，并调用函数重新渲染

void SpecialKeys(int key, int x, int y){
    
    GLfloat vVertsMove[12] = {
        vVerts[0],vVerts[1],vVerts[2],
        vVerts[3],vVerts[4],vVerts[5],
        vVerts[6],vVerts[7],vVerts[8],
        vVerts[9],vVerts[10],vVerts[11],
    };
    
    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 < (blockSize -1.0f)) {
        blockX = blockSize -1.0f;
    }
    
    //当正方形移动到最右边时
    //blockX = 总边长 - 正方形的边长
    if (blockX > (1.0 - blockSize)) {
        blockX = 1.0f - blockSize;
    }
    
    //当正方形移动到最下面时
    // blockSize - 1 = blockY
    if (blockY < blockSize -1.0f ) {
        blockY = blockSize -1.0f;
    }
    
    //当正方形移动到最上面时
    // 1 - blockSize = blockY
    if (blockY > 1.0f - blockSize) {
        blockY = 1.0f - blockSize;
    }
    // Recalculate vertex positions
    vVertsMove[0] = vVerts[0] + blockX;
    vVertsMove[1] = vVerts[1] + blockY;
    printf("(%f,%f)\n",vVerts[0],vVerts[1]);
    
    vVertsMove[3] = vVerts[3] + blockX;
    vVertsMove[4] = vVerts[4] + blockY;
    printf("(%f,%f)\n",vVerts[3],vVerts[4]);
    
    vVertsMove[6] = vVerts[6] + blockX;
    vVertsMove[7] = vVerts[7] + blockY;
    printf("(%f,%f)\n",vVerts[6],vVerts[7]);
    
    vVertsMove[9] = vVerts[9] + blockX;
    vVertsMove[10] = vVerts[10] + blockY;
    printf("(%f,%f)\n",vVerts[9],vVerts[10]);
    
    triangleBatch.CopyVertexData3f(vVertsMove);
    glutPostRedisplay();
}

效果图如下

正方形移动.gif

每一次移动过程中，我们手动计算每个顶点的坐标很是繁琐，可以直接通过平移矩阵来实现。只需要在RenderScene添加以下代码

M3DMatrix44f mTransfromMatrix;
    //平移
    m3dTranslationMatrix44(mTransfromMatrix, blockX, blockY, 0.0f);
    //将矩阵结果 提交给固定着色器（平面着色器）中绘制
    shaderManager.UseStockShader(GLT_SHADER_FLAT,mTransfromMatrix,vRed);

完整代码如下

#include "GLShaderManager.h"

#include "GLTools.h"

#include 

GLBatch triangleBatch;

GLShaderManager shaderManager;

//设置正方形，其中数组vVert包含所有4个顶点的x,y,笛卡尔坐标对。blockSize为1/2边长
GLfloat blockSize = 0.1f;
GLfloat vVerts[] = {
    
    -blockSize,blockSize,0.0f,
    blockSize,blockSize,0.0f,
    blockSize,-blockSize,0.0f,
    -blockSize,-blockSize,0.0f,
};

GLfloat blockX = 0.0f;//记录X轴方向的偏移量
GLfloat blockY = 0.0f;//记录Y轴方向的偏移量
GLfloat stepSize = 0.025f;//每一步偏移大小

//窗口大小改变时接受新的宽度和高度，其中0,0代表窗口中视口的左下角坐标，w，h代表像素
void ChangeSize(int w,int h)
{
    glViewport(0,0, w, h);
}

//为程序作一次性的设置
void SetupRC()
{
    //设置背影颜色
    glClearColor(0.3f,0.4f,0.5f,1.0f);
    
    //初始化着色管理器
    shaderManager.InitializeStockShaders();
    
    //批次处理
    triangleBatch.Begin(GL_TRIANGLE_FAN,4);
    triangleBatch.CopyVertexData3f(vVerts);
    triangleBatch.End();
}

//开始渲染
void RenderScene(void)
{
    //清除一个或一组特定的缓冲区
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    //设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0f,0.5f,0.0f,1.0f};
 
    M3DMatrix44f mTransfromMatrix;
    //平移
    m3dTranslationMatrix44(mTransfromMatrix, blockX, blockY, 0.0f);
    //将矩阵结果 提交给固定着色器（平面着色器）中绘制
    shaderManager.UseStockShader(GLT_SHADER_FLAT,mTransfromMatrix,vRed);
    //提交着色器
    triangleBatch.Draw();
    //将在后台缓冲区进行渲染，然后在结束时交换到前台
    glutSwapBuffers();
}
void SpecialKeys(int key, int x, int y){
    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 < (blockSize -1.0f)) {
        blockX = blockSize -1.0f;
    }
    //当正方形移动到最右边时
    //blockX = 总边长 - 正方形的边长
    if (blockX > (1.0 - blockSize)) {
        blockX = 1.0f - blockSize;
    }
    //当正方形移动到最下面时
    // blockSize - 1 = blockY
    if (blockY < blockSize -1.0f ) {
        blockY = blockSize -1.0f;
    }
    //当正方形移动到最上面时
    // 1 - blockSize = blockY
    if (blockY > 1.0f - blockSize) {
        blockY = 1.0f - blockSize;
    }
    glutPostRedisplay();
}
int main(int argc,char* argv[])
{
    //设置当前工作目录，针对MAC OS X
    gltSetWorkingDirectory(argv[0]);
    //初始化GLUT库
    glutInit(&argc, argv);
    /*初始化双缓冲窗口，其中标志GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指
     双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区*/
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    //GLUT窗口大小，标题窗口
    glutInitWindowSize(600,600);
    glutCreateWindow("Triangle");
    //注册回调函数
    glutReshapeFunc(ChangeSize);
    glutDisplayFunc(RenderScene);
    glutSpecialFunc(SpecialKeys);
    //驱动程序的初始化中没有出现任何问题。
    GLenum err = glewInit();
    if(GLEW_OK != err) {
        fprintf(stderr,"glew error:%s\n",glewGetErrorString(err));
        return 1;   
    }
    //调用SetupRC
    SetupRC();
    glutMainLoop();
    return 0;   
}