HTML5:n uudet ominaisuudet. [WebGL (Three.js), Web Storage, Geolocation, Drag and Drop, Canvas] : 3D demo-peli Sokkelo

Abstract

3D-grafiikka ja virtuaalinen todellisuus ovat olleet yhdessä yksi eniten tie-tokoneiden kehitystä eteenpäin vievistä voimista. Tänä päivänä netin si-vustoilla on oltava MultiMedian käyttöä (kuvaa, ääntä, videota ja interak-tiivisia dynaamisia sovelluksia, kuten esimerkiksi pelejä ja muita sisäoh-jelmia).

Opinnäytetyön teoriaosuudessa käydään läpi HTML5:n uudet ominaisuu-det ja perustoiminnot.

Keskityin opinnäytetyössä peliohjelmointiin, koska se on monipuolisin ta-pa esitellä ja opiskella uutta teknologiaa. Opinnäytetyön suorittamista varten rakennettiin 3D Demo-pelin web-sivu, jolla käytetään näitä omi-naisuuksia. Grafiikan ohjelmointi voi olla erittäin hidasta. Tämän vuoksi on hyvä harkita apukirjaston käyttöä nopeuttamaan kehitysprosessia. Tässä opinnäytetyössä käytin Three.js-kirjastoa. Kerroin askel askeleelta, kuinka oma pelinkehitysprosessini eteni ja mitä tuloksia sain aikaan. Näin pääsin käytännössä kokeilemaan lähempää tarkastelua varten otettuja ohjelmointirajapintoja.

The purpose of the thesis was to introduce a new technology called WebGL and show how it could be used in software development.

The theoretical part of the thesis goes through the description of the im-plementation of the website.

In this thesis the focus was in game programming, as it is the most versa-tile way to introduce and study new technology. To accomplish this thesis, I build a 3D Demo Web site that uses these features. Graphics programming can be very slow. Therefore, it is good to consider the use of auxiliary library to speed up the development process. In this thesis I used the Three.js-library. I'm going to tell you step by step how the game development progressed and what results was achieved.

This will allow me to practice the programming interfaces for closer viewing.