Introduction-to-Qt3D

[toc align_right="yes" depth="3"]

Introduction to Qt 3D

NOTE: Qt 3D (along with Qt Quick 3D project) is undergoing heavy development. They are not yet part of Qt 5, and the API shown in this article may be subject to changes.

WARNING: The contents of this article were last updated in 2012. This article is heavily outdated.

Qt 3D is a set of C++ APIs for 3D programming built on top of Qt OpenGL. The newest project is called Qt Quick 3D which creates QML bindings to Qt 3D.

First, we'll make a comparison of the previous OpenGL APIs: GLUT and Qt OpenGL.

GLUT (OpenGL Utility Toolkit)

GLUT was one the first (if not the first) toolkit to provide a portable API to handle window management for OpenGL programs. It uses callbacks to register drawing functions and more. There were also routines provided for drawing geometric primitives (both in solid and wireframe state) such as cubes and spheres.

A simple OpenGL program with just a 3D cube and some lighting could be as long as 140 lines of code when developed with GLUT.

3D Hello World Cube 3D cube drawn using OpenGL.

…

void initialize()
{
 float ambientLight[] = { 0.2, 0.2, 0.2, 1.0 };
 float specularLight[] = { 1.0, 1.0, 1.0, 1.0 };
 float specularity[] = { 1.0, 1.0, 1.0, 1.0 };
 float shininess[] = { 60.0 };
 float lightPosition[] = { 0.0, 50.0, 50.0, 1.0 };

…

// Enable lighting with one light source
 glEnable(GL_LIGHTING);
 glEnable(GL_LIGHT0);

…

// Properties of the objects' materials
 glMaterialfv(GL_FRONT, GL_SPECULAR, specularity); // Reflectance
 glMaterialfv(GL_FRONT, GL_SHININESS, shininess); // Shininess

// Enable ambient light usage
 glLightModelfv(GL_LIGHT_MODEL_AMBIENT, ambientLight);

glLightfv(GL_LIGHT0, GL_AMBIENT, ambientLight);
 glLightfv(GL_LIGHT0, GL_SPECULAR, specularLight);

// Position of the light source
 glLightfv(GL_LIGHT0, GL_POSITION, lightPosition);
}

…

void resize(int width, int height)
{
 …

// Set the viewport to be the entire window
 glViewport(0, 0, width, height);

…

// Defines the perspective projection
 glLoadIdentity();
 gluPerspective(45, aspectRatio, 1, 500);

…

// Defines the position of the camera and the target
 glLoadIdentity();
 gluLookAt(0, 80, 200, 0, 0, 0, 0, 1, 0);
}

void paint()
{
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

// Vertices
 static const float vertices[6][4][3] = {
 { { 1.0, –1.0, 1.0 }, { 1.0, –1.0, –1.0 }, { 1.0, 1.0, –1.0 }, { 1.0, 1.0, 1.0 } },
 { { –1.0, –1.0, –1.0 }, { –1.0, –1.0, 1.0 }, { –1.0, 1.0, 1.0 }, { –1.0, 1.0, –1.0 } },
 { { 1.0, –1.0, –1.0 }, { –1.0, –1.0, –1.0 }, { –1.0, 1.0, –1.0 }, { 1.0, 1.0, –1.0 } },
 { { –1.0, –1.0, 1.0 }, { 1.0, –1.0, 1.0 }, { 1.0, 1.0, 1.0 }, { –1.0, 1.0, 1.0 } },
 { { –1.0, –1.0, –1.0 }, { 1.0, –1.0, –1.0 }, { 1.0, –1.0, 1.0 }, { –1.0, –1.0, 1.0 } },
 { { –1.0, 1.0, 1.0 }, { 1.0, 1.0, 1.0 }, { 1.0, 1.0, –1.0 }, { –1.0, 1.0, –1.0 } }
 };

…

for (int i = 0; i < 6; +''i) {
 glBegin(GL_QUADS);
 glNormal3fv(normals[i]);
 for (int j = 0; j < 4;''+j)
 glVertex3fv(vertices[i][j]);
 glEnd();
 }

glutSwapBuffers();
}

int main(int argc, char **argv)
{
 …

initialize();

// Register the drawing function "paint()"
 glutDisplayFunc(paint);

// Register the resizing function "resize()"
 glutReshapeFunc(resize);

…
}

