GRAPHISME PAR ORDINATEUR SIF-1032. Contenu du cours 1 Ressources disponibles sur l’INTERNET Introduction au graphisme par ordinateur Survol des systèmes.

Présentation au sujet: "GRAPHISME PAR ORDINATEUR SIF-1032. Contenu du cours 1 Ressources disponibles sur l’INTERNET Introduction au graphisme par ordinateur Survol des systèmes."— Transcription de la présentation:

1 GRAPHISME PAR ORDINATEUR SIF-1032

2 Contenu du cours 1 Ressources disponibles sur l’INTERNET Introduction au graphisme par ordinateur Survol des systèmes graphiques Introduction à l ’environnement de travail (OPENGL) –Ouverture d ’une fenêtre –Affichage d ’une forme simple –Affichage de points et de lignes Introduction à l’architecture XNA LECTURES: Chap. 1, 2 Computer Graphics Using OPENGL, F. S. Hill, Prentice-Hall.

3 Contenu du cours 1 LECTURES: Leçon 1, NeHe ’s OpenGL tutorials http://nehe.gamedev.net Exemples de OpenGL Super Bible et Note de cours: ftp://ftp.uqtr.uquebec.ca/pub/dmat/meunier/sif1032 LECTURES: Chapitre 1 Introduction to 3D Game Programming with DirectX 9.0, F. D. Luna, Wordware Publishing

4 Ressources disponibles sur l’INTERNET Tutoriels et livres en ligne sur OpenGL http://www.opengl.org/developers/code/tutorials.html –Voir OpenGL Programming Tutorials http://nehe.gamedev.net http://www.xmission.com/~nate/tutors.html http://www.nullterminator.net/opengl32.html –Voir OpenGL Online Books OpenGL Reference Manual OpenGL Programming Guide –OpenGL Programming Guide 8th edition (2013) http://www.ics.uci.edu/~gopi/CS211B/opengl_programming_guide_8th _edition.pdf

5 Ressources disponibles sur l’INTERNET Tutoriels et livres en ligne sur OpenGL http://www.opengl.org/developers/code/tutorials.html –Learning Modern 3D Graphics Programming (2012) http://www.arcsynthesis.org/gltut/ –OpenGLBOOK http://openglbook.com/the-book.html

6 Ressources disponibles sur l’INTERNET Création d’objets 3D (Milkshape3D) http://www.milkshape3d.com Tutoriels sur Milkshape3D http://www.gen3d.de/MS3DTutorial/ms3dtutl.html http://xu1productions.com/3dstudio/tuts/mbasics.html Tutoriel sur XNA: http://rbwhitaker.wikidot.com/xna- tutorials http://rbwhitaker.wikidot.com/xna- tutorials Tutoriel sur l’architecture XNA: Nicolas Boonaert (www.developpez.com)www.developpez.com OpenGL en C#, voir le site: http://www.opentk.com/

7 Introduction au graphisme par ordinateur Le graphisme par ordinateur représente l’ensemble des programmes qui servent à créer des images tri-dimensionnelles (3D) à l'aide d'un ordinateur. Le graphisme à 2 dimensions, comme les objets graphiques visibles dans les fenêtres Windows ou Java n'est pas considéré comme du graphisme à proprement parlé. Ainsi, nous serons intéressés par la représentation des objets d’une scène 3D et de sa visualisation sur un ordinateur. Ceci implique qu'il faut d’abord, créer des objets géométriques 3D, puis leur donner des couleurs ou textures, plus ou moins éclairées, avec le plus de réalisme possible.

