Interfaccia webGL Teamrhome - esperimenti e scoperte

Come abbiamo già detto in un post precedente, che raccontava la nostra esperienza alla Maker Faire di Roma, dove abbiamo analizzato l’interazione tra rilevazione tramite sensori nel mondo reale ed eventi manifestati su un modello virtuale 3d, lo scopo della nostra ricerca nello sviluppare un sistema di interfaccia verte principalmente sul concetto di aumentare il grado di consapevolezza dell’abitante di una casa in merito alle dinamiche del suo stile di vita in relazione alle variazioni ambientali.

 

Nella precedente versione, presentata al Solar Decathlon 2012 per il team MedInItaly, il sistema era basato sulla visualizzazione di un modello sviluppato tramite processing, nel quale erano dichiarate alcune variabili che assegnavano uno stato a differenti oggetti modellati, in base a degli input provenienti da sensori nel mondo reale.

Considerato il grande dispendio di energie derivato dalla poca esperienza in materia, questa “dinamicità” del modello virtuale era limitata a pochi elementi, mentre la maggior parte della documentazione e della visualizzazione degli eventi era affidata a grafici e “pulsanti” che sovraffollavano il modello e che “rubavano” spazio  allo stesso, diminuendo notevolmente le dimensioni del canvas dedicato al 3d nella pagina web.

Considerando i recenti progressi in materia abbiamo pensato che questo compromesso non fosse più accettabile e che l’interfaccia del Teamrhome dovrà avere un aspetto più “user friendly” e una “user experience” molto simile a quella di un videogioco point-and-click.

Machinarium - Amanita Design

Black Mirror - Cranberry Production

Nella ricerca di un modello a cui ispirarci per orientare le scelte di visualizzazione della nostra interfaccia e per indagare i limiti e le potenzialità di questa tecnologia per noi nuova, abbiamo scoperto diverse pagine molto interessanti e abbiamo sperimentato dei siti che sfruttano delle api per caricare e modificare modelli 3d complessi in ambiente webGL.

Grafica molto interessante: http://onemillionreasons.audi.de/3d.html
Laser scan e webgl: http://webgl.uni-hd.de/html5-pointcloud-example/index.html

Il cubo di Google: http://www.playmapscube.com/
Visita di una cattedrale con cambio dinamico della luce solare: http://patapom.com/topics/WebGL/cathedral/index.html
Basato su Word Viewer di Google: http://workshop.chromeexperiments.com/projects/armsglobe/

Per semplificare la programmazione abbiamo deciso di utilizzare le librerie three.js: questa libreria fornisce un ampio numero di funzioni già compilate con differenti finalità che permettono anche a neofiti di sviluppare una scena webgl.

Entusiasti della tempesta di idee e esempi trovati sul web ci siamo nostro malgrado dovuti scontrare con la dura realtà della nostra ignoranza

partendo da dei semplici tutorial disponibili sul sito siamo riusciti a modellare delle semplici forme con webgl

poi abbiamo importato dei modelli complessi sviluppati tramite software di modellazione standard e inseriti in ambiente webgl grazie alla libreria THREEObjectLoader

il passo successivo è stato quello di riuscire a controllare la navigazione del modello tramite il mouse inserendo quindi un controllo orbit,pan e zoom…

Francesca Bottaro, Vincenzo Panasiti, Gabriele Roselli.