Drawing a 3D cube with GLUT. "source code":https://gitorious.org/wiki-sources/wiki-sources/trees/master/opengl

The code above follows a very basic OpenGL program structure. It has a initialize function (for doing some initial setup), a resize function (to handle window resizes) and a paint function (to draw the actual 3D objects).

Qt OpenGL

Qt OpenGL is a port of the OpenGL API to the Qt toolkit. It does a fairly good job at translating all of OpenGL basic functions to a Qt widget. Now, instead of several functions being registered for callbacks, it is possible to take advantage of the SIGNAL/SLOT system of Qt.

One of the most commonly used approches for Qt OpenGL to write a 3D program is to subclass QGLWidget. QGLWidget provides three convenience methods that you can reimplement to perform the typical OpenGL tasks: paintGL, resizeGL and initializeGL (similar to the GLUT version of the program).

The program below follows the same basic structure of its GLUT previous version.

…

class GLWidget : public QGLWidget
{
 Q_OBJECT

public:
 GLWidget(QWidget *parent = 0);

protected:
 void initializeGL();
 void resizeGL(int width, int height);
 void paintGL();
};

GLWidget::GLWidget(QWidget *parent)
 : QGLWidget(parent)
{
 setFormat(QGLFormat(QGL::Rgba | QGL::DoubleBuffer | QGL::DepthBuffer));
}

void GLWidget::initializeGL()
{
 float ambientLight[] = { 0.2, 0.2, 0.2, 1.0 };
 float specularLight[] = { 1.0, 1.0, 1.0, 1.0 };
 float specularity[] = { 1.0, 1.0, 1.0, 1.0 };
 float shininess[] = { 60.0 };
 float lightPosition[] = { 0.0, 50.0, 50.0, 1.0 };

…

// Enable lighting with one light source
 glEnable(GL_LIGHTING);
 glEnable(GL_LIGHT0);

…

// Properties of the objects' materials
 glMaterialfv(GL_FRONT, GL_SPECULAR, specularity); // Reflectance
 glMaterialfv(GL_FRONT, GL_SHININESS, shininess); // Shininess

// Enable ambient light usage
 glLightModelfv(GL_LIGHT_MODEL_AMBIENT, ambientLight);

glLightfv(GL_LIGHT0, GL_AMBIENT, ambientLight);
 glLightfv(GL_LIGHT0, GL_SPECULAR, specularLight);

// Position of the light source
 glLightfv(GL_LIGHT0, GL_POSITION, lightPosition);
}

void GLWidget::resizeGL(int width, int height)
{
 …

// Set the viewport to be the entire window
 glViewport(0, 0, width, height);

…

// Defines the perspective projection
 glLoadIdentity();
 gluPerspective(45, aspectRatio, 1, 500);

…

// Defines the position of the camera and the target
 glLoadIdentity();
 gluLookAt(0, 80, 200, 0, 0, 0, 0, 1, 0);
}

void GLWidget::paintGL()
{
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

// Vertices
 static const float vertices[6][4][3] = {
 { { 1.0, –1.0, 1.0 }, { 1.0, –1.0, –1.0 }, { 1.0, 1.0, –1.0 }, { 1.0, 1.0, 1.0 } },
 { { –1.0, –1.0, –1.0 }, { –1.0, –1.0, 1.0 }, { –1.0, 1.0, 1.0 }, { –1.0, 1.0, –1.0 } },
 { { 1.0, –1.0, –1.0 }, { –1.0, –1.0, –1.0 }, { –1.0, 1.0, –1.0 }, { 1.0, 1.0, –1.0 } },
 { { –1.0, –1.0, 1.0 }, { 1.0, –1.0, 1.0 }, { 1.0, 1.0, 1.0 }, { –1.0, 1.0, 1.0 } },
 { { –1.0, –1.0, –1.0 }, { 1.0, –1.0, –1.0 }, { 1.0, –1.0, 1.0 }, { –1.0, –1.0, 1.0 } },
 { { –1.0, 1.0, 1.0 }, { 1.0, 1.0, 1.0 }, { 1.0, 1.0, –1.0 }, { –1.0, 1.0, -1.0 } }
 };

 …

 for (int i = 0; i < 6; +''i) {
 glBegin(GL_QUADS);
 glNormal3fv(normals[i]);
 for (int j = 0; j < 4;''+j)
 glVertex3fv(vertices[i][j]);
 glEnd();
 }
}

