Travail Pratique #2 Document de design
Transcript of Travail Pratique #2 Document de design
DÉPARTEMENTD'INFORMATIQUEUniversitéLaval
TravailPratique#2Documentdedesign
PRÉSENTÉPARYohanPoirier-GinterVincentCôté-GirouxMichaëlDodier
InfographieIFT-3100-H18
30Avril2018
#1Sommaire:
Lebutpremierd’applicationestd'explorerlestechniquesderenduparraytracing,etdonc
l'emphase a été mise sur les fonctionnalités de rendu. L'engin de raytracing a été
implémentéauniveauCPU,pourpermettreplusdefacilitéauxniveauxdel'ajoutd'effets
complexes comme l'illumination globale. Une interface minimale a été incluse pour
permettrel'explorationdesdifférentsparamètresdumoteurderendu.L'applicationaété
construire à l'aide d'Openframeworks pour l'affichage d'un viewport ainsi que de
l'interfacemaislamajoritédel'enginderenduaétéprogrammédefaçonindépendante,
incluantleseffetsdecameras,lesmatériaux,lescollisions,lesprimitivesgéométriqueset
le loop de rendu. Le but du projet est de faire une preuve de concept avec des
fonctionnalitéssemblablesàcelleduprogramme“Blender”.Onparleicid'êtrecapablede
fairedurendu3Dsupportantdeseffetsderaytracing,ainsiquelamanipulationd'objets
etdematériaux.Doncpourfairesimple,notreapplicationconsisteàpermettrelacréation
etl'éditiond'image3Detde«mesh»àl'aidedel'interfaceetd'unepanoplied'outilsde
dessinquipeuvententreautresafficherdessurfacesparamétriquesetgérerdeslumières.
Leslumièressurlascèneetleurscouleurs,lecomportementdes«shaders»derendu,les
propriétésdelacaméradelascèneainsiquelacouleurd’arrière-plandelascènesont
tousparamétrésetmodifiables.Ilestpossibled'ajusterlaluminositédel'imagerendueà
l'aided'unéditeurdecourbes,similaireàceuxoffertspardeslogicielsdemanipulation
photo comme "Photoshop". Les formes géométriques sont structurées dans plusieurs
niveaux de calques qui forment une structure de scène, avec lesquels l'utilisateur est
capable d'interagir afin de faire du traitement d'image et sur lesquels il est possible
d'appliquerdesfiltres.Àtraverscettestructurel'utilisateurpeutaussifairel’ajoutetla
sélectiond’éléments.Enplusdepermettreàl'utilisateurdegérerdefaçoninteractiveles
modesdevuesdansl'application.Aussi,l'applicationcomprenduneinterfacegraphique
quioffredelarétroactioninformativevisuelleàl’utilisateuretdescontrôlesinteractifs
pour influencer les états de l’application.
#2Interactivité:
L'utilisateurpeutinteragiravecleslumièresetlescamérasgrâceauxmenussurlecôté.
Onpeutencréerdenouvelle,etilestaussipossibledemanipulerceuxquiexistedéjà
grâceàlasouris.Ilsuffitsimplementdelessélectionnerdansl'environnementavecles
sourisetlesdéplacerenfaisanttraînerlecurseur.Surlemenudedroitel’utilisateurpeut
voirlesdifférentescouchesdelascène,cequicomprendsleslumières,lesplansainsique
lesformesgéométriquesexistante.Ilestpossibledelessélectionneroudelessupprimer
àtraverscemenu,ilsuffitsimplementdecliquersurl’élémentdésiré.Pourcontrôlerla
caméra,onpeututiliserlarouedelasourispourallerversl'avantouallerversl'arrière.
Onpeutaussisedéplacerdansleplanenfaisantun«Click&Drag»dansl'undesdeux
environnements.Onpeutaussiutiliserlebouton«Shift»avecun«Drag»pourfaireune
rotationautourdelasélection.
Différentsparamètresdel'enginderenduspeuventêtrecontrôlés,commelenombre
debondsmaximal,lacontributiondel'illuminationglobaleainsiqueleurnombrede
'samples',etc.Touteslesmodificationssontaffichéesentempsréelàl'aided'unbuffer
derenduprogressifinspirédeceluiajoutérécemmentdansBlenderetV-Ray.
Lesmétadonnéesdeslumièrescommelacouleur,l'intensité,lerayon,l’atténuationainsi
quel'ombragepeuventêtrecontrôlédirectementpar l'utilisateuràtravers lemenude
gauche.Ellessontmodifiablesgrâceauxcurseursdedéfilementétiquetéenconséquence.
#3Technologie:
L'applicationaétéconçuedansunenvironnementdetravailcréersousWindows10.
VisualStudio2015ainsiqueXcodeontétaientutiliséspourcréerl'application.Visual
Studio2015aétéutiliséspécifiquementpouraméliorerlafusionducodeentreles
membresdel'équipe.LalibrairieOfxDatGuiaétéutiliséepourfairel'interfacegraphique
del'applicationpuisqu’elleoffreplusdepossibilitésquecequiestoffertparlalibrairie
d'interfacegraphiqueofferteparopenFrameWork.LesshadersGLSLontétéutiliséspour
fairelesfiltresdisponiblesdansl'applicationainsiquepourfaireafficherlesboîtesen
modesurvol(boiteaffichéelorsdu“mouseover”). LesaddonsofXDatGuiet
ofXDelauneyontétéutiliséspourleprojet.
#4Compilations:
Voicilamarcheàsuivrepourêtrecapabledecompilerleprojet:
1) Installer openFrameWork 9.8. Le site officiel d'openFrameWork offre un guide
détaillépourl'installation.
2) Télécharger le module ofxDatGui. Le module en question est inclus dans le
documentderemisedanslerépertoireofDatGuimaisilpeutaussiêtretéléchargéàpartir
du GitHub de la librairie ofxDatGui (premier résultat dans Google en cherchant
«ofxDatGui»).
3) Copier lecontenudurépertoireofxDatGuidans lerépertoire“addons”quel'on
retrouve où openFrameWork a été installé (.....\of_v0.9.8_vs_release\addons.
4) CopierlecontenudurépertoireofxMathMesh-masterdanslerépertoire“addons”
quel'onretrouveoùopenFrameWorkaétéinstallé(.....\of_v0.9.8_vs_release\addons.
5) Télécharger le module ofxDelaunay. Le module en question est inclus dans le
documentde remisedans le répertoireofDelaunay,mais ilpeutêtre téléchargésur le
GitHub de la librairie ofxDelaunay (premier résultat dans Google en cherchant
«ofxDelaunay»).
6) CopierlecontenudurépertoireofxDelaunaydanslerépertoire“addons”quel'on
retrouveoùopenFrameWorkaétéinstallé(.....\of_v0.9.8_vs_release\addons.
7) S'assurer que le répertoire “ofxbraitsch” se trouve bien dans le répertoire
“\bin\data” du projet. S'il n'y est pas allé le chercher dans le répertoire ofxDatGui et
copier-ledanslerépertoire“\bin\data”duprojet.
8) Leprojetestprêtàêtrecompilé.S'ilnemarchepas,générerunnouveauprojet
avec leprojetgeneratord'openFrameWorket importer les fichiers .cppet .hduprojet
danscenouveauprojet.S'assurerquelesbonaddonssontactivés(voir#3).
#5Architecture:
L'applicationaétéconstruiteau-dessusd’Openframeworks,defaçonàêtreindépendante
des librairies qui viennent avec l'environnement. Notamment, les classes de vecteur,
matrices et de couleurs sont utilisées à travers l'application. Les classes ofNode et
ofCamerasonthéritéespourpermettrelamanipulationdesobjetsdelascène.Cependant,
ellessonttoujoursaccédéesàtraversdesclasseshéritéesoudestypedefs,defaçonà
permettre leur remplacement et à faciliter l'extension de l'application vers d'autres
plateformesoulibraires.Auniveaudelastructuredeclasses,onretrouveencoreunefois
lasuperclasseÉlémentquiretientlespropriétéspartagéespartouslesobjetsvisibles,soit
laposition,larotation,échelle.Touslesobjetspositionnablesdansl'espace3Dhéritent
de laclasse"élément",et implémentent laméthodevirtuelle 'draw'et 'intersect'pour
permettrel'affichagedansleviewportde"preview"ainsiquelasélection.Laclassescène
gère la sélectiondesobjetsainsique lespropriétésglobalesde l'application.Laclasse
“Shape” gère les attributs propres aux différentes formes, et contient un lien vers le
matériau de l'objet. En général, l'application fait énormément usage de l'héritage. Sa
structure est expliquée par le diagramme suivant:
On y remarque notamment les liens d'héritage et le lien d'appartenance entre les
différentsobjets.
#6Fonctionnalités:
6.1Pointdevue
L'applicationimplémenteunecaméradontlapositionetlarotationpeutêtrecontrôlée
defaçonsimilaireauxapplications3Dconventionnelles.
Ilestpossiblede'zoomer'aveclescrolldelasourisainsiquelesflèchesduclavier.On
peut également déplacer la caméra avec la souris et le clavier, tant en termes de
translationquederotation,etautourd'unesélection.
Controls:
-Scroll-wheelpour“zoomer”
-Click&Dragfor“panner”
-Shift-Click&Dragpourunerotationautourdelasélection
Deplus, ilestpossibledesélectionner leséléments3Davecunclickdelasourisetde
déplacercesderniersaveclesflèchesduclavier.Appuyersuraltpoureffectuerdesplus
petitsdéplacements.
La caméra supporte également d’autre paramètres comme la taille de l’ouverture et
l’oversampling des rayons primaires, qui influencent l’aspect du rendu. Un mode de
projectionorthographiqueestégalementsupportépourleviewport.
6.2Modedeprojection
Les modes de projection en perspective et orthographique sont supportés pour les
viewports. Il est possible to passer enmodeorthographique en appuyant à travers le
menuouenappuyantsur'u'.L'applicationeffectuedescalculsdeperspectivepourles
calculsdesrayonsprimairesdelacaméra,defaçonàéquivaloiràlamatricedeprojection
utiliséepourrendreleviewport.Deplus,leFOVestparamétriséetcontrôlableàpartirde
l'interface.
6.3Agencement
L'applicationoffredeuxvuesprincipales:
-Le'viewport'permettantl'affichageclairdesobjetsetpermettantlasélectiondeceux-
ci.
Cedernierestaffichéaubasdel'écran.
-Le'renderview'permettantl'affichagedubufferderenduetduprogrèsdel'algorithme
depathtracing.
Lerenduprogressifestsupporté,etdonclamiseàjourdecettevuesefaitencontinue.
Une interface est affichée autour de ces deux vues offrant les différents contrôles de
l'application.
6.4Occlusion
Des bounding volumes en forme de sphère sont utilisés au niveau de maillages
géométriquespouréviter les calculs superflusauniveaudes calculsd'intersectiondes
triangles. Lorsque l'intersection échoue avec la sphère englobant un ensemble de
triangles,cesdernierssont'cullés'etignorésparlerestedelaprocédure.
7.1Modèlesd’illumination
Lestroistypesdemodèlesl’illuminationstandards,soitlambert,phong,etblinn-phong
sont implémentésetutiliséspardifférentesclassesdematériaux.L’intensitédurehaut
spéculairepeutêtresélectionnéeparunparamètrede ‘specularglossiness’.Différents
effetspluscomplexessontajoutésàcesmodèlesdebasésetpeuventêtrecombinéspour
génererdeseffetsintéressants,commeparexempleunmélangederéflexiondiffuseet
spéculaire,etainsiquederefraction.Àcesmodèlessontajoutédel’illuminationglobales
paramétrisée(‘indirect’danslepanneau).
7.2Matériaux
Uninfinitédedifférentstypesdematériauxpeuventêtrecomposésenmélangeantles
différents paramtères du panneau ‘Materiaux’. Plusières classes ont été implémentés
pour des matériaux convientionnels comme l’effet mirroir, le verre, le plastique, etc.
Plusieursmatériauxsontdémontrésdanslascènechargéepardéfaut.
7.3Typesdelumière
Les quatre types de lumières paramétriques classiques sont offertes: Point Light,
DirectionalLight,SpotLight,AmbientLight.Celles-cipeuventêtredéplacéesdanslascène
et leur propriété de couleurmodifies. Leur contribution est calculée par rapport à la
position vis-à-vis la normale de la surface. Cette dernière est seulement ajoutée à
l'équationde rendu s’il n'y a pas d'objet intermédiaire bloquant les rayons le lumière
(shadowray).Deplus,leslumièressupportentuncontrôlede'taille'quipermetletracé
d'ombredouces«raytracées».Lenombredesamplesutiliséespourcescalculspeutêtre
contrôlléescarcetyped’ombrageestnotoirementlentàrendre.
7.5Lumièresmultiples
Ilestpossibled'ajouteruneinfinitédelumièresàlascèneetdecontrôlerleurposition
ainsiqueleurcouleur,leurintensitéetleuratténuationàpartirdel'interface.Lataillede
l’ombredoucheainsiquelenombredesamplespeutégalementêtrechoisi.(Note:avec
1seulsamplelesombresdoucesnesontpasactivées.
8.1Intersection
L'intersection entre les rayons et de nombreuses formes paramétriques comme les
sphères,lesplans,lesdisques,lesboîtesAABBetlestrianglessontsupportéesetontété
implémenter à la main. Ces dernières sont utilisées pour rendre et également pour
calculer la sélection et le culling des bounding volumes. Des maillages géométriques
peuventêtreformésàpartirdetrianglespourformerdesformespluscomplexes.
8.2Réflexion
Laréflexionparraytracingestimplémentée,etl’intensitédeceteffetpeutêtrecontrôllé
etmélangéauxautreseffetsdeshader.Puisquelaréflexionestunalgorithmerécursif,la
profondeurmaximaleestparamètréeetpeutêtrechosiedanslemenu‘Scène’.
8.3Réfraction
La réfraction est supportée naturellement par l'algorithme de ray tracing et offerte à
traversleparamètre'réfraction'desmatériaux.L'IORestégalementsupportéetpermet
decontrôlerl'anglederéfraction;lacontributiondecelle-ciestmoduléeparl'équation
de fresnel, ce qui permet plus de réalisme lorsque la réflexion et la réfraction sont
combinés.
8.4Ombrage
Lesombres simplespar shadowsont implémentéespour toutes les typesde lumières
primitivesappropriées.Enplus,desombresdoucescomplexespeuventêtreforméesavec
unparamètrede‘radius’deslumières,cequipermetdelecalculd’ombresraytracés.
8.5Illuminationglobale
Illuminationindirecteestsupportéedirectement,parraytracingMonteCarlo.Auxpoints
d'intersection,desrayonssecondairessont'samplés'dansl'hémisphèredelanormaleet
tracésrécursivementpourévaluerlalumièreincidentedefaçonréaliste.
9.1Courbecubique
L'application offre des contrôles d'ajustement de couleur, qui sont paramétrisés par
l'utilisateur via des courbes de contrôles. Celles-ci utilisent une courbe cubique pour
interpoler entre des points de contrôles spécifiés par l'usager, et ainsi contrôler
l'ajustementenplusd'afficherl'outildansl'interface.
9.2Courbeparamétrique
L'outilpermetégalementd'utiliser lecontrôleparcourbedeBézier,cequiestsouvent
pluspragmatique.Différentspointsdecontrôlespeuventêtrecréésetmanipulés.
9.3Surfaceparamétrique
Ce critère est implémenté dans l'application offre la possibilité d'afficher une surface
paramétrique de Bézier qui simule l'apparence du courbe de sinus. On l'affiche en
appuyantsurlebouton«Surfaceparamétrique»danslemenuduUI.
9.4Shaderdetesselation
Lasurfaceparamétriqueutilisedelatesselation.
9.5Triangulation
Enappuyantsurle«Toggle»TriangulationdansledossiercréationduGUI,ilestpossible
de créerdespoints auxendroitsoùon cliqueafinde créerdes triangles lorsque trois
points ou plus sont placés. L’algorithme utilisé est l’algorithme de triangulation de
Delaunay.
10.1Effetenpleinefenêtre
Descontrôlesdecorrectioncouleur(brightness)sontoffertsàl'utilisateurcequipermet
d'apporterdesajustementsfinauxàl’aspectdurendu.L'anticrénelageestsupportépar
oversamplingdespixelslorsduraycasting,cequiamélioregrandementlaqualitévisuelle
durendu.Finalement,uneffetdefloudelentilleestoffert,etimplémentéentraçantdes
rayonsprimairesàpartird'undisqueplutôtqued'unpointauniveaudel’originedela
caméra.
10.3BRDF
Lescapacitésd'illuminationglobaleutilisentuneéquationdeBRDFpourpondérerl'irra-
dianceselon l'angle incident lorsde lasommationde l'algorithmedeMonteCarlo.Un
modèlesimpleestimplémentémaislemêmeenginpeutfacilementsupporterdeséqua-
tionspluscomplexesparsimpleoverloadingdelafonction'BRDF'delaclasseShader.
10.4Renduendifféré
L'applicationimplémentedurenduprogressif,quipermetd'offredu'feedback'rapideà
l'utilisateurlorsderendusquisontparfoislong.Lespixelssontaccumulésdansunbuffer
quimaintientune'movingaverage'dessamplesjusqu'àprésent,etainsiilestpossiblede
voirdevoirunrésultatpréliminairedelascènemêmesiseulementquelquessamplesont
été calculés pour unpixel. L'écran est automatiquement rafraîchi lorsque la scène est
modifiée.
10.5Stylelibre:Multithreading
L'applicationimplémentedumultithreadingpouraccélérerlerendu.Différentsthreads
écrivent de façon concurrente sur le buffer de rendu. L'intégrité estmaintenuepar la
commutativitédel'ajoutde'samples';peuimportel'ordredanslesquelsilssontajoutés,
leurmoyenneseralamême.
Voiciuneséried’imagesgénéréesàpartirdenotreapplication:
#7.Ressources
Pourlesfonctionsrefraction()etfresnel()delaclassevendor.cpp,nousnousinspirerd’un
articlesurlesitesuivant:www.scratchapixel.com.
#8.Présentation
Vincent CôtéGiroux est diplômé du Cegep François-Xavier Garneau
depuisdécembre2015,à la recherched’unemploide technicienen
informatique.Mesréalisationsrémunéréesainsiquedestagiairem’ont
permis de démontrermes capacités de développeurWeb etmobile
avec l’approcheagile, etde soutienà la clientèledansunCentrede
servicestechnologiques.
YohanPoirier-GinteracomplétéunDECenAnimation3DauCégepde
Limoilou. Ilpoursuitdorénavantdivers intérêtsdont l’informatiqueà
traversunBACàl’UniversitéLaval.
MichaëlDodierestdiplôméduCégepdeThetforddepuisjuin2016.Ila
ensuitedébutésonBac.Eninformatiqueàl’universitéLaval.Parailleurs,
il travaille actuellement comme programmeur à temps partiel pour la
compagnieRéférenceSystèmesenplusdefairesescours.Ilsepassionne
plusparticulièrementpourledéveloppementd’applicationsweb.