GRAPHISME PAR ORDINATEUR SIF-1032

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.

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://dmiftp.uqtr.ca/FMeunier/sif1032/ LECTURES: Chapitre 1 Introduction to 3D Game Programming with DirectX 9.0, F. D. Luna, Wordware Publishing

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

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

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 Tutoriel sur l’architecture XNA: Nicolas Boonaert (www.developpez.com) OpenGL en C#, voir le site: http://www.opentk.com/

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.

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).

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).

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.

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

Conception assistée par ordinateur

Présentations graphiques

Les arts

Divertissements

Enseignement et entraînement

Visualisation (simulation)

Monitoring de procédés

Survol des systèmes graphiques

Survol des systèmes graphiques (préhistoire)

Survol des systèmes graphiques (plus actuel)

Survol des systèmes graphiques (plus actuel)

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

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

Principal dispositif d’affichage Vidéo (CRT)

CRT raster

CRT à balayage aléatoire

Composition de couleur et Interlaçage

Fonctionnement d ’un CRT couleur

CRT couleur avec LUT

Comparaison de 2 systèmes RASTER

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

Autres dispositifs Stations graphiques

Autres dispositifs Digitaliseurs

Autres dispositifs Digitaliseurs

Systèmes à réalité virtuelle Autres dispositifs Systèmes à réalité virtuelle Les lunettes VR peuvent aussi être munit de « eye tracker » et/ou de capteurs EEG

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

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

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

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

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

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

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

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é

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

Introduction à l ’environnement de travail Affichage d’un point (OpenGL 3.x et plus) Indice du tampon Nombre de composantes de chaque objet (sommet) Nombre d’objets utilisés Indice du tampon

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

Introduction à l ’environnement de travail Affichage d’un triangle sans shading (OpenGL 3.x et plus) Nombres de sommets utilisés pour dessiner 1 triangle

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

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