top of page

You want to discover the world of 3D and video games, then this site is for you!

To do this, you will need a good knowledge of C and C++, and a good knowledge of mathematics.

OpenGL is a low-level graphics API for creating real-time 3D computer graphics.

This library offers many out-of-the-box functions.

We will study a series of progressive examples leading to the realization of complete games with OpenGL 2.0 (also known as the old OpenGL).

(also known as the old OpenGL).

Other extensions such as SDL, GLUT, GLEE, Freetype can be added to OpenGL in order to get more graphical features.

This section will deal with algorithmic geometry, i.e. the development of a software component that will manage animation, physics and real-time CGI processing.

Through these few examples, we will see the basics of graphical programming.


It's up to you...

Happy reading!!

Demonstration in OpenGL!!!

1 - Initialize OpenGL with GLUT

Example 1:

In this example, we'll see how to initialize a window with GLUT,

This is going to be our first render window, which is our start point.

The steps to follow are as follows:

//inclusions des librairies windows, openGL, glu et GLUT #include <windows.h>  #include <gl/gl.h> #include<gl/glu.h> #include<C:\freeglut\include\GL\freeglut.h>

prototype de fonction servant à afficher le dessin (ici il est vide pour l'instant!) void dessiner(); 

int main(int argc, char ** argv)//fonction principal  {    

 glutInit(&argc,argv);//initilisation de l'api glut     glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode d'affichage de glut qui gere plusieurs types de tampons    

 glutInitWindowSize(960,540);// taille de la fenetre     glutCreateWindow("tuto01");// création d'une fenetre avec un titre de l'application     glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l'ecran qui prend en paramètre une fonction dessiner()     glutMainLoop();// fonction d'appel en continu d'affichage dans main()     return 0; 

}

void dessiner() {     

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);// effacement de la fenêtre et vidage des tampons        

 glutSwapBuffers();// échange de tampons pour achever l'affichage glut     glutPostRedisplay();// rafraîchissement de la scène en continu    

  }

2 - Displaying a triangle and a pentagon on the screen

Example 2: ​ ​

 

After having seen the initialization in GLUT, we must now understand how to display a pixel on the screen and therefore understand the process of rendering an image on the screen because for the moment our buffer is empty, the rendering does not display Nothing. When we talk about images, we must first learn how to display a pixel on the screen. A pixel is a point in 2D or 3D space. All of these points form a series of pixels, therefore a 2D image. Within a pixel, we can carry out operations, we talk about manipulating pixels. We can perform operations on graphic objects called transformation operations in a 2D or 3D space (rotations, changes of scale, translation).

A pixel made up of 3 points linked to 3 segments can form a full or empty surface. This surface contains two faces (also called normal): an interior normal and an exterior normal. On a pixel, we can emit a color which can be of RGB or RGBA type. On the computer, we say that we read values ​​between 0 and 1. Each of these values ​​corresponds to a color; the closer we are to index 1, the lighter the color, the closer we are to 0, the darker the color. We will see in the following chapters that we can store components other than colors within a pixel. When drawing in Opengl, we first start by emptying the buffers. This means that we must erase the window (black window) and then start drawing, which is the opposite of traditional drawing because the sheet initially is completely white. In fact, it is said that the pixels in the image restitution process are stored in buffers, there are several types (chromatic buffers....).

Then, you must define a projection mode, that is to say in which mode the pixel should be projected on the screen. There are two types of views, either an orthographic type view (2D projection), or a perspective type view (the object is projected in 3D). Then, you have to empty the matrix before starting to draw. A matrix is ​​defined by a set of transformations (modeling transformations, projection transformations, visualization transformation) which are executed one after the other. All transformation operations are stored in matrices. In 3D we say that we work with 4*4 matrices. (W x Y Z). Each of these components must behave homogeneously. To separate two transformations, we use 2 matrices, an input and an output. We speak of matrix stacks when the number of matrices accumulates. Before drawing graphic objects (also known as modeling transformation), we must use the visualization transformation, i.e. define a point of view in our 3D scene. Then we return the object to the screen.

To do this, we start by saying what type of shape we want to display (polygon, triangle, quadrilateral). Then, we display each of the vertices which will constitute our future shape. Example method of displaying a vertex on the screen: matrix() rotation transformation scale transformation vertex display end of matrix etc...

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<C:\freeglut\include\GL\freeglut.h>

