GRAPHISME PAR ORDINATEUR

SIF-1032

Contenu du cours 2• Introduction à OpenGL• Traçage de points• Traçage de lignes• Traçage de polylignes• Traçage de triangles• Autres outils de dessin

– Fenêtre du monde VS viewport

• Projet de session• LECTURES: Chapitres 2 et 3

Introduction à OpenGL• Le chapitre 1 du livre OpenGL Super Bible donne

une vue d'ensemble des possibilités offertes par OpenGL.

• OpenGL est introduit au chapitre 2 (Super Bible). OpenGL est un ensemble de fonctions codées en langage de programmation C. Ces fonctions constituent un langage de commandes pour une machine virtuelle spécialisée pour la visualisation de scènes contenant des objets (logiciels) à 3 dimensions. Toutes ces fonctions commencent par "gl". En voici quelques unes: glVertex(), glColor(), glPushMatrix(), etc.

Introduction à OpenGL• OpenGL est basé sur un modèle de type "client-serveur":

• Le client est le programme qui utilise les commandes OpenGL. Par exemple, un client peut écrire l’appel de fonction "glVertex3f(1.0,2.0,3.0);" dans un programme . Ce qui signifie qu'on veut passer au serveur l'information qu'un sommet est situé dans l’espace au point (1.0,2.0,3.0). Cette information est stockée dans une représentation interne au niveau du serveur. Cette représentation interne est utilisée par le code du serveur qui est responsable d'afficher les objets à l'écran.

Introduction à OpenGL

• Nous avons déjà mentionné qu'OpenGL avait comme origine la programmation de la machine graphique Iris (de SGI). Les commandes sont en fait destinées à programmer une machine de type Iris qui est simulée sur un PC.

• Comme le graphisme par ordinateur est très complexe, il n'est pas étonnant qu'il y ait des centaines de commandes et d'options, et plusieurs façons de réaliser le même travail. Le code de la machine OpenGL est contenu dans les fichiers Opengl32.dll, glu32.dll et glut32.dll.

• En plus des instructions (commandes), la machine virtuelle a aussi des registres qui maintiennent l'état actuel de la machine. Leur nombre est aussi élevé.

Introduction à OpenGL

• Les cartes graphiques existent en plusieurs modèles. Les modèles récents contiennent un processeur graphique qui permet d'accélérer les opérations d'affichage. Ainsi, le serveur OpenGL communique au pilote de la carte graphique les opérations qu’il doit exécuter.

• OpenGL est une API (Application Programming Interface). • La programmation OpenGL est complexe à cause du fait

qu'on utilise le langage C (avec une approche de bas niveau). Ainsi, il faut en général toute une série de commandes pour une opération logique souvent simple.

Introduction à OpenGL

• Les types d'OpenGL– À la page 41 de la Super Bible, on retrouve un tableau qui montre tous les types

supportés par OpenGL. Par exemple, GLfloat est un float en C.

– Le type "double" n’est pas supporté parce que les opérations avec des floats sont plus rapides.

– Nous rappelons que pour la fonction "glVertex3f(1.0,2.0,3.0)". Le 3 signifie que le point est spécifié avec 3 coordonnées (3D) et le "f" signifie que les points sont des "floats".

• La librairie GLUT– La librairie GLUT est utilisée dans beaucoup d'exemples dans les livres de

références. Elle offre un interface avec le système de fenêtres de l'ordinateur qui est indépendante du système d'exploitation.

– Cette interface est très élémentaire et n'est jamais utilisée dans les applications professionnelles. C'est pour cette raison qu‘il est préférable d'utiliser l'interface des classes MFC

Introduction à OpenGL

• Retour sur le projet GLRect (Super Bible: page 51)

Introduction à OpenGL

• Retour sur le projet GLRect (Super Bible: page 51)

Introduction à OpenGL

• Retour sur le projet GLRect (Super Bible: page 51)

Introduction à OpenGL

• Retour sur le projet GLRect (Super Bible: page 51)

Fenêtres redimensionnées

Introduction à OpenGL• Voici quelques remarques sur le programme:

– Il s'agit d'une application Win32 de type console. La fonction "main" démarre le programme. Elle initialise le mode d'affichage à un espace mémoire aussi appelé "buffer" (GLUT_SINGLE). Ensuite, on désigne la fonction "RenderScene()" pour répondre au message WM_PAINT de Windows qui est appelée lorsque le système doit redessiner. On désigne aussi la fonction "ChangeSize()" qui est appelée lorsqu'on change la taille de la fenêtre. La fonction "SetupRC()" sert à définir les propriétés de rendu (rendering context).

– La fonction SetupRC() définit la couleur de fond à bleu. Les couleurs sont toujours données avec RGB (rouge, vert, bleu). Parfois, on utilise une 4 ième composante appelée "alpha" (opacité) et qui est 1 en général. On l'utilise parfois pour mélanger une couleur avec la couleur de fond. "0.5f" signifie que le nombre est un float.

– La fonction "RenderScene()" trace un rectangle rouge. La fonction glRectf() place le rectangle avec z=0. On donne les coins opposés du rectangle. Notez que la fonction

glRect(x1, y1, x2, y2) est équivalente à :

Introduction à OpenGL• Voici quelques remarques sur le programme:

– La fonction glOrtho() définit un volume de visualisation en 3D (viewing volume ou frustum) qui représente l'espace des éléments visuels retenus pour l'affichage (les éléments en dehors de cette zone ne sont pas affichés).

– Les objets sur la frontière du volume de visualisation sont découpés (Clipping)

Introduction à OpenGL• Les commandes envoyées au serveur OpenGL sont accumulées. La commande

glFlush() sert à actualiser toutes les commandes accumulées.

• Dans la fonction ChangeSize(), la fonction glViewport() informe OpenGL de la taille de la fenêtre d’affichage. Ensuite, on définit le type de projection "Orthogonale".

• Il faut savoir qu'une projection en perspective fait se rapprocher des lignes parallèles qui s'éloignent en z. Cette projection donne l’effet de profondeur.

• Dans une projection orthogonale, les points sont projetés en selon l’axe z (x,y,0). La fonction glOrtho() fixe le rapport entre les unités de l'utilisateur et celle de la

fenêtre:

Introduction à OpenGL• Librairies *.lib, DLLs et fichiers *.h

– La librairie GLUT n'est pas supportée par Microsoft. Aussi, vous la trouverez sur le disque du livre ou sur le site FTP du cours:

Introduction à OpenGL• Pour utiliser les exemples de programmes il faut au

préalable organiser l’environnement de travail Microsoft Visual C++ .NET: – Inclure le fichier header glut.h comme suit:

Introduction à OpenGL• Inclure le fichier librairie glut32.lib comme suit:

Introduction à OpenGL• Inclure le fichier DLL glut32.dll dans le répertoire

c:/WINNT/System comme suit:

Introduction à OpenGL• Une autre façon consiste à indiquer à VS où sont ces

éléments avec le menu Tools/Options:

Introduction à OpenGL• Voici les fichiers *.h et *.lib que vous allez utiliser:

Introduction à OpenGL• Si vous avez des erreurs de liens aux librairies (Link Error),

c'est que le compilateur ne trouve pas une des librairies *.lib. On peut aussi ajouter ces librairies dans les propriétés du projet:

Traçage de points

• Une séquence de points est représentée par une liste ordonnée de points p0=(x0,y0), p1=(x1,y1) ,…., pn=(xn,yn).

• Avec OpenGL chaque point individuel est dessiné en spécifiant ses coordonnées (x,y,z).

• Le système d'axes (coordonnées) normal: X vers la droite, Y vers le haut, et Z augmentant en se rapprochant de l'oeil ou observateur. On suit aussi toujours la règle de la main droite: un angle positif est anti-horaire.

• Code de la fonction main():

Traçage de points• Le programme de la page 85 du livre [1] (répertoire Points chap. 4) montre comment tracer

des points sous la forme d'un ressort. Voici le code de l'affichage:

Traçage de points