GLWidget class for drawing the 3D cube. "source code":https://gitorious.org/wiki-sources/wiki-sources/trees/master/QtOpenGL/glwidget

This version is still about 140 lines of code. Except that now we have the convenience of using it within a Qt class. That means, the drawing of the 3D objects can still be done with OpenGL standard functions, while leaving the window management and input handling part to the Qt API.

h2. Using Qt 3D

Qt 3D was created to simplify the usage of the OpenGL standard API within a Qt application. It abstracts most of the setup previously required. Camera position, viewing volume, vertices definition and other initial settings become much simpler. Therefore, reduces the overall code needed for creating a basic 3D program.

Similar to QGLWidget, in Qt 3D there's a class named QGLView which does most of the work regarding this initial settings. All we need to do is subclass it.

/* Qt 3D headers */

class GLView : public QGLView
{
 Q_OBJECT

public:
 GLView(QWidget *parent = 0);
 ~GLView();

protected:
 void initializeGL(QGLPainter *painter);
 void paintGL(QGLPainter *painter);

private:
 QGLSceneNode *m_rootNode;
};


GLView::GLView(QWidget *parent)
 : QGLView(parent)
 , m_rootNode(0)
{
 // Create the cube
 QGLBuilder builder;
 builder << QGL::Faceted << QGLCube(2);
 m_rootNode = builder.finalizedSceneNode();

 // Setup the camera
 camera()->setFieldOfView(45);
 camera()->setNearPlane(1);
 camera()->setFarPlane(500);
}

GLView::~GLView()
{
 delete m_rootNode;
}

void GLView::initializeGL(QGLPainter *painter)
{
 QGLLightParameters *lightParameters = new QGLLightParameters(this);
 QGLMaterial *material = new QGLMaterial(this);
 QColor color;

// Setup the lighting for the scene
 painter->setStandardEffect(QGL::LitMaterial);
 color.setRgbF(0.2, 0.2, 0.2, 1.0);
 lightParameters->setAmbientColor(color);
 color.setRgbF(1.0, 1.0, 1.0, 1.0);
 lightParameters->setSpecularColor(color);
 lightParameters->setDirection(QVector3D(0.0, 50.0, 50.0));
 painter->setMainLight(lightParameters);

// Apply a material
 color.setRgbF(1.0, 1.0, 1.0, 1.0);
 material->setSpecularColor(color);
 material->setShininess(60);
 color.setRgbF(0.0, 0.0, 1.0, 1.0);
 material->setAmbientColor(color);
 material->setDiffuseColor(color);
 painter->setFaceMaterial(QGL::AllFaces, material);
}

void GLView::paintGL(QGLPainter *painter)
{
 // Perform some transformations
 painter->modelViewMatrix().translate(0.0, 0.0, 5.0);
 painter->modelViewMatrix().rotate(15.0, 1.0, 0.0, 0.0);
 painter->modelViewMatrix().rotate(30.0, 0.0, 1.0, 0.0);
 painter->modelViewMatrix().rotate(15.0, 0.0, 0.0, 1.0);

// Draw the cube
 m_rootNode->draw(painter);
}

GLView class for drawing the 3D cube. "source code":https://gitorious.org/wiki-sources/wiki-sources/trees/master/Qt3D/glview

The code now looks easier to understand than its previous versions. There was no need for setting the cube's vertices, no aspect ratio calculation, no lighting normals set. The real work is done by the QGLBuilder class and QGLPainter class. The first one (QGLBuilder) creates the geometry of the cube and adds it to the scene, while the second (QGLPainter) does the actual drawing of the cube.

The basic structure of the program is still there with the paintGL and initializeGL methods. There are also three more classes that handle typical OpenGL tasks: QGLCamera, QGLLightParameters and QGLMaterial.

References

The source code used in this article was based on examples from the following references: "OpenGL Programming Guide":http://www.glprogramming.com/red/ "GLUT":http://www.opengl.org/resources/libraries/glut/ "Qt OpenGL":http://doc.qt.io/qt-5/qtopengl-index.html "Qt 3D":http://doc.qt.nokia.com/qt-quick3d-snapshot/

Qt 3D latest snapshot can be obtained here: "Qt Quick 3D":http://doc.qt.nokia.com/qt-quick3d-snapshot/