Documentazione del progetto
Progetto per il corso - Computer Graphics
Luca Polese - Matricola 0001136728
Repository su GithubIntroduzione
La presente relazione contiene una descrizione di quanto realizzato per il progetto del corso di Computer Graphics dell'Università di Bologna. L'obiettivo è quello di sviluppare una 3D-WebApp usando tecnologie quali HTML5, CSS3, contesto WebGL e linguaggi Javascript e GLSL. Il progetto A glimpse of city permette all'utente di interagire con un ambiente 3D immersivo. L'esperienza interattiva 3D dev'essere composta da almeno un oggetto principale di tipo mesh poligonale caricato da file (OBJ Wavefront), inserito in una scenografia con illuminazione e texture ad hoc. Per questa specifica applicazione, il focus principale è stato quello di offrire un'esperienza visiva che permetta agli utenti di esplorare e interagire con un modello 3D di una città virtuale attraverso un'interfaccia utente responsive. Questo progetto è stato originariamente pensato per essere utilizzato da differenti tipologie di dispositivi ed è stato testato in particolare in ambito desktop e mobile.
Il progetto è disponibile al seguente link
Può essere anche visualizzato online nel seguente sito
Informazioni generali sul progetto
Modalità di caricamento
All'avvio, viene mostrata una finestra di caricamento per garantire una transizione fluida e informare l'utente che il contenuto è in fase di preparazione.
Menu laterale
Il menu laterale versatile fornisce opzioni di configurazione per personalizzare l'esperienza dell'utente. Le impostazioni includono la posizione della luce e le opzioni per abilitare/disabilitare effetti come le normali, la trasparenza e i riflessi.
Interazione Utente
Sono disponibili vari controlli per l'interazione, inclusi pulsanti per la navigazione e le impostazioni, e un pannello per i controlli mobili. Le azioni come il movimento, la rotazione della telecamera e il reset della posizione dell'utente sono gestibili tramite comandi specifici.
Script realizzati
In seguito vengono elencati tutti i file JavaScript realizzati per il progetto.
Ognuna delle card è un link che porta alla pagina relativa che ne documenta il contenuto.
generalUtils.js
Raccolta di funzioni ad uso generico per la gestione di eventi per l'interfaccia grafica o funzioni utilizzate in molteplici documenti JavaScript.
geometryUtils.js
Raccolta di funzioni per la gestione di movimento e rotazione della telecamera. Studiato per input da tastiera, mouse, touchscreen e gamepad.
index.js
File JavaScript principale del progetto. Gestisce il rendering della scena, carica i modelli OBJ e aggiorna la posizione della telecamera e l'illuminazione in tempo reale.
objUtils.js
Raccolta di funzioni per caricare e interpretare file OBJ e MTL per visualizzare modelli 3D in WebGL. Gestisce geometrie, materiali e texture, preparando i dati per la renderizzazione.
skybox.js
Raccolta di funzioni utilizzate per creare e visualizzare una skybox 3D, caricando immagini su una cubemap e renderizzando uno sfondo panoramico attorno alla scena.
textureUtils.js
Script per creare e gestire texture, per il normal mapping e controllare opzioni di rendering.
Richieste grafiche
Richieste obbligatorie soddisfatte
- Geometria 3D visualizzata in proiezione prospettica;
- Input utente: l'utente può interagire usando indipendentemente tastiera e mouse;
- Gli oggetti 3D devono essere illuminati da una luce;
- Texture mapping: nel progetto sono inseriti molteplici oggetti 3D che hanno una propria texture applicata ed è stato aggiunto un banner con la foto dell'autore del progetto;
- È stato creato ad hoc un pannello su schermo che prevede tramite slider e checkbox di attivare o disattivare metodi avanzati di rendering e di modificare il posizionamento della luce;
- La piattaforma è fruibile anche da un dispositivo mobile tramite dei bottoni che possono essere cliccati dall'utente per potersi muovere nello spazio, cambiare direzione e ripristinare posizione iniziale e luce;
Richieste opzionali soddisfatte
- Input utente: l'utente può interagire usando un gamepad (testato nello specifico con controller PS4);
- Rendering avanzati: Da menù è possibile attivare/disattivare le tecniche di rendering avanzato trasparenze, riflessioni, normal mapping.
Esecuzione del progetto
Per eseguire il presente progetto è necessario utilizzare un server web locale. Sebbene sia possibile aprire direttamente i file .html in un browser, questo metodo potrebbe non funzionare correttamente quando vengono caricate risorse esterne.
Se si vuole utilizzare Visual Studio Code (VSCode) come editor, è possibile installare l'estensione Live Server. Questa estensione permette di avviare rapidamente un server web locale direttamente dall'editor. Una volta installata l'estensione, basta cliccare con il tasto destro sul file .html e selezionare "Open with Live Server" per avviare il server e visualizzare il progetto nel browser. Questa soluzione non solo permette di caricare correttamente tutte le risorse esterne, ma facilita anche il processo di sviluppo grazie all'aggiornamento automatico delle modifiche apportate al codice.
Oltre all'utilizzo di Visual Studio Code, esistono altre modalità per aprire un server web locale, che possono essere utilizzate. Una delle modalità più classiche consiste nell'utilizzare Python, che offre un server HTTP semplice e immediato.
Se hai Python installato sul tuo sistema, puoi aprire un terminale e navigare fino alla directory del progetto. Per navigare fino alla cartella specifica si può usare il comando cd seguito dal percorso della cartella. Ad esempio:
cd /percorso/della/cartella
Per Python 3:
python -m http.server
Per Python 2:
python -m SimpleHTTPServer
http://localhost:8000. Questo metodo non richiede l'installazione di ulteriori software o estensioni.
Interfaccia grafica
L'interfaccia grafica del progetto è stata sviluppata con l'obiettivo di garantire una fruizione ottimale sia su PC che su dispositivi mobili, offrendo un'esperienza d'uso intuitiva e coinvolgente. La struttura dell'interfaccia è suddivisa in piattaforma, tasti di movimento e impostazioni. Ciascuna dedicata a funzioni specifiche che permettono all'utente di interagire con il simulatore in modo personalizzato.
Piattaforma (città)
La sezione principale dell'interfaccia è dedicata alla visualizzazione della simulazione, dove vengono renderizzati i modelli e gli elementi necessari per un'interazione dinamica.
Interfaccia grafica su dispositivo desktop
Interfaccia grafica su dispositivo mobile
Su dispositivi mobili, l'interfaccia di gioco è ulteriormente arricchita da una serie di pulsanti touch, che consentono di gestire tutte le funzionalità senza la necessità di una tastiera fisica. Questo approccio rende l'esperienza fluida e accessibile, indipendentemente dal dispositivo utilizzato.
Tasti di movimento
L'utente può muoversi all'interno dello spazio utilizzando tre modalità principali di controllo: tastiera, mouse e gamepad. Ogni modalità offre un'esperienza di controllo differente, consentendo all'utente di scegliere quella più adatta alle proprie abitudini. In questa sezione vengono fornite dettagliate istruzioni su come interagire con la simulazione, suddivise in base al dispositivo utilizzato. Qui è possibile trovare una lista completa dei comandi, affiancata dalle relative azioni che possono essere eseguite tramite tastiera, mouse o controller:
Tastiera
per muoversi in avanti
per muoversi a sinistra
per muoversi all'indietro
per muoversi a destra
per ruotare la camera a sinistra
per ruotare la camera a destra
per resettare luci e posizione dell'utente
Mouse
Il mouse offre un controllo preciso della visuale, con la rotazione della telecamera attivabile tramite il movimento del mouse stesso.Rotella del mouse per fare zoom
Click and Drag per ruotare la camera con il mouse
Gamepad
Il gamepad offre un'esperienza di gioco simile a quella delle console, con il movimento del personaggio e la rotazione della telecamera gestito tramite le levette del joystick. Anche in questa modalità è possibile resettare la posizione delle luci e dell'utente.Levetta sinistra per spostare l'utente nello spazio
Levetta destra per ruotare la camera dell'utente
per resettare luci e posizione dell'utente
Impostazioni
Tutti i comandi e le impostazioni del progetto possono essere visualizzate nell'apposito menu laterale. L'utente ha la possibilità di personalizzare vari aspetti del progetto. Tra le opzioni disponibili, regolare la posizione delle luci, selezionare le preferenze per il rendering della scena e visualizzare i comandi. Queste impostazioni sono facilmente accessibili e permettono di adattare l'esperienza alle proprie esigenze e preferenze.
Interfaccia grafica su dispositivo desktop
Interfaccia grafica su dispositivo mobile
Rendering Avanzato
Il progetto offre la possibilità di attivare diverse tecniche di rendering avanzato per migliorare la qualità visiva della scena. Queste opzioni sono facilmente accessibili tramite il menu laterale e permettono all'utente di personalizzare l'esperienza sulla piattaforma in base alle proprie preferenze. Le tecniche di rendering avanzato adottate sono:
Interfaccia grafica su dispositivo desktop
Interfaccia grafica su dispositivo mobile
Interfaccia grafica su dispositivo desktop
Interfaccia grafica su dispositivo mobile
Interfaccia grafica su dispositivo desktop
Interfaccia grafica su dispositivo mobile
Queste tecniche possono essere attivate o disattivate a piacimento, in modo da personalizzare l'esperienza di gioco in base alle proprie preferenze. L'utente può sperimentare con le diverse opzioni per ottenere il risultato visivo desiderato e creare un'esperienza di gioco unica e coinvolgente.
Fonti
Il progetto è stato realizzato utilizzando una serie di risorse e strumenti open source. Di seguito sono elencate le principali fonti utilizzate per la realizzazione del progetto: