INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie...
42
CHAPITRE 0 INTRODUCTION Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 9 septembre 2015 INF5071 - Infographie
Transcript of INTRODUCTION - LACIMblondin/files/inf5071/aut2015/...9 septembre 2015 INF5071 - Infographie...
CHAPITRE0INTRODUCTION
AlexandreBlondinMasséDépartementd'informatique
UniversitéduQuébecàMontréal9septembre2015
INF5071-Infographie
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
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.
É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
CONTENURappelssurHTML/CSSIntroductionàJavascriptGéométrieeuclidienne(2Det3D)ImagesAnimationsSystèmesphysiquesFonctionsdebruitetfractalesPrésentationdeOpenGLCoordonnéeshomogènesTransformationsdel'espaceScèneetcaméraApplicationdetexturesetshadersEffetsdelumière
TECHNOLOGIESHTML/CSS(pageweb)Javascript(webdynamique)Markdown(documentation)Git(gestiond'unprojet)Inkscape(conceptiond'images)OpenGL/WebGL(graphisme)Phaser.js(2D)three.js(3D)
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/
PHASER.JSProjetopen-sourcepourdévelopperdesjeuxetdesapplicationswebUtiliseJavascriptBasésurWebGLSite:Listedeprojets:
http://phaser.iohttp://pgl.ilinov.eu/
EXEMPLE
[Codesource]
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%}
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
THREE.JSUnensembledefonctionsJavascriptpermettantd'interfacerfacilementavecWebGLCommepourPhaser,unseulfichieràtélécharger: ou
Site: .Beaucoupd'exemplesdisponibles.
three.jsthree.min.js
http://threejs.org/
HTML5C'estla5erévisiondustandardHTML,finaliséeen2014.Ladernière(HTML4)avaiteulieuen1997Lecturerecommandée: ,parMarkPilgrimDiveintoHTML5
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>
HTML5ESTRÉTROCOMPATIBLE
TouteapplicationwebfonctionnantavecHTML4fonctionneraavecHTML5
LesnouveauxélémentsHTML5s'adaptentauxanciensnavigateurs
Exemple:<input type="date">
Datedudépart:
Surlesnavigateursmodernes,uncalendrierapparaît
Surlesappareilsmobiles,unautretypedecalendrierapparaît
Surlesanciensnavigateurs,c'estunesimplezonedetexte
HTML5ESTSIMPLEÀUTILISER
Iln'yaqu'untypededocument:
C'estdéjàtrèsbiensupporté
ChromeFirefoxSafariOperaAppareilsmobilesMêmeInternetExplorer9!
<!DOCTYPE html>
HTML5DEVRAITÊTREDURABLETimBerners-Lee(fondateurduW3C),juillet2009:
"TodaytheDirectorannouncesthatwhentheXHTML2WorkingGroupcharterexpiresasscheduledattheendof2009,thecharterwill
notberenewed.Bydoingso,andbyincreasingresourcesintheHTMLWorkingGroup,W3C
hopestoacceleratetheprogressofHTML5andclarifyW3C’spositionregardingthefutureof
HTML."
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}
CONCEPTSDEBASEENINFOGRAPHIEEnanglais:computergraphics
Référence:OpenGLSuperbible(bluebook)
NOTREPERCEPTION
(sourceOpenGLSuperbible,5eédition)
Superpositiondedeuximages2DNotrecerveauextrapoleensuitepournousdonneruneillusiondela3D
ORDINATEURSET3DUnécrand'ordinateurestuneseuleimagesurunesurfaceplaneIlestpossibledesimulerla3DenutilisantdesfiltresdecouleurProblème:jusqu'àaujourd'hui,onn'arrivepasàévitercertainseffetschezplusieurspersonnes:
MauxdetêteÉtourdissements
Heureusement,certainsélémentsutilisésparnosyeuxpeuventêtresimulés:
ChangementdecouleursTexturesOmbresetlumière,etc.
5TECHNIQUESDEBASETouteimageproduiteàl'aided'unordinateurutiliseunecombinaison
de5techniquesdebase:
Transformationsdel'espaceetprojectionsTramage(enanglais,rasterization)Réglagedescouleurs(enanglais,shading)ApplicationdetexturesMélanged'images(enanglais,blending)
TRANSFORMATIONSETPROJECTIONS
Rendud'uncubesurunesurfaceplane
(source:OpenGLSuperbible,5eédition)
TRAMAGE
Rendud'uncubesurunesurfaceplaneavectramage
(source:OpenGLSuperbible,5eédition)
COULEURSAVECTRAMAGE
Renducoloréd'uncubesurunesurfaceplaneavectramage
(source:OpenGLSuperbible,5eédition)
EFFETSDELUMIÈRE
Renducoloréd'uncubesurunesurfaceplaneaveceffetdelumière
(source:OpenGLSuperbible,5eédition)
APPLICATIONDETEXTURES
Applicationdetextures
(source:OpenGLSuperbible,5eédition)
MÉLANGED'IMAGES
Mélanged'images
(source:OpenGLSuperbible,5eédition)
UTILISATIONENTEMPSRÉELSimulationdevolDesignassistéArchitectureetplanificationurbaineImageriemédicaleVisualisationscientifiqueCinémaJeuxvidéo
SHADERSCesontdepetitsprogrammesIlsinterfacentaveclesunitésdetraitementgraphique(enanglais,graphicsprocessingunit(GPU))Hautementparallèlesetdonctrès,trèsrapidesNousallonsvoirlesshadersverslafinducours
![[infographie] : rayonner à l'international avec le digital](https://static.fdocuments.us/doc/165x107/559e9e381a28abcd048b471b/infographie-rayonner-a-linternational-avec-le-digital.jpg)
