OpenGL由点、线、面到金字塔、三角带的绘制

610 阅读8分钟

平面效果实现

流程图

函数介绍:

函数名称函数说明
main()初始化glut,创建window,以及注册回调函数
SetupRC()进行初始化固定着色器manager类,图形数据配置,主要是顶点数据及图元连接方式
ChangeSize()设置视口及投影方式,需要根据投影矩阵载入到投影堆栈中
KeyPressFunc()对空格键的回调处理
SpecialKeys()特殊键位的回调处理,上下左右围绕坐标系旋转
RenderScene()用于图形的绘制,可以系统触发,也可以开发者手动触发,每次重新绘制时会触发,此处值得注意的是 如果不将 mCamera 相乘 mObjectFrame 获取混合矩阵在 modelViewMatrix.MultMatrix(mFinalTransform);的话 mCamera 与 mObjectFrame可以直接 modelViewMatrix.MultMatrix 但是顺序不能变!!!
DrawWireFramedBatch()RenderScene中关于立体图形的填充及边框绘制

知识点

  • changeSize主要是用来设置视口大小以及当视口发生变化时调用的,而本案例中立体图形的绘制需要使用投影矩阵,因此需要在该函数中设置投影矩阵 主要涉及以下几个步骤

设置图形投影的方式:因为是立体图形,所以选择透视投影

//参数1:垂直方向上的视场角度
//参数2:视口纵横比 = w/h
//参数3:近裁剪面距离
//参数4:远裁剪面距离
viewFrustum.SetPerspective(35.0f, float(w)/float(h), 1.0f, 500.0f);

通过设置的投影方式获得投影矩阵,并将其存入投影矩阵中

projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());

初始化模型视图矩阵堆栈,压入一个单元矩阵

modelViewMatrix.LoadIdentity();
  • SetupRC函数 从流程图上可以看出,除了基本的背景色设置,存储着色器初始化以及顶点数据的创建及传输外,还需要对阵矩阵及观察者做一下设置

将模型视图矩阵和投影矩阵放到变换管道中,变换管道的作用是能帮助快速进行矩阵相乘,在RenderScene函数中可以直接通过变换管道的Get方法得到相应的矩阵

transformPipeline.SetMatrixStacks(modelViewMatrix, projectionMatrix);

其中,变换管道通过get可获得的矩阵有4种

函数名称函数说明
GetProjectionMatrix()投影矩阵
GetNormalMatrix()法线矩阵
GetModelViewMatrix()模型视图矩阵,简称mv
GetModelViewProjectionMatrix()模型视图投影矩阵,简称mvp
设置观察者位置
cameraFrame.MoveForward(-15.0f);

观察者位置的设置有三种

函数名称函数说明
MoveForward(float fDelta)向外移动的像素点,修改z
MoveUp(float fDelta)向上移动的像素点,修改y
MoveRight(float fDelta)向右移动的像素点,修改x

用于图形的绘制,可以系统触发,也可以开发者手动触发,每次重新绘制时会触发,此处值得注意的是 如果不将 mCamera 相乘 mObjectFrame 获取混合矩阵在 modelViewMatrix.MultMatrix(mFinalTransform);的话 mCamera 与 mObjectFrame可以直接 modelViewMatrix.MultMatrix 但是顺序不能变!!! 需要注意modelViewMatrix 的压栈以及出栈问题

矩阵相乘数学知识

设A为m乘p 的矩阵,B为p乘n的矩阵,那么称m乘n的矩阵C为矩阵A与B的乘积,记作 C=AB, 其中矩阵 C中的第 i 行第 j 列元素可以表示为: 如下所示: 注意事项

  1. 当矩阵A的列数(column)等于矩阵B的行数(row)时,A与B可以相乘,否则矩阵相乘无意义.
  2. 矩阵C的行数等于矩阵A的行数,C的列数等于B的列数.
  3. 乘积C的第m行第n列的元素等于矩阵A的第m行的元素与矩阵B的第n列对应元素乘积之和.

代码实现

数据准备

#include "GLTools.h"	
#include "GLMatrixStack.h"
#include "GLFrame.h"
#include "GLFrustum.h"
#include "GLBatch.h"
#include "GLGeometryTransform.h"
#include <math.h>
#ifdef __APPLE__
#include <glut/glut.h>
#else
#define FREEGLUT_STATIC
#include <GL/glut.h>
#endif

