OpenGL with Qt tutorial Creating OpenGL Widget with Qt Creator

In this articles, we will discuss about using the OpenGL with Qt GUI application. We just create the OpenGL window with Qt GUI application using Qt creator. In upcoming tutorials series I will show rendering the 3D object , event handling and other with OpenGL and Qt GUI application.

Download Qt creator

Qt 5.1.0 for Windows 32-bit (MinGW 4.8, OpenGL, 666 MB) form http://qt-project.org/downloads

Introduction

This tutorial provides basic implementation of OpenGL with Qt GUI application. It shows how to integrate the OpenGL with Qt GUI application. Qt provides a widget called QGLWidget for rendering graphics which enables you to easily integrate OpenGL with Qt. This tutorials only includes OpenGL widget and related class to integrate with Qt. It doesn’t include the details of OpenGL rendering pipeline and Qt GUI. To learn and understand this tutorial you must have basic knowledge of Qt GUI and OpenGL rendering pipeline.  In this tutorial, we will use modern OpenGL version 3.2 and GLSL 1.5 as a shader language.

How we use OpenGL with Qt application

Qt provides a widget called QGLWidget for rendering OpenGL Graphics.  It is subclassed and used like any other QWidget and is cross-platform. We have to implement the following three virtual methods:

1.   QGLWidget::initializeGL() - sets up the OpenGL rendering context. It is called once before the QGLWidget::resizeGL() or QGLWidget::paintGL() function is called for the first time.
2.  QGLWidget::resizeGL() - gets called whenever the QGLWidget is resized, and after initialization. This method is generally used for setting up the viewport and the projection.
3. QGLWidget::paintGL() - renders theOpenGL scene. It is comparable to QWidget::paint().

Qt also offers a cross-platform abstraction for shader programs called QGLShaderProgram.This class facilitates the process of compiling and linking the shader programs as well as switching between different shaders.

Creating the OpenGL widget

Follow the following step to create Qt GUI Application project.

Step1:

Go to menu file->New File or Project and Choose Application->Qt GUI Application.

Give the project name (e.g helloWorld), left all the option default and save it.

Before following step 2 open the .pro file (as e.g helloWorld.pro)  . Edit the following to

QT       += core gui opengl

#-------------------------------------------------
#
# Project created by QtCreator 2013-08-10T16:16:39
#
#-------------------------------------------------

QT       += core gui opengl

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloWorld
TEMPLATE = app


SOURCES += main.cpp\
        mainwindow.cpp \
    glwidget.cpp

HEADERS  += mainwindow.h \
    glwidget.h

FORMS    += mainwindow.ui

Step2:

Go to mainwindow.ui design view. Remove all three menuBar, menuToolBar, statusBar as shown in picture.

On design view form the property window of Qmainwindow change windowModality option to ApplicationModal

Step3:

Drag and drop one Push Button and one vertical spacer above the Push Button. Select both item and click on “Layout on Grid” option as red mark shown in figure.

Step4:

Drag and drop one widget and keep it on left side of the push button.

Step 5:

Select the window and click on “Layout Horizontally” option as red mark shown in figure.

Change the text of pushbutton to "close"

Now select the widget and form property window on sizePolicy option set horizontal Policy to Expanding.

Step6:  

Now go to edit mode. Right click on project and add new class. Give the name of class name “glWidget” or “(your choose name)”. Don’t forget to Add Base class “QGLWidget”. This is also clearly shown in figure.

Step7:

Again, go to design view. Right Click on widget and select the option “prompted widgets”. Give the Prompeted Class name to “GLWidget” and click add button. From above list select GLWidget and click Promote.

Step8:

From the design view click on Push Button and select the signals/slot option which is shown in figure with red mark. After clicking signals/slot, click the left button of move and drap the mouse cursor form button to body of window and after that release the mouse click. When you release the mouse button then window will popup. Select on check box “Show signals and slots inherited form QWidget. Form pushButton (QPushButton) side select  “clicked(bool)”  option and from MainWindow(QMainWindow) side select “close()” option which you can see clearly in the picture mark by red color.

Step9:

It is final step. Go to class GLWidget. Code for files glwidget.h and glwidget.cpp is shown below.

glwidget.h

#ifndef GLWIDGET_H
#define GLWIDGET_H

#include 

class GLWidget : public QGLWidget
{
    Q_OBJECT
public:
    explicit GLWidget(QWidget *parent = 0);
    
    void resizeGL();
    void initializeGL();
    void paintGL();
    
};

#endif // GLWIDGET_H

In line 10 of above code qt creator generate

explicit GLWidget(QWidget *parent = 0);

which show the error while building so change it as above source code. Don't forgot to change it on glwidget.cpp source file also.
glwidget.cpp

#include "glwidget.h"

GLWidget::GLWidget(QWidget *parent) :
    QGLWidget(parent)
{
}

void GLWidget::resizeGL()
{
}

void GLWidget::initializeGL()
{
    qglClearColor(QColor(Qt::black));
}

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

Doesn’t copy and paste the code because while compiling Qt creator may show error. Type the code as shown above.

Output:

I hope you understand all the steps. I may forget to specify the some point for that please comment me. I will edit my post. You can also download the complete project file here CreateOpenGLWidget.