introduction - lacimblondin/files/inf5071/aut2015/...9 septembre 2015 inf5071 - infographie...
TRANSCRIPT
![Page 1: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/1.jpg)
CHAPITRE0INTRODUCTION
AlexandreBlondinMasséDépartementd'informatique
UniversitéduQuébecàMontréal9septembre2015
INF5071-Infographie
![Page 2: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/2.jpg)
INFORMATIONSGÉNÉRALESTitreducours InfographieSigle INF5071Enseignant AlexandreBlondinMassé
HoraireMercredi,de13h30à16h30(magistral)Vendredi,de13h30à15h30(laboratoire)
SitewebDémonstrateur AlexisLaferrière,étudiantaudoctorat
http://thales.math.uqam.ca/~blondin/fr/inf5071
![Page 3: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/3.jpg)
DESCRIPTIONDUCOURSConnaîtrelesalgorithmesfondamentauxdel'infographie.Êtrecapablederéaliseruneapplicationgraphiquesimpleàl'aided'unebibliothèquegraphique(parexemple,OpenGL).Rappelsdesnotionsdebaseencalculvectorieletengéométrie.Objetsgéométriquesélémentaires.Codagedesobjetsendeuxettroisdimensions.Transformationslinéairesencoordonnéeshomogènes.Compositiondetransformation.Transformationdeperspectiveetmodèlesdereprésentation.Tracédefiguresélémentaires.Représentationparamétriquedesobjetsentroisdimensions(courbesdeBézier,B-splines).Fonctionnalitéstypiquesoffertesparlesbibliothèquesgraphiques,parexemple,OpenGL.Autressujets(selonletempsdisponible):modèledelumière,espacedecouleurs,surfacedeBézier,lancerderayons.
![Page 4: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/4.jpg)
ÉLÉMENTSD'ÉVALUATIONTravauxpratiques(15%chacun)
TP1:2DTP2:3DEnéquipede2ou3
Devoir(10%)AxésurlathéorieIndividuel
Examen(30%)Portesurl'ensembledelamatièreToutedocumentationécritepermise
Projet(30%)Enéquipede3ou4Classementeffectuéparunjury
![Page 5: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/5.jpg)
CONTENURappelssurHTML/CSSIntroductionàJavascriptGéométrieeuclidienne(2Det3D)ImagesAnimationsSystèmesphysiquesFonctionsdebruitetfractalesPrésentationdeOpenGLCoordonnéeshomogènesTransformationsdel'espaceScèneetcaméraApplicationdetexturesetshadersEffetsdelumière
![Page 6: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/6.jpg)
TECHNOLOGIESHTML/CSS(pageweb)Javascript(webdynamique)Markdown(documentation)Git(gestiond'unprojet)Inkscape(conceptiond'images)OpenGL/WebGL(graphisme)Phaser.js(2D)three.js(3D)
![Page 7: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/7.jpg)
RÉFÉRENCESOpenGLSuperbible:ComprehensiveTutorialandReference(bluebook),parR.S.Wright,B.LipchaketN.Haemel,7eédition,2015.OpenGLProgrammingGuide:TheOfficialGuidetoLearningOpenGL(redbook),parD.Shreiner,G.Sellers,J.KessenichetB.Licea-Kane,8eédition,2015.JavaScript:TheGoodParts,parD.Crockford,2008.DivingintoHTML5,parM.Pilgrim,3DComputerGraphics,parA.Watt,Addison-Wesley,1999.FundamentalsofComputerGraphics,parP.Shirley,M.AshikhminetS.Marschner.3eédition.AKPeters/CRCPress,2009.
http://diveintohtml5.info/
![Page 8: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/8.jpg)
PHASER.JSProjetopen-sourcepourdévelopperdesjeuxetdesapplicationswebUtiliseJavascriptBasésurWebGLSite:Listedeprojets:
http://phaser.iohttp://pgl.ilinov.eu/
![Page 9: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/9.jpg)
EXEMPLE
[Codesource]
![Page 13: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/13.jpg)
EXEMPLEMINIMALISTE(1/2)Lamiseenplaceesttrèssimpleetnerequiertpratiquementaucuneinstallation.Voiciunexempleminimal.
1. LecodeHTML
2. LecodeCSS
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div id="game"></div> </body></html>
body { width: 100%}
![Page 14: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/14.jpg)
HELLO,WORLD(2/2)
3. LecodeJavascript
UtiliseOpenGL,quiestlivréaveclaplupartdessystèmesd'exploitationUniquefichieràtélécharger:Versioncompacte(minified):
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() {}
phaser.jsphaser.min.js
![Page 15: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/15.jpg)
THREE.JSUnensembledefonctionsJavascriptpermettantd'interfacerfacilementavecWebGLCommepourPhaser,unseulfichieràtélécharger: ou
Site: .Beaucoupd'exemplesdisponibles.
three.jsthree.min.js
http://threejs.org/
![Page 25: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/25.jpg)
HTML5C'estla5erévisiondustandardHTML,finaliséeen2014.Ladernière(HTML4)avaiteulieuen1997Lecturerecommandée: ,parMarkPilgrimDiveintoHTML5
![Page 26: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/26.jpg)
HTML5DÉFINITUNENSEMBLEDEFONCTIONNALITÉS
Lescanvas(pourdessiner)
Unemeilleurestandardisationdesvidéo
Lagéolocalisation
Desélémentsdeformulairesplusactuels,etc.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas><script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);</script>
![Page 27: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/27.jpg)
HTML5ESTRÉTROCOMPATIBLE
TouteapplicationwebfonctionnantavecHTML4fonctionneraavecHTML5
LesnouveauxélémentsHTML5s'adaptentauxanciensnavigateurs
Exemple:<input type="date">
Datedudépart:
Surlesnavigateursmodernes,uncalendrierapparaît
Surlesappareilsmobiles,unautretypedecalendrierapparaît
Surlesanciensnavigateurs,c'estunesimplezonedetexte
![Page 28: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/28.jpg)
HTML5ESTSIMPLEÀUTILISER
Iln'yaqu'untypededocument:
C'estdéjàtrèsbiensupporté
ChromeFirefoxSafariOperaAppareilsmobilesMêmeInternetExplorer9!
<!DOCTYPE html>
![Page 29: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/29.jpg)
HTML5DEVRAITÊTREDURABLETimBerners-Lee(fondateurduW3C),juillet2009:
"TodaytheDirectorannouncesthatwhentheXHTML2WorkingGroupcharterexpiresasscheduledattheendof2009,thecharterwill
notberenewed.Bydoingso,andbyincreasingresourcesintheHTMLWorkingGroup,W3C
hopestoacceleratetheprogressofHTML5andclarifyW3C’spositionregardingthefutureof
HTML."
![Page 30: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/30.jpg)
DÉTECTIONDUSUPPORTHTML5
Unebibliothèquelibretrèspratiqueest
Supportdecanvas:
Supportvidéo:
Supportenmodenonconnecté:
Modernizr
if (Modernizr.canvas) { // on peut dessiner !} else { // pas de support natif de canvas}
if (Modernizr.video) { // on peut faire jouer un vidéo} else { // pas de vidéo natif // essayons peut-être avec QuickTime ou Flash}
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}
![Page 31: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/31.jpg)
CONCEPTSDEBASEENINFOGRAPHIEEnanglais:computergraphics
Référence:OpenGLSuperbible(bluebook)
![Page 32: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/32.jpg)
NOTREPERCEPTION
(sourceOpenGLSuperbible,5eédition)
Superpositiondedeuximages2DNotrecerveauextrapoleensuitepournousdonneruneillusiondela3D
![Page 33: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/33.jpg)
ORDINATEURSET3DUnécrand'ordinateurestuneseuleimagesurunesurfaceplaneIlestpossibledesimulerla3DenutilisantdesfiltresdecouleurProblème:jusqu'àaujourd'hui,onn'arrivepasàévitercertainseffetschezplusieurspersonnes:
MauxdetêteÉtourdissements
Heureusement,certainsélémentsutilisésparnosyeuxpeuventêtresimulés:
ChangementdecouleursTexturesOmbresetlumière,etc.
![Page 34: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/34.jpg)
5TECHNIQUESDEBASETouteimageproduiteàl'aided'unordinateurutiliseunecombinaison
de5techniquesdebase:
Transformationsdel'espaceetprojectionsTramage(enanglais,rasterization)Réglagedescouleurs(enanglais,shading)ApplicationdetexturesMélanged'images(enanglais,blending)
![Page 35: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/35.jpg)
TRANSFORMATIONSETPROJECTIONS
Rendud'uncubesurunesurfaceplane
(source:OpenGLSuperbible,5eédition)
![Page 36: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/36.jpg)
TRAMAGE
Rendud'uncubesurunesurfaceplaneavectramage
(source:OpenGLSuperbible,5eédition)
![Page 37: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/37.jpg)
COULEURSAVECTRAMAGE
Renducoloréd'uncubesurunesurfaceplaneavectramage
(source:OpenGLSuperbible,5eédition)
![Page 38: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/38.jpg)
EFFETSDELUMIÈRE
Renducoloréd'uncubesurunesurfaceplaneaveceffetdelumière
(source:OpenGLSuperbible,5eédition)
![Page 39: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/39.jpg)
APPLICATIONDETEXTURES
Applicationdetextures
(source:OpenGLSuperbible,5eédition)
![Page 40: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/40.jpg)
MÉLANGED'IMAGES
Mélanged'images
(source:OpenGLSuperbible,5eédition)
![Page 41: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/41.jpg)
UTILISATIONENTEMPSRÉELSimulationdevolDesignassistéArchitectureetplanificationurbaineImageriemédicaleVisualisationscientifiqueCinémaJeuxvidéo
![Page 42: INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie INFORMATIONS GÉNÉRALES Titre du cours Infographie Sigle INF5071 Enseignant Alexandre Blondin](https://reader034.vdocuments.mx/reader034/viewer/2022042318/5f07d10e7e708231d41ee502/html5/thumbnails/42.jpg)
SHADERSCesontdepetitsprogrammesIlsinterfacentaveclesunitésdetraitementgraphique(enanglais,graphicsprocessingunit(GPU))Hautementparallèlesetdonctrès,trèsrapidesNousallonsvoirlesshadersverslafinducours