8 Introduction au graphisme par ordinateur Historique ( Le graphisme par ordinateur requiert un très grand nombre de calculs en point flottant et beaucoup de mémoire RAM.) –Avant 1980: les ordinateurs étaient lents, avaient peu de mémoire et, pour la plupart avaient des difficultés avec les calculs en point flottant. –1978: un chercheur (à l'origine de la compagnie Silicon Graphics (SGI), réalise que les opérations fondamentales du graphisme peuvent être réalisées à l'aide de vecteurs et de matrices 4x4. Il développe alors un processeur spécialisé pour gérer ces matrices avec les calculs en point flottant. –1985: la compagnie SGI offre la première station graphique haute performance (avec des circuits spécialement conçus pour le graphisme 3D). Cette station s'appelle "Iris". Son système d'exploitation est Unix, elle se branche en réseau TCP/IP, de telle sorte qu'on peut la reliée à un réseau de poste de travail Sun (pour $60,000). Elle offre aussi une librairie graphique en C qui s'appelle "GL" (Graphic Library).

9 Introduction au graphisme par ordinateur Historique –OpenGL: en 1992, la première spécification standardisée de OpenGL par la OpenGL Architecture Review Board (ARB) apparaît. OpenGL devient un standard en graphisme par ordinateur. –OpenInventor: c'est une librairie de classes construites sur la base de OpenGL par SGI, à partir de 1993. Pour des raisons qui sont obscures, les livres sur le graphisme n’y font pas référence –Le graphisme par ordinateur étant très complexe, les développements ont été réalisés par des compagnies qui ont orienté leurs produits vers un créneau particulier du graphisme: Soft Image, Studio Max, Maya, Macro Media Director, AutoCAD, OrCad, Catia, etc. On retrouve ainsi des produits spécialisés pour toutes sortes d'applications: Dessins mécaniques (Catia, AutoCad), dessin de circuits d'ordinateur (OrCad), présentation multimédia (Director), effets visuels et animation (Soft Image, Maya), l'industrie manufacturière (SGI).

10 Introduction au graphisme par ordinateur Historique –DirectX: depuis 1995, Microsoft a cherché à développer son propre système graphique, appelé "DirectX". DirectX est basé sur la technologie logicielle appelée "COM: Component Objet Model", laquelle généralise la technologie OLE, ce qui permet de développer des classes qui peuvent être utilisées par des programmes écrits avec n'importe quel langage de programmation. Dans l'espace de quelques années, les versions se sont multipliées (version actuelle 12). En fait, DirectX contient plusieurs outils multimédias: Direct3D pour le graphisme, DirectShow pour les présentations multimédias, DirectInput pour l’interfaçage des manettes de jeux vidéo.

11 Introduction au graphisme par ordinateur Principales applications du graphisme –Conception assistée par ordinateur –Présentations graphiques –Les arts –Divertissement (animation) –Enseignement et entraînement –Visualisation (simulation) –Monitoring de procédé (Centrale nucléaire) –Traitement d’image

12 Conception assistée par ordinateur

13 Présentations graphiques

14 Les arts

15 Divertissements

16 Enseignement et entraînement

17 Visualisation (simulation)

18 Monitoring de procédés

19 Survol des systèmes graphiques

20 Survol des systèmes graphiques (préhistoire)

21 Survol des systèmes graphiques (plus actuel)

22

23 Survol des systèmes graphiques Dispositifs d’affichage VIDEO –Moniteur vidéo (CRT) Écrans graphiques couleurs –Type RASTER: balayage des images a un rythme constant –Type RANDOM SCAN: dessine les formes Image RASTER –constituée de pixels codés selon l’intensité de chaque canon d’électrons (RGB) (couleur) –stockée dans un tampon-image (frame buffer) –affichage à l’écran ligne par ligne –rafraîchissement de l’écran (60 Hz) interlaçage

24 Survol des systèmes graphiques Image RASTER (Résolutions différentes)

25 Principal dispositif d’affichage Vidéo (CRT)

26 CRT raster

27 CRT à balayage aléatoire

28 Composition de couleur et Interlaçage

29 Fonctionnement d ’un CRT couleur

30 CRT couleur avec LUT

31 Comparaison de 2 systèmes RASTER

32 Autres dispositifs Stations graphiques Digitaliseurs Imprimantes couleur Traceurs Systèmes à réalité virtuelle

33 Autres dispositifs Stations graphiques

34 Autres dispositifs Digitaliseurs

35 Autres dispositifs Digitaliseurs

36 Autres dispositifs Systèmes à réalité virtuelle

37 Introduction à l ’environnement de travail (OpenGL) Phases géométriques Phases de rendu

38 Introduction à l ’environnement de travail (OpenGL) Pour utiliser les exemples de programmes il faut au préalable organiser l ’environnement de travail –Environnement: Microsoft ’s Visual C++ 6.0 ou plus …. –Fichiers à copier avant d’utiliser les exemples: Inclure le fichier header glut.h dans le répertoire c:/Program Files/Microsoft Visual Studio/VC98/Include/GL Inclure le fichier librairie glut32.lib dans le répertoire c:/Program Files/Microsoft Visual Studio/VC98/Lib Inclure le fichier DLL glut32.dll dans le répertoire c:/WINNT/System

39 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple, référence: Super Bible Second Edition)

40 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple, référence: Super Bible) –Initialisation du mode d ’affichage: Single buffered glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); –Indique à la librairie GLUT quel type d ’affichage utiliser lors de l ’ouverture de la fenêtre –Une fenêtre SINGLE_BUFFERED indique que toutes les commandes de dessin sont effectuées sur la fenêtre affichée –Une fenêtre DOUBLE_BUFFERED indique que toutes les commandes de dessin sont effectuées sur la fenêtre en arrière plan –GLUT_RGB indique que des intensités de couleurs distinctes sont associées à chaque composante Red, Green et Blue

