WebGL-sovellus
Vainionpää, Joonas (2015)
Vainionpää, Joonas
Tampereen ammattikorkeakoulu
2015
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-201505148071
https://urn.fi/URN:NBN:fi:amk-201505148071
Tiivistelmä
WebGL:n on JavaScriptiä käyttävä ohjelmointirajapinta, jonka avulla pystytään mallintamaan 3D- ja 2D-grafiikkaa mille tahansa WebGL-yhteensopivalle nettiselaimelle kuten Firefox ja Chrome. Grafiikan mallintamiseen ei tarvita ylimääräisiä liitännäisiä ja kaikki mallintaminen suoritetaan tietokoneen näytönohjaimen avulla. Grafiikan mallintamisessa käytettävät keskeiset teknologiat ovat HTML5-merkkauskieli ja JavaScript.
Tavoitteena oli tehdä reaaliaikainen graafinen audiovisualisointi, missä kuvataan kuutioiden avulla ääninäytteessä esiintyviä eri taajuuksia. Ääninäytettä analysoidaan Web Audio API:lla, jonka avulla äänestätiedostosta erotellaan kaikki siinä esiintyvät taajuudet. Jokaisen taajuuden arvo tallennetaan JavaScriptilla luotuun taulukkoon ja näitä arvoja käytetään kuutioiden muodon muuttamiseen reaaliajassa. Ääninäytteen analysointia varten on hyvä tietää digitaalisen signaalinkäsittelyn perusteet.
Yksinkertainen WebGL:n ja Web Audio API:n avulla tehty reaaliaikainen graafinen audiovisualisointi voidaan sisällyttää kaikkiin HTML5 versiolla tehtyihin nettisivuihin. Sen jokaista ominaisuutta voidaan helposti muokata toimimaan käyttäjän haluamalla tavalla. Ominaisuuksien muokkaaminen edellyttää hyvää JavaScrit-ohjelmointikielen osaamista, sekä hyvää kolmiulotteisten tapahtumien hahmotuskykyä.
Tavoitteena oli tehdä reaaliaikainen graafinen audiovisualisointi, missä kuvataan kuutioiden avulla ääninäytteessä esiintyviä eri taajuuksia. Ääninäytettä analysoidaan Web Audio API:lla, jonka avulla äänestätiedostosta erotellaan kaikki siinä esiintyvät taajuudet. Jokaisen taajuuden arvo tallennetaan JavaScriptilla luotuun taulukkoon ja näitä arvoja käytetään kuutioiden muodon muuttamiseen reaaliajassa. Ääninäytteen analysointia varten on hyvä tietää digitaalisen signaalinkäsittelyn perusteet.
Yksinkertainen WebGL:n ja Web Audio API:n avulla tehty reaaliaikainen graafinen audiovisualisointi voidaan sisällyttää kaikkiin HTML5 versiolla tehtyihin nettisivuihin. Sen jokaista ominaisuutta voidaan helposti muokata toimimaan käyttäjän haluamalla tavalla. Ominaisuuksien muokkaaminen edellyttää hyvää JavaScrit-ohjelmointikielen osaamista, sekä hyvää kolmiulotteisten tapahtumien hahmotuskykyä.