Author: Romain Vergne (website)
Please cite my name and add a link to my web page if you use this course

Image synthesis and OpenGL: exercices 02

Setup

We will use Linux and the following libraries:

OpenGL: Open Graphics Library (online spec, pdf spec)
GLU: OpenGL Utility Library
GLEW: OpenGL Extension Wrangler Library
GLM: OpenGL Mathematics library
QT: the window manager

Installing sources. In a terminal, do:

Download the sources at http://romain.vergne.free.fr/teaching/IS/data02/TP02.tgz
If needed, edit the file main.pro to change paths
To compile: qmake && make
To run: ./tp02
To edit: use either your prefered text editor or qtcreator

A simple planetary system

The goal of these exercices is to familiarize yourself with OpenGL transformation and projection matrices. You should obtain something like this:

Exercice 1: Have a look at the code, understand matrices

Look at the file viewer.h

_viewMatrix will contain the view matrix
_projMatrix will contain the projection matrix (either orthographic or perspective in our case)

_modelMatrices will contain the model matrices

This is a stack because we want to handle hierarchical transformations

drawSphere(...)

draw a sphere at 0,0,0 with a given color

setMatrices(...)

tells OpenGL to use the given matrices before drawing an object

Look at viewer.cpp

initializeGL: (called only once), matrices are initialized with identity matrices
paintGL: the function called everytime to repaint when a change occurs

you will mainly have to initialize the view and projection matrices here, as well as the viewport

drawScene:

you will have to set the proper model matrix, setMatrices and draw your spheres here

The transformation matrices seen in the previous course can be obtained via the glm library:

// identity matrix
glm::mat4(1.0f);

// rotation matrix (will apply the following transformation: M*R
glm::rotate(glm::mat4 M,float angleInDegree, glm::vec3 rotationAxis);

// which is equivalent to:
M*glm::rotate(glm::mat4(1.0f),float angleInDegree, glm::vec3 rotationAxis);

// scaling matrix: M*S
glm::scale(glm::mat4 M,glm::vec3 scalingFactors);

// translation matrix: M*T
glm::translate(glm::mat4 M,glm::vec3 translateValues);

// view matrix V
glm::lookAt(glm::vec3 pos,glm::vec3 center,glm::vec3 up);

// orthogographic projection matrix P
glm::ortho(float left,float right,float bottom,float top,float near,float far);

// perspective projection matrix P
glm::perspective(float fovy,float aspect,float near,float far)

Be careful with the order of transformations. The following example shows how to apply a scaling, followed by a translation, followed by a rotation, before computing the model matrix:

// Lets consider an initial model matrix, at the top of the stack: _modelMatrices.top() = glm::mat4(1.0f);

// the following code...
glm::mat4 s = glm::scale(glm::mat4(1.0f),scalingFactors);
glm::mat4 r = glm::rotate(glm::mat4(1.0f),spin,axis);
glm::mat4 t = glm::translate(glm::mat4(1.0f),translateValues);
_modelMatrices.top() = _modelMatrices.top()*r*t*s;

// ...is equivalent to
_modelMatrices.top() = glm::rotate(_modelMatrices.top(),spin, axis);
_modelMatrices.top() = glm::translate(_modelMatrices.top(),translateValues);
_modelMatrices.top() = glm::scale(_modelMatrices.top(),scalingFactors);

Exercice 2: Looking at the sphere

All the exercises will be done either in paintGL (for initializing the view and projection matrices) and drawScene (for applying transformations and drawing multiple spheres).

Initialize the view matrix so that the camera is located on the z-axis and look at the center (0,0,0).
Initialize the projection matrix so that

the fovy is equal to 45
the aspect is equal to the aspect of the viewport
the near value is equal to 0.1 and the far value to 100

Try different camera positions until you are satisfied with the result. Pressing "w" will display the scene as wireframes.

Exercice 3: Rotating the sphere

Modify the model matrix so that the yellow sphere rotates around the y-axis.
You may use the variable _spin that is automatically updated after each rendering (or your own variables if you want)

Check the result in wireframes mode. Pressing "a" will stop/play the animation.

Exercice 4: Adding a planet

Draw a smaller sphere, translated in the x- and/or z-axis and rotating around the sun with a different speed (that depends on _spin)
Note: do not forget to use

_modelMatrices.push(_modelMatrices.top()); // for copying the current model matrix and applying operations on it
apply your transformations, set the current matrices, draw some spheres, etc...
_modelMatrices.pop(); // to come back in the previous state

Exercice 5: Adding satellites

Using the same method, add several satellites that turn around the previous planet with different positions/scales and translations

Exercice 5: Viewports

Using glViewport, define 4 regions in the window, in which you will use different cameras / projections:

bottom-left: perspective projection, camera on the z-axis (side-view)
top-right: perspective projection, camera on the y-axis (top view)
bottom-right: orthographic projection, camera on the y-axis (top view)
top-left: perspective transformation, a 3D camera (not aligned with any of the axis)

Try different projection and camera parameters

Exercice 6: Bonus

Add multiple planets and satellites, using a loop for instance
Add a ring around some of the planets using GL_LINE_LOOP

PREVIOUS: 02 - TRANSFORMATIONS

NEXT: 03 - PIPELINE