OpenGL

Synthèse d’image
OpenGL
Plan
4
Synthèse d’image
Présentation
OpenGL
De la scène 3D à l’image 2D
Rendu
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
19 / 143
Synthèse d’image
OpenGL
OpenGL
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
OpenGL
Librairie graphique développée par SGI (Silicon Graphics) - 1992
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
OpenGL
Librairie graphique développée par SGI (Silicon Graphics) - 1992
Version actuelle 4.5
site Web : www.opengl.org
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
OpenGL
Librairie graphique développée par SGI (Silicon Graphics) - 1992
Version actuelle 4.5
site Web : www.opengl.org
Librairie de bas niveau dédiée uniquement au graphique 3D
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
OpenGL
Librairie graphique développée par SGI (Silicon Graphics) - 1992
Version actuelle 4.5
site Web : www.opengl.org
Librairie de bas niveau dédiée uniquement au graphique 3D
Tracé de pixels, segments. Remplissage de triangles.
(possibilité de quadrangles et polygones convexes)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
OpenGL
Librairie graphique développée par SGI (Silicon Graphics) - 1992
Version actuelle 4.5
site Web : www.opengl.org
Librairie de bas niveau dédiée uniquement au graphique 3D
Tracé de pixels, segments. Remplissage de triangles.
(possibilité de quadrangles et polygones convexes)
Gestion des opérations géométriques 3D et de projection.
Définition de caméra.
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
OpenGL
Librairie graphique développée par SGI (Silicon Graphics) - 1992
Version actuelle 4.5
site Web : www.opengl.org
Librairie de bas niveau dédiée uniquement au graphique 3D
Tracé de pixels, segments. Remplissage de triangles.
(possibilité de quadrangles et polygones convexes)
Gestion des opérations géométriques 3D et de projection.
Définition de caméra.
Gestion des couleurs, transparence, lumière, réflexions, textures
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
20 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Librairie englobant OpenGL ajoutant des fonctionnalités
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Librairie englobant OpenGL ajoutant des fonctionnalités
Gestion des matrices de projection et visualisation
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Librairie englobant OpenGL ajoutant des fonctionnalités
Gestion des matrices de projection et visualisation
Redimensionnement d’images
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Librairie englobant OpenGL ajoutant des fonctionnalités
Gestion des matrices de projection et visualisation
Redimensionnement d’images
Gestion d’objets quadriques (sphère, cylindre, disque)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Librairie englobant OpenGL ajoutant des fonctionnalités
Gestion des matrices de projection et visualisation
Redimensionnement d’images
Gestion d’objets quadriques (sphère, cylindre, disque)
Gestion des courbes et des surfaces de Bézier et NURBS
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLU (OpenGL Utility Library)
Librairie englobant OpenGL ajoutant des fonctionnalités
Gestion des matrices de projection et visualisation
Redimensionnement d’images
Gestion d’objets quadriques (sphère, cylindre, disque)
Gestion des courbes et des surfaces de Bézier et NURBS
...
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
21 / 143
Synthèse d’image
OpenGL
GLUT (OpenGL Utility Toolkit)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
22 / 143
Synthèse d’image
OpenGL
GLUT (OpenGL Utility Toolkit)
Librairie englobant GLU offrant un jeu de procédures pour
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
22 / 143
Synthèse d’image
OpenGL
GLUT (OpenGL Utility Toolkit)
Librairie englobant GLU offrant un jeu de procédures pour
la gestion des fenêtres OpenGL,
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
22 / 143
Synthèse d’image
OpenGL
GLUT (OpenGL Utility Toolkit)
Librairie englobant GLU offrant un jeu de procédures pour
la gestion des fenêtres OpenGL,
les interactions avec le système d’exploitation
(gestion clavier, souris, etc.)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
22 / 143
Synthèse d’image
OpenGL
GLUT (OpenGL Utility Toolkit)
Librairie englobant GLU offrant un jeu de procédures pour
la gestion des fenêtres OpenGL,
les interactions avec le système d’exploitation
(gestion clavier, souris, etc.)
indépendamment de celui-ci et du gestionnaire de fenêtres.
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
22 / 143
Synthèse d’image
OpenGL
Un exemple simple
Tracé d’un carré jaune dans une fenêtre
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
23 / 143
Synthèse d’image
OpenGL
Un exemple simple
Code source (1/3)
// u t i l i s a t i o n de l a l i b r a i r i e GLUT
#i n c l u d e <GL/ g l u t . h>
// l e s o r d r e s g r a p h i q u e s
// −−> d e s s i n de l a s cè n e 3D
void d e s s i n ( )
{
g l M a t r i x M o d e (GL MODELVIEW ) ;
glLoadIdentity ();
g l C l e a r ( GL COLOR BUFFER BIT ) ;
glColor3f (1.0 , 1.0 , 0.0);
g l R e c t f ( − 2 5 .0 , −25.0 , 2 5 . 0 , 2 5 . 0 ) ;
glFlush ();
}
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
24 / 143
Synthèse d’image
OpenGL
Un exemple simple
Code source (2/3)
// p r i s e en compte d ’ un r e d i m e n s i o n n e m e n t de l a f e n e t r e
// −−> d é f i n i t i o n de l a caméra
v o i d r e d i m e n s i o n n e m e n t ( i n t w, i n t h )
{
glViewport (0 , 0 , ( G L s i z e i ) w, ( G L s i z e i ) h ) ;
g l M a t r i x M o d e ( GL PROJECTION ) ; // r e p è r e de l a caméra
glLoadIdentity ();
g l O r t h o ( − 5 0 .0 , 5 0 . 0 , −50.0 , 5 0 . 0 , −1.0 , 1 . 0 ) ;
}
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
25 / 143
Synthèse d’image
OpenGL
Un exemple simple
Code source (3/3)
// l a f o n c t i o n p r i n c i p a l e
i n t main ( i n t a r g c , c h a r ∗∗ a r g v )
{
g l u t I n i t (& a r g c , a r g v ) ;
glutInitWindowSize (500 ,500);
g l u t I n i t D i s p l a y M o d e ( GLUT SINGLE | GLUT RGB ) ;
glutCreateWindow ( ” s i m p l e r e c t a n g l e ” ) ;
glutDisplayFunc ( dessin );
glutReshapeFunc ( redimensionnement ) ;
glutMainLoop ( ) ;
return ( 0 ) ;
}
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
26 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
27 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple
Inclure les interfaces de la librairie GLUT (ainsi que GLU et Open GL)
#i n c l u d e <GL/ g l u t . h>
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
28 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction dessin
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
29 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
La fonction dessin
Appliquer les transformations géométriques au repère de la scène
g l M a t r i x M o d e (GL MODELVIEW ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
30 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction dessin
Initialiser le système de transformations géométriques de GL MODELVIEW
glLoadIdentity ();
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
31 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction dessin
Effacer le buffer graphique de l’image
g l C l e a r ( GL COLOR BUFFER BIT ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
32 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction dessin
Définir la couleur jaune
et créer le carré de diagonale [(−25, −25) , (25, 25)]
glColor3f (1.0 , 1.0 , 0.0);
g l R e c t f ( − 2 5 .0 , −25.0 , 2 5 . 0 , 2 5 . 0 ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
33 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction dessin
Afficher l’image à l’écran
glFlush ();
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
34 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction redimensionnement
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
35 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction redimensionnement
Mettre en correspondant le buffer image avec la taille de la fenetre
glViewport (0 , 0 , ( G L s i z e i ) w, ( G L s i z e i ) h ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
36 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction redimensionnement
Appliquer les transformations géométriques au système de projection de la
caméra
g l M a t r i x M o d e ( GL PROJECTION ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
37 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction redimensionnement
Initialiser le système de transformations géométriques de GL PROJECTION
glLoadIdentity ();
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
38 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction redimensionnement
Définir la caméra avec projection orthographique et volume englobant
correspondant
g l O r t h o ( − 5 0 .0 , 5 0 . 0 , −50.0 , 5 0 . 0 , −1.0 , 1 . 0 ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
39 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
40 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Initialiser la librairie GLUT avec les arguments du programme
g l u t I n i t (& a r g c , a r g v ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
41 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Définir une fenêtre graphique de dimension 500 × 500
avec un buffer graphique simple et en mode couleur RGB
et la créer avec le titre simple rectangle
glutInitWindowSize (500 ,500);
g l u t I n i t D i s p l a y M o d e ( GLUT SINGLE | GLUT RGB ) ;
glutCreateWindow ( ” s i m p l e r e c t a n g l e ” ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
42 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Associer à la fenêtre précédemment créée,
différents callbacks (fonctions de rappels)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
43 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Callback associé au dessin dans la fenêtre graphique
glutDisplayFunc ( dessin );
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
44 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Callback associé au (re)dimensionnement de la fenêtre graphique
glutReshapeFunc ( redimensionnement ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
45 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Il existe d’autres procédures de GLUT permettant de prendre en compte
d’évenements. Les principales sont :
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
46 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Il existe d’autres procédures de GLUT permettant de prendre en compte
d’évenements. Les principales sont :
glutKeyboardFunc : pour gérer les touches du clavier correspondant
à des caractères imprimables (lettres, chiffres, symboles, . . .)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
46 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Il existe d’autres procédures de GLUT permettant de prendre en compte
d’évenements. Les principales sont :
glutKeyboardFunc : pour gérer les touches du clavier correspondant
à des caractères imprimables (lettres, chiffres, symboles, . . .)
glutSpecialFunc : pour gérer les touches du clavier correspondant à
des caractères non imprimables (touches de fonction, flèches, . . .)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
46 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Il existe d’autres procédures de GLUT permettant de prendre en compte
d’évenements. Les principales sont :
glutKeyboardFunc : pour gérer les touches du clavier correspondant
à des caractères imprimables (lettres, chiffres, symboles, . . .)
glutSpecialFunc : pour gérer les touches du clavier correspondant à
des caractères non imprimables (touches de fonction, flèches, . . .)
glutMouseFunc : pour gérer les clicks souris
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
46 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Il existe d’autres procédures de GLUT permettant de prendre en compte
d’évenements. Les principales sont :
glutKeyboardFunc : pour gérer les touches du clavier correspondant
à des caractères imprimables (lettres, chiffres, symboles, . . .)
glutSpecialFunc : pour gérer les touches du clavier correspondant à
des caractères non imprimables (touches de fonction, flèches, . . .)
glutMouseFunc : pour gérer les clicks souris
glutMouseMotionFunc : pour gérer les déplacements de la souris
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
46 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Il existe d’autres procédures de GLUT permettant de prendre en compte
d’évenements. Les principales sont :
glutKeyboardFunc : pour gérer les touches du clavier correspondant
à des caractères imprimables (lettres, chiffres, symboles, . . .)
glutSpecialFunc : pour gérer les touches du clavier correspondant à
des caractères non imprimables (touches de fonction, flèches, . . .)
glutMouseFunc : pour gérer les clicks souris
glutMouseMotionFunc : pour gérer les déplacements de la souris
glutIdle : pour gérer l’absence d’évènement
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
46 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Détail du programme-exemple - la fonction main
Appel de la fonction de boucle de gestion des évènements
glutMainLoop ( ) ;
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
47 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Principe de la boucle de gestion des évènements
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
48 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Principe de la boucle de gestion des évènements
boucle
si la pile d’évènements est non vide alors
dépiler l’évenènement e
..
.
..
.
sinon si un callback de type Idle est défini alors
exécuter le callback d’inaction
fin si
fin boucle
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
48 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Principe de la boucle de gestion des évènements
boucle
si la pile d’évènements est non vide alors
dépiler l’évenènement e
..
.
si e de type MISE A JOUR FENETRE et
un callback de type Display est défini alors
exécuter le callback
fin si
..
.
sinon si un callback de type Idle est défini alors
exécuter le callback d’inaction
fin si
fin boucle
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
48 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Principe de la boucle de gestion des évènements
boucle
si la pile d’évènements est non vide alors
dépiler l’évenènement e
..
.
si e de type REDIMENSIONNEMENT FENETRE et
un callback de type Reshape est défini alors
exécuter le callback
fin si
..
.
sinon si un callback de type Idle est défini alors
exécuter le callback d’inaction
fin si
fin boucle
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
48 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Principe de la boucle de gestion des évènements
boucle
si la pile d’évènements est non vide alors
dépiler l’évenènement e
..
.
si e de type CLAVIER TOUCHE STANDARD et
un callback de type Keyboard est défini alors
exécuter le callback
fin si
..
.
sinon si un callback de type Idle est défini alors
exécuter le callback d’inaction
fin si
fin boucle
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
48 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback associé à la mise à jour de la fenêtre
void dessin()
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback associé au (re)dimensionnement de la fenêtre
void redimensionnement(int largeur, int hauteur)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback associé à la gestion des touches claviers
void touche standard
(int code ASCII, int x souris, int y souris)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback associé à la gestion des touches claviers
void touche speciale
(int code touche, int x souris, int y souris)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback associé à la gestion du click souris
void click souris
(int num bouton, int etat, int x souris, int y souris)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback associé à la gestion du déplacement souris
void deplacement souris(int x souris, int y souris)
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143
Synthèse d’image
OpenGL
Programme avec GLUT
Les callbacks
Procédure avec certains arguments suivant le type d’évènement associé.
Callback d’inaction
void inaction()
Nicolas SZAFRAN (UGA - UFR IM2 AG)
M1-MAI - Image
2015-2016
49 / 143