/*
 GLMatrixStack 变化管线使用矩阵堆栈
 GLMatrixStack 构造函数允许指定堆栈的最大深度、默认的堆栈深度为64.这个矩阵堆在初始化时已经在堆栈中包含了单位矩阵。
 GLMatrixStack::GLMatrixStack(int iStackDepth = 64);
 //通过调用顶部载入这个单位矩阵
 void GLMatrixStack::LoadIndentiy(void);
 //在堆栈顶部载入任何矩阵
 void GLMatrixStack::LoadMatrix(const M3DMatrix44f m);
 */
// 各种需要的类
GLShaderManager		shaderManager;
GLMatrixStack		modelViewMatrix;
//投影矩阵
GLFrustum           viewFrustum;
//投影矩阵 与viewFrustum有关
GLMatrixStack		projectionMatrix;
//观察者矩阵
GLFrame				cameraFrame;
//物体矩阵
GLFrame             objectFrame;
//容器类(7种不同的图元对应7种容器对象)
GLBatch				pointBatch; // 点
GLBatch				lineBatch;  //线
GLBatch				lineStripBatch; //线断
GLBatch				lineLoopBatch; //三角形三边
GLBatch             lineFanBatch;  //平面三角形
GLBatch				triangleBatch;  //多个三角形实现金字塔
GLBatch             triangleStripBatch;  //三角形带
GLBatch             triangleFanBatch;   //三角扇

//几何变换的管道
GLGeometryTransform	transformPipeline;

GLfloat vGreen[] = { 0.0f, 1.0f, 0.0f, 1.0f };
GLfloat vBlack[] = { 0.0f, 0.0f, 0.0f, 1.0f };


// 跟踪效果步骤
int nStep = 0;


main函数

我们主要初始化glut,创建window,以及注册回调函数


int main(int argc, char* argv[])
{
    gltSetWorkingDirectory(argv[0]);
    glutInit(&argc, argv);
    //申请一个颜色缓存区、深度缓存区、双缓存区、模板缓存区
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL);
    //设置window 的尺寸
    glutInitWindowSize(800, 600);
    //创建window的名称
    glutCreateWindow("GL_POINTS");
    //注册回调函数(改变尺寸)
    glutReshapeFunc(ChangeSize);
    //点击空格时,调用的函数
    glutKeyboardFunc(KeyPressFunc);
    //特殊键位函数(上下左右)
    glutSpecialFunc(SpecialKeys);
    //显示函数
    glutDisplayFunc(RenderScene);
    
    //判断一下是否能初始化glew库,确保项目能正常使用OpenGL 框架
    GLenum err = glewInit();
    if (GLEW_OK != err) {
        fprintf(stderr, "GLEW Error: %s\n", glewGetErrorString(err));
        return 1;
    }
    //绘制
    SetupRC();
    //runloop运行循环
    glutMainLoop();
    return 0;
}

SetupRC函数

中我们进行初始化固定着色器manager类,图形数据配置,主要是顶点数据及图元连接方式

