Chapitre 1 : Introduction
Alexandre Blondin Masse
Departement d’informatiqueUniversite du Quebec a Montreal
6 septembre 2016Infographie
INF5071
A. Blondin Masse (UQAM) 7 septembre 2016 1 / 44
Table des matieres
1. Presentation du cours
2. Introduction a l’infographie
3. Projections
4. Images et videos
5. Moteurs de jeu
A. Blondin Masse (UQAM) 7 septembre 2016 2 / 44
Informations generales
Trimestre Automne 2016Titre du cours Infographie
Sigle INF5071Horaire Mercredi, de 14h00 a 17h00
Departement InformatiqueEnseignant Alexandre Blondin Masse, professeur
Bureau PK-4525Telephone 5516
Courriel [email protected] web http://lacim.uqam.ca/˜blondin
A. Blondin Masse (UQAM) 7 septembre 2016 3 / 44
Description du cours (1/2)
I Connaıtre les algorithmes fondamentaux del’infographie;
I Etre capable de realiser une application graphiquesimple a l’aide d’une bibliotheque graphique (par exemple,OpenGL);
I Rappels des notions de base en calcul vectoriel et engeometrie;
I Objets geometriques elementaires;
I Codage des objets en deux et trois dimensions;
I Transformations lineaires en coordonnees homogenes;
I Composition de transformation;
A. Blondin Masse (UQAM) 7 septembre 2016 4 / 44
Description du cours (2/2)
I Transformation de perspective et modeles derepresentation;
I Trace de figures elementaires;
I Representation parametrique des objets en troisdimensions (courbes de Bezier, B-splines);
I Fonctionnalites typiques offertes par les bibliothequesgraphiques, par exemple, OpenGL;
I Autres sujets (selon le temps disponible) : modele delumiere, espace de couleurs, surface de Bezier, lancer derayons.
A. Blondin Masse (UQAM) 7 septembre 2016 5 / 44
Modalites d’evaluation
I Projet 1 : application 2D :
I Presentation [20%];
I Remise electronique [10%];
I Projet 2 : application 3D :
I Presentation [20%];
I Remise electronique [10%];
I Deux mini-tests [20%];
I Deux devoirs [20%];
I Retard, absence et plagiat : voir le plan de courshttp://lacim.uqam.ca/˜blondin/files/inf5071/aut2016/plan.pdf.
A. Blondin Masse (UQAM) 7 septembre 2016 6 / 44
Contenu detaille
1. Introduction;
2. Modelisation 3D;
3. Textures;
4. Moteurs de jeu;
5. Animations;
6. Physique;
7. Materiaux;
8. Lumiere;
9. OpenGL, WebGL et shaders.
A. Blondin Masse (UQAM) 7 septembre 2016 7 / 44
Technologies et logiciels
I Python;
I Blender;
I Inkscape;
I Gimp;
I Pygame/Kivy;
I Panda3D;
I OpenGL/WebGL;
I Git;
I [optionnel] HTML/CSS/Javascript;
I [optionnel] Phaser.js/Babylon.js.
A. Blondin Masse (UQAM) 7 septembre 2016 8 / 44
Formule du cours
I Typiquement, les cours enseignes a l’universite sont descours magistraux classiques;
I Dans ce cours, l’accent sera mis sur les demonstrations;
I Ainsi, au moins 30% de chacun des cours sera consacre al’illustration des concepts theoriques vus dans la partiemagistrale;
I Exemple : Au prochain cours, il serait preferable que vousinstalliez Blender, Inkscape et Gimp;
I Il vous sera toujours possible de visionner les videos desseances de cours dans le cas ou une notion aurait ete vuetrop rapidement.
A. Blondin Masse (UQAM) 7 septembre 2016 9 / 44
Table des matieres
1. Presentation du cours
2. Introduction a l’infographie
3. Projections
4. Images et videos
5. Moteurs de jeu
A. Blondin Masse (UQAM) 7 septembre 2016 10 / 44
L’espace euclidien
I Mathematiquement, l’espace euclidien est l’ensemble R3;
I Un element p ∈ R3 est appele un point de l’espace;
I Un point est souvent represente par un triplet decoordonnees p = (x, y, z), ou x, y, z ∈ R;
A. Blondin Masse (UQAM) 7 septembre 2016 11 / 44
Varietes
I Une variete est un sous-ensemble de R3. Celle-ci peutpresenter differentes proprietes topologiques.
I Elle peut etre connexe;
I Elle peut avoir des trous;
I On peut parfois calculer sa dimension, etc.
I Exemples classiques :
I 0D : point;
I 1D : droite, courbe, helice, etc.
I 2D : plan, sphere, ellipsoıde, cylindre, etc.
I 3D : boule, cube, cylindre plein, etc.
A. Blondin Masse (UQAM) 7 septembre 2016 12 / 44
Modeles et maillage (1/2)
I Lorsqu’on affiche une variete a l’ecran, nous devonsutiliser des approximations;
I On utilise alors des maillages (en anglais, mesh);
I Un modele est une representation d’un objet a l’aide d’unou plusieurs maillages;
A. Blondin Masse (UQAM) 7 septembre 2016 13 / 44
Modeles et maillage (2/2)
Un maillage peut etre vue comme une structure de donneesabstraites selon l’usage qu’on souhaite en faire :
I Un ensemble de sommets (en anglais, vertices);
I Un ensemble d’aretes (en anglais, edges);
I Un ensemble de faces (en anglais, faces);
Mais eventuellement aussi d’autres informations pluspointues :
I Des vecteurs normaux;
I Des coordonnees de texture;
I Un canal de transparence;
I Des coordonnees de relief (en anglais, bump map), etc.
A. Blondin Masse (UQAM) 7 septembre 2016 14 / 44
Texture
I Un modele decrit la geometrie de l’objet;
I Ensuite, on peut lui appliquer une texture;
I Ce processus est appele placage de texture et peut etrevu comme une fonction
f : Modele→ Couleur,
qui associe une couleur a chaque point du modele.
A. Blondin Masse (UQAM) 7 septembre 2016 15 / 44
Lumiere
I La prochaine etape consiste a eclairer correctement unescene;
I Il existe plusieurs types de lumiere;
I Il y a egalement plusieurs modeles de propagation de lalumiere;
I Ceux-ci sont bases sur l’algebre vectorielle et laphysique optique.
A. Blondin Masse (UQAM) 7 septembre 2016 16 / 44
Animations
I Bien qu’il puisse etre interessant de produire des imagesstatiques seulement, une branche importante del’infographie porte sur l’animation;
I Concretement, ceci revient a ajouter une 4e dimensionaux modeles, correspondant au temps;
I Par exemple, si un objet se deplace, alors on peut decriresa position a l’aide d’une fonction vectorielle
#»r : [tinit, tfin]→ R3 : t 7→ (x(t), y(t), z(t))
I On peut egalement construire des animations pluscomplexes en suivant cette idee, combinee al’interpolation : transformations, deformation,acceleration, etc.
A. Blondin Masse (UQAM) 7 septembre 2016 17 / 44
Cinematique
I Bien que le type d’animation soit illimite, les principes dela cinematique sont souvent utilises dans les applicationsgraphiques;
I Des lois physiques (par exemple, les lois de Newton)decrivent le mouvement des solides dans l’espace;
I Ces lois impliquent les grandeurs physiques suivantes :
I La position, la vitesse, l’acceleration, mais aussi
I L’angle, la vitesse angulaire, l’accelerationangulaire,
I Les forces agissant sur un systeme,
I etc.
A. Blondin Masse (UQAM) 7 septembre 2016 18 / 44
Table des matieres
1. Presentation du cours
2. Introduction a l’infographie
3. Projections
4. Images et videos
5. Moteurs de jeu
A. Blondin Masse (UQAM) 7 septembre 2016 19 / 44
Vue
I En infographie, le monde 3D n’existe pas reellement,mais est plutot une abstraction;
I Pourquoi ? Parce que tout passe eventuellement parl’oeil, qui ne voit qu’en 2D;
I Plus precisement, chacun de nos yeux prend une photo2D de l’environnement;
I Puis notre cerveau combine ces photos pour nous donnerune idee des trois dimensions de notre environnement.
I Pour l’ordinateur, c’est la meme chose ! Ultimement, lerendu final n’est qu’une image 2D.
A. Blondin Masse (UQAM) 7 septembre 2016 20 / 44
Du 3D vers le 2D
I Nous devons donc etudier les transformations
P : R3 → R2.
I Ce type de transformation est appelee projection;
I Il en existe une infinite, mais les principales sont lesprojections
I perspectives;
I orthographiques et
I axonometriques.
I La plupart d’entre elles sont des transformationslineaires (ou peuvent etre approximees a l’aide detransformations lineaires).
A. Blondin Masse (UQAM) 7 septembre 2016 21 / 44
Projection perspective
I La projection la plus realiste (c’est-a-dire qui simule ceque l’oeil percoit) est la projection perspective;
I A noter qu’elle ne preserve pas les paralleles.
A. Blondin Masse (UQAM) 7 septembre 2016 22 / 44
Projection orthographique
I C’est une projection perpendiculaire aux axes;
I Par consequent, une dimension disparaıt completement;
I Moins realiste, car on ne distingue pas les objets prochesdes objets eloignes.
I Mais plus facile a manipuler.
A. Blondin Masse (UQAM) 7 septembre 2016 23 / 44
Projection axonometrique
I Aussi appelee pseudo-3D;
I Differentes variantes selon les angles choisis :trimetrique, isometrique, etc.
A. Blondin Masse (UQAM) 7 septembre 2016 24 / 44
Defilement parallaxe
I Une technique parfois utilisee consiste a faire defiler lescouches a differentes vitesses;
I Chaque couche est une projection orthographique, maissituee a une profondeur differente;
I Exemple : Wikipedia
(source de l’image)
A. Blondin Masse (UQAM) 7 septembre 2016 25 / 44
Scene fixe
I Si la scene est fixe, on peut utiliser une projectionperspective;
I Ou se trouve le point de fuite dans l’image ci-bas ?
(source de l’image)
A. Blondin Masse (UQAM) 7 septembre 2016 26 / 44
Table des matieres
1. Presentation du cours
2. Introduction a l’infographie
3. Projections
4. Images et videos
5. Moteurs de jeu
A. Blondin Masse (UQAM) 7 septembre 2016 27 / 44
Systemes de couleurs
I Avant de parler d’images, il faut bien comprendre lessystemes de couleurs;
I Les systemes les plus courants sont :
I Noir et blanc;
I RYB;
I RGB;
I CMYK;
I HSV;
A. Blondin Masse (UQAM) 7 septembre 2016 28 / 44
Le systeme noir et blanc
I Sans doute le plus simple, base sur deux couleurs : noir etblanc;
I Dans ce systeme, chaque pixel a la valeur 0 ou 1;
I Si on veut obtenir des niveaux de gris, alors la valeur dupixel sera entre 0 et 1 (ou entre 0 et 255);
I Note : Plusieurs images de couleurs sont obtenues encombinant certaines images en noir et blanc.
A. Blondin Masse (UQAM) 7 septembre 2016 29 / 44
Le systeme RYB
I Un systeme utilise en peinture :
I R : red;
I Y : yellow;
I B : blue.
I Il ne permet cependant pas de reproduire le spectre descouleurs visibles par l’etre humain;
A. Blondin Masse (UQAM) 7 septembre 2016 30 / 44
Combinaisons de couleurs (RYB)
A. Blondin Masse (UQAM) 7 septembre 2016 31 / 44
Solution
A. Blondin Masse (UQAM) 7 septembre 2016 32 / 44
Le systeme RGB
I Il s’agit du systeme le plus connu en informatique :
I R : red;
I G : green;
I B : blue.
I Il y a des motivations physiques derriere ce choix : l’oeilhumain est plus sensible aux variations de couleursgenerees par ce systeme;
I On peut representer le noir (absence complete) et leblanc (presence complete).
A. Blondin Masse (UQAM) 7 septembre 2016 33 / 44
Combinaisons de couleurs (RGB)
A. Blondin Masse (UQAM) 7 septembre 2016 34 / 44
Solution
A. Blondin Masse (UQAM) 7 septembre 2016 35 / 44
Espace RGB
I Au niveau mathematique, une couleur correspond a unpoint
p ∈ [0, 1]3.
I Autrement dit, c’est un triplet dont les coordonnees sontentre 0 et 1.
A. Blondin Masse (UQAM) 7 septembre 2016 36 / 44
Le systeme CMYK
I Contrairement au systeme RGB, qui est additif, lesysteme CMYK est soustractif.
I Ce systeme est surtout utilise pour l’impression.
I En effet, dans la plupart des cas, on imprime sur du papierblanc (plutot que d’afficher sur un ecran noir).
I Autrement dit, on supprime les couleurs qu’on nesouhaite pas reflechir sur le papier.
A. Blondin Masse (UQAM) 7 septembre 2016 37 / 44
Combinaisons (CMYK)
A. Blondin Masse (UQAM) 7 septembre 2016 38 / 44
Images et videos
I Une image est simplement une fonction
I : [0, w]× [0, h]→ R3 : (u, v) 7→ couleur(u, v).
I Autrement dit, on associe a chaque pixel en position(u, v) une couleur (par exemple dans le systeme RGB).
I Un video est une suite d’images, c’est-a-dire unefonction de la forme
V : [0, w]× [0, h]× R→ R3 : (u, v, t) 7→ couleur(u, v, t),
ou t correspond au temps.
A. Blondin Masse (UQAM) 7 septembre 2016 39 / 44
Formats d’images
Formats bitmap :
I BMP (souvent non compresse);
I GIF;
I JPEG;
I PNG;
Formats vectoriels :
I PostScript/PS;
I PDF;
I SVG, etc.
A. Blondin Masse (UQAM) 7 septembre 2016 40 / 44
Formats videos
I GIF (dans un certain sens);
I AVI;
I MPEG;
I OGG;
I XVid;
I QuickTime, etc.
I Chacun de ces formats doit etre decompresse pour etre lu.
A. Blondin Masse (UQAM) 7 septembre 2016 41 / 44
Table des matieres
1. Presentation du cours
2. Introduction a l’infographie
3. Projections
4. Images et videos
5. Moteurs de jeu
A. Blondin Masse (UQAM) 7 septembre 2016 42 / 44
Moteur de jeu
I C’est un ensemble de fonctionnalites facilitant ledeveloppement de jeux videos;
I Permet egalement le developpement d’applicationsgraphiques quelconques;
I Il en existe un tres, tres grand nombre :
I Unity : C#;
I Unreal : C++;
I Phaser et Baylonjs : Javascript;
I XNA Microsoft : .NET/C#;
I Pygame, Panda3D, Blender Game Engine : Python.
A. Blondin Masse (UQAM) 7 septembre 2016 43 / 44
Dans le cours...
I Dans le cours, nous nous concentrerons sur Pygame etPanda3D :
I Meme langage de programmation que Blender;
I Projets open-source et sans redevances;
I Relativement faciles a apprendre.
I Pour vos projets, vous serez libre d’utiliser n’importe quelmoteur, en autant qu’une license gratuite soitdisponible (pour la correction).
A. Blondin Masse (UQAM) 7 septembre 2016 44 / 44