Progetto implementato da Arianna Arruzzoli - 0001145336
Descrizione del progetto
Il progetto "Red Submarine - Under the Sea" qui presentato è stato sviluppato per l'esame di Computer Graphics nel corso dell'Anno Accademico 2023/2024.
Il progetto prevede lo sviluppo di un'applicazione interattiva implementata utilizzando la grafica 3D, tramite la libreria grafica WebGL.
In particolare in questo progetto si è scelto di sviluppare un semplice minigioco, all'interno del quale l'utente deve controllare il sottomarino rosso per muoversi nel fondale oceanico e recuperare tesori.
Under the Sea
L'obbiettivo del gioco è di esplorare i fondali oceanici alla ricerca delle chiavi perdute, indispensabili per aprire un antico forziere del tesoro nascosto.
L'utente dovrà quindi governare il sottomarino utilizzando la tastiera, i pulsanti messi a disposizione, oppure il cursore del mouse, cercando di districarsi tra i vari ostacoli che si presenteranno. In particolare in questa prima versione si è scelto di utilizzare come ostacoli mobili degli squali, che se entrano a contatto con il sottomarino, causano la fine del gioco.
Una volta raccolte tutte le chiavi, comparirà sul fondale un forziere, il quale può essere aperto esclusivamente quando il sottomarino si trova di fronte ad esso, cliccando sul tesoro.
L'interfaccia di gioco presenta inoltre, degli slider che possono essere utilizzati dall'utente per selezionare:
L'interfaccia si presenta suddivisa in due sezioni principali: la sezione a sinistra illustre le istruzioni per i comandi di gioco; la sezione di destra presenta invece la schermata di gioco con al di sotto i pulsanti per muovere il sottomarino e le impostazioni di gioco.
Le impostazioni di gioco permettono di regolare gli elementi della vista oppure per regolare le dinamiche di gioco.
La sezione di destra tenta di ricordare una console di videogioco simile al GameBoy.
Per l'implementazione dei comandi di gioco, si è scelto di utilizzare i comandi più comunemente diffusi all'interno dei videogiochi: i tasti WASD.
Oltre ai soliti movimenti di avanzamento e retrocessione sono state aggiunte le funzionalità di immersione (dive) ed emersione (emerge) per permettere una rappresentazione più realistica dei movimenti di un sottomarino.
L'interfaccia mette a disposizione dei pulsanti che permettono di muovere il sottomarino senza la necessità di una tastiera. Inoltre vi è la possibilità di attivare la modalità mouse che permetterà di guidare il sottomarino semplicemente spostando il cursore sul canvas.
Struttura del progetto
Il file index.html rappresenta l'unico punto di accesso al videogioco. La pagina comprende il canvas all'interno del quale viene reindirizzata la grafica, le istruzioni per il gioco e i controller per utilizzarlo.
All'interno della pagina sono definiti i Vertex Shader e i Fragment Shader utilizzati durante il rendering. Inoltre, sono richiamate le due librerie utilizzare, ovvero webgl-utils.js e m4.js, assieme allo script principale, ovvero il file code-webgl.js .
Il file code-webgl.js, presente all'interno della cartella src, contiene la funzione main() e la funzione render(), utilizzate per il disegno all'interno del canvas.
La cartella src contiene al suo interno tutti gli script javascript necessari per il funzionamento dell'applicazione.
Come introdotto precedentemente il file che unisce la gestione degli elementi grafici e la logica con la quali questi sono gestiti è il file code-webgl.js
Per rendere più modulare il codice, sono stati generati degli script ausiliari al fine di delegare i compiti all'interno delle funzioni e rendere il codice più organizzato.
La cartella res contiene al suo interno tutti i file inerenti alle mesh renderizzate.
Sono presenti tutti i file .obj e .mtl dei singoli oggetti. Questi file sono stati tutti creati tramite blender, utilizzando delle texture scaricate dal sito Poly Haven.
L'unica mesh scaricata dal sito Free3D è la mesh dello squalo, visualizzabile qui.
Per gestire al meglio le animazioni del sottomarino, il corpo del sottomarino e le eliche sono state definite come due mesh separate che si muovono l'una in funzione dell'altra.
Le mesh della chiave del tesoro e dello squalo vengono lette una singola volta e poi moltiplicate a richiesta.
La cartella res contiene al suo interno:
Scelte effettuate
Quasi tutte le mesh sono state create su blender, al fine di ottenere dei file .obj e .mtl che fossero leggeri, data la richiesta di ottenere una consegna di al massimo 20MB.
Per pura comodità si è scelto di lasciare all'utente la possibilità di attivare e disattivare le ombre e trasparenze.
Inoltre l'utente può impostare la luminosità della luce a suo piacimento, senza modificare o incidere sulle componenti diffuse o speculari utilizzate all'interno il calcolo del modello di illuminazione.
Per ottenere delle animazioni omogenee si è deciso di suddividere l'aggiornamento di eventuali traslazionio o rotazioni.
All'interno della funzione draw() sono infatti presenti solo le rotazioni continue, relative alle eliche del sottomarino e alle chiavi fluttuanti. Le altre animazioni sono invece gestite all'interno del render per avere un maggiore controllo sui specifici oggetti.
Funzionalità WebGL utilizzate
Le funzionalità implementate sono state sviluppate seguendo le guide di WebGL Fundamentals
Il normal mapping è una tecnica utilizzata per aggiungere dettagli superficiali (come rugosità e imperfezioni) senza aumentare il numero di poligoni. Il frammento legge i valori dalla normal map, una texture che contiene vettori normali perturbati in spazio tangente. Questi vettori sono trasformati nello spazio del mondo mediante la matrice TBN. Il risultato è una normale dettagliata che varia in base alla texture, simulando dettagli complessi sulla superficie del modello.
Per l'illuminazione della scena, viene utilizzato il modello di illuminazione di Phong, al fine di avere una resa più completa della scena.
Il modello viene implementato mantenendo la il paradigma dei tre componenti: luce ambiente, componente della riflessione diffusa e componente della riflessione speculare.
Il fattore ambient light fornisce una base luminosa costante.
La componente di illuminazione diffusa viene calcolata come il prodotto scalare tra la normale della superficie e la direzione della luce. Rappresenta l'intensità della luce che colpisce direttamente la superficie, influenzando la luminosità del frammento. Viene utilizzata per la resa dei materiali opachi.
La componente di illuminazione speculare viene calcolata usando l'half-vector, che è la direzione a metà tra la direzione della luce e quella della vista. L'intensità della componente speculare dipende dall'angolo di riflessione rispetto all'osservatore ed è controllata dal parametro di lucentezza (o esponente di Phong), che determina la concentrazione del riflesso. Il risultato è una brillantezza simile a quella del metallo o di superfici lucide.
Per ottenere la resa delle ombre proiettate dagli oggetti su una superficie, si è scelto di utilizzare l'algoritmo Shadow Buffer.
L'algoritmo prevede la memorizzazione della profondità degli oggetti rispetto il punto di vista della luce. Successivamente, viene effettuato il rendering dal punto di vista dell'osservatore, ovvero della camera.
Al momento del rendering si va a verificare se il punto considerato sia presente o meno all'interno dello Z-Buffer della luce, nel caso in cui questo non sia presente significherà che il punto non è visibile dal punto di vista della luce e risulta quindi essere in ombra.
L'effetto nebbia prevede l'aggiunta di un colore che incrementa di opacità rispetto alla distanza. Poichè il fondale è finito come oggetto, l'effetto nebbia permette di contenere le possibili mosse dell'utente riducendo la visibilità man a mano che ci si avvicina ai confini del fondale.
Nelle ultime righe del Fragment Shader viene aggiunto questo color Indigo, simile al colore della Skybox utilizzata, per creare l'illusione di un fondale infinito.
