Opengl 和 Qml 混合编程



  • 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



  • @青山白云 这个效果真的不错,还带半透明的特效。


 

最近的回复

  • @bladesero Blender 在角色建模和渲染这些方面的确比较强。😄

    我们的软件还在发展中呢。
    18da2116-2055-47c1-8317-1ccde17dfcc0-image.png

    阅读更多
  • untitled.jpg figure角色(WIP2).jpg
    TIM截图20190117184210.png
    使用的软件是blender,zbrush和substance painter

    阅读更多
  • 背景:如果需要qml显示循环list,一般是用3个ListView循环交替,实现伪循环,期间逻辑复杂,容易出错,PathView本身自带循环,所以考虑用PathView实现循环

    设计:PathView显示5条数据,按照垂直List一个个排好顺序,由于收尾移动时候会空白穿帮,所以用clip控制显示中间三条数据

    滚动控制:currentIndex,decrementCurrentIndex(),incrementCurrentIndex()

    代码:

    Item{ id: item1 property int myIndex: 0 property int onePageCount: 3 property real oneHeight: 72 property real oneWidth: 580 property int isCurrentListView: 1 //0,1,2 property bool isAdd: true //direction,down=true,up=false property int hightlightIndex: 0 property int currentIndexPathView: 0 //use this Item{ id: itemClip width: item1.oneWidth height: item1.oneHeight*3 clip: true PathView { id: listView1 width: item1.oneWidth model: listModelSpeedWarning delegate: delegeteLine pathItemCount: item1.onePageCount+2 interactive: false path: Path { startX: item1.oneWidth/2 startY: -item1.oneHeight/2 PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*0+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*0+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*1+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*1+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*2+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*2+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*3+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*3+item1.oneHeight/2 } PathQuad { x: item1.oneWidth/2; y: item1.oneHeight*4+item1.oneHeight/2; controlX: item1.oneWidth/2; controlY: item1.oneHeight*4+item1.oneHeight/2 } } Component.onCompleted: { listView1.currentIndex = -1 } } } }

    问题:windows下测试,按住按键不松手,list滚动会卡住,松手后恢复正常,看来list不能滚动太快

    阅读更多
  • H

    @青山白云 只是为了替换GIF,不过目前已经解决加载问题

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