void SetupRC()
{
    // 灰色的背景
    glClearColor(0.9f, 0.9f, 0.9f, 1.0f );
    shaderManager.InitializeStockShaders();
//    开启深度测试
    glEnable(GL_DEPTH_TEST);
    
    //设置变换管线以使用两个矩阵堆栈 
    transformPipeline.SetMatrixStacks(modelViewMatrix, projectionMatrix);
    cameraFrame.MoveForward(-15.0f);
   
    //定义一些点,三角形形状。
    GLfloat vCoast[9] = {3,3,0,  0,3,0,  3,0,0};
    //用点的形式
    pointBatch.Begin(GL_POINTS, 3);
    pointBatch.CopyVertexData3f(vCoast);
    pointBatch.End();
    
    //通过线的形式
    lineBatch.Begin(GL_LINES, 3);
    lineBatch.CopyVertexData3f(vCoast);
    lineBatch.End();
    
    //通过线段的形式
    lineStripBatch.Begin(GL_LINE_STRIP, 3);
    lineStripBatch.CopyVertexData3f(vCoast);
    lineStripBatch.End();
//    平面三角
    lineFanBatch.Begin(GL_TRIANGLE_FAN, 3);
    lineFanBatch.CopyVertexData3f(vCoast);
    lineFanBatch.End();
    
    
    
    //通过线环的形式
    lineLoopBatch.Begin(GL_LINE_LOOP, 3);
    lineLoopBatch.CopyVertexData3f(vCoast);
    lineLoopBatch.End();
    
//    通过三角形创建金字塔
    GLfloat vPyramid[12][3] = {
        -2.0f, 0.0f, -2.0f,
        2.0f, 0.0f, -2.0f,
        0.0f, 4.0f, 0.0f,

        2.0f, 0.0f, -2.0f,
        2.0f, 0.0f, 2.0f,
        0.0f, 4.0f, 0.0f,

        2.0f, 0.0f, 2.0f,
        -2.0f, 0.0f, 2.0f,
        0.0f, 4.0f, 0.0f,

        -2.0f, 0.0f, 2.0f,
        -2.0f, 0.0f, -2.0f,
        0.0f, 4.0f, 0.0f
        
    };
    
    //GL_TRIANGLES 每3个顶点定义一个新的三角形
    triangleBatch.Begin(GL_TRIANGLE_FAN, 12);
    triangleBatch.CopyVertexData3f(vPyramid);
    triangleBatch.End();
    
    
    // 三角形扇形--六边形
    GLfloat vPoints[100][3];    
    int nVerts = 0;
    //半径
    GLfloat r = 3.0f;
    //原点(x,y,z) = (0,0,0);
    vPoints[nVerts][0] = 0.0f;
    vPoints[nVerts][1] = 0.0f;
    vPoints[nVerts][2] = 0.0f;
    
    
    //M3D_2PI 就是2Pi 的意思,就一个圆的意思。 绘制圆形
    for(GLfloat angle = 0; angle < M3D_2PI; angle += M3D_2PI / 6.0f) {
        
        //数组下标自增(每自增1次就表示一个顶点)
        nVerts++;
        /*
         弧长=半径*角度,这里的角度是弧度制,不是平时的角度制
         既然知道了cos值,那么角度=arccos,求一个反三角函数就行了
         */
        //x点坐标 cos(angle) * 半径
        vPoints[nVerts][0] = float(cos(angle)) * r;
        //y点坐标 sin(angle) * 半径
        vPoints[nVerts][1] = float(sin(angle)) * r;
        //z点的坐标
        vPoints[nVerts][2] = -0.5f;
    }
    
    // 结束扇形 前面一共绘制7个顶点(包括圆心)
    //添加闭合的终点
    //课程添加演示:屏蔽177-180行代码,并把绘制节点改为7.则三角形扇形是无法闭合的。
    nVerts++;
    vPoints[nVerts][0] = r;
    vPoints[nVerts][1] = 0;
    vPoints[nVerts][2] = 0.0f;
    
    // 加载!
    //GL_TRIANGLE_FAN 以一个圆心为中心呈扇形排列,共用相邻顶点的一组三角形
    triangleFanBatch.Begin(GL_TRIANGLE_FAN, 8);
    triangleFanBatch.CopyVertexData3f(vPoints);
    triangleFanBatch.End();
    
    //三角形条带,一个小环或圆柱段
    //顶点下标
    int iCounter = 0;
    //半径
    GLfloat radius = 3.0f;
    //从0度~360度,以0.3弧度为步长
    for(GLfloat angle = 0.0f; angle <= (2.0f*M3D_PI); angle += 0.3f)
    {
        //或许圆形的顶点的X,Y
        GLfloat x = radius * sin(angle);
        GLfloat y = radius * cos(angle);
        
        //绘制2个三角形(他们的x,y顶点一样,只是z点不一样)
        vPoints[iCounter][0] = x;
        vPoints[iCounter][1] = y;
        vPoints[iCounter][2] = -0.5;
        iCounter++;
        
        vPoints[iCounter][0] = x;
        vPoints[iCounter][1] = y;
        vPoints[iCounter][2] = 0.5;
        iCounter++;
    }
    
    // 关闭循环
    printf("三角形带的顶点数:%d\n",iCounter);
    //结束循环,在循环位置生成2个三角形
    vPoints[iCounter][0] = vPoints[0][0];
    vPoints[iCounter][1] = vPoints[0][1];
    vPoints[iCounter][2] = -0.5;
    iCounter++;
    
    vPoints[iCounter][0] = vPoints[1][0];
    vPoints[iCounter][1] = vPoints[1][1];
    vPoints[iCounter][2] = 0.5;
    iCounter++;
    
    // GL_TRIANGLE_STRIP 共用一个条带(strip)上的顶点的一组三角形
    triangleStripBatch.Begin(GL_TRIANGLE_STRIP, iCounter);
    triangleStripBatch.CopyVertexData3f(vPoints);
    triangleStripBatch.End();
}

