OpenGL view in QML



  • Hi,

    I've been trying to draw opengl stuff in a QML view. I write my plugin on the widget example. And I can't make it work.
    Here my code @class GLWidget : public QGLWidget
    {
    Q_OBJECT

    public:
    GLWidget(QWidget *parent = 0)
    : QGLWidget(QGLFormat(QGL::SampleBuffers), parent){}

    protected:

    void paintGL()
    {
    glClear(GL_COLOR_BUFFER_BIT);
    glLoadIdentity();
    //something here
    }

    void resizeGL(int width, int height)
    {
    int side = qMin(width, height);
    glViewport((width - side) / 2, (height - side) / 2, side, side);

    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(-0.5, +0.5, -0.5, +0.5, 4.0, 15.0);
    glMatrixMode(GL_MODELVIEW);
    }
    };

    class MyPushButton : public QGraphicsProxyWidget
    {
    Q_OBJECT

    public:
    MyPushButton(QGraphicsItem* parent = 0)
    : QGraphicsProxyWidget(parent)
    {
    widget = new GLWidget();
    widget->setAttribute(Qt::WA_NoSystemBackground);
    setWidget(widget);
    }

    private:
    GLWidget *widget;
    };

    class QWidgetsPlugin : public QDeclarativeExtensionPlugin
    {
    Q_OBJECT
    public:
    void registerTypes(const char *uri)
    {
    qmlRegisterType<MyPushButton>(uri, 1, 0, "MyPushButton");
    }
    };

    #include "qwidgets.moc"

    Q_EXPORT_PLUGIN2(qmlqwidgetsplugin, QWidgetsPlugin);@

    I've also updated the .pro bu adding opengl. When I test it I've got nothing else than a white window. I've expected at least a black square somewhere on my window.

    Did I do something wrong? I know this is possible since I've seen "that":http://labs.qt.nokia.com/2010/08/10/qml3d-demo/
    At least, did someone know where I could the source code of the video?

    Thanks



  • QGraphicsProxyWidget is not compatible with QGLWidgets since the proxy widget uses the QWidget::render() function to render to a QPainter but OpenGL can't be rendered to a QPainter.

    If you create a QDeclarativeView backed by a QGLWidget viewport, you can create custom QML components which can render to OpenGL.

    @
    QDeclarativeView *view = new QDeclarativeView;
    QGLWidget *glWidget = new QGLWidget;
    view->setViewport(glWidget);
    @

    Alternatively, you could use the QML/3D project which will do this for you and provide much more capabilities. The project is found at http://qt.gitorious.org/qt-labs/qt3d. The source code for the "Monkey God" video can be found in http://qt.gitorious.org/qt-labs/qt3d/trees/master/demos/declarative/monkeygod



  • Hi,

    Another approach might be to subclass QDeclarativeItem, and use QPainter::beginNativePainting() and QPainter::endNativePainting in your paint function. (You'll also need to make sure you set a QGLWidget as the viewport of your QDeclarativeView)

    Regards,
    Michael



  • Thanks a lot for your answers. I will try to make it work with your suggestions.

    Regards,
    Merinas



  • I've failed for now. And after thinking I don't see any difference between yours solutions.
    I've tried that : (.hpp)
    @#ifndef QWIDGETS_HPP
    #define QWIDGETS_HPP

    #include <QDeclarativeItem>

    class MDE : public QDeclarativeItem
    {
    Q_OBJECT

    public:
    MDE(QDeclarativeItem *parent = 0);
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
    };

    #endif // QWIDGETS_HPP
    @
    (cpp)
    @#include "qwidgets.hpp"
    #include <qdeclarative.h>
    #include <QDeclarativeView>
    #include <QApplication>
    #include <QGLWidget>
    #include <QPainter>

    MDE::MDE(QDeclarativeItem *parent )
    {
    setFlag(QGraphicsItem::ItemHasNoContents, false);
    }

    void MDE::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
    {
    painter->beginNativePainting();
    glClear(GL_COLOR_BUFFER_BIT);
    glLoadIdentity();
    glBegin(GL_QUADS);
    glColor3ub(0,0,255);
    glVertex2d(-0.75,-0.75);
    glVertex2d(-0.75,0.75);
    glColor3ub(255,0,0);
    glVertex2d(0.75,0.75);
    glVertex2d(0.75,-0.75);
    glEnd();
    painter->endNativePainting();
    }

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");

    QDeclarativeView view;
    QGLWidget *glWidget = new QGLWidget;
    view.setViewport(glWidget);
    view.setSource(QUrl::fromLocalFile("test.qml"));
    view.show();
    return app.exec();
    }@

    And that still doesn't work. I'm not quite sure I've understand what setViewport does. Is it creating a valid context for my DeclarativeItem ? So why at least I haven't my black square from the glclear.

    I've also look at QML/3D project(I failed to build it an error occurs during link "cannot find -lQt3Dd"). Anyway, it does too much for me. I just need a valid context for my DeclarativeItem. I don't want to controller the opengl content of my view or does something dynamic, I just want to draw static predefined vertex.

    Thanks



  • Hi,

    You are right, the approaches suggested are essentially the same (I just didn't read Bradley's answer closely enough before posting mine :-) )

    The following works for me (in my case I replaced the current paint function of QDeclarativeRectangle with the following code):

    @
    p->beginNativePainting();
    glBegin(GL_QUADS);
    glColor3ub(0,0,255);
    glVertex2d(0, 0);
    glVertex2d(0, height());
    glColor3ub(255,0,0);
    glVertex2d(width(), height());
    glVertex2d(width(), 0);
    glEnd();
    p->endNativePainting();
    @

    Does it work for you?

    Regards,
    Michael



  • Great, that work great! Thanks a lot.

    For other user who may read that. The code I've posted earlier work with the modification of mbrasser. (I've used Qt 4.7.1 win/gcc)

    I've got few last questions about the viewport. The default opengl projection is something like gluOrtho2D(0,width(),0,height()) ? If I want to change it, should I did it between the nativepainting's call? How does the transformation affect opengl (rotation, z translation) ?

    Thanks again for helping me build my opengl declarative item.



  • Hi, I'm trying this too these days. Can you tell me how the test.qml call the paint method? thank you very much~



  • The paint function is called when the component has just finish to load and after a geometry update. To have an update at each frame you can create a slot which call paint, or put a timer.



  • Is it possible to use this approach of creating an opengl declarative item to solve tearing and vsync problems?



  • For what I know this is the only solution for drawing opengl content in QML. What are the problems your are talking about? I have never seen such issue in QML.



  • thank you for your fast response :)

    Actually I am searching for a solution to a different problem.
    I started a project to use QML (UI) and QT C++(Logic) on embedded devices (right now I am using the i.MX53).

    My animation is quite simple: I am moving an image and fade it in and out.

    During this animation tearing appears. OpenGL is used to benefit from hardware accerlation.

    My idea is, to use following algorithm (it's similar to qml scene graph) :
    @
    while (animationIsRunning) {
    paintQMLScene();
    swapAndBlockForNextVSync();
    }@

    One of my problems is, how to do the blocking and generally to understand the communication between qml and qt c++ regarding painting.



  • I'm a little confused. Merinas could you paste what's inside your "test.qml" please?



  • Nothing special just something like

    @import QtQuick 1.0

    OpenGLItem{
    width:200
    height:200
    }@



  • Merinas,

    Test.qml:3:1: OpenGLItem is not a type
    OpenGLItem{
    ^

    What am I doing wrong?

    Could someone just .zip and email somekind of example project using OpenGL in QML.

    I'm trying to get "this":http://developer.qt.nokia.com/doc/qt-4.8/opengl-textures.html example to show inside a QML rectangle element.



  • I second what Merinas said.

    I may not be the best Googler, but I have been searching for days for a simple example of OpenGL in QML. Everything I find is either incomplete or shows no QML at all, just C++ code with the Qt API included in it.

    Specifically could someone point me to a simple, complete example of an OpenGL context implemented inside a QML element (such as a rectangle). Honestly I find it quite surprising that this isn't spelled out in the documentation. Some of us really don't get much from reading 3 page long class definitions like the ones in the Qt Documentation. Not to mention, that none of them say anything specifically about implementing QML with C++/OpenGL.

    I will be forever in your debt if you can help me (and all the other new guys) by showing an example of how this is done.

    I am posting this reply here on this thread, because I believe it belongs here. Although the original poster found an answer to his question, this thread is named OpenGL view in QML and there are only 5 lines of QML posted here and they are, at best, lonely and incomplete.

    Cheers!



  • You can found all you need "on this post":http://qt-project.org/forums/viewthread/4109/#24968 and the two or three next.

    I compile it all here for you and other like you :

    (.h)
    @ #ifndef QWIDGETS_HPP
    #define QWIDGETS_HPP

    #include <QDeclarativeItem>
     
    class MDE : public QDeclarativeItem
    {
     Q_OBJECT
     
    public:
     MDE(QDeclarativeItem *parent = 0);
     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
    };
     
    #endif // QWIDGETS_HPP
    

    @

    (cpp)
    @ #include "qwidgets.hpp"
    #include <qdeclarative.h>
    #include <QDeclarativeView>
    #include <QApplication>
    #include <QGLWidget>
    #include <QPainter>

    MDE::MDE(QDeclarativeItem *parent )
    {
     setFlag(QGraphicsItem::ItemHasNoContents, false);
    }
     
    void MDE::paint(QPainter *p, const QStyleOptionGraphicsItem *o, QWidget *w)
    {
    p->beginNativePainting();
    glBegin(GL_QUADS);
    glColor3ub(0,0,255);
    glVertex2d(0, 0);
    glVertex2d(0, height());
    glColor3ub(255,0,0);
    glVertex2d(width(), height());
    glVertex2d(width(), 0);
    glEnd();
    p->endNativePainting();
    
    }
     
     
    int main(int argc, char *argv[])
    {
     QApplication app(argc, argv);
     
     qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");
     
     QDeclarativeView view;
     QGLWidget *glWidget = new QGLWidget;
     view.setViewport(glWidget);
     view.setSource(QUrl::fromLocalFile&#40;"test.qml"&#41;);
     view.show();
     return app.exec();
    }
    

    @

    (test.qml)

    @ import QtQuick 1.0

    MDE{
        width:200
        height:200
    }
    

    @

    And if you want to use a qmlviewer don't forget -opengl option to active it.

    But you're right this is neither obvious or explain in the Qt doc. This should be easy and well documented.



  • THANKS so much for your quick reply. I am in the process of trying to implement that right now.

    So far I have tried to run this and I get error:

    @MDE is not a type.@

    Along with a blank white window.

    Incidentally, I was already trying to implement this same code and getting nowhere. Unfortunately, I am still getting nowhere.

    I simply created a new QtQuick Application and inserted the code you listed above along with editing the .pro file appropriately

    I'm just going to post what exactly what I did, as silly as it may look to someone who knows what they are doing:

    The .pro file (QMLOpenGLtest.pro):

    @# Add more folders to ship with the application, here
    folder_01.source = qml/QMLOpenGLtest
    folder_01.target = qml
    DEPLOYMENTFOLDERS = folder_01

    Additional import path used to resolve QML modules in Creator's code model

    QML_IMPORT_PATH =

    The .cpp file which was generated for your project. Feel free to hack it.

    SOURCES +=
    main.cpp

    Please do not modify the following two lines. Required for deployment.

    include(qmlapplicationviewer/qmlapplicationviewer.pri)
    qtcAddDeployment()

    HEADERS +=
    qwidgets.hpp

    QT += opengl
    script
    declarative

    OTHER_FILES +=
    test.qml@

    The qwidgets.hpp:

    @#ifndef QWIDGETS_HPP
    #define QWIDGETS_HPP

    #include <QDeclarativeItem>
    #include <QGLWidget>

    class MDE : public QDeclarativeItem
    {
    Q_OBJECT

    public:
    MDE(QDeclarativeItem *parent = 0);
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
    };

    #endif // QWIDGETS_HPP@

    The main.cpp:

    @#include "qwidgets.hpp"
    #include <qdeclarative.h>
    #include <QDeclarativeView>
    #include <QApplication>
    #include <QGLWidget>
    #include <QPainter>

    MDE::MDE(QDeclarativeItem *parent )
    {
    setFlag(QGraphicsItem::ItemHasNoContents, false);
    }

    void MDE::paint(QPainter *p, const QStyleOptionGraphicsItem *o, QWidget *w)
    {
    p->beginNativePainting();
    glBegin(GL_QUADS);
    glColor3ub(0,0,255);
    glVertex2d(0, 0);
    glVertex2d(0, height());
    glColor3ub(255,0,0);
    glVertex2d(width(), height());
    glVertex2d(width(), 0);
    glEnd();
    p->endNativePainting();

    }

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");

    QDeclarativeView view;
    QGLWidget *glWidget = new QGLWidget;
    view.setViewport(glWidget);
    view.setSource(QUrl::fromLocalFile("test.qml"));
    view.show();
    return app.exec();
    }
    @

    The test.qml:

    @import QtQuick 1.0

    MDE{
    width:200
    height:200
    }
    @

    That is all. That is the ENTIRE project (except for the auto-generated qmlapplicationviewer files) All created within a "New QtQuick Application" started from the QtCreator wizard thing.

    Although it may be obvious that I am missing something (or half of the program) to somebody somewhere, that is why I asked for a complete example. I have no idea what is wrong here. For all I know, this was never intended to stand alone.

    Still trying. If any one can help it will be most appreciated...

    Thanks



  • I found the problem. The test.qml file should look like this:

    @import QtQuick 1.0
    import MDEPlugins 1.0

    MDE{
    width:200
    height:200
    }@

    Apparently, MDEPlugins is created as a resource (URI) that needs to be imported into the QML. I was laboring under the wrong idea that qmlRegisterType was enough to "expose" the MDE class for use in the QML simply by using the new keyword "MDE" as designated in the main.cpp on line 33:

    @qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");@

    In fact, the "MDEPlugins" part of that C++ template names a URI for the type, and this needs to be imported into the QML just like any other resource before the type can be used. the "1,0" in the middle designates the "version", so that is why you import it with:

    @import MDEPlugins 1.0@

    I'm pretty sure I didn't change anything else in the code from my last post, just added that.

    I hope this will save someone some time. Cost me a couple days.

    Cheers!
    ultramanjones



  • Hi,
    I have the same requirement.I already had QGLWiget ,QWidget based application but now i have to use this and imprement in QML.I saw the above code works for basic operations but my in my requirement I have to rotate the image rendered in GLwidget to -180 to 180 degrees in x,y,z axis.I have requirement I should get called InitiliazeGl and resizeGL .Could you please tell me how to achieve this.

    Thanks,
    MBR



  • I renamed the class GLGadget (instead of MDE)

    Here is it's QML code currently. This is a mere prototype with very little functionality. Clicking the mouse within the OpenGL window activates this MouseArea, however, and this sends a signal back to the C++ side. I'm sure you can use something similar to implement your rotation transformations.

    @ GLGadget {
    id: openGLRect
    y: 67
    width: 800
    height: 500
    anchors.left: leftMenu.right
    anchors.leftMargin: 70

            MouseArea {
                id: mouse_areaGLRect
                anchors.fill: parent
                onClicked: {
                    output1.text = mouseX
                    openGLRect.setMouseX(mouseX)
                    openGLRect.updateGLGadgetWindow()
                }
            }
        }@
    

    I don't have time to go over this, but here is the header file. Mind you we are using a seperate thread to feed the GLGadget it's graphics data, but the mouse functions here might be of interest to you, though incomplete here...

    @#ifndef GLGADGET_H
    #define GLGADGET_H

    #include <QDeclarativeItem>
    #include <QGLWidget>
    #include "myThread.h"

    //The GLGadget class provides an OpenGL context which is then instantiated
    // inside of QML. Please note: Because of this, the instance is not
    // accessible on the C++ side of this project. This limitatioin could
    // possibly be addressed in the future by assigning a parent to it
    // so that it can be "found" through "findchild" method in Qt

    class GLGadget : public QDeclarativeItem
    {
    Q_OBJECT

    public:
    GLGadget(QDeclarativeItem *parent = 0);
    //~GLGadget();

    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
    void draw_nsu2d_Solution();

    Q_PROPERTY(float GGMouseX READ GGMouseX WRITE setMouseX )

    float GGMouseX();
    float m_mouseX;

    public slots:
    int launchThread();

    private slots:
    int updateGLGadgetWindow();

    float setMouseX(float);

    private:
    myThread *newthread;
    QTimer *myTimer;

    };

    #endif // GLGADGET_H@

    Sorry no time to elaborate. Hope that helps some.



  • Hi , Thank you very much for the reply.I will try what you posted and i will get back with results.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.