QT5.7中使用OpenGL开发记录（二）---- 绘制三角形

QT5.7中使用OpenGL开发记录（二）

    前言：最近在做一个项目，需要使用QT结合OpenGL进行开发。由于原来没有怎么用过OpenGL，只知道是个开源图形库，所以先在网上查询了一些资料，发现QT5.5以上版本已经集成了OpenGL，不过和纯OpenGL的使用有些区别，而且相关资料较少。为了便于后续开发并且方便大家共同学习，这里将我的学习过程进行记录（本博客内容只记录了本人的学习过程，不保证完整性和准确性，如想系统学习请绕行。）。由于本人图形开发经验较少，如有错漏敬请指出。

OpenGL渲染管线

    为了能更好的理解下文介绍的内容，需要先先对OpenGL的渲染管线有一定理解。这部分内容网上介绍的比较多，我就贴一个CSDN上看到相关博客，希望不了解的读者先自己了解下。
    http://blog.csdn.net/heyuchang666/article/details/50016865

绘制三角形

    在OpenGL中无论是2D图形还是3D图形，通常都使用三角形作为基本图元，在OpenGL上绘制三角形主要分为如下几步：

1. 准备数据：顶点、三角形顶点索引、颜色

//三角形顶点坐标
GLfloat vertex[] = {
    -0.5f, 0.0f,
    0.5f, 0.0f,
    0.0f, 0.5f,
};

//三角形顶点索引
GLuint triIndexs[] = {0, 1, 2};

//三角形顶点颜色
GLfloat colors[] = {1.0f, 0.0f, 0.0f, 1.0f,
                    0.0f, 1.0f, 0.0f, 1.0f,
                    0.0f, 0.0f, 1.0f, 1.0f,
                   };

2. 编写顶点着色器和片段着色器
     OpenGL中提供了这两种这色器的文件格式，在“新建文件->GLSL”中可以找到，我们选择Desktop版本的文件。我的工程中，文件名分别是vertexshader.vert和fragmentshader.frag，代码如下：

//vertexshader.vert
uniform mat4 matrix;
in vec4 vPosition;
in vec4 vColor;
out vec4 fColor;

void main(void)
{
    fColor = vColor;
    gl_Position = matrix * vPosition;
}

//fragmentshader.frag
in vec4 fColor;

void main(void)
{
    gl_FragColor = fColor;
}

     程序中，vPosition和vColor是用来承接三角形的位置和颜色数据的；matrix是模型矩阵，可以用来进行移动、旋转等变化；fColor是顶点着色器和片段着色器间的交互数据；gl_Position和gl_FrgColor是OpenGL内部识别变量。

3. 初始化OpenGL并载入模型参数

void OpenGLWidget::initializeGL(){
    initializeOpenGLFunctions();

    program = new QOpenGLShaderProgram(this);

    if(!program->addShaderFromSourceFile(QOpenGLShader::Vertex, "vertexshader.vert")){
        return;
    }
    if(!program->addShaderFromSourceFile(QOpenGLShader::Fragment, "fragmentshader.frag")){
        return;
    }
    if(!program->link()){
        return;
    }
    if(!program->bind()){
        return;
    }

    // 获取shaderprogram的id号，然后可以通过id号获取一些属性...
    programId = program->programId();

    // 从shaderprogram里面获取变量标识
    matrixLocation = glGetUniformLocation(programId, "matrix");
    vertexLocation = glGetAttribLocation(programId, "vPosition");
    clorLocation = glGetAttribLocation(programId, "vColor");

    initVbo();
}
void OpenGLWidget::initVbo(){
    // 计算获得数组长度
    vVerticesLen = sizeof(vertex)/sizeof(GLfloat);
    triIndexLen = sizeof(triIndexs)/sizeof(GLuint);
    colorsLen = sizeof(colors)/sizeof(GLfloat);

    // 初始化顶点buffer并装载数据到显存
    glGenBuffers(1, &verVbo);
    glBindBuffer(GL_ARRAY_BUFFER, verVbo);
    glBufferData(GL_ARRAY_BUFFER, vVerticesLen * sizeof(GLfloat), vertex, GL_STATIC_DRAW);

    // 初始化索引buffer并装载数据到显存
    glGenBuffers(1, &indexVbo);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexVbo);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, triIndexLen * sizeof(GLuint), triIndexs, GL_STATIC_DRAW);

    // 初始化颜色buffer并装载数据到显存
    glGenBuffers(1, &colorVbo);
    glBindBuffer(GL_ARRAY_BUFFER, colorVbo);
    glBufferData(GL_ARRAY_BUFFER, colorsLen * sizeof(GLfloat), colors, GL_STATIC_DRAW);
}

4. 修改重置尺寸

void OpenGLWidget::resizeGL(int w, int h){
    glViewport(0, 0, w, h);

    // 模型矩阵重置
    projection.setToIdentity();
    // 透视投影
    qreal aspect = qreal(w) / qreal(h ? h : 1);
    projection.perspective(60.0f, aspect, 1.0f, 100.0f);
    // 增加了模型矩阵，需要做一定偏移量，保证物体刚开始渲染出来时可以被看到！
    projection.translate(0.0f, 0.0f, -2.0f);
}

5. 修改绘制函数

void OpenGLWidget::paintGL(){
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

    // shader传入模型视图矩阵 projection可以理解为建立了一个坐标系空间，可以再这个空间内设置图形
    glUniformMatrix4fv(matrixLocation, 1, GL_FALSE, projection.data());

    // shader绑定并启用颜色数组buffer
    glBindBuffer(GL_ARRAY_BUFFER,colorVbo);
    glVertexAttribPointer(clorLocation, 4, GL_FLOAT, GL_FALSE, 0, 0);
    glEnableVertexAttribArray(clorLocation);
    // 颜色值rgba，所以每四个float值作为一个颜色值，如果只是希望rgb，取三个值作为颜色值即可!


    // shader绑定并启用顶点数组buffer
    glBindBuffer(GL_ARRAY_BUFFER, verVbo);
    glVertexAttribPointer( vertexLocation, 2, GL_FLOAT, GL_FALSE, 0, 0);
    glEnableVertexAttribArray(vertexLocation);

    // shader绑定并顶点索引数组buffer - 索引无需启用
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,indexVbo);
    glDrawElements(GL_TRIANGLES, triIndexLen, GL_UNSIGNED_INT,0);

    // 解绑buffer、关闭启用顶点、颜色数组
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glDisableVertexAttribArray(vertexLocation);
    glDisableVertexAttribArray(clorLocation);
}

    运行结果如下图所示：