ChangeSize函数

主要是设置视口及投影方式,需要根据投影矩阵载入到投影堆栈中


void ChangeSize(int w, int h)
{
    glViewport(0, 0, w, h);
    //创建投影矩阵,并将它载入投影矩阵堆栈中
    viewFrustum.SetPerspective(35.0f, float(w) / float(h), 1.0f, 500.0f);
    projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());
    
    //调用顶部载入单元矩阵
    modelViewMatrix.LoadIdentity();
}

KeyPressFunc函数

针对空格键的回调处理


//根据空格次数。切换不同的“窗口名称”
void KeyPressFunc(unsigned char key, int x, int y)
{
    if(key == 32)
    {
        nStep++;
        
        if(nStep > 7)
            nStep = 0;
    }
    
    switch(nStep)
    {
        case 0:
            glutSetWindowTitle("GL_POINTS");
            break;
        case 1:
            glutSetWindowTitle("GL_LINES");
            break;
        case 2:
            glutSetWindowTitle("GL_LINE_STRIP");
            break;
        case 3:
            glutSetWindowTitle("GL_LINE_LOOP");
            break;
           
        case 4:
            glutSetWindowTitle("GL_TRIANGLE_FAN");
            break;
        case 5:
            glutSetWindowTitle("GL_TRIANGLES");
            break;
        case 6:
            glutSetWindowTitle("GL_TRIANGLE_STRIP");
            break;
        case 7:
            glutSetWindowTitle("GL_TRIANGLE_FAN");
            break;
    }
    
    glutPostRedisplay();
}

SpecialKeys函数

对特殊键位的回调处理,上下左右围绕坐标系旋转


//特殊键位处理(上、下、左、右移动)
void SpecialKeys(int key, int x, int y)
{
    
    if(key == GLUT_KEY_UP)
        //围绕一个指定的X,Y,Z轴旋转。
        objectFrame.RotateWorld(m3dDegToRad(-5.0f), 1.0f, 0.0f, 0.0f);
    
    if(key == GLUT_KEY_DOWN)
        objectFrame.RotateWorld(m3dDegToRad(5.0f), 1.0f, 0.0f, 0.0f);
    
    if(key == GLUT_KEY_LEFT)
        objectFrame.RotateWorld(m3dDegToRad(-5.0f), 0.0f, 1.0f, 0.0f);
    
    if(key == GLUT_KEY_RIGHT)
        objectFrame.RotateWorld(m3dDegToRad(5.0f), 0.0f, 1.0f, 0.0f);
    
    glutPostRedisplay();
}

RenderScene函数

用于图形的绘制,可以系统触发,也可以开发者手动触发,每次重新绘制时会触发,此处值得注意的是 如果不将 mCamera 相乘 mObjectFrame 获取混合矩阵在 modelViewMatrix.MultMatrix(mFinalTransform);的话 mCamera 与 mObjectFrame可以直接 modelViewMatrix.MultMatrix 但是顺序不能变!!!

