[SOLVED] OpenGL ES 2.0 and QML working example for Nokia N9

deion

Hi all,

I have started making a game in OpenGL for Nokia N9; I got something going with OpenGL using QGLWidget and the OpenGL ES 2.0 samples from the Qt SDK (textures2, cube and hellogl_es2). The problem now is that I want to add some decent looking UI and doing this only in OpenGL ES 2.0 is a REAL PAIN. So I want to do my UI using QML and keep the game in OpenGL;
I have seen this question answered a lot of times on different forums, and it looks like it's possible, the idea being to use a QDeclarativeItem, override its paint() method and put the code from QGLWidget::paintGL() and use QPainter::begin/endNativePainting()
and
@QDeclarativeView *view = new QDeclarativeView;
QGLWidget *glWidget = new QGLWidget;
view->setViewport(glWidget);@

It's kind of working but the custom QML OpenGL item (QDeclarativeItem derived) is drawing all over the screen, even though in main.qml I specifically tell it to have a width and height of only 200;

I tried various things, but nothing works, my custom OGL QML item is full screen :( ...

Seeing that OpenGL is now such an important app feature in post iPhone mobile world why doesn't Nokia provide such an example? Is there anywhere in the corners of the internet a simple WORKING example of integrating OpenGL ES 2.0 with QML (that ideally works on N9)?

Thanks & regards,
Ionut

deion

Is this (non-fullscreen OpenGL ES 2 QML item) even possible on Nokia N9? Now that I think about it, the other posts that said it was possible were referring to OpenGL 1.x for Windows target (like "here":http://qt-project.org/forums/viewthread/4109 ).

I guess I will start to do my UI QWidget based. "This":http://projects.developer.nokia.com/gles2phys is a good example of implementing an info button inside a QGLWidget. But I would just HATE it, after months of working on this UI, to find out that I could have done it easily in a few days just by using QML (together with animations etc).

deion

I solved it by doing it the other way around: instead of starting with a QDeclarativeView with main.qml and then trying to stuff the custom opengl QDeclarativeItem inside it, I started with a QWidget, where I put the custom QGLWidget together with QDeclarativeView s that host my UI, something like below (where Window is derived from QWidget):

@#include "window.h"

#include <QDeclarativeView>

#include "glwidget.h"

Window::Window():
glWidget(NULL)
{
QHBoxLayout* hBox = new QHBoxLayout(this);
hBox->setMargin(0);
hBox->setSpacing(0);

QSizePolicy fixedSizePolicy;
fixedSizePolicy.setHorizontalPolicy(QSizePolicy::Fixed);
fixedSizePolicy.setVerticalPolicy(QSizePolicy::Fixed);

QDeclarativeView* qmlLeftTBar = new QDeclarativeView(this);
qmlLeftTBar->setSource(QUrl("qrc:/qml/LeftTBar.qml"));
qmlLeftTBar->setSizePolicy(fixedSizePolicy);
QSize qmlTBarsize(80, 480);
qmlLeftTBar->setFixedSize(qmlTBarsize);

glWidget = new GLWidget(0, 0);
glWidget->setSizePolicy(fixedSizePolicy);
glWidget->setFixedSize(glWidget->sizeHint());

QDeclarativeView* qmlRightTBar = new QDeclarativeView(this);
qmlRightTBar->setSource(QUrl("qrc:/qml/RightTBar.qml"));
qmlLeftTBar->setSizePolicy(fixedSizePolicy);
qmlLeftTBar->setFixedSize(qmlTBarsize);

hBox->addWidget(qmlLeftTBar);
hBox->addWidget(glWidget);
hBox->addWidget(qmlRightTBar);

setLayout(hBox);

}
@

The only downside is that by using QWidget root UI it is not as easy to support portrait orientation on N9.