Chapitre 1 : Introduction · 2020-05-15 · Chapitre 1 : Introduction Alexandre Blondin Mass e D epartement d’informatique Universit e du Qu ebec a Montr eal 6 septembre 2016 Infographie

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


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


mailto:[email protected]

http://lacim.uqam.ca/~blondin

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;


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.


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.


http://lacim.uqam.ca/~blondin/files/inf5071/aut2016/plan.pdf

http://lacim.uqam.ca/~blondin/files/inf5071/aut2016/plan.pdf

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.


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.


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.


Table des matieres



3. Projections

4. Images et videos

5. Moteurs de jeu


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;


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.


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;


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.


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.


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.


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.


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.


Table des matieres



3. Projections

4. Images et videos

5. Moteurs de jeu


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.


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


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.


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.


Projection axonometrique

I Aussi appelee pseudo-3D;

I Differentes variantes selon les angles choisis :trimetrique, isometrique, etc.


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)


https://en.wikipedia.org/wiki/Parallax_scrolling#/media/File:Parallax_scrolling_example_scene.gif

https://en.wikipedia.org/wiki/Parallax_scrolling.png

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)


http://www.zeldadungeon.net/2015/08/gossip-stone-what-makes-a-good-dungeon/

Table des matieres



3. Projections

4. Images et videos

5. Moteurs de jeu


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;


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.


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;


Combinaisons de couleurs (RYB)


Solution


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


Combinaisons de couleurs (RGB)


Solution


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.


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.


Combinaisons (CMYK)


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.


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.


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.


Table des matieres



3. Projections

4. Images et videos

5. Moteurs de jeu


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.


https://unity3d.com/

https://www.unrealengine.com/

http://phaser.io/

http://www.babylonjs.com/

https://www.microsoft.com/en-ca/download/details.aspx?id=23714

http://www.pygame.org/hifi.html

https://www.panda3d.org/

https://www.blender.org/manual/en/game_engine/index.html

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


Documents

Chapitre 1 : Introduction · 2020-05-15 · Chapitre 1 : Introduction Alexandre Blondin Mass e D epartement d’informatique Universit e du Qu ebec a Montr eal 6 septembre 2016 Infographie