Portami alla demo completa!

Tracce MTB

Questa webapp sperimentale nasce per riprodurre le mie tracce GPS (in formato standard GPX) dentro un ambiente web 3D, usando WebGL e recuperando utili info sul proprio percorso (città, montagne, velocità, altitudine, pendenza, ...).
Ho sviluppato tutto strutturando il più possibile per componenti e con un approccio "universale / isomorfico" (es: voglio usare lo stesso modulo parser GPX sul browser e sul server).
Quando ho avuto necessità di acquisire dati sul mondo "reale" ho sviluppato la parte server, essa si occupa di trovare informazioni nei servizi esterni, cacharli e esporre le API necessarie.

Demo completa Play

Prototipo del riproduttore del percorso, utilizza componenti dagli altri test.

Questo test è una combinazione di tutti gli altri test.
L'integrazione ha incontrato qualche complicazione da risolvere:

  • Muovere il terreno 3D per farlo combaciare con la traccia
  • Traccia e terreno non aderiscono a causa di imperfezioni sulle altitudini, quindi ogni punto della traccia viene "appiccicato" al terreno (al momento questo è molto lento)
  • Cambiare la traccia in runtime significa dover pulire tutti gli assets e gli oggetti inseriti e pulire l'ambiente 3D.

Suggerimento: in questo test puoi caricare la tua traccia GPX, dimostra che tutte le informazioni (mappa delle altitudini, punti di interesse) sono ottenuti ed elaborati su richiesta.
Attenzione: per favore, non caricare migliaia di tracce dato che per ogni gpx il server scarica assets da servizi esterni molto limitati!
Server-side Track API Heightmap API POI API
Client-side Route player engine Cursor plugin POI plugin
3D Track Terrain Sky POI Bird's eye camera FPS camera Side camera
GUI Timeline Toolbar Cockpit Track selector Uploader Map Track on map Console log

POI Play

Caricamento e visualizzazione POI

Questo test mostra il componente POI (Points Of Interests, punti di interesse). Dati i limiti geografici e il tipo di punto di interesse (montagne e città per ora), il componente ottiene dai webservice una lista di punti. Poi vengono renderizzate semplici etichette 2D nell'ambiente 3D.

Suggerimento: puoi trascinare e ridimensionare il rettangolo rosso sopra la mappa nell'angolo in basso a destra dello schermo. Per aggiornare i risultati clicca su "Update"
Attenzione: per favore, non farti prendere dall'entusiasmo. Le API usano servizi esterni per recuperare le info, potresti bruciare il mio piano gratuito!
Server-side POI API
3D POI Track Orbit camera
GUI Map

Sky (alpha) Play

Posizione del cielo e del Sole

Lo scopo di questo modulo è di posizionare il sole nella posizione corretta basandosi sulle coordinate geografiche e sulla data-ora.

Attenzione: non funziona molto bene al momento! :(
3D Sky Orbit camera

Terrain Play

Rendering del terreno utilizzando heightmap caricate al volo

In questo test è possibile vedere la costruzione del terreno in un ambiente 3D basandosi su reali altitudini. La mappa è generata con porzioni di mappa scaricate on-demand dal server e poi unite, elaborate, manipolate e colorate.

Suggerimento: puoi trascinare e ridimensionare il rettangolo rosso sopra la mappa nell'angolo in basso a destra dello schermo. Per aggiornare i risultati clicca su "Update"
Attenzione: per favore, non farti prendere dall'entusiasmo. Le API usano servizi esterni per recuperare le info, potresti bruciare il mio piano gratuito!
Server-side Heightmap API
3D Terrain Orbit camera
GUI Map

Timeline Play

Timeline informative e navigabili

Questo test mostra una timeline interattiva contenente diverse informazioni, è possibile navigarla trascinando il cursore lungo la linea della traccia. Questa linea rappresenta l'andamento dell'altitudine ed è colorata in base alla velocità. In più sono presenti i POIs attraversati e la velocità massima (cerchio bianco).
In cima alla timeline c'è una toolbar: la tendina con "10x" indica la velocità di riproduzione.
Nella parte destra dello schermo si può trovare il cruscotto indicante diversi valori istantanei, tutti elaborati dal file GPX.

La città più vicina è calcolata considerando la distanza dal centro della città.
Dovrò controllare a fondo alcuni calcoli (pendenza, velocità, ...).
Server-side Track API POI API
Client-side Route player engine
GUI Timeline Toolbar Cockpit

Track Play

Genera una traccia da un file GPX e ne segue il percorso in un ambiente 3D

In questo test si può vedere una traccia 3D generata da un file GPX. L'applicazione renderizza la traccia in un ambiente 3D per poi seguirla con 3 tipi di prospettive (è possibile cambiare la telecamera nella tendina apposita). E' possibile navigare attraverso la traccia usando il semplice input a cursore.

Nota: il file gpx è elaborato ma non manipolato, probabilmente è necessario implementare qualche algoritmo per rendere la traccia meno "spigolosa".
Server-side Track API
Client-side Route player engine Cursor plugin POI plugin
3D Track Bird's eye camera FPS camera Side camera