Infographie IMN428. À l ordre du jour. Été Introduction Par Pierre-Marc Jodoin et Olivier Godin

Transcription

1 Été 2015 Infographie IMN428 Introduction Par Pierre-Marc Jodoin et Olivier Godin À l ordre du jour Introduction à l infographie Espace couleur Primitives graphiques Caméra Pipeline graphique 2 1

2 Rappel : notation binaire 1 1 bit 0, bits 00,01,10, bits 1 octet (byte) = 8 bits valeurs 4 valeurs 000,001,010,100,011,101,110, valeurs valeurs Avec n bits, on peut représenter 3 2 n valeurs Conversion d un nombre binaire en un nombre décimal Qu est-ce qu une image? Une image numérique peut être vue comme une matrice 2D dont chaque élément (pixel) représente l intensité lumineuse discrète à ce point. 4 Cf.:Max Mignotte 2

3 Qu est-ce qu une image? Les images matricielles les plus communes sont: Images binaires (1 bit par pixel) Images en niveaux de gris (8 bits par pixel) Images couleurs (24 bits par pixel) 3 Bandes ( généralement Rouge-Vert-Bleu ) 8 bits par bande Qu est-ce qu une image? Images binaires (1 bit par pixel) 2 valeurs possibles par pixel : blanc ou noir 6 3

4 Qu est-ce qu une image? Images en niveaux de gris (généralement 8 bits par pixels) valeurs possibles par pixel Intensité [0,255] ou [0,1] 7 Qu est-ce qu une image? Images couleurs (24 bits par pixels) 3 Bandes ( généralement Rouge-Vert-Bleu ) 8 bits par bande 24 2 couleurs possibles par pixel [0,255] ou [0,1] par bande 8 4

5 Qu est-ce qu une image? R G B 9 RGB, système additif Le système de couleurs RGB est une système additif. En l absence de tout signal (RGB=(0,0,0)) on obtient du noir et du blanc avec un signal maximum (RGB=(255,255,255) en codage 8 bits). C est ce système qu utilisent plusieurs écrans d ordinateurs. L ensemble des couleurs pouvant être représentées par RGB est contenu à l intérieur d un cube. Bleu (0,0,255) Gris Magenta (255,0, 255) Cyan (0,255,255) B Blanc NoirR G Rouge (255,0,0) Vert (0,255,0) Jaune (255,255,0) Note: Certaines plateformes (comme OpenGL par exemple) code chaque bande entre 0 et 1 et non entre 0 et 255. Dans ce cas, les channels sont codés en «Float» et non en 8 bits. 5

6 Couleur En infographie, on utilise souvent 4 bandes : RGBA RGB transparence Boule rouge opaque : (1,0,0,1) Boule rouge semi transparente: (1,0,0,0.5) 11 Couleur Coeur 3D illustré devant des images médicales SPECT Ppaque: (0,0,1,1) Opaque: (0,0,1,1) Semi-transparent: (0,0,1,0.5) Invisible: (0,0,1,0.0) Imeka inc. 12 6

7 Couleur Squelette d un porc devant des images de CT scan. Dans chaque image, les points 3D ont une couleur différente mais le même alpha. =1 =0.5 =0.1 Imeka inc. 13 Qu est-ce que l infographie dans le contexte de ce cours? Réponse [très] rapide : Science ayant pour objectif de créer des images «photoréaliste» suivant les opérations que voici: Positionner des objets dans l espace 3D Positionner une caméra dans l espace 3D Calculer l illumination en fonction des lumières en 3D et des paramètres de réflexion des objets. Assigner une texture aux objets Éliminer les objets qui ne sont pas dans le champ de vision de la caméra Projeter les objets sur le plan image de la caméra Convertir les objets projetés en pixels 14 7

8 Primitives et objets 3D vertex, polygone, maillage Primitives et objets 3D vertex, polygone, maillage Dans le cadre de ce cours, tous les objets seront représentés à l aide de primitives graphiques: objet ou maillage