• La fonction glRotate() permet de spécifier un angle en degrés, puis l'axe de rotation. On a donc demander d'abord une rotation autour de l'axe X, et une rotation autour de l'axe Y. Ces rotations permettent de déplacer les points du ressort donc de modifier l’orientation de la visualisation

• Ensuite, on demande de tracer des points avec la grandeur par défaut (1 pixel) avec la fonction glBegin(GL_POINTS). On dessine environ 90 points et la coordonnée z commence à -50, augmente de 0.5 à chaque itération, donc la valeur finale de z est à peu près 45. Donc le ressort est à peu près centré en z.

Traçage de points

• Ensuite, on a défini une fonction pour recevoir les caractères du clavier glutSpecialFunc(SpecialKeys); dans la fonction main().

key ??, xRot

Traçage de points

• On remarque que la flèche vers le haut diminue l'angle xRot de -5 degrés et la flèche droite augmente l'angle yRot de 5 degrés.

• Nous pourrions ramener les angles de rotation xRot et yRot à zéro avec la touche "END ou Fin". On peut examiner le contenu du fichier glut.h pour trouver les noms des touches du clavier:

Traçage de points

• Exemples d’exécution:

Traçage de lignes

• Le programme (page 91 Super Bible) montre que la fonction glBegin(GL_LINES) permet de tracer des lignes. Il suffit de fournir les extrémités des lignes par paires.

• On peut aussi spécifier la taille des lignes avec la fonction glLineWidth()

Traçage de lignes

• Les fonctions glEnable(GL_LINE_STRIPPLE) et glLineStripple(factor, pattern) permettent de tracer des lignes pointillées quelconque. "factor" est le grossissement et pattern est le jeu de bits (voir les pages 96-97). Notez qu'on doit activer ce mode avec la fonction glEnable(GL_LINE_STRIPPLE). On désactive un mode avec la fonction inverse glDisable(GL_LINE_STRIPPLE). Ceci s'applique à toutes les options d'affichage.

Traçage de polylignes• Une polyligne est une séquence de droites jointes

bout à bout

• Une séquence de droites dont le point terminal de la dernière droite rejoint le point de départ de la première ligne est appelé un polygone

• Une polyligne est représentée par une liste ordonnée de points p0=(x0,y0), p1=(x1,y1) ,…., pn=(xn,yn)

• Avec OpenGL une polyligne est dessinée en spécifiant les sommets

Traçage de polylignes• Exemples de traçage de polylignes (répertoire

polyligne)– Traçage de 3 lignes vertes contiguës d ’une épaisseur de

5 pixels• glBegin(GL_LINE_STRIP);… glEnd();

– Indique le traçage de lignes contiguës

• glLineWidth(5.0); // largeur des lignes

Traçage de polylignes

• Exemples de traçage de polylignes (répertoire polyligne)

Traçage de polylignes

• Exemples de traçage de polylignes (répertoire polyligne)

Traçage de polylignes (forme ouvertes)

Traçage de polylignes (formes fermées)

Traçage de polylignes (formes fermées)

Traçage de polylignes

• Exemples de traçage de courbe avec des polylignes (répertoire polylignecourbe)– Traçage de lignes vertes contiguës d ’une épaisseur de 1

pixel permettant d ’approximer une courbe• glVertex3f(x,y,z) // points dans l ’espace

• Procédure SpecialKeys(key,x,y); – Permet de faire bouger l ’objet dessiné dans l ’espace

• glRotatef(xrot,1.0f,0.0f,0.0f);– Permet de faire une rotation autour de l ’axe x d ’un angle xrot

• glRotatef(yrot,0.0f,1.0f,0.0f);– Permet de faire une rotation autour de l ’axe y d ’un angle yrot

Traçage de polylignes

• Exemples de traçage de courbe avec des polylignes (répertoire polylignecourbe)

Traçage de polylignes

• Exemples de traçage de courbe avec des polylignes (répertoire polylignecourbe)

Traçage de polylignes

• Exemples de traçage de courbe avec des polylignes (répertoire polylignecourbe)

Traçage de polylignes

• Exemples de traçage de courbe avec des polylignes (répertoire polylignecourbe)

Traçage de polylignes

