Opengl 和 Qml 混合编程

• Opengl 描绘3D效果
• Qml描绘2D效果

效果

0_1527065966207_20180523_165855.gif

源代码

Fork me on Gitee

加强版效果

• 1.底层的opengl描绘背景
• 2.在qml描绘前描绘opengl，所以opengl处于底层
• 3.中间层描绘qml
• 4.在qml描绘后描绘opengl，所以opengl处于顶层
• 5.使用QQuickItem构建组件，供qml调用，组件内部描绘opengl
• 6.为了让上层opengl背景透明

观察可以发现每层的遮挡效果

0_1527139142863_20180524_131344.gif

1.底层的opengl描绘背景

原理是在最远的地方放一张图片，放大图片，直到完全铺满视口

//混合显示背景
    glBlendFunc(GL_ONE, GL_ZERO);

    //描绘背景
    glBindVertexArray(m_VAO[1]);
    glBindBuffer(GL_ARRAY_BUFFER, m_VBO[1]);

    glVertexAttribPointer(m_posAttr, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), (GLvoid*)0);
    glVertexAttribPointer(m_colAttr, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), (GLvoid*)(sizeof(QVector3D)*1));
    glVertexAttribPointer(m_texcoordLocation, 2, GL_FLOAT, GL_FALSE, sizeof(VertexData), (GLvoid*)(sizeof(QVector3D)*2));

    //背景的矩阵
    QMatrix4x4 modelBg;
    modelBg.translate(0.0f, 0.0f, -10.0f);
    modelBg.scale(4.0f * 8, 3.0f * 8, 1.0f);
    modelBg.rotate(0, 0, 1, 0);
    m_program->setUniformValue(m_model, modelBg);

    m_textureBg->bind();

    glDrawArrays(GL_QUADS,0, 4);
    m_textureBg->release();

2.在qml描绘前描绘opengl，所以opengl处于底层

以前我们是用timer来更新绘制，现在我们根据qml绘制时机，在渲染前，先渲染opengl，且不清除画面，然后再绘制qml，这样就变成上下两层，

connect(window(), &QQuickWindow::beforeRendering, m_triangleWindow, &TriangleWindow::renderNow, Qt::DirectConnection);

//渲染qml前不清画面，保留opengl
win->setClearBeforeRendering(false);

4.在qml描绘后描绘opengl，所以opengl处于顶层

渲染qml后，再次渲染opengl

connect(window(), &QQuickWindow::afterRendering, m_triangleWindow, &UpTriangleWindow::renderNow, Qt::DirectConnection);

• mainwindow类继承QQuickItem，里面使用渲染qml前绘制opengl
• upmainwindow类继承QQuickItem，里面使用渲染qml后绘制opengl
• mainwindow类使用TriangleWindow这个opengl类，TriangleWindow里面绘制了背景图片
• upmainwindow类使用UpTriangleWindow这个opengl类，里面为了透明背景，没有清除GL_COLOR_BUFFER_BIT颜色缓冲区
• 关于清除opengl背景问题，我使用混合，成功去除了清除色，但是背景仍然显示一个黑色，实在没有办法，于是使用了这个馊主意——没有清除GL_COLOR_BUFFER_BIT

注册

将c++类注册到qml使用

//注册opengl到qml
    qmlRegisterType<MainWindow>("MainWindow", 1, 0, "MainWindow");
    qmlRegisterType<UpMainWindow>("UpMainWindow", 1, 0, "UpMainWindow");

调用

0_1527140533208_08cee63c-6392-4ad8-8ffe-d4e71ee6fdb1-image.png