9 Primitives et objets 3D vertex, polygone, maillage En général, plus le nombre de polygones utilisé pour représenter un objet est élevé, plus ce dernier sera précis. 17 Primitives et objets 3D vertex, polygone, maillage Vertex 3D: point 3D représenté par un vecteur de 3 «floats» x 3 p y p IR z Segment (ou ligne): droite reliant 2 vertex p 2 p 1 Polygone: facette planaire fermée constituée d un ensemble de 3 vertex (ou plus) 18 9

10 Primitives et objets 3D vertex, polygone, maillage Normale: Chaque polygone et chaque vertex est associé à une normale. Cette normale est utilisée (entre autre chose) pour les calculs d illumination. Maillage (mesh): ensemble de vertex et de polygones qui, collectivement, forment un un objet géométrique 3D Primitives et objets 3D vertex, polygone, maillage Maillage (mesh): exemple simple constitué d un ensemble de 6 polygones à 4 côtés (quads) p5 y p6 Liste de vertex x y z «Quad list» p4 p8 p3 p7 x z p1 p

11 Primitives et objets 3D vertex, polygone, maillage Maillage (mesh): même objet mais représenté par un ensemble de 12 triangles y Liste de vertex «triangle list» p5 p6 x y z z p4 p1 p8 p2 p3 p7 x Primitives et objets 3D vertex, polygone, maillage Espace objet: système d axes x,y,z utilisé pour représenter les vertex d un objet y Liste de vertex x y z x z 22 11

12 Espace objet vs espace monde En 2D pour simplifier l illustration 2 maillages constitués de vertex et de polygones représentés dans leur espace objet y x Positionnement des objets dans l espace monde. Rotation 45 o + translation (Objet 1) Changement d échelle en X + Rotation 45 o + translation (Objet 2) y y x x 23 Espace objet vs espace monde En 2D pour simplifier l illustration En général, l espace monde possède plusieurs objets Exemple schématique y x 24 12

13 Espace objet vs espace monde En 2D pour simplifier l illustration En général, l espace monde possède plusieurs objets Exemple réaliste À partir d un parallélépipède (maillage composé de 6 polygones «quad») On peut générer une cabane à sucre! 25 Espace objet vs espace monde En 2D pour simplifier l illustration Le positionnement des objets dans l espace monde se fait grâce à des opérations matrice-vecteur que nous verrons au chapitre suivant. L opération de positionnement des objets dans l espace monde se nomme «transformation model» 26 13

14 Caméra virtuelle Maintenant que nous avons positionné des objets (maillages) dans l espace monde à l aide d une «transformation model», il nous faut positionner une caméra dans l espace monde. Qu est-ce qu une caméra virtuelle? En infographie, c est une caméra sténopé (pinhole) Rayon de lumière Centre de projection Plan image 27 Caméra virtuelle La caméra sténopée ne date pas d hier. Ici, la profondeur de la pièce correspond à la distance focale de la «caméra»

15 Caméra virtuelle La caméra sténopée ne date pas d hier. Ici, la profondeur de la pièce correspond à la distance focale de la «caméra» Caméra virtuelle Le but d une caméra virtuelle est de convertir les objets 3D de la scène en pixels d image

16 Caméra virtuelle Contrairement à la caméra sténopé, les caméras virtuelles positionnent leur plan image DEVANT le centre de projection Projecteurs Scène 3D Image 2D Centre de projection (COP) 31 Crédit : E.Angel Caméra virtuelle Paramètres d une caméra Par défaut, une caméra est positionnée à l origine et regarde en direction des Z négatifs. 32 Crédit : Opengl.org 16

