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.
Step2:
Step4:
Download Qt creator
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:
- 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.
- 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.
- 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
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:
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
In line 10 of above code qt creator generate
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
#ifndef GLWIDGET_H #define GLWIDGET_H #includeclass 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.
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.
Thanks! I knew the Qt SDK included support for the QOpenGL module, but I did not know how to get Qt Creator to handle it since Design Mode's Widget Box does not include a QGLWidget and the base class combo box for adding a new C++ class does not list QGLWidget as an option.
ReplyDeleteYour procedure does a good job of explaining how to 1) manually type in QGLWidget as the base class when you add a new C++ class and 2) first add a QWidget to your form and then use Design Mode's 'Promoted widgets' feature to promote that QWidget to the QGLWidget subclass you created.
Be advised that 'promoted' is misspelled here twice --- first as 'prompted' and then again as Prompeted'.