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



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


 

最近的回复

  • 大家好!最近应该很好吧。世界杯来了,有没有喝一杯呢?
    我很高兴地告诉大家,我们在上周末的时候完成了Live2D的改造,将我们的看板娘换了哦。原先是蕾姆。
    0_1529471654453_dfe4b40e-ad64-4b7a-9d58-5c48609ea3e2-image.png
    同时我对样式也做了一些微调,比如说这里:
    0_1529471386270_828e7fbb-fe0c-4f6b-bb52-03938ac7e19f-image.png
    看起来稍微好了一些。

    随后论坛进行升级了哦,升级到了最新1.9.2版本了,各种功能应该得到优化了吧。
    最后欢迎大家继续来玩~

    阅读更多
  • Qt for Python终于发布了!
    以前的我,可能接触了一点Python,但是都没有坚持下来,现在Python水平还很弱呢。不过我基本语法还是了解一点的。所以我打算借着Qt for Python的东风,来尝试一下Python的开发。

    1、去Python 官网安装Python。地址是:

    https://www.python.org/downloads/mac-osx
    0_1529422911935_1.png
    我下载的版本是3.6.5

    2、双击pkg安装包进行安装,按照提示安装即可,不必做什么设置。
    0_1529422932496_2.png
    3、安装pip。pip是一个类似npm的快速安装器,非常适合python安装。由于Mac的安全策略,这个时候要输入的命令以sudo开始:

    sudo python get-pip.py

    4、需要安装Qt官网提供的python安装包。Qt的Python安装包并没有放入Pypi的地址,因为Qt库本身就偏大。
    但是依然能够通过pip安装。只是安装的命令稍微长:

    sudo pip install --index-url=https://download.qt.io/official_releases/QtForPython/ pyside2

    然后输出的结果是:
    daxiongtekiMacBook-Air:~ jiangcaiyang$ sudo pip install --index-url=https://download.qt.io/official_releases/QtForPython/ pyside2
    Password:
    The directory '/Users/jiangcaiyang/Library/Caches/pip/http' or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
    The directory '/Users/jiangcaiyang/Library/Caches/pip' or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo's -H flag.
    Looking in indexes: https://download.qt.io/official_releases/QtForPython/
    Collecting pyside2
    Downloading https://download.qt.io/official_releases/QtForPython/pyside2/PySide2-5.11.0-5.11.0-cp27-cp27m-macosx_10_11_intel.whl (125.7MB)
    100% |████████████████████████████████| 125.7MB 1.0MB/s
    matplotlib 1.3.1 requires nose, which is not installed.
    matplotlib 1.3.1 requires tornado, which is not installed.
    Installing collected packages: pyside2
    Successfully installed pyside2-5.11.0
    安装成功。

    5、安装成功了,开始写一个测试的程序吧!
    最简单的,当然是Hello Qt for Python啦。很简单,使用Qt Creator,很方便地可以创建这样的Python脚本,使用方法也和C++版本的Qt应用相同:

    #!/usr/bin/env python # -*- coding: utf-8 -*- from PySide2.QtWidgets import QApplication, QLabel app = QApplication( [ ] ) label = QLabel( "您好 Qt for Python!" ) label.show( ) app.exec_( )

    0_1529422962008_4.jpg
    其中第一行表示用/usr/bin/python 来解析,大家可以在命令提示符输入“which python”来看结果:
    第二行则是在Python 3.x下不用写了,设定的是utf-8编码格式。大家最好也是使用这样的格式,因为这样遇到编码的坑最少。
    因为Python没有main()函数的说法,所以直接从上往下运行就可以了。Python是弱语言,所以不用声明类型,这里还有一点不一样,就是
    app.exec_( ),和C++版本不同的是,添加上了一个下划线。可能和Python内置的函数冲突了?我还需要再调查一下。

    接下来我就仿照例子写了一个更加复杂的Python程序,大致是这样的:

    #!/usr/bin/env python # -*- coding: utf-8 -*- import sys import random from PySide2.QtCore import Qt from PySide2.QtWidgets import (QApplication, QWidget, QPushButton, QLabel, QVBoxLayout ) class MyWidget( QWidget ): def __init__( self ): QWidget.__init__( self ) self.hello = [ "Hallo welt!", "Ciao mondo", "Hei maailma", "Hola mundo", "Hei verden!" ] self.button = QPushButton( "Click me!" ) self.text = QLabel( "Hello World" ) self.text.setAlignment( Qt.AlignCenter ) self.layout = QVBoxLayout( ) self.layout.addWidget( self.text ) self.layout.addWidget( self.button ) self.setLayout( self.layout ) self.button.clicked.connect( self.magic ) def magic( self ): self.text.setText( random.choice( self.hello ) ) if __name__ == "__main__": app = QApplication( sys.argv ) widget = MyWidget( ) widget.resize( 640, 480 ) widget.show( ) sys.exit( app.exec_( ) )

    程序运行起来还行吧!
    0_1529422988117_5.png

    阅读更多
  • @jiangcaiyang 如果需要自动化测试,也用的上

    阅读更多
  • @青山白云 这个可能有点用,但是可能更多局限于爬虫领域吧。

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