• Il est aussi possible de tracer une polyligne à partir d ’un fichier avec un format donné

• Exemple de fichier21 nombre de polylignes totales

4 nombre de points de la première polyligne

169 118

174 120

179 124

178 126

5

etc.

Traçage de polylignes

• Il est aussi possible de tracer une polyligne à l ’aide de la souris (répertoire polymouse)– myMouse() est une procédure qui trace une

polyligne au fur et à mesure que les points sont introduits à l ’aide de la souris

– GLUT_LEFT_BUTTON et GLUT_BUTTON_RIGHT correspondent aux boutons gauche et droit de la souris

– GLUT_DOWN indique qu ’une touche est enfoncée

Traçage de polylignes

• Il est aussi possible de tracer une polyligne à l ’aide de la souris (répertoire polymouse)

Traçage de polylignes

• Il est aussi possible de tracer une polyligne à l ’aide de la souris (répertoire polymouse)

Traçage de polylignes

• Exemple de traçage une polyligne à l ’aide de la souris (répertoire polymouse)

Traçage de triangles• Les objets 3D sont représentés dans l’ordinateur en décrivant leur

surface. Cette surface est décomposée en sections planaires qu'on appelle "polygones". Comme les surfaces doivent être planaires, on doit s'assurer que tous les points d'un polygone appartiennent à la même surface planaire.

• Une méthode fréquemment utilisée consiste à décomposer la surface à l'aide de triangles (triangularisation ou tessalation). La fonction glBegin(GL_TRIANGLES)¸permet de définir des triangles par groupe de 3 sommets. La fonction glBegin(GL_TRIANGLE_STRIP) permet de spécifier des triangles rattachés. Après les 3 premiers sommets, chaque sommet subséquent définit un nouveau triangle en ré-utilisant l'arête précédente (edge).

• La fonction glBegin(GL_TRIANGLE_FAN) permet de définir des surfaces en arcs de cercle.

• La fonction glBegin(GL_QUADS) permet de spécifier des structures à 4 sommets. glBegin(GL_QUAD_STRIP) permet de spécifier une séquence de polygones à 4 sommets.

Traçage de triangles

• GL_TRIANGLE_STRIP/GL_TRIANGLE_FAN

Traçage de triangles

• GL_QUAD_STRIP/GL_QUAD

Traçage de triangles• Les fonctions précédentes réduisent le nombre de sommets

à spécifier. De plus, elles permettent de définir des structures non-convexes, ce qui n'est pas le cas de glBegin(GL_POLYGON). Finalement, OpenGL n'est pas consistent: les quads sont CW (clockwise), les triangle strips sont CCW (counter clock wise), les triangle fans sont CW.

• Pour tester ces concepts, vous devez analyser très attentivement le programme "Triangle" du chapitre 4 du livre OpenGL Super Bible (page 102).

• Notez toutes les fonctions qui y sont définies: glPolygonMode(), glFrontFace(), glCullFace(), glEdgeFlag(), etc. Notez aussi toutes les anomalies de ce programme par rapport à la réalité. On appelle le graphisme 3D "réalité virtuelle" parce qu'on peut afficher des images qui n'ont pas d'équivalent dans la réalité de tous les jours.

Traçage de triangles• Les fonctions précédentes réduisent le nombre de sommets

à spécifier. De plus, elles permettent de définir des structures non-convexes, ce qui n'est pas le cas de glBegin(GL_POLYGON). Finalement, OpenGL n'est pas consistent: les quads sont CW (clockwise), les triangle strips sont CCW (counter clock wise), les triangle fans sont CW.

• Pour tester ces concepts, vous devez analyser très attentivement le programme Triangle du chapitre 4 du livre OpenGL Super Bible (page 102).

• Notez toutes les fonctions qui y sont définies: glPolygonMode(), glFrontFace(), glCullFace(), glEdgeFlag(), etc. Notez aussi toutes les anomalies de ce programme par rapport à la réalité. On appelle le graphisme 3D "réalité virtuelle" parce qu'on peut afficher des images qui n'ont pas d'équivalent dans la réalité de tous les jours.