17 Caméra virtuelle Paramètres d une caméra Pour positionner une caméra dans l espace monde, on doit déterminer sa position, son orientation et son «up vector». 33 Crédit : Opengl.org Caméra virtuelle Paramètres d une caméra Alors que le positionnement d objets dans l espace monde se fait par une transformation «model» le positionnement d une caméra dans l espace monde se fait par une transformation «view» La transformation «view» est également une opération matrice-vecteur up vector cop orientation 34 17

18 Illumination Une fois les objets et la caméra dans la scène, on positionne les lumières dans l espace monde. L N V Vertex Caméra Surface Ainsi, on peut calculer la couleur de chaque vertex, en considérant sa normale, sa position par rapport à la lumière et la caméra, de ses propriétés de réflexion et des propriétés de la lumière. 35 Illumination Couleur uniforme de l objet, aucune illumination Couleur de l objet en présence d une source de lumière Différents paramètres de réflexion 36 18

19 Caméra virtuelle Paramètres d une caméra Frustum : portion de l espace 3D qui détermine les objets à afficher. Les objets situés à l extérieur du frustum ne sont pas projetés sur le plan image Caméra virtuelle Paramètres d une caméra Paramètres du frustum: fovy, near, far, height, width width height zmax far Y fovy zmin near Z X (Système de coordonnées de la caméra) 38 19

20 Caméra virtuelle Paramètres d une caméra world world P Zworld p world L opération de projection a pour objectif de convertir les points 3D des polygones en points 2D sur le plan image. Cela se fait par une multiplication matrice-vecteur. Nous verrons la matrice projection plus tard dans la session. 39 Rastérisation Il faut maintenant convertir les polygones 2D en pixels Y world x mm y mm X world Image plane 40 20

21 Rastérisation Il faut maintenant convertir les polygones 2D en pixels. Y world X world Image plane 41 Rastérisation Rendu des arêtes des polygones. Crédit: Foley,VanDam 42 21

22 Rastérisation Rendu avec remplissage des polygones. Y world X world Image plane 43 Rastérisation Rendu avec remplissage des polygones. Crédit: Foley,VanDam 44 22

23 En résumé Primitives graphiques Vertex Segment Polygones Maillage (mesh) Espaces Espace objet Espace monde Caméra Position, orientation, vecteur «up» Frustum, angle d ouverture et volume de vue Projection 3D -> 2D Transformations Transformation «model» Transformation «view» Transformation «projection» Rastérisation 45 Pipeline graphique Scène 3D Image 2D (frame buffer) Modélisation + Transformations géométriques Illumination Transformation de vision et de projection Découpage Viewport Rasterization Visibilité glbegin gllight glvertex gllightmodel glcolor glnormal glend glmaterial glshademodel glulookat gluperspective glortho glfrustrum glclipplane glclipplane gllinewidth glpointsize gltexcoord glenable(gl_de PHT_TEST) glcullface glrotate gltranslate glscale 46 23

24 OpenGL 47 Qu est-ce qu OpenGL? L objectif du cours d infographie est d apprendre l infographie : ce n est pas un cours d OpenGL. OpenGL est un outil utilisé dans le cadre des travaux pour mettre en application la théorie. La structure d OpenGL est similaire à celle des autres systèmes graphiques, tel que DirectX. Ainsi, ce qui est vu dans le cours d infographie restera valide lors de l utilisation d une autre librairie

25 Qu est-ce qu OpenGL? OpenGL est une librairie graphique (Open Graphics Library) développée par Silicon Graphics. Elle est constituée de plusieurs centaines de fonctions graphiques. OpenGL est indépendant du matériel, du langage utilisé et du système d exploitation. OpenGL N EST PAS un langage de programmation. 49 Fonctions graphiques Les fonctions fournies par OpenGL peuvent être séparées en six catégories principales : Les fonctions primitives qui permettent de manipuler les entités géométriques de base. Celles-ci varieront selon la librairie utilisée. Avec OpenGL, on a seulement accès aux points, aux segments, et aux polygones. Les fonctions attributs servent à définir l allure des primitives graphiques de base : couleur, texture, etc. Les fonction de visualisation sont utiles pour définir les options associées à la caméra virtuelle : position, orientation, type de projection, etc