void RenderScene(void)
{
    // Clear the window with current clearing color
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
   
    //压栈
    modelViewMatrix.PushMatrix();
  
    M3DMatrix44f mCamera;
    cameraFrame.GetCameraMatrix(mCamera);
    
    //只要使用 GetMatrix 函数就可以获取矩阵堆栈顶部的值,这个函数可以进行2次重载。用来使用GLShaderManager 的使用。或者是获取顶部矩阵的顶点副本数据
    
    M3DMatrix44f mObjectFrame;
    objectFrame.GetMatrix(mObjectFrame);
    
    M3DMatrix44f mFinalTransform ;
    m3dMatrixMultiply44(mFinalTransform, mCamera, mObjectFrame);
    
//    mCamera、mObjectFrame 进栈顺序不能变
    //矩阵乘以矩阵堆栈的顶部矩阵,相乘的结果随后简存储在堆栈的顶部
    
    modelViewMatrix.MultMatrix(mFinalTransform);
    
    /* GLShaderManager 中的Uniform 值——平面着色器
     参数1:平面着色器
     参数2:运行为几何图形变换指定一个 4 * 4变换矩阵
     --transformPipeline.GetModelViewProjectionMatrix() 获取的
     GetMatrix函数就可以获得矩阵堆栈顶部的值
     参数3:颜色值(黑色)
     */
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vBlack);
    
    switch(nStep) {
        case 0:
            //设置点的大小
            glPointSize(4.0f);
            pointBatch.Draw();
            glPointSize(1.0f);
            break;
        case 1:
            //设置线的宽度
            //设置点的大小
            glPointSize(4.0f);
            pointBatch.Draw();
            glPointSize(1.0f);
            
            glLineWidth(2.0f);
            lineBatch.Draw();
            glLineWidth(1.0f);
            break;
        case 2:
            glPointSize(4.0f);
            pointBatch.Draw();
            glPointSize(1.0f);
            
            glLineWidth(2.0f);
            lineBatch.Draw();
            lineStripBatch.Draw();
            glLineWidth(1.0f);
            break;
        case 3:
            glPointSize(4.0f);
            pointBatch.Draw();
            glPointSize(1.0f);
            
            glLineWidth(2.0f);
            lineBatch.Draw();
            lineStripBatch.Draw();
            
            lineLoopBatch.Draw();
            glLineWidth(1.0f);
            break;
        case 4:
            glPointSize(4.0f);
            pointBatch.Draw();
            glPointSize(1.0f);
            glLineWidth(2.0f);
            lineBatch.Draw();
            lineStripBatch.Draw();
            lineLoopBatch.Draw();
            glLineWidth(1.0f);
            shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vGreen);
            
            lineFanBatch.Draw();
            
            break;
        case 5:
            DrawWireFramedBatch(&triangleBatch);
            break;
        case 6:
            DrawWireFramedBatch(&triangleStripBatch);
            break;
        case 7:
            DrawWireFramedBatch(&triangleFanBatch);
            break;
    }
    
    //还原到以前的模型视图矩阵(单位矩阵)
    modelViewMatrix.PopMatrix();
    
    // 进行缓冲区交换
    glutSwapBuffers();
}

DrawWireFramedBatch函数 立体图形的填充及边框绘制


void DrawWireFramedBatch(GLBatch* pBatch)
{
    /*------------画绿色部分----------------*/
    /* GLShaderManager 中的Uniform 值——平面着色器
     参数1:平面着色器
     参数2:运行为几何图形变换指定一个 4 * 4变换矩阵
          --transformPipeline 变换管线(指定了2个矩阵堆栈)
     参数3:颜色值
    */
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vGreen);
    pBatch->Draw();
    
    /*-----------边框部分-------------------*/
    /*
        glEnable(GLenum mode); 用于启用各种功能。功能由参数决定
        参数列表:http://blog.csdn.net/augusdi/article/details/23747081
        注意:glEnable() 不能写在glBegin() 和 glEnd()中间
        GL_POLYGON_OFFSET_LINE  根据函数glPolygonOffset的设置,启用线的深度偏移
        GL_LINE_SMOOTH          执行后,过虑线点的锯齿
        GL_BLEND                启用颜色混合。例如实现半透明效果
        GL_DEPTH_TEST           启用深度测试 根据坐标的远近自动隐藏被遮住的图形(材料
     
     
        glDisable(GLenum mode); 用于关闭指定的功能 功能由参数决定
     
     */
    
    //画黑色边框
    glPolygonOffset(-1.0f, -1.0f);// 偏移深度,在同一位置要绘制填充和边线,会产生z冲突,所以要偏移
    glEnable(GL_POLYGON_OFFSET_LINE);
    
    // 画反锯齿,让黑边好看些
    glEnable(GL_LINE_SMOOTH);
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    
    //绘制线框几何黑色版 三种模式,实心,边框,点,可以作用在正面,背面,或者两面
    //通过调用glPolygonMode将多边形正面或者背面设为线框模式,实现线框渲染
    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
    //设置线条宽度
    glLineWidth(2.5f);
    
    /* GLShaderManager 中的Uniform 值——平面着色器
     参数1:平面着色器
     参数2:运行为几何图形变换指定一个 4 * 4变换矩阵
         --transformPipeline.GetModelViewProjectionMatrix() 获取的
          GetMatrix函数就可以获得矩阵堆栈顶部的值
     参数3:颜色值(黑色)
     */
    
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vBlack);
    pBatch->Draw();

    // 复原原本的设置
    //通过调用glPolygonMode将多边形正面或者背面设为全部填充模式
    glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
    glDisable(GL_POLYGON_OFFSET_LINE);
    glLineWidth(1.0f);
    glDisable(GL_BLEND);
    glDisable(GL_LINE_SMOOTH);
    
    
}