小白学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写的,好厉害



  • 这个没有仓库吗?



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



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


Log in to reply
 

走马观花

最近的回复

  • 这个错误没多大影响,qt模块可以在QT setting里进行勾选

    read more
  • 如果对操作不是很熟悉或者是操作不便的话,也可以在Windows的命令行执行NDK的安装。参数是一样的:
    Windows命令行安装NDK

    read more
  • 忘记补充图片了。这里需要点击更新安装才行。😆
    点击更新安装

    read more
  • 问:
    如何在Qt Creator安装NDK呢?
    除了那个🔽 按钮外,还有别的办法吗?
    答:
    Qt Creaator 4.11中更加整合了Android SDK Manager。其实大家都可以不运行默认的Android SDK Manager,直接在Qt Creator中选项->设备->Android,就可以进行操作了。

    通过````高级选项……,启动一些Android SDK Manager,只需要带上参数ndk-bundle```。原来没有NDK的你,也可以通过Android SDK Manager安装了。很简单吧。
    Android SDK Manager安装NDK

    read more

关注我们

微博
QQ群