41 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple) –Création d ’une fenêtre openGL glutCreateWindow( “Simple”); Création d ’une fenêtre avec un identificateur –Fonction d ’affichage glutDisplayFunc(RenderScene); Permet d ’établir la fonction RenderScene pour afficher ou rafraîchir la fenêtre –Établir le contexte de rendu (Rendering context RC) SetupRC(); Initialisations préalables à l ’affichage

42 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple) –Fonction d ’affichage glutDisplayFunc(RenderScene);

43 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple) –Établir le contexte de rendu (Rendering context RC) SetupRC();

44 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple) –glutMainLoop(); Traitement des messages spécifiques au OS, les touches du clavier –glClearColor(0.0f, 0.0f, 1.0f, 1.0f); Permet d ’établir la couleur de fond de la fenêtre Paramètres: –red: intensité de rouge donnée entre 0.0 et 1.0 –green: intensité de vert donnée entre 0.0 et 1.0 –blue: intensité de bleu donnée entre 0.0 et 1.0 –alpha: paramètre utilisé pour les effets de mélange et translucidité

45 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple) –glClear(GL_COLOR_BUFFER_BIT); Permet d ’effacer le tampon image couleur –glFlush(); Permet de vider la pipeline de rendu qui traite les commandes OpenGL de façon séquentielle

46 Introduction à l ’environnement de travail Exemple d ’ouverture d ’une fenêtre (répertoire Simple)

47 Introduction à l ’environnement de travail Affichage d ’une forme simple (répertoire GLRect, Référence Super Bible) –Affichage d ’un rectangle rouge

48 Introduction à l ’environnement de travail Affichage d ’une forme simple (répertoire GLRect, Référence Super Bible) –Affichage d ’un rectangle rouge glColor3f(1.0f, 0.0f, 0.0f); // rouge sans translucidité glRectf(100.0f, 150.0f, 150f, 100.0f); –(x1,y1): coin supérieur gauche du rectangle –(x2,y2): coin inférieur droit

49 Introduction à l ’environnement de travail Affichage d ’une forme simple (répertoire GLRect)

50 Introduction à l ’environnement de travail Affichage de points et de ligne (répertoire PointLigne, référence Super Bible)

51 Introduction à l ’environnement de travail Affichage de points et de ligne (répertoire PointLigne, référence Super Bible) –Affichage de 3 points rouges glColor3f(1.0f, 0.0f, 0.0f); // rouge sans translucidité glPointSize(10.0); glBegin(GL_POINTS);… glEnd(); –Indique le traçage de points glVertex2i(100,50); –(x,y): position du point

52 Introduction à l ’environnement de travail Affichage de points et de ligne (répertoire PointLigne) –Affichage de 2 lignes vertes glColor3f(0.0f, 1.0f, 0.0f); // vert sans translucidité glBegin(GL_LINES);… glEnd(); –Indique le traçage de lignes entre des paires de points glVertex2i(100,50); –(x,y): position du point

53 Introduction à l ’environnement de travail Affichage de points et de ligne (répertoire PointLigne)

54 Introduction à l ’environnement de travail Affichage d’un cube et réalisme (chapitre 1: Super Bible) Cube sans réalisme Cube sans les surfaces cachées

55 Introduction à l ’environnement de travail Affichage d’un cube et réalisme (chapitre 1: Super Bible) Cube coloré rouge Cube avec effet de shading (illumination ajoutée)

56 Introduction à l ’environnement de travail Affichage d’un cube et réalisme (chapitre 1: Super Bible) Cube avec ombrage Cube texturé

57 Introduction à l ’environnement de travail OpenGL 3.x et plus

58 Introduction à l ’environnement de travail Ouverture d’une fenêtre (OpenGL 3.x et plus)

59 Introduction à l ’environnement de travail Affichage d’un point (OpenGL 3.x et plus)

60 Introduction à l ’environnement de travail Affichage d’un point (OpenGL 3.x et plus)

61 Introduction à l ’environnement de travail Affichage d’un triangle sans shading (OpenGL 3.x et plus)

62 Introduction à l ’environnement de travail Affichage d’un triangle sans shading (OpenGL 3.x et plus)

63 Introduction à l ’environnement de travail Développement d’un programme VC++ en utilisant Visual Studio.NET. Nous allons présenter les étapes de cette utilisation. D'abord, on choisit "Nouveau projet" dans la figure suivante:

64 Introduction à l ’environnement de travail Ensuite, on choisit le répertoire de base du projet dans "Emplacement:", puis on donne un nom au projet "IntroCube", puis on doit sélectionner le type de projet "Projets Visual C++ " et enfin le type de projet "Application MFC":

