Veebilehitsejal Põhinev Rakendus Kolmemõõtmelise Mudeli Pindade Kujundamiseks
Total Page:16
File Type:pdf, Size:1020Kb
EESTI INFOTEHNOLOOGIA KOLLEDŽ Timo Triisa VEEBILEHITSEJAL PÕHINEV RAKENDUS KOLMEMÕÕTMELISE MUDELI PINDADE KUJUNDAMISEKS Diplomitöö INFOSÜSTEEMIDE ARENDUSE ÕPPEKAVA Juhendaja: Märt Kalmo Tallinn 2017 AUTORIDEKLARATSIOON Deklareerin, et käesolev diplomitöö, mis on minu iseseisva töö tulemus, on esitatud Eesti Infotehnoloogia Kolledžile lõpudiplomi taotlemiseks Infosüsteemide arendamise erialal. Diplomitöö alusel ei ole varem eriala lõpudiplomit taotletud. Autor Timo Triisa ……………………………. (allkiri ja kuupäev) Töö vastab kehtivatele nõuetele Juhendaja Märt Kalmo …………………………….. (allkiri ja kuupäev) 2 Sisukord Mõisted ja lühendid ......................................................................................................... 5 Sissejuhatus ..................................................................................................................... 7 1. Probleemi püstitus ja metoodika ............................................................................... 8 1.1. Probleem ........................................................................................................... 8 1.2. Eesmärk ............................................................................................................. 9 1.3. Metoodika ......................................................................................................... 9 2. Ärianalüüs .............................................................................................................. 11 2.1. Lähtetingimused .............................................................................................. 11 2.2. Ettevõtte nõuded .............................................................................................. 11 2.3. Funktsionaalsed nõuded ................................................................................... 12 2.3.1. Piltide lisamine pindadele ......................................................................... 12 2.3.2. Kihid ........................................................................................................ 12 2.3.3. Pindade värvimine .................................................................................... 12 2.3.4. Trükiks ette valmistamine ........................................................................ 13 2.3.5. Kasutajaliides ........................................................................................... 13 2.4 Mitte-funktsionaalsed nõuded .......................................................................... 14 3. Tehnoloogiate analüüs ............................................................................................ 15 3.1. Nõuded tehnoloogiatele ................................................................................... 15 3.2. Tehnoloogiate otsimine .................................................................................... 16 3.3. Tehnoloogiate võrdlus ..................................................................................... 17 3 3.3.1. Babylon.js ................................................................................................ 17 3.3.2. Goo Engine .............................................................................................. 18 3.3.3. PlayCanvas .............................................................................................. 18 3.3.4. Three.js .................................................................................................... 19 3.3.5. Hindamine ja kokkuvõte ........................................................................... 19 4. Arendusprotsess ja tulemused ................................................................................. 21 4.1. Prototüüpide loomine ....................................................................................... 21 4.1.1. Prototüüpide funktsionaalsus .................................................................... 21 4.1.2. PlayCanvas prototüüp............................................................................... 22 4.1.3. Babylon.js prototüüp ................................................................................ 22 4.1.4. Three.js prototüüp .................................................................................... 24 4.1.5. Prototüüpide jõudluse hindamine.............................................................. 24 4.1.6. Prototüüpide arendamise tulemused.......................................................... 26 4.2. Rakenduse loomine .......................................................................................... 26 4.2.1. Arenduse käigus lisandunud funktsionaalsus ............................................ 27 4.3. Tulemus ........................................................................................................... 28 Kokkuvõte ..................................................................................................................... 30 Summary ....................................................................................................................... 31 Kasutatud kirjandus ....................................................................................................... 33 Lisa 1 – Babylon.js prototüübi lähtekood ....................................................................... 36 Lisa 2 – Three.js prototüübi lähtekood ........................................................................... 38 4 Mõisted ja lühendid Application Programming Interface (API) – on reeglistik olemasoleva valmisprogrammiga suhtlemiseks Arendusuuring – praktilise rakenduse loomist käsitlev uuring Canvas – HTML5 standardi element, mis võimaldab kasutades JavaScripti, elemendile algoritmiliselt graafikat kujutada Adobe Flash – multimeedia platvorm, millega saab luua interaktiivseid rakendusi erinevatele platvormidele GitHub – võrgupõhine versioonihaldus repositoorium Graafikakiirendi ehk graafikaprotsessor – kohandatud mikroprotsessor, mis tegeleb 3D- ja 2D-graafika visualiseerimisega HTML – enimlevinud kodeerimissüsteem veebidokumentide loomiseks Mebibait – (ingl mebibyte, MiB) mälumahu mõõtühik, mis on võrdne 1 048 576 baidiga. PHP: Hypertext Preprocessor (PHP) – vabavaraline skriptimiskeel, mille eesmärk on lihtsustada dünaamiliste veebilehtede loomist Plugin – tarkvarale lisafunktsionaalsust pakkuv eraldiseisev laiendus Repositoorium – versioonihaldus tarkvarades kasutatav hoidla Ristprojektsioon – perspektiiviõpetuses projektsioon, kus silmapunkti asemel antakse kujutamiskiirte siht, ning kujutamiskiired on ekraaniga risti 5 Silmapunkt – perspektiiviõpetuses vaatleja silma läätse keskpunkt Stseen – kolmemõõtmeline ruum, mida kasutatakse objektide organiseerimiseks graafikaprogrammides UV-kaardistamine – (ingl UV-mapping) kahemõõtmelise pinna kaardistamine kolmemõõtmelisele mudelile, eesmärgiga projitseerida kahemõõtmelist rastergraafikat mudeli pindadele Web Graphics Library (WebGL) – JavaScripti API, kahe- ja kolmemõõtmelise graafika visualiseerimiseks veebilehitsejates, kasutades graafikakiirendeid ilma lisanduvate pluginateta. WordPress – vabavaraline avatud lähtekoodiga sisuhaldustarkvara, mis on kirjutatud PHP-s 6 Sissejuhatus Kolmemõõtmeliste mudelite visualiseerimine, kasutades graafikakiirendeid veebilehitsejate sisese funktsionaalsusena, on saanud võimalikuks selle kümnendi alguses. Enam ei ole sunnitud kasutaja paigaldama arvutisse lisanduvat tarkvara riistvaralise kiirenduse kasutamiseks veebirakendustes ning arendajad saavad vajaduselt kasutada seadme graafikakiirendit parema jõudluse tagamiseks. Ettevõtte Metroprint Systems OÜ soovib pakkuda oma e-poe klientidele veebirakendust, milles on võimalik nende tootevalikus olevate toodete pindade kujundamine, vahetades toote värvi või lisades sellele pilte. Ometi ei leidu sellist terviklikku lahendust, mida Metroprint Systems OÜ vajab. Ettevõte on üsna kindel, et selline lahendus aitaks kaasa nende müügile. Autor usub, et ettevõtte soovid on teostatavad ja on otsustanud asuda ettevõtte probleemi lahendama. Autor püstitab töös probleemi, selgitab töö eesmärki ning kirjeldab metoodikat millest lähtudes autor probleemi lahendab. Seejärel selgitab välja ettevõtte konkreetsed ärilised vajadused ning analüüsib milline peab olema rakenduse funktsionaalsus, et ettevõtte nõuded ja vajadused saaks täidetud ning probleem lahendatud. Rakenduses vajamineva funktsionaalsuse põhjal otsib autor probleemi lahendamiseks sobivad tehnoloogiad. Autor kirjeldab rakenduse nõuete põhjal kriteeriumid, mida tehnoloogia peab suutma täita. Kriteeriumid täitnud tehnoloogiate põhjal, loob autor prototüüprakendused, mille eesmärk on veenduda tehnoloogiate võrdluses selgunud kriteeriumite täidetavuses, kontrollida tehnoloogia sobivust probleemi lahendamiseks, märgata võimalikke takistusi ning valida rakenduse arendamiseks kõige sobivam tehnoloogia. Töö tulemuseks valmib rakendus, mis lahendab ettevõtte Metroprint Systems OÜ probleemi. Autor hindab tulemuse vastavust ettevõtte nõuete ja soovidega. 7 1. Probleemi püstitus ja metoodika 1.1. Probleem Ettevõtte Metroprint Systems OÜ soov on olla konkurentidest silmapaistvam ning pakkuda oma klientidele mugavamat e-poe keskkonda. Hetkel on ettevõttel e-poes tootevalik esitatud illustreerivate piltidega mööblist. Müüdav mööbel toodetakse omapärasel viisil kärgkartongist, mille pinnad saab katta ka trükimaterjalidega, mis võimaldab mööbli kodus ilma tööriistadeta lihtsalt kokku voltida (Designboard kodulehekülg, 2017). Kuid ettevõtte soovib olla veelgi unikaalsem ning nende põhiliseks ideeks kujunes veebirakendus. See võimaldab tootevalikuga tutvuda