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.