void dessiner(); void reshape(int width,int height);

int main(int argc, char ** argv) {  

   glutInit(&argc,argv);//initilisation de glut     glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode d'affichage de glut     glutInitWindowSize(960,540);// taille de la fenêtre

     glutCreateWindow("tuto01");// titre de l'application

     glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l’écran     glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l’écran 

    glutMainLoop();// fonction d'appel en continue d'affichage dans main()     return 0; 

}

void dessiner() {    

 glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);// effacement de la fenêtre et vidage des tampons      

glMatrixMode(GL_MODELVIEW);// choix du mode d'affichage en modelview  

  glLoadIdentity();// initialisation de la matrice     gluLookAt(0.8,0.3,10.0,0,0,0,0,1,0);// affichage de la camera à lécran    

glBegin(GL_TRIANGLES);// fonction pour commencer à dessiner un triangle à l’écran     glColor3d(0.2f,0.2f,0.2f);// application d'une couleur sur un sommet du triangle     glVertex3d(2.0,2.5,-1.0);// application d'un sommet à afficher dans la fenetre     glColor3d(0.2,0.3,0.4);     glVertex3d(-3.5,-2.5,-1.0);     glColor3d(0.5,0.8,0.5);     glVertex3d(2.0,-4.0,-1.0);     glEnd();     glBegin(GL_TRIANGLE_FAN);// fonction pour commencer à dessiner un pentagone     glColor3d(0.2,0.5,0.2);     glVertex3d(-1,2,0);         glColor3d(0.8,0.5,0.2);     glVertex3d(-3,-0.5,0);         glColor3d(0.6,0.5,0.2);     glVertex3d(-1.5,-3.0,0);         glColor3d(0.5,0.8,0.1);     glVertex3d(1,-2,0);         glColor3d(0.3,0.2,0.4);     glVertex3d(1,1,0);     glEnd();     glutSwapBuffers();// échange de tampons pour achever l'affichage glut     glutPostRedisplay();// rafraîchissement de la scène en continue      } void reshape(int width,int height) {     glViewport(0,0,width,height);// définition de la taille d'affichage de l'angle de la camera     glMatrixMode(GL_PROJECTION);// on choisit le mode projection de la matrice      glLoadIdentity();// on initialise la matrice     gluPerspective(45,float (width)/float (height),0.1f,5000); // on dit qu'on travaille en mode perspective avec une focale et un point de vue     glMatrixMode(GL_MODELVIEW);// on change de mode d'affichage, on recharge une nouvelle matrice de transformation de modélisation    

 }

Capture.PNG

3 - Animate an object in GLUT

Example 3:

Animation in general is defined by a set of images which one after the other constitute a movement. In video games (real-time), we work on 60 frames per second on average and in cinema, 25 frames per second. (i.e. 1 second = 25 frames) In opengl, you have to constantly update the scene, that is to say that with each new state, you refresh the scene. Then, we must increment the position of our graphic object by 1 unit or more. x++ // here, we vary the position in X of our object by 1 unit In fact, x, y, and z are components of the modeling transformation. These are the components in which we can perform translation transformations. So we can move our mesh according to position x, y or z. To simplify things, we would have the possibility of storing our transformation in a vector which would contain each of the components of our transformation. let V(x,y,z);

It is important to note that each time we move an object it is important to refresh the scene. To call the procedure: glutPostRedisplay(); ​ ​ Just, in our example, the object will undergo x rotation every frame. ​ Let's see an example:

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<C:\freeglut\include\GL\freeglut.h>

void dessiner(); void reshape(int width,int height); int anim; int anim2;

int main(int argc,char ** argv) {

glutInit(&argc,argv);//initilisation de glut glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode d'affichage de glut glutInitWindowSize(960,540);// taille de la fenêtre glutCreateWindow("tuto01");// titre de l'application glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l’écran glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l’écran glutMainLoop();// fonction d'appel en continue d'affichage dans main() return 0; }

void dessiner() {     anim+=1;// on incrémente une variable de 1 unité.     anim2+=4.0;on incrémente une variable de 4 unité. glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);// effacement de la fenêtre et vidage des tampons  glMatrixMode(GL_MODELVIEW);// choix du mode d'affichage en modelview glLoadIdentity();// initialisation de la matrice gluLookAt(0.8,0.3,10.0,0,0,0,0,1,0);// affichage de la camera à l'écran glPushMatrix();//debut de la matrice glRotated(anim2,0,0,0.5);//rotation de l'objet triangles glBegin(GL_TRIANGLES);// fonction pour commencer à dessiner un triangle à l’écran glColor3d(0.2f,0.2f,0.2f);// application d'une couleur sur un sommet du triangle glVertex3d(2.0,2.5,-1.0);// application d'un sommet à afficher dans la fenêtre glColor3d(0.2,0.3,0.4); glVertex3d(-3.5,-2.5,-1.0); glColor3d(0.5,0.8,0.5); glVertex3d(2.0,-4.0,-1.0); glEnd(); glPopMatrix();//fin de la matrice glPushMatrix();// début de la matrice glRotated(anim,0,0.5,0);//rotation de l'objet pentagone glBegin(GL_TRIANGLE_FAN);// fonction pour commencer à dessiner un pentagone glColor3d(0.2,0.5,0.2); glVertex3d(-1,2,0); glColor3d(0.8,0.5,0.2); glVertex3d(-3,-0.5,0); glColor3d(0.6,0.5,0.2); glVertex3d(-1.5,-3.0,0); glColor3d(0.5,0.8,0.1); glVertex3d(1,-2,0); glColor3d(0.3,0.2,0.4); glVertex3d(1,1,0); glEnd(); glPopMatrix();//fin de la matrice glutPostRedisplay();// rafraîchissement automatique de la scène à chaque image calculées glutSwapBuffers();// échange de tampons pour achever l'affichage glut glutPostRedisplay();// rafraîchissement de la scène en continue  } void reshape(int width,int height) { glViewport(0,0,width,height);// définition de la taille d'affichage de l'angle de la camera glMatrixMode(GL_PROJECTION);// on choisit le mode projection de la matrice  glLoadIdentity();// on initialise la matrice gluPerspective(45,float (width)/float (height),0.1f,5000); // on dit qu'on travaille en mode perspective avec une focale et un point de vue glMatrixMode(GL_MODELVIEW);// on change de mode d'affichage, on recharge une nouvelle matrice de transformation de modélisation }

4 - GLUT primitives and display modes

exemple 4:

​In 3D there are several types of primitives, namely basic objects, i.e. a cube, a sphere, a cylinder, a line, a Bezier curve, procedural objects already defined within the OpenGL library. These objects can be displayed in different modes, either in normal mode, i.e. the normals are filled with gray, or in texture mode, the normals are assigned a texture called either procedural or of a certain type (jpg, png, bmp...), or in wireframe mode (ideal for seeing the constitution of a mesh), or in bouding box mode, i.e. the objects are only visible through a cube in wireframe mode that surrounds it. In fact, primitives are made to show that there are already ready-to-use shapes. Then, we can modify these basic shapes to create more complex shapes (vehicles, architectures, humans...). You remember that in the first example, I showed how to draw a triangle with 3 vertices dedicated to be displayed in a scene. We could technically make very complex shapes by creating series of triangles that will form a complete mesh and to avoid repeating the operations use vertex arrays. For a low-poly vehicle we could count several hundred function calls one after the other intended to display our future object. ​ You will see some primitives displayed according to certain modes in the example below.

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<C:\freeglut\include\GL\freeglut.h>

void dessiner(); void reshape(int width,int height); int anim; int anim2;

int main(int argc,char ** argv) {

glutInit(&argc,argv);//initilisation de glut glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode addfichage de glut glutInitWindowSize(960,540);// taille de la fenetre glutCreateWindow("tuto01");// titre de l'application glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l'ecran glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l'ecran glutMainLoop();// fonction d'appel en continue d'affichage dans main() return 0; }

void dessiner() { 

    anim+=1;     anim2+=4.0; glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);// effacement de la fenêtre et vidage des tampons  glMatrixMode(GL_MODELVIEW);// choix du mode d'affichage en modelview glLoadIdentity();// initialisation de la matrice gluLookAt(0.4,0.3,4.0,0,0,0,0,1,0);// afichage de la camera à lecran

glPushMatrix();//début de la matrice glRotated(anim,0,0,0.5);//rotation de l'objet triangles glColor3d(0.8,0.9,0.9); glutSolidCube(0.5f);//affichage d'un cube en mode normal glPopMatrix(); glPushMatrix(); glTranslated(2,0,0); glRotated(anim,0,0,0.5);//rotation de l'objet triangles glColor3d(0.5,0.5,0.1); glutSolidSphere(0.4,20,20);//affichage d'une sphère en mode normal glPopMatrix(); glPushMatrix(); glTranslated(1,0,0); glRotated(anim,0,0,0.5);//rotation de l'objet triangles glColor3d(0.7,0.4,0.2); glutWireSphere(0.4,20,20);//affichage d'une sphere en mode fil de fer glPopMatrix(); glPushMatrix(); glTranslated(-1,0,0); glRotated(anim,0,0,0.5);//rotation de l'objet triangles glColor3d(0.7,0.4,0.2); glutWireCube(0.8);//afichage d'un cube en mode fil de fer

glEnd(); glPopMatrix();//fin de la matrice glutPostRedisplay();// rafraichissement automatique de la scène à chaque image calculée glutSwapBuffers();// échange de tampons pour ahever l'affichage glut glutPostRedisplay();// rafraichissement de la scène en continue  } void reshape(int width,int height) { glViewport(0,0,width,height);// définition de la taille d'affichage de l'angle de la camera glMatrixMode(GL_PROJECTION);// on choisit le mode projection de la matrice  glLoadIdentity();// on initialise la matrice gluPerspective(45,float (width)/float (height),0.1f,5000); // on dit qu'on travaille en mode perspective avec une focale et un point de vue glMatrixMode(GL_MODELVIEW);// on change de mode d'affichage, on reload une nouvelle matrice de transformation de modélisation

 }

5 - Animation of a robot

exemple 5:

Creating a robot is an excellent exercise to understand the exercise on the accumulation of matrix stacks. First, we must understand how a robot is made. In fact, we are talking about hierarchy and dependency relationships between members within a robot-type object. example: when the robot moves its arm, it is the arm that causes a movement of the forearm then moves the hands and each finger of a hand. This constitutes a chain and therefore a dependency between the members. to model this situation from a computer science point of view, we can say that the arm object contains a forearm, an arm, a hand and fingers that are stored within the same matrix stack. when we move the head, the arm object being independent of the head object, we can create a stack for the head, a stack for the arm and then come the other members which will be treated in the same way as the arm object.

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<C:\freeglut\include\GL\freeglut.h> #include<math.h> #define pi 3.14159265359 // on definit un nombre pi

void dessinerdecor(); void dessiner(); void reshape(int width,int height); void gestionSpecial(int key,int x,int y); void passive(int key,int x,int y); void clavier();     bool up,down,right,left=false;

typedef struct robot robot; // on definit la structure de notre robot

struct robot { void dessin(); void tete(); void corps(); void bras(); void avantbras(); void jambe(); void avantjambe(); float animbras1; float animbras2; float animjambe1; float animjambe2; float anim; float animtete; float avancerX; float avancerZ; float Yrot; };

robot r;

int main(int argc,char ** argv) {

glutInit(&argc,argv);//initilisation de glut glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode addfichage de glut glutInitWindowSize(960,540);// taille de la fenetre glutCreateWindow("tuto01");// titre de l'application glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l'ecran glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l'ecran glutSpecialFunc(gestionSpecial);// fonctions de gestion d'appuie des touches du clavier glutSpecialUpFunc(passive);// fonctions de relachement d'une touche du clavier glutMainLoop();// fonction d'appel en continue d'affichage dans main() return 0; }

void dessiner() {      glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);// effacement de la fenetre et vidage des tampons  glMatrixMode(GL_MODELVIEW);// choix du mode d'affichage en modelview glLoadIdentity();// initialisation de la matrice gluLookAt(0.4,0.3,15.0,0,0,0,0,1,0);// afichage de la camera à lecran clavier(); glPushMatrix(); dessinerdecor();// on dessiner notre decor (ici un simple plan) glPopMatrix(); glPushMatrix();//debut de la matrice glTranslated(r.avancerX,0,r.avancerZ);// on fait une transformation de translation glRotated(r.Yrot,0,0.5,0);// puis on fait une transformation de rotation r.dessin();//enfin on affiche notre robot glPopMatrix();//fin de la matrice glutPostRedisplay();// reafraichissement automatique de la scene à chaque image calculées glutSwapBuffers();// echange de tampons pour ahever laffichage glut glutPostRedisplay();// rafraichissement de la scene en continue  } void reshape(int width,int height) { glViewport(0,0,width,height);// definition de la taille d'affichage de l'angle de la camera glMatrixMode(GL_PROJECTION);// on chosit le mode projection de la matrice  glLoadIdentity();// on initialise la matrice gluPerspective(45,float (width)/float (height),0.1f,5000); // on dit qu'on travaille en mode perspective avec une focale et un point de vue glMatrixMode(GL_MODELVIEW);// on change de mode d'affichage, on reload une nouvelle matrice de transformation de modelisation } void robot::dessin() { tete();// on affiche la tete corps();// on affiche le corps } void robot::tete() { glPushMatrix(); glColor3d(0.2,0.2,0.1);// chargement d'une couleur glRotated(animtete,0.5,0,0); glutSolidCube(1); glPopMatrix(); } void robot::corps() { glPushMatrix(); glColor3d(0.8,0.8,0.4); glTranslated(0,-1.5,0); glutSolidCube(2); glPopMatrix(); glPushMatrix(); glRotated(animbras1,0.5,0,0); bras(); glPopMatrix(); glPushMatrix(); glTranslated(-3.8,0,0); glRotated(animbras2,0.5,0,0); bras(); glPopMatrix(); glPushMatrix(); glRotated(animjambe1,0.5,0,0); jambe(); glPopMatrix(); glPushMatrix(); glTranslated(1.7,0,0); glRotated(animjambe2,0.5,0,0); jambe(); glPopMatrix(); } void robot::bras() { glPushMatrix(); glColor3d(0.4,0.2,0.4); glTranslated(1.8,-1.5,0); glScaled(1,2,1); glutSolidCube(1); avantbras(); glPopMatrix(); } void robot::avantbras() { glPushMatrix(); glColor3d(0.1,0.3,0.9); glTranslated(0,-1.2,0); glutSolidCube(1); glPopMatrix(); } void robot::jambe() { glPushMatrix(); glColor3d(0.9,0.9,0.9); glTranslated(-0.8,-3.5,0); glScaled(1,2,1); glutSolidCube(1); avantjambe(); glPopMatrix();     } void robot::avantjambe() { glPushMatrix(); glColor3d(0.5,0.4,0.5); glTranslated(0,-1.2,0); glutSolidCube(1); glPopMatrix(); } void dessinerdecor() {     glPushMatrix();     glColor3d(0.1,0.1,0.2);     glTranslated(0,-0.2,0);         glScaled(100,1,100);     glutSolidCube(1);     glPopMatrix(); } void gestionSpecial(int key,int x,int y) {     switch(key)     {         case GLUT_KEY_UP:             up=true;             glutPostRedisplay();             break;             case GLUT_KEY_DOWN:                 down=true;                     glutPostRedisplay();                     break;                     case GLUT_KEY_RIGHT:                         right=true;                             glutPostRedisplay();                         break;                         case GLUT_KEY_LEFT:                         left=true;                             glutPostRedisplay();                         break;                              } } void passive(int key,int x,int y) {     switch(key)     {         case GLUT_KEY_UP:             up=false;             glutPostRedisplay();             break;             case GLUT_KEY_DOWN:                 down=false;                     glutPostRedisplay();                     break;                         case GLUT_KEY_RIGHT:                 right=false;                     glutPostRedisplay();                     break;                             case GLUT_KEY_LEFT:                 left=false;                     glutPostRedisplay();                     break;     }         if(down==false)     {             r.animbras1=0;         r.animbras2=0;         r.animjambe1=0;             r.animjambe2=0;     }         if(up==false)     {             r.animbras1=0;         r.animbras2=0;         r.animjambe1=0;             r.animjambe2=0;             r.animtete=0;     } }

void clavier() {         if(up)     {         r.avancerZ+=0.5f*cos(r.Yrot*pi/180);         r.avancerX+=0.5f*sin(r.Yrot*pi/180);                     r.animtete+=1.5f;             r.animbras1+=2.5f;         r.animbras2-=2.5f;             r.animjambe1+=2.5f;             r.animjambe2-=2.5f;         if(r.animbras1>60)         {             r.animbras1=-60;                      }             if(r.animjambe1>40)         {             r.animjambe1=-40;                      }     if(r.animbras2<-60)         {             r.animbras2=60;                      }     if(r.animjambe2<-40)         {             r.animjambe2=40;                      }         if(r.animtete>30)         {             r.animtete=-30;         }     } if(down)     {         r.avancerZ-=0.5f*cos(r.Yrot*pi/180);         r.avancerX-=0.5f*sin(r.Yrot*pi/180);             r.animbras1+=2.5f;         r.animbras2-=2.5f;         r.animjambe1+=2.5f;             r.animjambe2-=2.5f;             r.animtete+=1.5f;         if(r.animbras1>60)         {             r.animbras1=-60;                      }             if(r.animjambe1>40)         {             r.animjambe1=-40;                      }     if(r.animbras2<-60)         {             r.animbras2=60;                      }     if(r.animjambe2<-40)         {             r.animjambe2=40;                      }         if(r.animtete>30)         {             r.animtete=-30;         }     } if(right)     {         r.Yrot-=4.5f;     }      if(left)     {         r.Yrot+=4.5f;     }     

}

6 - Textures

Example 6: (with a checkerboard)

Textures are a pretty crucial element in video games because imagine a world without texture. A texture allows you to give more realism to the game, and then when you work on low poly, you can't afford to model every detail of an object, the texture does the work for you. Imagine a brick wall where you would have to redraw every little crack, every piece of brick, and if the wall is made up of a hundred or even a thousand bricks you would have to repeat these operations a hundred or even 1000 times, this is impossible to run on a game at 60 fps. So to optimize all this, we will stick a texture on the object at the end of which we can add other textures on the object. These other textures can be normalmap, bumpmap, displace map, height map, volumeteric map or detailed maps and there are still some... All this will obviously reinforce the realism of the game. When we talk about texture, we must already talk about materials. On a surface of an object (normal) we affect a material that can be either a color or a texture.

If it is a texture it can be procedural as in the example shown below with a checkerboard. That is to say that the objects in the scene contain surfaces entirely filled with black and white checkerboards that form squares and that have a size. For this checkerboard to be correctly placed on the object, we must unfold the texture coordinates so that the coordinates of the vertices of the object coincide with the UVs of the texture. This is called mapping. The smaller the size of the map, the more pixelated the texture will be and vice versa. In video games, we will work with maps of 512*512 on average to have optimal rendering qualities in the game. In 3D cinema, we can afford to make maps of 2048*2048 or even larger. In fact, when making a video game, there are constraints to respect, the more polygons there are within the same object, the longer the animation on the objects, the heavier the textures, the more the game's performance will be reduced. We are talking about optimization constraints. Afterwards, depending on the graphics card models, the fps can vary from one PC to another.

In the second example, I loaded a brick texture of type bmp. Other image formats can be used such as jpg, targa, or png (useful for transparency). The rules to follow to integrate a texture on an object in opengl are the following: activate the depth buffer, activate the texture, create a texture loader to manage a texture format, associate the texture with the coordinates of the vertices of the object then deactivate the texture and repeat this process as many times as necessary to load other textures again.

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<C:\freeglut\include\GL\freeglut.h> #include<C:\freeImage\x32\FreeImage.h> #include<math.h> #define pi 3.14159265359 // on definit un nombre pi

void dessinerdecor(); void dessiner(); void reshape(int width,int height); void gestionSpecial(int key,int x,int y); void passive(int key,int x,int y); void clavier();     bool up,down,right,left=false; void InitGL(); GLuint Nom;

GLubyte Texture[16] = { 0,0,0,0, 0xFF,0xFF,0xFF,0xFF, 0xFF,0xFF,0xFF,0xFF, 0,0,0,0 };

typedef struct robot robot; // on definit la structure de notre robot

struct robot { void dessin(); void tete(); void corps(); void bras(); void avantbras(); void jambe(); void avantjambe(); float animbras1; float animbras2; float animjambe1; float animjambe2; float anim; float animtete; float avancerX; float avancerY; float avancerZ; float Yrot; };

robot r;

int main(int argc,char ** argv) {

glutInit(&argc,argv);//initilisation de glut glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode addfichage de glut glutInitWindowSize(960,540);// taille de la fenêtre glutCreateWindow("tuto01");// titre de l'application glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l'ecran glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l'écran glutSpecialFunc(gestionSpecial);// fonctions de gestion d'appuie des touches du clavier glutSpecialUpFunc(passive);// fonctions de relachement d'une touche du clavier InitGL(); glutMainLoop();// fonction d'appel en continu d'affichage dans main() return 0; }

     void InitGL() {     glClearColor(.9,.9,.9,0);    //Change la couleur du fond glEnable(GL_DEPTH_TEST);    //Active le depth test

glGenTextures(1,&Nom);    //Génère un n° de texture glBindTexture(GL_TEXTURE_2D,Nom);    //Sélectionne ce n° glTexImage2D ( GL_TEXTURE_2D,    //Type : texture 2D 0,    //Mipmap : aucun 4,    //Couleurs : 4 2,    //Largeur : 2 2,    //Hauteur : 2 0,    //Largeur du bord : 0 GL_RGBA,    //Format : RGBA GL_UNSIGNED_BYTE,    //Type des couleurs Texture    //Addresse de l'image );     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

}    

7 - exemple 7: (with textures)

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<stdio.h> #include<C:\freeglut\include\GL\freeglut.h> #include<math.h> #define pi 3.14159265359 // on definit un nombre pi

void dessinerdecor(); void dessiner(); void reshape(int width,int height); void gestionSpecial(int key,int x,int y); void passive(int key,int x,int y); void clavier();     bool up,down,right,left=false; void InitGL(); unsigned int Nom; BITMAPFILEHEADER bfh; BITMAPINFOHEADER bih; int iWidth; int iHeight; unsigned char * textureData; typedef struct robot robot; // on définit la structure de notre robot

struct robot { void dessin(); void tete(); void corps(); void bras(); void avantbras(); void jambe(); void avantjambe(); float animbras1; float animbras2; float animjambe1; float animjambe2; float anim; float animtete; float avancerX; float avancerY; float avancerZ; float Yrot; };

robot r;

int main(int argc,char ** argv) {

glutInit(&argc,argv);//initilisation de glut glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode addfichage de glut glutInitWindowSize(960,540);// taille de la fenêtre glutCreateWindow("tuto01");// titre de l'application glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l'ecran glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l'écran glutSpecialFunc(gestionSpecial);// fonctions de gestion d'appui des touches du clavier glutSpecialUpFunc(passive);// fonctions de relachement d'une touche du clavier InitGL(); glutMainLoop();// fonction d'appel en continue d'affichage dans main() return 0; }

void bmpLoader(const char * name) {     FILE * file=0;     file=fopen(name,"rb");     if(!file)     {         printf("file not open");     }     fread(&bfh,sizeof(BITMAPFILEHEADER),1,file);     if(bfh.bfType!=0x4D42)     {         printf("erreur bitmap");     }     fread(&bih,sizeof(BITMAPINFOHEADER),1,file);     if(bih.biSizeImage==0)     {         bih.biSizeImage=bih.biHeight*bih.biWidth*3;     }     textureData=new unsigned char[bih.biSizeImage];     fseek(file,bfh.bfOffBits,SEEK_SET);     fread(textureData,1,bih.biSizeImage,file);     unsigned char temp;     for(int i=0;i<bih.biSizeImage;i+=3)     {         temp=textureData[i];         textureData[i]=textureData[i+2];         textureData[i+2]=temp;     }     iWidth=bih.biWidth;     iHeight=bih.biHeight;     fclose(file); } void loadTexture(const char * name) { bmpLoader(name); glGenTextures(1,&Nom);    //Génère un n° de texture glBindTexture(GL_TEXTURE_2D,Nom);    //Sélectionne ce n° glPixelStorei(GL_UNPACK_ALIGNMENT,1); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); gluBuild2DMipmaps(GL_TEXTURE_2D,GL_RGB,iWidth,iHeight,GL_RGB,GL_UNSIGNED_BYTE,textureData);

    }     void InitGL() {     glClearColor(.9,.9,.9,0);    //Change la couleur du fond glEnable(GL_DEPTH_TEST);    //Active le depth test glEnable(GL_TEXTURE_2D);//active la texture loadTexture("data/mur.bmp");//charge la texture de type bmp

}    

8 - LIGHTING

exemple 8:

First of all, lights are an important aspect in a game, without light no shape or volume could be drawn. It is responsible for darkening or lightening a color, we speak of value (shade of gray). The closer we are to 0, the darker the object, the light does not illuminate, the closer we are to index 1, the more the light illuminates, the lighting is then at its maximum. There are several lightings in opengl, we find in particular the point system, the sun, and the spotlights. We can place a light in opengl in different ways. It can be placed in a specific place but will only illuminate this place exclusively. It can also be in motion, that is to say, turn around the scene. We can imagine that at 5 o'clock in the afternoon, the sun will diffuse a quantity of light on the north of the scene and that at midnight, the sun will diffuse a quantity of light in the south of the scene for example. And finally the light can be placed according to the point of view of the camera, that is to say that no matter where we are in the scene the light moves at the same time as the camera.

In opengl, the steps to follow are as follows, you have to activate the lighting (opengl is a library based on states everything is activated everything is deactivated), you then have to specify which light to use (you can up to 9 with opengl). and then draw a light in the scene then deactivate the lighting at the end. The example shown below shows lighting based on the camera's point of view.

 

#include <windows.h> #include <gl/gl.h> #include<gl/glu.h> #include<stdio.h> #include<C:\freeglut\include\GL\freeglut.h> #include<math.h> #define pi 3.14159265359 // on definit un nombre pi

void dessinerdecor(); void dessiner(); void reshape(int width,int height); void gestionSpecial(int key,int x,int y); void passive(int key,int x,int y); void clavier();     bool up,down,right,left=false; void InitGL(); unsigned int Nom; BITMAPFILEHEADER bfh; BITMAPINFOHEADER bih; int iWidth; int iHeight; unsigned char * textureData; typedef struct robot robot; // on définit la structure de notre robot

struct robot { void dessin(); void tete(); void corps(); void bras(); void avantbras(); void jambe(); void avantjambe(); float animbras1; float animbras2; float animjambe1; float animjambe2; float anim; float animtete; float avancerX; float avancerY; float avancerZ; float Yrot; };

robot r;

int main(int argc,char ** argv) {

glutInit(&argc,argv);//initilisation de glut glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE|GLUT_DEPTH);//mode addfichage de glut glutInitWindowSize(960,540);// taille de la fenetre glutCreateWindow("tuto01");// titre de l'application glutReshapeFunc(reshape);// configuration du mode de projection du pixel à l'ecran glutDisplayFunc(dessiner);// fonction d'affichage du dessin à l'ecran glutSpecialFunc(gestionSpecial);// fonctions de gestion d'appui des touches du clavier glutSpecialUpFunc(passive);// fonctions de relachement d'une touche du clavier InitGL(); glutMainLoop();// fonction d'appel en continue d'affichage dans main() return 0; }

void bmpLoader(const char * name) {     FILE * file=0;     file=fopen(name,"rb");     if(!file)     {         printf("file not open");     }     fread(&bfh,sizeof(BITMAPFILEHEADER),1,file);     if(bfh.bfType!=0x4D42)     {         printf("erreur bitmap");     }     fread(&bih,sizeof(BITMAPINFOHEADER),1,file);     if(bih.biSizeImage==0)     {         bih.biSizeImage=bih.biHeight*bih.biWidth*3;     }     textureData=new unsigned char[bih.biSizeImage];     fseek(file,bfh.bfOffBits,SEEK_SET);     fread(textureData,1,bih.biSizeImage,file);     unsigned char temp;     for(int i=0;i<bih.biSizeImage;i+=3)     {         temp=textureData[i];         textureData[i]=textureData[i+2];         textureData[i+2]=temp;     }     iWidth=bih.biWidth;     iHeight=bih.biHeight;     fclose(file); } void loadTexture(const char * name) { bmpLoader(name); glGenTextures(1,&Nom);    //Génère un n° de texture glBindTexture(GL_TEXTURE_2D,Nom);    //Sélectionne ce n° glPixelStorei(GL_UNPACK_ALIGNMENT,1); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); gluBuild2DMipmaps(GL_TEXTURE_2D,GL_RGB,iWidth,iHeight,GL_RGB,GL_UNSIGNED_BYTE,textureData);

    }     void InitGL() {     glClearColor(.1,.1,.1,0.1);    //Change la couleur du fond glEnable(GL_DEPTH_TEST);    //Active le depth test glEnable(GL_LIGHTING);//active la lumiere glEnable(GL_LIGHT0);//active la limiere n°1 glEnable(GL_TEXTURE_2D);//active la texture loadTexture("data/mur.bmp");//charge la texture de type bmp

}    

Thanking you for taking the time to read my tutorial!

Ancre 1
Ancre 2
Ancre 3
Ancre 4
Ancre 5
Ancre 6
Ancre 7
Ancre 8
bottom of page