26 Fonctions graphiques les fonctions de transformation permettent quant à elles de positionner les points et les objets comme bon nous semble dans la scène : translation, rotation, homothétie, etc. les fonctions d interaction font le lien entre les contrôleurs de l ordinateur (clavier, souris, trackpad, manette, etc) et le système graphique. les fonctions de contrôle établissent la relation entre le système d exploitation de l ordinateur et le système graphique, entre autres pour la gestion des fenêtres. 51 L interface OpenGL Toutes les commandes et fonctions d OpenGL ont comme préfixe gl. OpenGL propose des fonctions de bas niveau (point, segment, polygones). Les fonctions de haut niveau proviennent de librairies additionnelles qui interagissent avec OpenGL comme par exemple GLUT et GLU

27 L interface OpenGL : GLUT GLUT (OpenGL utility toolkit) est une librairie permettant l interfaçage entre OpenGL et le matériel. Elle ajoute à OpenGL des fonctions d affichage et de gestion des périphériques (clavier, souris). GLUT propose aussi des primitives géométriques de haut niveau : sphère, cylindre, théière, etc. Le préfixe des fonctions est glut. 53 L interface OpenGL : GLU GLU (OpenGL utility library) est une autre librairie ajoutant des fonctions de haut niveau à OpenGL. GLU se spécialise dans les transformations géométriques, la triangulation et le rendu des surfaces. Le préfixe des fonctions est glu

28 Fonctions utiles UnedesfonctionsdedessindebasedansOpenGLestglVertex*(.), qui permet de dessiner un point dont les coordonnées sont passées en paramètre. Il est nécessaire de spécifier une dimension (2, 3 ou 4) et un type de données (float, int, short, double, etc.) pour les coordonnées. Par exemple, glvertex2i(.) dessinera un point 2D avec des coordonnées en int. Tout dessin est une liste d appels à la fonction glvertex*(.). La liste d appels doit commencer par glbegin(.) et se terminer par glend(). Selon ce que l on souhaite dessiner, les paramètres de glbegin(.) varieront. 55 Fonctions utiles Points : glbegin(gl_points) Lignes : glbegin(gl_lines) Polygones : glbegin(gl_polygon) Triangles : glbegin(gl_triangles) Quadrilatères : glbegin(gl_quads) 56 28

29 Exemple glbegin(gl_polygon); glvertex3f( 20.0,-4.0, 20.0); glvertex3f(-20.0,-4.0, 20.0); glvertex3f(-20.0,-4.0,-20.0); glvertex3f( 20.0,-4.0,-20.0); glend(); D autres paramètres sont aussi possibles pour glbegin(.). 57 Fonctions utiles GL_LINE_STRIP permet de dessiner une suite de segments rattachés les une aux autres. GL_LINE_LOOP ajoute un segment à GL_LINE_STRIP afin de boucler la boucle. GL_TRIANGLE_STRIP utilisera quatre sommets pour dessiner deux triangles adjacents. GL_QUAD_STRIP utilisera six sommets pour dessiner deux quadrilatères adjacents. Le nombre d appels à glvertex*(.) dépendra donc du paramètre de glbegin(.)

30 Les 10 primitives graphiques d OpenGL 59 Fonctions utiles La fonction glcolor*(.) prend en paramètre trois valeurs dans l intervalle [0, 1] ou [0, 255] (selon le type de données) pour définir la couleur, et une quatrième (la valeur, optionnelle) qui sera utilisée dans la gestion de la transparence. glcolor3f( 1.0, 1.0, 1.0 ); // Blanc glcolor3f( 1.0, 0.0, 0.0 ); // Rouge glcolor3f( 0.0, 1.0, 0.0 ); // Vert 60 30

