Informatique Graphique

Informatique Graphique
Caroline Appert
[email protected]
[IG CCI – 2005/2006]
Introduction
Qu’est-ce que l’IG ?
Modélisation
structures de données pour la représentations de
scènes 2D ou 3D
Rendu
construction d’images 2D à partir de modèles 2D ou
3D
Animation
simulation de changements au cours du temps
Interaction
avec un ou plusieurs utilisateurs
Applications
Visualisation d’informations
–
–
–
–
cartographie
données statistiques
imagerie médicale
…
RMN d’une tête
Plan d’Orsay, Mappy, 2005
Applications
CAO et CFAO
– conception
– modélisation
–…
CATIA « Prost Grand prix »
DataCAD
Applications
Simulation et animation
– simulateurs de conduite
– dessins animés, films
–…
« Toy Story 2 », Disney/Pixar, 1999
« Flight simulator », Microsoft, 2002
Applications
Interface Homme-Machine
– jeux
– Modèles de fenêtrage, menus, icones, boutons,
barres de défilements
« Tomb raider VI », Eidos/Core Design, 2003
Mac OS X 10.4, Apple, 2005
Références
E. Angel. Interactive computer graphics, a top-down approach
using OpenGL (third edition). Addison Wesley, 2003.
J. D. Foley, A. van Dam, S. K. Feiner & J. F. Hughes. Computer
Graphics: Principles and Practice in C (2nd edition). Addison
Wesley, 1995.
A. Watt & M.Watt. Advanced animation and rendering techniques:
theory and practice. ACM Press & Addison Wesley, 1992.
Mathématiques pour l’Informatique Graphique. Notes du cours
donné par J. Calisti en FIIFO4.
En td… OpenGL et glut
Logo (démo): td 1, td2 et _ td3
Viewer (démo ): _ td3, td4 et td5
OpenGL
OpenGL (Open Graphics Library)
Interface de programmation (API) multi
plate-forme pour la conception
d'applications générant des images 2D et 3D.
Environ 250 primitives simples pour
afficher des scènes 2D et 3D complexes.
Primitives OpenGL et rendu
Type d’une primitive
point, ligne, polygone convexe ou image
Définition d’une primitive
Type de la primitive + ensemble de sommets
(vertex)
Rendu d’une primitive
Le rendu dans un framebuffer dépend de variables
d’état (matrice de transformation, couleur, matériau,
texture, éclairage, etc.)
Les types de primitives OpenGL
Primitive OpenGL - exemple
float black[3] = {0.0, 0.0, 0.0};
glColor3fv(black);
glBegin(GL_LINES);
// type
glVertex2i(10, 10); // sommet
glVertex2i(20, 20); // sommet
glEnd();
Rendu
Définition
{2, 3, 4} : nombre de paramètres
{f, i, } : précision du type des paramètres (ex: float)
{v, _ } : paramètres sous forme de tableau ou valeurs
Interaction
Évènement
clic souris, touche clavier, fenêtre redimensionnée…
Schéma de programmation d'un système graphique
réactif
traiter (évènement) {
traitement
si réaffichage nécessaire
réafficher
}
initialiser
tant que non fini faire
lire évènement
traiter(évènement)
fin
GLUT
OpenGL ne sait pas ce que c’est qu’une souris, un
clavier, une fenêtre…
=> Interaction avec GLUT (OpenGL Utility Toolkit)
Glut - exemple
float length = 0.1;
void display() {
// effacer le buffer du fond
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0, 0, 0);
glRectf(-length/2, -length/2, length/2,
length/2) ;
glutSwapBuffers();
}
void keyboard(unsigned char key, int x, int y) {
if(key == '+') length += 0.05;
else if(key == '-') length -= 0.05;
if(length > 1) length = 1;
else if(length < 0) length = 0;
// réaffiche
glutPostRedisplay();
}
int main(int argc, char **argv) {
// glut initialisation
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGBA |
GLUT_DOUBLE);
// création d’une fenêtre
glutCreateWindow(argv[0]) ;
// fond blanc
glClearColor(1.0,1.0,1.0,1.0) ;
// que faire en cas de réaffichage
glutDisplayFunc(display) ;
// que faire en cas d’évènement clavier
glutKeyboardFunc(keyboard);
// boucle d’évènements
glutMainLoop() ;
return EXIT_SUCCESS;
}
Références
Le rouge : OpenGL Programming Guide, 4th Edition
Le bleu : OpenGL Reference Manual, 3rd Edition
E. Angel. OpenGL: a primer. Addison Wesley, 2002.
D. Shreiner, E. Angel & V. Shreiner. An interactive introduction to
OpenGL programming. Cours donné à la conférence ACM SIGGRAPH
2001.
http://www.opengl.org/developers/code/s2001/
Le site Web d’OpenGL
http://www.opengl.org/
Les tutors de Nate Robins
http://www.cs.utah.edu/~narobins/opengl.html
Un peu de géométrie
Repère orthonormé (2D)
0,1
P1, P2: points
P1 (-0.8, 0.6)
P1P2: vecteur
P1 P2
P2 (0.4, 0.4)
-1,0
0,0
1,0
Coordonnées d’un vecteur
0,-1
X2 – x1
P1 P2
Y2 – y1
0.4 +0.8
=
0.4 – 0.6
1.2
=
-0.2
Rappel : norme, produit scalaire et vectoriel
Soient 2 vecteurs u x
y
et u’ x’
y’
Norme de u
|u| = sqrt(x*x + y*y)
Produit scalaire u.u’
u.u’ = |u| x |u’| x cos(u, u’)
(u, u’)
u.u’ == 0 => cos(u, u’) == 0 => u et u’ orthogonaux
Produit vectoriel uxu’
u’’ tel que |u’’| = |u| x |u’| x sin(u, u’)
u’’
(u, u’)
(u, u’, u’’) est un repère direct
Translation (2D)
P’ est le transformé de P
par la translation t
tx
0,1
x
y
ty
P (-0.8, 0.6)
t
(1.2, -0.2)
P’ (0.4, 0.4)
-1,0
0,0
P’ = P + t
1,0
Sur l’exemple
P’ =
0,-1
P
+
u
-0.8 + 1.2
0.6 – 0.2
0.4
=
0.4
Changement d’échelle (2D)
P’ est le transformé de P
y
par le changement d’échelle sx en x
et sy en y
0,1
P (-0.4, 0.4)
P’ = SxP avec S =
-1,0
0,0
sx
0
0
y
1,0
Sur l’exemple
sx = 2
sy = 0.5
x
-0.4
0.4
0,-1
P’ = SxP =
2
0
0
-0.8
0.5
0.2
Rotation (2D)
x
P’ est le transformé de P
y
0,1
P (-0.4, 0.4)
-1,0
par la rotation de centre (0, 0) et d’angle a
P’ = R.P avec R =
0,0
P’ (-0.4, -0.4)
cosa
-sina
sina
cosa
1,0
Sur l’exemple
-0.4
0.4
a = 90°
0,-1
P’ = RxP =
0
-1
-0.4
1
0
-0.4
Coordonnées homogènes
Pour pouvoir représenter toutes les transformations
sous forme de produit matriciel et faciliter ainsi leurs
composition.
P’ = T.P
Translation de
vecteur (tx, ty)
Changement d’échelle
de sx en x
et de sy en y
Rotation d’angle a
1
0
ty
sx
0
0
cosa -sina
0
0
1
tx
0
sy
0
sina cosa
0
0
0
1
0
0
1
T
T
0
0
T
1
Rappel : somme matricielle
Soient 2 matrices A de format (ixj) et B (ixj)
A
a11
…
…
ai1
…
a1j
B
b11
…
…
aij
bi1
…
b1j
…
…
bij
A + B est de format (i*j)
A+B
a11+ b11
…
…
ai1 + bi1
a1j + b1j
…
…
aij + bij
… commute OK : A + B = B + A
Rappel : produit matriciel
Soient 2 matrices A de format (ixj) et B (kxl)
A
a11
…
…
ai1
…
a1j
B
b11
…
…
aij
bi1
…
b1j
…
…
bij
A x B est de format (i*l)
Attention, on doit avoir j==k
AxB
a11x b11 + … + a1jx bk1
…
…
a11x b1j + … + a1jx bkl
…
ai1x b11 + … + aijx bk1
…
ai1x b1j + … + aijx bkl
… ne commute pas : A x B != B x A
Produit matriciel et commutation
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
Produit matriciel et commutation
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glRotatef(45, 0, 0, 1);
Produit matriciel et commutation
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glRotatef(45, 0, 0, 1);
glTranslatef(0.5, 0.0, 0.0);
glRectf(-0.05, -0.05, 0.05, 0.05);
Produit matriciel et commutation
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
Produit matriciel et commutation
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(0.5, 0.0, 0.0);
Produit matriciel et commutation
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(0.5, 0.0, 0.0);
glRotatef(45, 0, 0, 1);
glRectf(-0.05, -0.05, 0.05, 0.05);
Démo
Tutors de Nate Robins