INTRODUCTION Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 9 septembre 2015 INF5071 - Infographie - UQAM
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
CHAPITRE 0
INTRODUCTION
Alexandre Blondin Massé
Département d'informatique
Université du Québec à Montréal
9 septembre 2015
INF5071 - Infographie
INFORMATIONS GÉNÉRALES
Titre du cours Infographie
Sigle INF5071
Enseignant Alexandre Blondin Massé
Mercredi, de 13h30 à 16h30 (magistral)
Horaire Vendredi, de 13h30 à 15h30 (laboratoire)
Site web http://thales.math.uqam.ca/~blondin/fr/inf5071
Démonstrateur Alexis Laferrière, étudiant au doctorat
DESCRIPTION DU COURS Connaître les algorithmes fondamentaux de l'infographie. Être capable de réaliser une application graphique simple à l'aide d'une bibliothèque graphique (par exemple, OpenGL). Rappels des notions de base en calcul vectoriel et en géométrie. Objets géométriques élémentaires. Codage des objets en deux et trois dimensions. Transformations linéaires en coordonnées homogènes. Composition de transformation. Transformation de perspective et modèles de représentation. Tracé de figures élémentaires. Représentation paramétrique des objets en trois dimensions (courbes de Bézier, B-splines). Fonctionnalités typiques offertes par les bibliothèques graphiques, par exemple, OpenGL. Autres sujets (selon le temps disponible) : modèle de lumière, espace de couleurs, surface de Bézier, lancer de rayons.
ÉLÉMENTS D'ÉVALUATION
Travaux pratiques (15% chacun)
TP1 : 2D
TP2 : 3D
En équipe de 2 ou 3
Devoir (10%)
Axé sur la théorie
Individuel
Examen (30%)
Porte sur l'ensemble de la matière
Toute documentation écrite permise
Projet (30%)
En équipe de 3 ou 4
Classement effectué par un jury
CONTENU Rappels sur HTML/CSS Introduction à Javascript Géométrie euclidienne (2D et 3D) Images Animations Systèmes physiques Fonctions de bruit et fractales Présentation de OpenGL Coordonnées homogènes Transformations de l'espace Scène et caméra Application de textures et shaders Effets de lumière
TECHNOLOGIES HTML/CSS (page web) Javascript (web dynamique) Markdown (documentation) Git (gestion d'un projet) Inkscape (conception d'images) OpenGL/WebGL (graphisme) Phaser.js (2D) three.js (3D)
RÉFÉRENCES OpenGL Superbible: Comprehensive Tutorial and Reference (blue book), par R. S. Wright, B. Lipchak et N. Haemel, 7e édition, 2015. OpenGL Programming Guide: The Official Guide to Learning OpenGL (red book), par D. Shreiner, G. Sellers, J. Kessenich et B. Licea-Kane, 8e édition, 2015. JavaScript: The Good Parts, par D. Crockford, 2008. Diving into HTML5, par M. Pilgrim, http://diveintohtml5.info/ 3D Computer Graphics, par A. Watt, Addison-Wesley, 1999. Fundamentals of Computer Graphics, par P. Shirley, M. Ashikhmin et S. Marschner. 3e édition. A K Peters/CRC Press, 2009.
PHASER.JS Projet open-source pour développer des jeux et des applications web Utilise Javascript Basé sur WebGL Site : http://phaser.io Liste de projets : http://pgl.ilinov.eu/
EXEMPLE [Code source]
HUECHUTE
BREAKOUT
SUPER GROCER
EXEMPLE MINIMALISTE (1/2)
La mise en place est très simple et ne requiert pratiquement
aucune installation.
Voici un exemple minimal.
1. Le code HTML
title
2. Le code CSS
body {
width: 100%
}HELLO, WORLD (2/2)
3. Le code Javascript
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game',
{preload: preload, create: create, update: update});
function preload() {
}
function create() {
game.add.text(340, 300, "Hello, world!", {fill: 'white'});
}
function update() {
}
Utilise OpenGL, qui est livré avec la plupart des systèmes
d'exploitation
Unique fichier à télécharger : phaser.js
Version compacte (minified) : phaser.min.jsTHREE.JS Un ensemble de fonctions Javascript permettant d'interfacer facilement avec WebGL Comme pour Phaser, un seul fichier à télécharger : three.js ou three.min.js Site : http://threejs.org/. Beaucoup d'exemples disponibles.
MOUVEMENT D'UN VÊTEMENT
SURFACES VARIÉES
CUBE AVEC TEXTURE
MINECRAFT
GÉNÉRATION DE TERRAINS
OISEAUX
PERSONNAGE HUMAIN
SHADERS
CHEVAUX
HTML5 C'est la 5e révision du standard HTML, finalisée en 2014. La dernière (HTML4) avait eu lieu en 1997 Lecture recommandée : Dive into HTML5, par Mark Pilgrim
HTML5 DÉFINIT UN ENSEMBLE DE
FONCTIONNALITÉS
Les canvas (pour dessiner)
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
Une meilleure standardisation des vidéo
La géolocalisation
Des éléments de formulaires plus actuels, etc.HTML5 EST RÉTROCOMPATIBLE Toute application web fonctionnant avec HTML4 fonctionnera avec HTML5 Les nouveaux éléments HTML5 s'adaptent aux anciens navigateurs Exemple: Date du départ: Sur les navigateurs modernes, un calendrier apparaît Sur les appareils mobiles, un autre type de calendrier apparaît Sur les anciens navigateurs, c'est une simple zone de texte
HTML5 EST SIMPLE À UTILISER
Il n'y a qu'un type de document :
C'est déjà très bien supporté
Chrome
Firefox
Safari
Opera
Appareils mobiles
Même Internet Explorer 9 !HTML5 DEVRAIT ÊTRE DURABLE
Tim Berners-Lee (fondateur du W3C), juillet 2009 :
"Today the Director announces that when the
XHTML 2 Working Group charter expires as
scheduled at the end of 2009, the charter will
not be renewed. By doing so, and by increasing
resources in the HTML Working Group, W3C
hopes to accelerate the progress of HTML5 and
clarify W3C’s position regarding the future of
HTML."DÉTECTION DU SUPPORT HTML5
Une bibliothèque libre très pratique est Modernizr
Support de canvas :
if (Modernizr.canvas) {
// on peut dessiner !
} else {
// pas de support natif de canvas
}
Support vidéo :
if (Modernizr.video) {
// on peut faire jouer un vidéo
} else {
// pas de vidéo natif
// essayons peut-être avec QuickTime ou Flash
}
Support en mode non connecté :
if (Modernizr.applicationcache) {
// l'application peut fonctionner en mode non connecté
} else {
// pas de support natif en mode non connecté
// il faut recourir à une solution extérieure
}CONCEPTS DE BASE EN
INFOGRAPHIE
En anglais : computer graphics
Référence : OpenGL Superbible (blue book)NOTRE PERCEPTION
(source OpenGL Superbible, 5e édition)
Superposition de deux images 2D
Notre cerveau extrapole ensuite pour nous donner une illusion de la
3DORDINATEURS ET 3D
Un écran d'ordinateur est une seule image sur une surface plane
Il est possible de simuler la 3D en utilisant des filtres de couleur
Problème : jusqu'à aujourd'hui, on n'arrive pas à éviter certains
effets chez plusieurs personnes :
Maux de tête
Étourdissements
Heureusement, certains éléments utilisés par nos yeux peuvent être
simulés :
Changement de couleurs
Textures
Ombres et lumière, etc.5 TECHNIQUES DE BASE
Toute image produite à l'aide d'un ordinateur utilise une combinaison
de 5 techniques de base :
Transformations de l'espace et projections
Tramage (en anglais, rasterization)
Réglage des couleurs (en anglais, shading)
Application de textures
Mélange d'images (en anglais, blending)TRANSFORMATIONS ET PROJECTIONS
Rendu d'un cube sur une surface plane
(source: OpenGL Superbible, 5e édition)TRAMAGE
Rendu d'un cube sur une surface plane avec tramage
(source: OpenGL Superbible, 5e édition)COULEURS AVEC TRAMAGE
Rendu coloré d'un cube sur une surface plane avec tramage
(source: OpenGL Superbible, 5e édition)EFFETS DE LUMIÈRE
Rendu coloré d'un cube sur une surface plane avec effet de lumière
(source: OpenGL Superbible, 5e édition)APPLICATION DE TEXTURES
Application de textures
(source: OpenGL Superbible, 5e édition)MÉLANGE D'IMAGES
Mélange d'images
(source: OpenGL Superbible, 5e édition)UTILISATION EN TEMPS RÉEL Simulation de vol Design assisté Architecture et planification urbaine Imagerie médicale Visualisation scientifique Cinéma Jeux vidéo
SHADERS Ce sont de petits programmes Ils interfacent avec les unités de traitement graphique (en anglais, graphics processing unit (GPU)) Hautement parallèles et donc très, très rapides Nous allons voir les shaders vers la fin du cours
Vous pouvez aussi lire
