OpenGL view in QML

Merinas

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.

qtd1d1

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

Merinas

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.

qtd1d1

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.

Huemac

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

Merinas

Nothing special just something like

@import QtQuick 1.0

OpenGLItem{
width:200
height:200
}@

Huemac

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.

ultramanjones

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!

Merinas

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.

ultramanjones

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

ultramanjones

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

bhaskarm

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

ultramanjones

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.

bhaskarm

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

OpenGL view in QML

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

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

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

MDE{ width:200 height:200 } @

MDE{
width:200
height:200
}
@