Traçage de triangles• Dans l'exemple Triangle, on présente aussi le concept de

Culling. Cette opération est utilisée pour cacher les facettes dont l'extérieur n'est pas dirigée vers l'observateur.

• Ce projet permet aussi d’introduire le Depth test. En effet, comme il y a une composante en z pour chaque sommet des objets, certains objets peuvent alors en cacher d'autres. OpenGL résout ce problème en utilisant un depth buffer (appelé aussi z-buffer) qui est une mémoire supplémentaire dans laquelle il place la coordonnée de distance à l'observateur, de chaque point affiché (dans le buffer de l'image). Si par la suite, OpenGL rencontre un point qui est plus près de l'observateur, alors il modifie le point de l'image et la profondeur (plus petite) dans le z-buffer.

Traçage de triangles (Projet Triangle)

Traçage de triangles (Projet Triangle)

Traçage de triangles (Projet Triangle)

Traçage de triangles (Projet Triangle)

Traçage de triangles (Projet Triangle)

Traçage de triangles (Projet Triangle)

Traçage de triangles (Projet Triangle: exécution)

Traçage de triangles (Projet Triangle: exécution sans surfaces cachées)

Traçage de triangles (Projet Triangle: exécution avec culling)

Traçage de triangles (Projet Triangle: exécution avec l’arrière plan en fil de fer)

Gestion des touches du clavier• Voir les leçons 4 et 7 dans NeHe

– Ouverture d’une fenêtre Windows avec le WINAPI

– Gestion des messages provenant de la fenêtre par une fonction LRESULT CALLBACK WndProc()

– Gestion des touches du clavier dans la fonction principale int WINAPI WinMain()

Autres outils de dessins• Fenêtre du monde VS viewport

– Une surface dans le système de coordonnées du monde sélectionnée pour l’affichage est appelée une fenêtre du monde. Une surface sur un écran sur laquelle est proje-tée la fenêtre est un port de visualisation (viewport)

– La visualisation d ’une scène correspond alors à la transposition des objets observés dans une fenêtre du monde vers un viewport dans l’écran

Autres outils de dessins

• Fenêtre du monde VS viewport

Autres outils de dessins

• Fenêtre du monde VS viewport

• WC -> VC– Pour maintenir les mêmes positions relatives dans les

deux représentations nous devons savoir

minmax

min

minmax

min

minmax

min

minmax

min

ywyw

ywyw

yvyv

yvyv

xwxw

xwxw

xvxv

xvxv

v: viewportw: window

Autres outils de dessins

• Fenêtre du monde VS viewport

• WC -> VC– Maintien des positions relatives

Autres outils de dessins

• Fenêtre du monde VS viewport

• WC -> VC– Nous pouvons alors déduire (xv,yv) par

minmax

minmax

minmax

minmax

minmin

minmin

)(

)(

ywyw

yvyvsy

xwxw

xvxvsx

syywywyvyv

sxxwxwxvxv

Autres outils de dessins

• Fenêtre du monde VS viewport– Exemple de traçage d ’une fonction sinc

• glOrtho2D(-5.0,5.0,-0.3,1.0) // permet de définir les bornes de la fenêtre du monde

• glOrtho2D(left, right, buttom, up);

• glViewport(0.0,0.0,640.0,480.0); //permet de définir la dimension du viewport

• glViewport(xcorner,ycorner,width,height);

Autres outils de dessins

• Fenêtre du monde VS viewport– Exemple de traçage d ’une fonction sinc

Autres outils de dessins

• Fenêtre du monde VS viewport– Exemple de traçage d ’une fonction sinc

Autres outils de dessins

• Fenêtre du monde VS viewport– Exemple de traçage d ’une fonction sinc

Autres outils de dessins

• Fenêtre du monde VS viewport– Exemple de traçage d ’une fonction sinc

Projet de session • Constitution des équipes

• Choix du projet (animation, image de synthèse, objets impliqués)

• Choix du modèle de représentation des objets

• Répartition initiale des tâches (important)

• Premier échéancier (12 mars 2012)– objets modélisés– visualisation des objets– animation simple dans l’espace