C++ - Qt Framework - Using QOpenGLWidget to display a shape with lighting and normal vectors

Lighting is certainly one of the most interesting effect that we can make with OpenGL.

Combined with colors and normal vectors, lighting becomes visually realistic.

In this tutorial we are going to see how to draw a main shape (kind of a rectangular cube), another one inside the first one and a third representing our lighting source.

We are also going to add normal vectors to these two shapes but with opposite directions.

So let's get started.

First of all

For this tutorial, we'll use the same camera mechanism than from another tutorial:

https://www.badprog.com/c-qt-framework-using-qopenglwidget-to-display-a-window-for-moving-shapes-with-keyboard-and-mouse

To sum up what's going on in this new Qt OpenGL Tutorial:

VAO is the manager for one or many shapes, it says that all the VBOs after the bind() method will belong to it.

Shader files can be initialized for each shape or for many ones.

Each location element in the shader file is linked to the .CPP code with QOpenGLShaderProgram attributeLocation() methods.

Each of these element represents a vector in the StructVertex vectors that we set in the initializeGL() method.

In general we set 2 VBOs, one for the structure of Vectors of each element (position, color, texture and normal) and the other one for an array of indices in order to have a better handling of the first array.

The VBOs data are set after the VBO bind() and before the VBO release() method.

The VAO handles 1 or many VBOs, in our case two for the main shape.

Then we'll use the Qt GUI to handle the lighting position and its colors.

Shaders will be of course used for this tutorial.

To have a better understanding of the code, we have separated the colors from the lighting vertex and fragment shaders.

The dot product will help us to manipulate the coordinate of the lighting

We'll also deal with the ambient and diffuse lighting in order to accentuate the lighting strength.

As you can see, in the video tutorial, the inner shape from the cube is displayed in colors when the light rays are emitted in the opposite direction.

So we can have a shape illuminated when another is darkened and vice versa.

Let's code a bit

BadprogOpenGLLightingWithNormal.pro

QT       += core gui opengl


#badprog.com

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets


CONFIG += c++11


# The following define makes your compiler emit warnings if you use

# any Qt feature that has been marked deprecated (the exact warnings

# depend on your compiler). Please consult the documentation of the

# deprecated API in order to know how to port your code away from it.

DEFINES += QT_DEPRECATED_WARNINGS


# You can also make your code fail to compile if it uses deprecated APIs.

# In order to do so, uncomment the following line.

# You can also select to disable deprecated APIs only up to a certain version of Qt.

#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0


SOURCES += \

    badprogOpenglWidget.cpp \

    camera3d.cpp \

    input.cpp \

    main.cpp \

    mainWindow.cpp \

    transform3d.cpp


HEADERS += \

    badprogOpenglWidget.h \

    camera3d.h \

    input.h \

    mainWindow.h \

    transform3d.h


FORMS += \

    mainWindow.ui


RESOURCES += \

    badprog.qrc


# Default rules for deployment.

qnx: target.path = /tmp/$${TARGET}/bin

else: unix:!android: target.path = /opt/$${TARGET}/bin

!isEmpty(target.path): INSTALLS += target

main.cpp

mainWindow.cpp

mainWindow.h

mainWindow.ui

badprogOpenGLWidget.cpp

badprogOpenGLWidget.h

badprog.qrc

<RCC>

    <qresource prefix="/">

        <file alias="fragment_color">shader/shader_fragment_color.glsl</file>

        <file alias="vertex_color">shader/shader_vertex_color.glsl</file>

        <file alias="fragment_lighting">shader/shader_fragment_lighting.glsl</file>

        <file alias="vertex_lighting">shader/shader_vertex_lighting.glsl</file>

    </qresource>

</RCC>

shader/shader_vertex_color.glsl

shader/shader_fragment_color.glsl

shader/shader_vertex_ligthing.glsl

shader/shader_fragment_lighting.glsl

Conclusion

The shaders are a great help to display a lighting object.

We can use tons of mathematic concepts in order to achieve all our truly desire.

Good job, once again you did it.