小白学opengl 第二课



  • 第二课:你的第一个多边形

    新建窗口类TriangleWindow,继承Openglwindow

    trianglewindow.h代码

    #ifndef TRIANGLEWINDOW_H
    #define TRIANGLEWINDOW_H
    
    #include "openglwindow.h"
    
    #include <QtGui/QGuiApplication>
    #include <QtGui/QMatrix4x4>
    #include <QtGui/QOpenGLShaderProgram>
    #include <QtGui/QScreen>
    #include <QtCore/qmath.h>
    
    class TriangleWindow: public Openglwindow
    {
    public:
        TriangleWindow();
    
        void initialize() override;
        void render() override;
    
    private:
        //位置
        GLuint m_posAttr;
        //颜色
        GLuint m_colAttr;
        //矩阵
        GLuint m_matrixUniform;
        //着色器程序
        QOpenGLShaderProgram *m_program;
    };
    
    #endif // TRIANGLEWINDOW_H
    

    trianglewindow.cpp代码

    #include "trianglewindow.h"
    #include <QDebug>
    
    static const char *vertexShaderSource =
        "attribute highp vec4 posAttr;\n"
        "attribute lowp vec4 colAttr;\n"
        "varying lowp vec4 col;\n"
        "uniform highp mat4 matrix;\n"
        "void main() {\n"
        "   col = colAttr;\n"
        "   gl_Position = matrix * posAttr;\n"
        "}\n";
    
    static const char *fragmentShaderSource =
        "varying lowp vec4 col;\n"
        "void main() {\n"
        "   gl_FragColor = col;\n"
        "}\n";
    
    TriangleWindow::TriangleWindow()
        :m_program(0)
    {
    
    }
    
    void TriangleWindow::initialize()
    {
        //创建着色器程序
        m_program = new QOpenGLShaderProgram(this);
        //编译代码-添加顶点着色器
        m_program->addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);
        //编译代码-添加片段着色器
        m_program->addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);
    
        //链接着色器
        m_program->link();
    
        //得到顶点属性名在着色器参数列表中的位置-0
        m_posAttr = m_program->attributeLocation("posAttr");
        //得到颜色属性名在着色器参数列表中的位置-1
        m_colAttr = m_program->attributeLocation("colAttr");
        //得到矩阵规格名在着色器参数列表中的位置-0
        m_matrixUniform = m_program->uniformLocation("matrix");
    }
    
    void TriangleWindow::render()
    {
        //分辨率比例-1
        const qreal retinaScale = devicePixelRatio();
    
        //重置视口
        glViewport(0, 0, width() * retinaScale, height() * retinaScale);
    
        //清除颜色缓冲区
        glClear(GL_COLOR_BUFFER_BIT);
    
        //绑定着色器程序到活动的上下文
        m_program->bind();
    
        //4x4 矩阵
        QMatrix4x4 matrix;
        //乘以一个矩阵,为了建立透视投影矩阵
        matrix.perspective(60.0f, 4.0f/3.0f, 0.1f, 100.0f);
        //乘以这个矩阵,通过向量转换坐标
        matrix.translate(0, 0, -2);
        //乘以这个矩阵,通过向量上的角度旋转坐标
        matrix.rotate(0 / screen()->refreshRate(), 0, 1, 0);
    
        //设置矩阵数据
        m_program->setUniformValue(m_matrixUniform, matrix);
    
        //顶点坐标
        GLfloat vertices[] = {
            0.0f, 0.707f,
            -0.5f, -0.5f,
            0.5f, -0.5f
        };
    
        //颜色值-白色
        GLfloat colors[] = {
            1.0f, 1.0f, 1.0f,
            1.0f, 1.0f, 1.0f,
            1.0f, 1.0f, 1.0f
        };
    
        //glVertexAttribPointer 指定了渲染时索引值为 index 的顶点属性数组的数据格式和位置
        //设置顶点数据
        glVertexAttribPointer(m_posAttr, 2, GL_FLOAT, GL_FALSE, 0, vertices);
        //设置颜色数据
        glVertexAttribPointer(m_colAttr, 3, GL_FLOAT, GL_FALSE, 0, colors);
    
        //启用对应的顶点属性数组
        //顶点坐标
        glEnableVertexAttribArray(0);
        //颜色值
        glEnableVertexAttribArray(1);
    
        //绘制三角形
        glDrawArrays(GL_TRIANGLES, 0, 3);
    
        //停用对应的顶点属性数组
        glDisableVertexAttribArray(1);
        glDisableVertexAttribArray(0);
    
        //释放程序
        m_program->release();
    
    }
    

    main.cpp代码

    #include <QtGui/QGuiApplication>
    #include "openglwindow.h"
    #include "trianglewindow.h"
    
    int main(int argc, char **argv)
    {
        QGuiApplication app(argc, argv);
    
        QSurfaceFormat format;
        //设置采样率
        format.setSamples(16);
    
        TriangleWindow window;
        window.setTitle(QStringLiteral("第二课:你的第一个多边形"));
        window.setFormat(format);
        window.resize(640, 480);
        window.show();
    
        return app.exec();
    }
    

    运行

    0_1526363394212_QQ截图20180515134946.png



  • 感觉和我几年前写的博客有点儿像啊。参见我以前写的博客。⚽ ⚽ ⚽



  • @jiangcaiyang 2014写的,好厉害



  • 这个没有仓库吗?



  • 要不你建一个仓库,把你所有的学习代码都放在里面?



  • @大黄老鼠 有仓库,是码云的


 

最近的回复

  • 很棒!求软件,我要摆在我的桌面上。

    阅读更多
  • 这个很有意思 ^_^

    阅读更多
  • 思路:
    1.把官方时钟demo改了,加了秒针,加了壁纸,加了小萝莉
    2.QWindow窗口嵌入到桌面

    0_1533891238039_20180810_164211.gif

    改版

    去掉秒针,把小萝莉正过来,沿着表盘走

    0_1533893719543_20180810_173309.gif

    源代码

    Fork me on Gitee

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