Relazione Progetto Computer Graphics

Introduzione

Questo progetto è stato creato per il corso di computer Graphics, l'obiettivo di questo progetto è quello di padroneggiare l'utilizzo di WebGL, un'API JavaScript per il rendering di grafica interattiva 2D e 3D.
Nello specifico il progetto va a simulare una camminata all'interno di un bosco infestato da alcune entità, le quali (non appena ci avrenno notato) cercheranno di seguirci.

Interfaccia

L'interfaccia è stata studiata per poter essere fruita sia da pc che da dispositivi mobili, e risulta costituita da 3 principali sezioni:

• Interfaccia di gioco

  In questa zona vengono renderizzati i modelli e gli elementi di interfaccia necessari a fruire della simulazione.

  

  Nel caso in cui si dovesse avviare il progetto da dispositivo mobile tale zona sarà arricchia da una serie di pulsanti utili per poterlo utilizzare anche senza l'ausilio della tastiera

  

• Impostazioni

  All'interno di questa sezione sarà possibile modificare alcuni parametri del progetto, per esempio attivare/disattivare l'audio oppure modificando gli effetti da includere nel rendering della scena.

• Informazioni sul gioco

  

  In questa sezione è riportata la lista dei comandi per interagire con la simulazione affiancando l'azione con l'imput corrispondere da pc e mobile.
  
  

  informazioni aggiuntive

  • La barra in alto indica la "resistenza" del giocatore, se essa viene svuotata tutta il giocatore non potrà correre fino quando essa non si sarà rigenerata almeno in parte
  
  
  • Mantenendo la torcia accesa le entità riusciranno a notare il giocatore da più lontano

Rendering

Come visto nella sezione delle impostazioni è possibile influire sul rendering della scena, lo SHADER che arbitra il rendering include diversi effetti:

• Base

  senza attivare nessun effetto i modelli saranno caricati a schermo caratterizzati solo dalla loro geometria, il loro colore di base e (nel caso sia previsto) la loro texture.

• Shading

  attivando tale effetto la normale delle "faccette" che compongono i vari modelli sarà utilizzata per rappresentare come tale porzione (le faccette) dell'oggetto reagiscono alla luce.

• Shadows

  Rendering avanzato attivando tale effetto saranno renderizzate le ombre proiettate dagli oggetti che si trovano davanti alla luce, per implementare tale effetto si è fatto utilizzo della tecnica dello "Shadow Buffer"

• Normal Maps

  Rendering avanzato attivando tale opzione i modelli dotati di tale "Normal Map" saranno arricchiti di dettagli, in questa tecnica vengono utilizzate alcune speciali texture aggiuntive (chiamate per l'appunto "Normal Map") in esse i valori dei canali "rgb" di ogni pixel viene utilizzato per modifica le coordinate "xyz" della normale in quel punto corrispondente sull'oggetto.

• Reflections

  Rendering avanzato attivando tale opzione per illuminare un oggetto si terrà conto della posizione della luce e del punto di vista dell'osservatore in modo da rendere più realistica l'illuminazione di un oggetto aggiungendo all'illuminazione diffusa quella speculare.

Struttura

I file del progetto sono organizzati come segue:

• assets: cartella che contiene tutte le risorse utilizzate dal codice
  
  
  • audio: include tutte le tracce audio utilizzate per ricreare i suoni all'interno della simulazione
  
  
  • modelsOBJ: include i file .obj che rappresentano le geometrie delle mesh renderizzate, i file .mtl che contengono le informazioni sui materiali di tali mesh, le immagini utilizzate per texturizzare tali mesh e le normal map
  
  
  • skybox: include le immagini utilizzate per texturizzare la skybox
  
  
• Controller: cartella che contiene le strutture dati utilizzate per "impartire ordini"
  
  
  • audioController.js: utilizzato per regolare la riproduzione dei suoni
  
  
  • engineController.js: utilizzato per gestire gli input e specificare i settaggi verso l'engine
  
  
  • playerController.js: utilizzato per gestire gli input del giocatore nella simulazione
  
  
• Engine: cartella che contiene le strutture dati responsabili della gestione delle mesh e del loro rendering
  
  
  • engine.js: classe che si occupa dell'effettivo rendering a schermo delle mesh
  
  
  • objParser.js: metodi utilizzati per la lettura dei file che rappresentano le mesh
  
  
  • textureHelpers.js: metodi utilizzati per la creazione delle texture
  
  
• Model: cartella che contiene le strutture dati che definiscono la logica della simulazione
  
  
  • game.js: classe che definisce la dinamica della simulazione (es. comportamento delle entità, collisioni con gli oggetti, movimenti, ecc.)
  
  
  • meshTransformers.js: classi utilizzate per gestire le trasformazioni dei riferimenti spaziali all'interno della simulazione
  
  
  • utils.js: metodi di utilità per la logica della simulazione
  
  
• Index.css: contiene le indicazioni sullo stile dell'interfaccia principale
• Index.html: contiene le indicazioni sulla struttura dell'interfaccia principale e il codice degli shader program

Tutte le mesh utilizzate sono state scaricate da internet e successivamente modificate in Blender per amalgamarsi meglio allo stile del progetto, eccezione fatta per "mioTotem", il quale è stato interamente creato in Blender utilizzando una scansione 3D del mio volto.