65 Introduction à l ’environnement de travail Ensuite, on choisit le type d'application "Basée sur un boîte de dialogue" dans "Type d’application ":

66 Introduction à l ’environnement de travail Dans la figure suivante, on a enlevé l'option "Boîte de dialogue À propos de" pour diminuer le code généré, dans l'option "Fonctionnalités de l’interface utilisateur":

67 Introduction à l ’environnement de travail L'option "Classes générées " montre que le système va créer 2 classes et 4 fichiers qui vont être placés dans un nouveau répertoire appelé avec le nom du projet. La classe CIntroCubeApp est dérivée de la classe MFC CWinApp et elle est responsable de gérer notre programme dans le système Windows. Normalement, on n'a pas à modifier cette classe:

68 Introduction à l ’environnement de travail La classe importante est CIntroCubeDlg qui est dérivée de la classe CDialog, laquelle est elle-même dérivée de la classe CWnd. Le programme fonctionne en créant un objet de cette classe dans la fonction "InitInstance" de l'application et appelant la fonction "DoModal" (voir le fichier "CIntroCubeApp.cpp".

69 Introduction à l ’environnement de travail Ensuite, on doit créer une ressource de type Dialog avec l'éditeur de ressources.

70 Introduction à l ’environnement de travail La sélection d’une ressource ouvre automatiquement l’éditeur de ressources.

71 Introduction à l ’environnement de travail La figure suivante montre comment on peut ajouter un contrôle "boîte de texte" dans la ressource Dialog:

72 Introduction à l ’environnement de travail Dans la figure précédente, notez qu'il est important de donner un nom significatif à la ressource (IDC_EDITboite). Ensuite, on doit associer une variable à la ressource qui sert à gérer le texte du contrôle:

73 Introduction à l ’environnement de travail Puis on donne un nom à la variable (m_boite) et on choisit la catégorie "Value":

74 Introduction à l ’environnement de travail Pour créer un menu principal, on doit d'abord ajouter une nouvelle ressource de type menu:

75 Introduction à l ’environnement de travail Pour créer un menu principal, on doit d'abord ajouter une nouvelle ressource de type menu:

76 Introduction à l ’environnement de travail On donne un nom au menu (Options) puis on entre les options du menu (Option 1).

77 Introduction à l ’environnement de travail Ensuite, on doit associer le menu (IDR_MENU1) avec le dialogue à l'aide des propriétés du dialogue:

78 Introduction à l ’environnement de travail Puis, on ajoute une fonction qui est responsable de répondre à l'option du menu (Ajouter un gestionnaire d’événements...):

79 Introduction à l ’environnement de travail Dans la figure suivante, il importe de choisir la classe du dialogue (CIntroCubeDlg):

80 Introduction à l ’environnement de travail En ajoutant l’événement:

81 Introduction à l ’environnement de travail Ajoutons un autre dialogue pour les options de dessin, Par la suite, on va utiliser le dialogue principal pour afficher les objets avec OpenGL. On va aussi vouloir un autre dialogue pour permettre de choisir les modes d'affichage. Voici comment procéder pour ajouter un autre dialogue pour ces options. D'abord on ajoute une autre ressource de type dialogue:

82 Introduction à l ’environnement de travail Puis on lui donne un nom "IDD_DIALOGaffichage":

83 Introduction à l ’environnement de travail Puis, on doit créer une nouvelle classe qui va gérer ce nouveau dialogue:

84 Introduction à l ’environnement de travail Notez dans la figure suivante qu'on a choisit la classe de base "CDialog", la ressource est "IDD_DIALOGaffichage" et le nom de la classe est cDiaAffichage (fichiers: cDiaAffichage.h, cDiaAffichage.cpp):

85 Introduction à l ’environnement de travail Utilisons le dialogue cDiaAffichage. Supposons que notre option de menu doit servir à choisir les options d'affichage. On doit alors inclure le fichier "cDiaAffichage.h" au début du fichier "IntroCubeDlg.cpp":

86 Introduction à l ’environnement de travail Puis on entre le code suivant dans la fonction "CIntroCubeDlg::OnOptionsOption1()":

87 Introduction à l ’environnement de travail Résultat après avoir Générer la solution:

88 Introduction à l ’environnement de travail Résultat après avoir Générer la solution: (Pour récupérer du texte dans un contrôle de type EditBox, on utilise la fonction "UpdateData")

89 Introduction à l ’environnement de travail Résultat après avoir Générer la solution:

90 Introduction à l ’architecture XNA Architecture XNA développée par Microsoft: