三 OpenGL 编程案例三角形渲染/绘制正方形并通过键位控制

1. OpenGL Mac环境配置

2.绘制三角形程序执行流程

image

2.1 引入3个头文件

//着色器管理器（shader Mananger）类
#include<GLShaderManager.h> 

 //包含大部分GLTool中类似C语言的独立函数   
#include<GLTools.h>

//GLUT引入
#include <GLUT/GLUT.h>

2.2 定义工具类对象

//定义一个，着色器管理器对象

GLShaderManager shaderManager;

 //批次类容器
  
  GLBatch triangleBatch;

2.3 GLUT初始化

 //初始化GLUT库,传输命令参数
    glutInit(&argc, argv);
    
//初始化双缓冲窗口，
//其中标志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");

2.4 注册自定义回调函数

 /*
     GLUT 内部运行一个本地消息循环，拦截适当的消息调用我们注册的回调函数
     */
    //注册窗口改变大小的回调函数
    glutReshapeFunc(changeSize);
    
    //注册OpenGL渲染的回调函数
    glutDisplayFunc(RenderScene);

2.5 changeSize函数设置视口和投影方式

/*
 在窗口大小改变时，接收新的宽度&高度。
 触发回调的条件：1 新建窗口 , 2 窗口尺寸发生调整
 处理业务: 1 设置OpenGL 视口 , 2 设置OpenGL投影方式
 */
void changeSize(int w,int h)
{
    /*
    设置视口
      x,y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x,y 都是为0
     */
    glViewport(0, 0, w, h);
    
}

2.6 RenderScene函数清理缓存去，配置着色器并绘制图形

/*
触发回调的条件：
1 系统自动触发（定时刷新界面重新渲染）
2 开发者手动调用函数触发

处理业务:
1 清理缓存区(颜色,深度,模板缓存区等)
2 使用存储着色器
3 绘制图形
*/
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.0,1.0f};
    
    //使用存储着色器，即GLT_SHADER_IDENTITY着色器
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
    
    //提交着色器
    triangleBatch.Draw();
    
    //在开始的设置openGL，我们指定要一个双缓冲区的渲染环境。缓冲区交换平台将以平台特定的方式进行。
    //将后台缓冲区进行渲染，然后结束后交换给前台
    glutSwapBuffers();
    
}

2.7 setupRC 渲染的初始化：设置清屏颜色，初始化着色器，设置图元装配方式并传输顶点数据给着色器

//设置清屏颜色（背景颜色）
    glClearColor(0.98f, 0.40f, 0.7f, 1);
    
    
    //初始化一个着色器管理器
    shaderManager.InitializeStockShaders();
    
    
    //指定3个顶点
    GLfloat vVerts[] = {
        -0.5f,0.0f,0.0f,
        0.5f,0.0f,0.0f,
        0.0f,0.5f,0.0f
    };
    /*
    基本图元
    GL_POINTS 每个顶点在屏幕上都是单独点
    GL_LINES 每⼀对顶点定义一个线段
    GL_LINE_STRIP 一个从第一个顶点依次经过每一个后续顶点⽽绘制的线条
    GL_LINE_LOOP 和GL_LINE_STRIP相同,但是最后一个顶点和第一个顶点连接起来了.
    GL_TRIANGLES 每3个顶点定义一个新的三⻆形
    GL_TRIANGLE_STRIP 共⽤一个条带(strip)上的顶点的⼀组三角形
    GL_TRIANGLE_FAN 以一个圆点为中心呈扇形排列,共用相邻顶点的一组三角形
    */
    //通过三角形批次类设置图元装配方式和顶点数目
    triangleBatch.Begin(GL_TRIANGLES, 3);
    //通过三角形批次类传输顶点数据给顶点着色器
    triangleBatch.CopyVertexData3f(vVerts);
    //配置完成
    triangleBatch.End();

2.7 消息循环，截获消息

在GLUT的runloop中拦截各种消息：

当窗口大小改变/创建窗口时会进入在main（）函数中注册的窗口大小改变回调changeSize中，重新配置视角和投影方式；

当系统以一定频率渲染或者收到开发者手动调用重新渲染函数消息时，会进入在main（）函数中注册的重塑函数RenderScene回调中重新渲染，

3. 函数解析

image

渲染的执行结果如下：

image

4 GLBatch :是在GLTools的一个简单容器类.

void GLBatch::Begain(GLeunm primitive,GLuint nVerts,GLuint nTexttureUnints = 0);

参数1:图元

参数2:顶点数

参数3:⼀组或者2组纹理坐标(可选)

//复制顶点数据(⼀个由3分量x,y,z顶点组成的数组)
void GLBatch::CopyVerterxData3f(GLfloat *vVerts);

    
//复制表面法线数据
void GLBatch::CopyNormalDataf(GLfloat *vNorms);


//复制颜⾊色数据
void GLBatch::CopyColorData4f(GLfloat *vColors);


//复制纹理坐标数据
void GLBatch::CopyTexCoordData2f(GLFloat *vTextCoords, GLuint uiTextureLayer);

//结束数据复制
void GLBatch::End(void);

//绘制图形
void GLBatch::Draw(void);

5 OpenGL的基本图元

GL_POINTS 每个顶点在屏幕上都是单独点
GL_LINES 每⼀对顶点定义一个线段
GL_LINE_STRIP 一个从第一个顶点依次经过每一个后续顶点⽽绘制的线条
GL_LINE_LOOP 和GL_LINE_STRIP相同,但是最后一个顶点和第一个顶点连接起来了.
GL_TRIANGLES 每3个顶点定义一个新的三⻆形
GL_TRIANGLE_STRIP 共⽤一个条带(strip)上的顶点的⼀组三角形
GL_TRIANGLE_FAN 以一个圆点为中心呈扇形排列,共用相邻顶点的一组三角形

6.绘制正方形，以改变顶点坐标的方式键位控制上下左右平移--->通过重新计算顶点坐标，来达到移动效果

image

主要函数代码

changeSize

/*
 在窗口大小改变时，接收新的宽度&高度。
 */
void changeSize(int w,int h)
{
    /*
      x,y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x,y 都是为0
     */
    glViewport(0, 0, w, h);
    
}

RenderScene

void RenderScene(void)
{

    //1.清除一个或者一组特定的缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    
    //2.设置一组浮点数来表示红色
    GLfloat vRed[] = {1.0,0.0,0.0,1.0f};
    
    //顶点数据传递到存储着色器
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
    
    //提交着色器
    triangleBatch.Draw();

    //将后台缓冲区进行渲染，然后结束后交换给前台
    glutSwapBuffers();
    
}

setupRC

void setupRC()
{
    //设置清屏颜色（背景颜色）
    glClearColor(0.98f, 0.40f, 0.7f, 1);
    
    //初始化一个渲染管理器。
    shaderManager.InitializeStockShaders();

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

SpecialKeys

void SpecialKeys(int key, int x, int y){
    
    GLfloat stepSize = 0.025f;
    
    GLfloat blockX = vVerts[0];
    GLfloat blockY = vVerts[10];

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

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

7. 绘制正方形，以修改顶点着色器的模型矩阵的方式键位控制上下左右平移---顶点数据不变，改变的是变换矩阵，并修改着色器设置使用变化矩阵来达到移动效果

image

重要函数代码：

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


}

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