31 Fonctions utiles glcolor3f( 1.0, 0.0, 0.0 ); glbegin(gl_polygon); glvertex3f( 10.0, 0.0, 0.0 ); glvertex3f( 10.0, 10.0, 0.0 ); glvertex3f( 0.0, 10.0, 0.0 ); glvertex3f( 0.0, 0.0, 0.0 ); glend(); glcolor3f( 0.0, 1.0, 0.0 ); glbegin(gl_polygon); glvertex3f( 20.0, 10.0, 5.0 ); glvertex3f( 10.0, 20.0, 5.0 ); glvertex3f( 10.0, 10.0, 5.0 ); glend();

32 Fonctions utiles Un polygone peut être dessiné de plusieurs façons : En mode fil de fer : GL_LINE Rempli avec la couleur courante : GL_FILL Il possède deux faces, que l on manipulera avec GL_FRONT, GL_BACK et GL_FRONT_AND_BACK. 63 Fonctions utiles glpolygonmode(gl_front_and_back,gl_fill); glcolor3f( 1.0, 0.0, 0.0 ); glbegin(gl_polygon); glvertex3f( 10.0, 0.0, 0.0 ); glvertex3f( 10.0, 10.0, 0.0 ); glvertex3f( 0.0, 10.0, 0.0 ); glvertex3f( 0.0, 0.0, 0.0 ); glend(); glpolygonmode(gl_front_and_back,gl_line); glcolor3f( 0.0, 1.0, 0.0 ); glbegin(gl_polygon); glvertex3f( 20.0, 10.0, 5.0 ); glvertex3f( 10.0, 20.0, 5.0 ); glvertex3f( 10.0, 10.0, 5.0 ); glend(); 64 32

33 65 Fonctions utiles Rotation : glrotate*(.) Translation : gltranslate*(.) Changement d échelle : glscale*(.) Position et orientation de la caméra : glulookat(.) Gestion de l illumination : gllight*(.) et gllightmodel*(.) Propriétés des surfaces (réflexion de la lumière): glmaterial*(.) et glcolormaterial(.) 66 33

34 Fonctions utiles Sphère : glutsolidsphere(.) / glutwiresphere(.) Cube : glutsolidcube(.) / glutwirecube(.) Cône : glutsolidcone(.) / glutwirecone(.) Tore : glutsolidtorus(.) / glutwiretorus(.) Théière : glutsolidteapot(.) / glutwireteapot(.) 67 Fonctions utiles Un programme est généralement composé de cinq parties : Une fonction d initialisation : void initialiser(.) Une fonction d affichage : void afficher(.) Une fonction de fenêtrage : void refenetrer(.) Une fonction de gestion du clavier : void clavier(.) Une fonction de gestion de la souris : void souris(.) Une fonction principale : int main(.) 68 34

35 Fonctions utiles Dans la fonction main(.) des travaux pratiques #1 et #2, on retrouve glutmousefunc( MouseButton ); /* Souris */ glutmotionfunc( MouseMove ); /* Souris */ glutreshapefunc( Reshape ); /* Fenêtrage */ glutdisplayfunc( Display ); /* Affichage */ glutkeyboardfunc( keyboard ); /* Clavier */ 69 La petite histoire d OpenGL 1992 OpenGL ère version d OpenGL 1997 à 2003 OpenGL 1.1 à 1.5 Plusieurs nouvelles fonctionnalités (ombres, textures d environnements, etc.) 2001 GLUT Fin de la mise à jour de cette librairie 2004 OpenGL 2.0 Création de GLSL (OpenGL Shading Language) -> GPU!!! 2008 OpenGL 3.0 Fin de l architecture «State-based» d OpenGL, maintenant tout est en GPU via des «shaders» à 2010 OpenGL 3.0 à 3.3 Nouvelles fonctionnalités 2010 OpenGL 4.0 Nouvelle version compatible avec un plus grand nombre de cartes graphiques 2015 OpenGL