3D-grafiikan selaintekniikat, erikoistapauksena karttasovellukset

Abstract

Harava on karttapohjainen kyselypalvelu, jonka avulla voidaan kerätä tietoa erilaisista kyselykohteista. Harava-kyselypalvelussa kyselyihin voidaan vastata muun muassa tekstikentillä, monivalinnoilla ja merkitsemällä alueita ja pisteitä karttapohjaan.

Tutkielman tavoitteena oli löytää Harava-kyselypalvelun 2D-karttojen rinnalle 3D-karttavaihtoehto. Aluksi tutkittiin, mitä eri vaihtoehtoja löytyy 3D-komponenttien esittämiseen selaimessa. Tutkituista vaihtoehdoista parhaimmaksi tähän tarkoitukseen osoittautui WebGL-kirjasto. WebGL-kirjaston käyttö suoraan osoittautui vaikeaksi, joten etsittiin rajapintaa, jonka avulla WebGL-kirjaston käyttö helpottuisi. Käsittelyyn otettiin karttapalveluita sekä 3D-mallien esittämiseen tarkoitettuja JavaScript-kirjastoja, jotka käyttävät WebGL-kirjastoa rajapinnan kautta. Näistä sopivimmaksi osoittautui Cesium. Cesium on JavaScript-kirjasto, jonka avulla voidaan toteuttaa 2D-kartta ja 3D-karttapallo sekä upottaa karttapohjaan 3D-elementtejä.

Harava is a map-based survey portal that allows users to collect various types of information about their environment. A single survey can for instance consist of text fields, multiple-choice questions and an interactive map. The goal of the thesis was to find 3D-maps to complement existing 2D-maps used in the Harava portal.

Techniques for displaying 3D-data in the browser were examined first. The best technique for the described purpose was WebGL library. However, direct use of the WebGL-library turned out to be difficult, so higher-level application interfaces for the WebGL were examined. Among the examined interfaces were 3D-map and Javascript solutions used for displaying 3D-elements in the browser. Cesium was chosen from the examined interfaces. It is a JavaScript library that allows flexible implementation of 2D- and 3D-maps and 3D-elements in the browser.