Selainpohjainen 3D-kartta

Insinöörityön tavoitteena oli tehdä selainpohjainen kolmiulotteinen kartta Metropolian Leppävaaran kampuksesta käyttäen WebGL-ohjelmistorajapintaa. Tehty sovellus oli suunniteltu toimimaan sekä käyttäjien omilla älypuhelimilla ja tietokoneilla että kiinteissä opastusnäytöissä koulun tiloissa. Kartasta pystyy hakemaan luokkahuoneita huoneen nimen tai luokkatunnuksen perusteella sekä selaamaan karttaa sulavasti multi-touch-eleiden tai hiiren avulla. Työn tilaajana oli Metropolia Ammattikorkeakoulu. Sovelluksessa hyödynnettiin myös useita JavaScript-kirjastoja esimerkiksi hakutulosten täydennykseen ja kameran liikeratojen animointiin. Näiden käytöstä laadittiin esimerkkejä sekä omakohtaisia huomioita. Lisäksi opeteltiin 3D-mallinnusta rakennuksen mallintamisen näkökulmasta kuvantamista hyödyntäen. Käyttäjätestauksessa tuli ilmi käytettävyyteen liittyviä ongelmia, jotka karttasovelluksessa piti korjata. Kauppakeskusten nykyisiä opastusnäyttöjä vertailtiin käyttäjäkokemuksen ja käytettyjen teknologioiden osalta. WebGL-kirjastojen eroavaisuuksia tutkittiin koodiesimerkein. Työssä pohdittiin selainpohjaisen grafiikan tulevaisuutta ja Flash-pohjaisten Digital Signage -ratkaisuiden vääjäämätöntä loppua. Sovellus onnistui hyvin, ja se johti jatkokehitykseen Metropoliassa. Karttaan toivottiin lisäominaisuuksia, kuten luokkahuoneiden varaustilanteen reaaliaikainen tarkastelu.The goal of this thesis was to make a 3D map that works in web browsers for Metropolia University of Applied Sciences using a WebGL-framework. The application was designed to work on users’ own smart phones and computers but also in fixed information displays in school’s premises. It was possible to search for classrooms by their names or class numbers from the map. The map also featured multi-touch gestures and mouse support for smooth navigation. The work was done for Metropolia University of Applied Sciences. The application used several JavaScript-libraries for features such as autocompletion for search and to tween camera movement. Examples and insights of their usage were made. 3D-modelling was studied from the perspective of building modelling and photogrammetry. Also, user testing and its results are discussed at the end of the thesis. The current information displays of shopping malls are compared by their user experience and technologies used. Study was made about the differences of WebGL-libraries and the future of web-based graphics. The work also dealt with the inevitable end of Flash-based Digital Signage solutions. The application succeeded, and it lead to further development by Metropolia. More features such as real-time display of classrooms’ usage level was hoped to be implemented to it