Introduction-to-Qt3D: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
(Convert ExpressionEngine links)
Line 117: Line 117:


}</code> ''Drawing a 3D cube with GLUT.'' "source code":https://gitorious.org/wiki-sources/wiki-sources/trees/master/opengl
}</code> ''Drawing a 3D cube with GLUT.'' [https://gitorious.org/wiki-sources/wiki-sources/trees/master/opengl source code]


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).
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).
Line 224: Line 224:
  glEnd();
  glEnd();
  }
  }
}</code> ''GLWidget class for drawing the 3D cube.'' "source code":https://gitorious.org/wiki-sources/wiki-sources/trees/master/QtOpenGL/glwidget
}</code> ''GLWidget class for drawing the 3D cube.'' [https://gitorious.org/wiki-sources/wiki-sources/trees/master/QtOpenGL/glwidget source code]


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.
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.
Line 308: Line 308:
// Draw the cube
// Draw the cube
  m_rootNode->draw(painter);
  m_rootNode->draw(painter);
}</code> ''GLView class for drawing the 3D cube.'' "source code":https://gitorious.org/wiki-sources/wiki-sources/trees/master/Qt3D/glview
}</code> ''GLView class for drawing the 3D cube.'' [https://gitorious.org/wiki-sources/wiki-sources/trees/master/Qt3D/glview source code]


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 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.
Line 317: Line 317:


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


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

Revision as of 15:02, 4 March 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

[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

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

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

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 GLUT Qt OpenGL Qt 3D

Qt 3D latest snapshot can be obtained here: Qt Quick 3D