Razvoj AR sobe pobega

Fakulteta za raˇ cunalniˇ stvo in informatiko

Miha Malenˇsek

Razvoj AR sobe pobega

DIPLOMSKO DELO

UNIVERZITETNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE

RA ˇCUNALNIˇSTVO IN INFORMATIKA

Mentor : izr. prof. dr. Narvika Bovcon

Ljubljana, 2021

besedilo, slike, grafi in druge sestavine dela kot tudi rezultati diplomskega dela lahko prosto distribuirajo, reproducirajo, uporabljajo, priobˇcujejo javnosti in pre- delujejo, pod pogojem, da se jasno in vidno navede avtorja in naslov tega dela in da se v primeru spremembe, preoblikovanja ali uporabe tega dela v svojem delu, lahko distribuira predelava le pod licenco, ki je enaka tej. Podrobnosti licence so dostopne na spletni strani creativecommons.si ali na Inˇstitutu za intelektualno lastnino, Streliˇska 1, 1000 Ljubljana.

Izvorna koda diplomskega dela, njeni rezultati in v ta namen razvita program- ska oprema je ponujena pod licenco GNU General Public License, razliˇcica 3 (ali novejˇsa). To pomeni, da se lahko prosto distribuira in/ali predeluje pod njenimi pogoji. Podrobnosti licence so dostopne na spletni strani http://www.gnu.org/

licenses/.

Besedilo je oblikovano z urejevalnikom besedil L^ATEX.

Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika

Mentor: izr. prof. dr. Narvika Bovcon

Opis:

V diplomski nalogi predstavite razvoj tehnologije obogatene resniˇcnosti skozi primere uporab. V praktiˇcnem delu diplome izdelajte sobo pobega v obo- gateni resniˇcnosti. Predstavite postopek naˇcrtovanja uporabniˇske izkuˇsnje, izdelavo modelov, uporabljene tehnologije in razvoj AR filtra. Title: Deve- lopment of an AR escape room In the diploma thesis, present the develop- ment of augmented reality technology through examples of applications. In the practical part of the diploma, create an augmented reality escape room.

Present the user experience planning process, model making, technologies used, and AR filter development. Description:

Povzetek Abstract

1 Uvod 1

2 Pregled podroˇcja 3

2.1 Sobe pobega . . . 4

2.2 Zgodovina AR . . . 5

2.3 AR igre . . . 8

2.4 Druˇzabna omreˇzja in AR . . . 13

3 Pregled uporabljenih tehnologij 17 3.1 Lens Studio . . . 18

3.2 Blender . . . 28

3.3 Programi Adobe Creative Cloud . . . 30

4 Naˇcrtovanje AR sobe pobega 33 4.1 Zakaj naˇcrtovati? . . . 33

5 Izdelava AR sobe pobega 41 5.1 Elementi . . . 41

5.2 Implementacija . . . 54

6 Zakljuˇcek 73

Clanki v zbornikihˇ 77

Celotna literatura 79

kratica angleˇsko slovensko

AR augmented reality obogatena resniˇcnost HMD head-mounted display naglavni zaslon RPG role-playing game igra z igranjem vlog

TTRPG tabletop role-playing game namizna igra z igranjem vlog 6DOF six degrees of freedom ˇsest stopenj svobode, vsebuje

translacijo in rotacijo

GPS global positionig system globalni sistem pozicioniranja API application programming in-

terface

vmesnik za namensko progra- miranje

ML machine learning strojno uˇcenje FPS frames per second sliˇcice na sekundo RAM random-access memory bralno-pisalni pomnilnik GNU-

GPL

GNU General Public License sploˇsno dovoljenje GNU

Naslov: Razvoj AR sobe pobega Avtor: Miha Malenˇsek

Diplomska naloga zajema naˇcrtovanje in implementacijo sobe pobega v obo- gateni resniˇcnosti. Zaradi svetovne krize Covid-19, se je ogromno ljudi znaˇslo doma. Druˇzabni centri, trgovine, kavarne in ostalo, so se zaprli. Vsi smo tako bili prisiljeni poiskati zabavo kar doma. Namen diplomske naloge, je razviti sobo pobega, ki jo lahko prenaˇsamo v ˇzepu - na telefonu, objavljeno na eni najveˇcjih platform s funkcionalnostmi v obogateni resniˇcnosti, Snapchat.

Uporabniki bodo lahko v varnem udobju doma, lastno dnevno sobo spreme- nili v zanimivo sobo pobega, polno ugank in 3D zagonetk. Za razvoj izkuˇsnje same bomo uporabili prostodostopen program Lens Studio[23], ki uporabni- kom omogoˇca razvoj in objavo lastnih

”filtrov“ na platformi Snapchat, mi pa bomo izkoristili grafiˇcne zmoˇznosti aplikacije, da razvijemo interaktivno izkuˇsnjo. 3D modele, uporabljene v izkuˇsnji sami, bomo izdelali v prostodo- stopnem in odprtokodnem programu Blender[6]. Diplomska naloga bo nudila vpogled tako v kreativen, kot tudi tehniˇcen proces izdelave sobe pobega v obogateni resniˇcnosti, poleg tega pa bo bralcu predstavila pregled zgodovine tehnologije obogatene resniˇcnosti in pregled modernih tehnologij in okolij, ki razvijalcem omogoˇcajo razvoj izkuˇsenj v obogateni resniˇcnosti.

Kljuˇcne besede: AR, obogatena resniˇcnost, Lens Studio, soba pobega.

Title: Developing an AR escape room Author: Miha Malenˇsek

This theses covers the planning and implementation of an augmented reality escape room. Because of the Covid-19 crisis, community centres, stores, cafes and other common spaces are closed, forcing many to find entertainment at home. The goal of this thesis is to develop a fully functional AR escape room that the user can transport in their pocket, on their mobile device, published on one of the biggest social platforms with AR functionalities - Snapchat. The users will thus be able to transform their living room into a fully interactive AR escape room, filled with mystery and 3D puzzles, from the comfort of their own home. To develop the experience we’ll use Lens Studio[23], a free program used for developing and publishing AR experiences on Snapchat, made by Snap Inc. The assets will be created in the free, open- source, 3D modelling software Blender[6]. The theses will therefore offer an insight into the creative and technical process of development, as well as a brief overview and history of augmented reality.

Keywords: AR, augmented reality, Lens Studio, escape room.

Uvod

Zaradi svetovne krize COVID-19, se je ogromno ljudi znaˇslo doma. Za javno varnost in zdravje so se za dalj ˇcasa zaprli druˇzabni centri, kavarne in druge javne povrˇsine, kar je ljudi prisililo v iskanje zabave kar doma. Ampak kaj storiti? Kako lahko doˇzivimo nekaj novega, na primer, obiˇsˇcemo sobo pobega, doma?

Odgovor se pojavi v uporabi tehnologije obogatene resniˇcnosti. Obo- gatena resniˇcnost nam omogoˇca projekcijo digitalnih elementov v resniˇcen svet ali prostor, v realnem ˇcasu [14]. Naˇsa resniˇcnost je tako obogatena s statiˇcnimi, premikajoˇcimi, interaktivnimi, 2D ali 3D, digitalnimi elementi, ki jih lahko vidimo in z njimi upravljamo, z uporabo raznih pripomoˇckov.

Ti rangirajo od preprostih zaslonov, naglavnih zaslonov, ali HMD [9][24], do vsakodnevnih mobilnih naprav. Slednje so ena najbolj pogostih naprav [8]

in so tako primerne za tematiko te diplomske naloge.

Svetovna pandemija je uporabo mobilnih naprav in socialnih omreˇzij le poviˇsala [4], saj socialna omreˇzja omogoˇcajo stike, kljub sploˇsnemu zaprtju javnega ˇzivljenja. Nekatera izmed pogostih socialnih omreˇzij, poleg komu- nikacije, uporabnikom omogoˇcajo tudi uporabo tehnologije obogatene re- sniˇcnosti, iz ˇcesar izhaja osnovna ideja diplomske naloge. Avtor se je tako kot ljubitelj ugank in amaterski organizator sob pobega odloˇcil, da zdruˇzi tehnologijo obogatene resniˇcnosti z zabavo in ugankami sob pobega.

1

Pregled podroˇ cja

Dandanes je tehnologija obogatene resniˇcnosti vedno bolj pogosta [14] in razumljena kot del tehnoloˇske prihodnosti [21], zato ni ˇcudno, da je podroˇcje ˇze precej ˇsiroko. Sega namreˇc od raziskovalnih, eksperimentalnih projektov [24], izobraˇzevanja [40], iger [30], pa vse do socialnih omreˇzij Snapchat [23], Instagram in Facebook [34].

Pogostost in obseˇznost podroˇcja, tako loˇcimo na veˇc razdelkov - na zgo- dovino tehnologije, igre in socialna omreˇzja, ki tehnologijo obogatene re- sniˇcnosti uporabljajo. Zgodovina razvoja tehnologije obogatene resniˇcnosti poglobi naˇse razumevanje tehnologije same in predstavi pomembne mejnike v razvoju. Eden izmed takih mejnikov je igra Pokemon Go, ki je tehnolo- gijo obogatene resniˇcnosti postavila v javno zavest, zaradi lahke dostopnosti do le-te v obliki mobilne aplikacije [29], socialna omreˇzja Snapchat in Insta- gram, ter nenazadnje tudi Instagramova starˇsevska korporacija Facebook, pa so tehnologijo normalizirale do te mere, da je zdaj pogosto znana preprosto kot ”filter“.

Cilj diplomske naloge je zdruˇziti tehnologijo obogatene resniˇcnosti s kon- ceptom sobe pobega. Sobe pobega so druˇzabne igre, kjer ena ali veˇc oseb reˇsuje zaporedje ugank ali izzivov v danem ˇcasovnem intervalu [38]. Da igralci doseˇzejo zmago (ali uspeˇsen

”pobeg“), morajo v ˇcim krajˇsem ˇcasu uspeˇsno razreˇsiti vse uganke in izzive.

3

2.1 Sobe pobega

Sobe pobega si delijo korenine s klasiˇcnimi igrami

”igranje vlog v ˇzivo¹“, kot je namizna

”TTRPG“ igra Dungeons and Dragons in podobno[38]. S tem, ko je popularnost in pogostost tovrstnih iger rasla, je rasla tudi ˇzelja po ˇse veˇcji poglobitvi v igro in navidezno, domiˇsljisko okolje. Prva, dobro dokumentirana, javna soba pobega se je tako pojavila leta 2007 v Kyotu na Japonskem[27]. Igra, imenovana

”Prava igra pobega²“, je bila zasnovana za 5-6 igralcev v eni sobi, ki so morali v najkrajˇsem ˇcasu reˇsiti izzive in uganke v sobi. Sobe pobega so se tako razˇsirile po vsem svetu[38] in postale pogosto obiskane atrakcije. Nekaj jih imamo tudi v Sloveniji[39].

Sobe pobega igralce prisilijo v kreativno razmiˇsljanje in medsebojno sode- lovanje z uporabo razliˇcnih ugank in izzivov. Te lahko obsegajo matematiˇcne ali logiˇcne probleme, vizualne uganke, ali druge, interaktivne izzive. Izzivi in uganke so pogosto medsebojno povezani - reˇsitev ene uganke ali izziva, je po- gosto namig ali pogoj, za reˇsitev druge. Sobe pobega se z uporabo razliˇcnih izzivov in teˇzavnosti ugank, razlikujejo glede na tematiko in teˇzavnost, ter s tem ponujajo razliˇcne izkuˇsnje za igralce.

2.1.1 Uganke

Uganke in izzivi sob pobega so odvisni od avtorjev sobe pobega. Delovati mo- rajo kot tematska celota in predstaviti zanimive in raznolike izzive igralcem, upoˇstevajoˇc razliˇcne sposobnosti le-teh. Soba sama mora nuditi vse informa- cije, potrebne za reˇsitev ugank, na razumljiv naˇcin, ne glede na tip uganke - ali je potrebna fiziˇcna interakcija, ali samo logiˇcno razmiˇsljanje. Povezanost, raznolikost, predvsem pa razumljivost ugank in izzivov sobe pobega lahko drastiˇcno vpliva na izkuˇsnjo samo.

Kljub temu, da so uganke raznolike in medsebojno povezane, je osnovna zanka poteka sobe pobega relativno preprosta:

1Live-Action Role-Playing, ang.

2Real Escape Game, ang.

1. Izziv ali uganka, ki mora biti reˇsena 2. Reˇsitev izziva ali uganke

3. Nagrada

Nagrada, toˇcka 3., je pogosto namig ali kljuˇcni del drugih ugank, s kate- rim se zanka ponovno zaˇcne.

Primer preproste uganke, ki sledi poteku osnovne zanke, je ˇskatla s kom- binacijsko kljuˇcavnico:

1. Izziv ali uganka je zaklenjena ˇskatla

2. Reˇsitev izziva ali uganke je kombinacija kljuˇcavnice 3. Nagrada je vsebina ˇskatle

Soba bo skrivala namige za pravilno kombinacijo kljuˇcavnice, toˇcka 2., igralci pa bodo na podlagi namigov kombinacijo ugotovili sami. Toˇcka 3., predstavlja nagrado, ki je veˇcinoma namig ali potreben predmet za drugo uganko, ali pa celo

”kljuˇc“ za pobeg iz sobe. Uganke in izzivi so seveda lahko veˇcstopenjski in bolj zapleteni, vendar se jih kljub temu da posploˇsiti na osnovno zanko poteka.

2.2 Zgodovina AR

Tehnologija obogatene resniˇcnosti³ je v zadnjih nekaj letih postala del jav- nega ˇzivljenja. Od socialnih omreˇzij, iger, umetniˇskih predstav, do uporabe v avtomobilih [22], letalih [5] in drugod - tehnologija obogatene resniˇcnosti je prodrla na ˇsirok spekter podroˇcij. Kljub temu, da je pogostost uporabe teh- nologije relativno nova, tehnologija sama ni. Ljudje ˇze stoletja uporabljamo ogledala, leˇce in luˇci, da prikaˇzemo virtualne slike v resniˇcnem okolju. V 17.

stoletju so gledaliˇsˇca uporabljala steklene ploˇsˇce in ogledala, da so odseve

3Augmented Reality, ang.

objektov prikazala na odru, iluzija, ki je kasneje postala znana kot

”Pepper- jev duh⁴“ [17].

Prvi, pravi, raˇcunalniˇsko generiran sistem obogatene resniˇcnosti je leta 1968 izumil Ivan Sutherland [3][5][35], ameriˇski raˇcunalniˇcar in pionir raˇcunalniˇske grafike. Naglavni zaslonski sistem, ali HMD⁵, je uporabljal semi-transparentne zaslone, ki so temeljili na tehnologiji katodnih cevi, (slika 2.1). Sledenje je omogoˇcal mehanski sledilni sistem pritrjen na strop, povezan z raˇcunalnikom PDP-11 [35][5], (slika 2.1).

Slika 2.1: Sutherlandov naglavni sistem (levo)[35] in mehaniˇcni sledilni sis- tem (desno)[35]

Sutherlandov HMD je omogoˇcil prikaz tri-dimenzionalnih grafik, projici- ranih v resniˇcnem svetu. Sistem je imel 40 stopinjski vidni kot in je sluˇzil kot odskoˇcna deska v nadalnje raziskave in eksperimente na podroˇcju tako obogatene, kot tudi virtualne resniˇcnosti.

Sutherlandov HMD sistem je navdihnil znanstvenike iz drugih podroˇcij - Vojno letalstvo Zdruˇzenih drˇzav Amerike je leta 1986 razvilo prototipni HMD sistem

”Super Kabina⁶“ [5], ki je pilotom prikazoval relevantne grafike in podatke, (slika 2.2). Ta sistem se je kasneje razvil v moderne HMD sisteme, ki so v uporabi danes. Hkrati z razvojem HMD sistemov Vojnega letalstva

4Pepper’s Ghost, ang.

5Head-Mounted Display, ang.

6Super Cockpit, ang.

Zdruˇzenih drˇzav Amerike, je NASA, Nacionalna zrakoplovna in vesoljska uprava Zdruˇzenih drˇzav Amerike, razvila lasten HMD sistem, sestavljen iz LCD zaslonov Sony Watchman TV [5], imenovan VIVED⁷.

Slika 2.2: HMD sistem Super Cockpit (levo)[13] in kaj prikazuje (desno)[13]

Razvoj tehnologije se je nadaljeval in nadgrajeval. V devedesetih letih prejˇsnjega stoletja, je priˇslo do veliko pomembnih odkritij na tem podroˇcju.

Hkrati so se razvijale podporne tehnologije sledenja gibanja in raˇcunalniˇskega vida, brez katerih tehnologija obogatene resniˇcnosti, kot jo poznamo danes, ne bi obstajala. Leta 1990 je Tom Caudell, znanstvenik podjetja Boeing, prvi skoval izraz

”Augmented Reality“ [1]. Tehnologija se je razvijala tako na in- dustrijskem, kot tudi komercialnem podroˇcju - leta 1994 se je na podroˇcju kulture pojavila prva uporaba tehnologije, predstava

”Ples v kiber-prostoru⁸“ avtorice Julie Martin [1][24], kjer so akrobati plesali okoli in v virtualnih objektih, projiciranih na oder. Z minimizacijo in vedno veˇcjo prenosljivo- stjo raˇcunalniˇskih naprav ter z razvojem interneta in z internetom povezanih tehnologij, je pogostost uporabe tehnologije strmo narasla. Leta 2000 Hi- rokazu Kato ustvari prostodostopno in odprtokodno, namensko programsko knjiˇznico

”ARToolKit“[1], ki se leta 2009 prilagodi za uporabo spletnih br- skalnikov[1]. Giganta raˇcunalniˇske industrije, Google in Microsoft, razvijeta sistema

”Google Glass“, 2013, in

”Holo Lens“, 2016 [1].

7Virtual Visual Environment Display

8Dancing in Cyberspace, ang.

Slika 2.3: Google Glass (levo)[16] in Mirosoft Hololens (desno)[25]

Z razvojem mobilne tehnologije se na podroˇcju mobilnih aplikacij po- javi vrsta primerov uporabe tehnologije obogatene resniˇcnosti. Leta 2015 druˇzabno omreˇzje podjetja Snap Inc., Snapchat, uporabnikom omogoˇci upo- rabo AR filtrov imenovanih

”Lens⁹“[24]. Temu hitro sledi podjetje Facebook s svojimi druˇzabnimi omreˇzji, Instagram in Facebook. Pojavijo se mobilne igre, ki uporabljajo AR tehnologijo, da elemente iger projicirajo v resniˇcen svet. Najbolj iztopajoˇca je, denimo, Pokemon GO [29], mobilna igra, ki je leta 2016 zajela svet. Decembra leta 2017 podjetje Snap Inc. objavi pro- stodostopen program

”Lens Studio“ [23], ki uporabnikom omogoˇca dostop in uporabo razvojnega okolja za razvoj AR izkuˇsenj na platformi Snapchat [24], ki ga bomo za razvoj AR sobe pobega, uporabili tudi mi. Namenskemu razvojnemu okolju

”Lens Studio“, se hitro pridruˇzi

”SparkAR“, podjetja Fa- cebook, namenjeno razvoju AR izkuˇsenj na platformah Instagram in Face- book [24]. Sploˇsnim knjiˇznicam za spletne brskalnike, pa se pridruˇzi razvojno okolje

”WebAR“, podjetja Google.

2.3 AR igre

Uporaba tehnologije obogatene resniˇcnosti je, priˇcakovano, prodrla tudi na podroˇcje raˇcunalniˇskih iger. Minimizacija raˇcunalnikov in njihovih kompo- nent je odprla nove moˇznosti na podroˇcju mobilne obogatene resniˇcnosti.

9Leˇca, slo.

Razvoj vedno veˇcje prenosljivosti in zmogljivosti raˇcunalniˇskih komponent devedesetih let prejˇsnjega stoletja, je tako omogoˇcil razvoj prvih mobilnih AR iger. V zgodnjih letih 21. stoletja, so le-te temeljile na uporabi pre- nosnih HMD sistemov, s pojavom pametnih telefonov in ostalih mobilnih naprav z zmoˇznostjo zajema in prikaza slik in video posnetkov, pa se je upo- raba tehnologije v kontekstu iger le ˇse poveˇcala.

2.3.1 AR igre z mobilnimi HMD sistemi

Ena prvih iger z uporabo tehnologije obogatene resniˇcnosti, je izˇsla leta 2000. Bruce Thomas je s sodelavci razvil mobilni HMD sistem, s katerim so lahko uporabniki igrali prvoosebno raˇcunalniˇsko igro, imenovano

”ARQuake“

[3][36]. ARQuake je koristil podoben sistem sledenja kot Sutherlandov HMD sistem, izumljen leta 1968, opisan v poglavju 2.2. Uporabniki so raˇcunalniˇski sistem nosili na hrbtu, za prikaz grafik in virtualnih elementov, pa so na glavi nosili HMD. Za interakcijo z virtualnimi elementi okolja, so uporabljali pre- prost krmilnik z le dvema gumboma. Sledilni sistem je temeljil na 6DOF sistemu, ki je omogoˇcal sledenje rotacije in translacije uporabnika, ki je kori- stil tudi tehnologijo GPS, digitalni kompas in sledenje vizualnih artefaktov - od visoko-kontrastnih oznaˇcb¹⁰, do zaznavanja in sledenja visoko-kontrastnih regij video vhoda. Slednje je omogoˇcalo igranje igre tako v zaprtih prostorih, kot zunaj, saj je sledenje uporabnikovih gibov omogoˇcalo premikanje po in interakcije z virtualnim okoljem. Prikaz igre in mobilni AR sistem, ki jo je omogoˇcal, je viden na sliki 2.4.

10Fiducial marker, ang.

Slika 2.4: HMD prikaz igre ARQuake (levo)[2] in mobilni, nahrbtni, raˇcunalniˇski sistem (desno)[2].

Igri ARQuake je s podobnim mobilnim AR sistemom leta 2003, sledila igra ”Cloveˇski Pacmanˇ ¹¹“ [3] S sledilnim sistemom s senzorji gibanja in GPS tehnologijo, so uporabniki lahko zavzeli vlogo Pacman-a in duhov. Igra je bila ena izmed prvih mobilnih AR iger za veˇc igralcev. Za razliko od predhodnje igre ARQuake, je igra Human Pacman imela tudi dejanske, fiziˇcne objekte, ki so z uporabo Bluetooth tehnologije postali del virtualnega okolja, kar je poviˇsalo interaktivnost, verjetnost in poglobitev v digitalne elemente okolja.

Uporabniki v vlogi Pacmana, so tako lahko v resniˇcnem, dotakljivem svetu, pobirali in uporabili objekte, ki so jim v virtualnem svetu omogoˇcili dodatne funkcionalnosti, glede na pravila igre [10].

V sledeˇcih letih je cilj mobilne AR tehnologije postala ˇse veˇcja mobil- nost in minimizacija potrebne opreme. Zmogljivost naprav je v inverznem razmerju rasla z velikostjo - prenosljivost in mobilnost je tako postala veˇcja, bolj zanesljiva in manj moteˇca. Leta 2012 podjetje Google naznani

”Project Glass“, optiˇcen HMD, velikosti povpreˇcnih oˇcal [3], prikazane na sliki 2.3.

Produkt

”Google Glass“, je potroˇsnikom postal na voljo leta 2014, v obliki

”Google Glass, Explorer Edition“, ki je med drugim uporabnikom omogoˇcil igranje petih mini-iger, ki so za krmilne vhode uporabljale senzorje oˇcal in glasovne ukaze.

Leta 2015 je podjetje Microsoft izdalo lasten HMD sistem, imenovan

”Mi-

11Human Pacman, ang.

crosoft Hololens“ [3], viden na sliki 2.3. Hkrati s produktom, je podjetje Mi- crosoft na platformi Microsoft Store omogoˇcilo objavo namenskih aplikacij za HMD sistem Hololens. Sistem Hololens je uporabljal vgrajene senzorje in kamere za sledenje gibanja in prikazoval virtualne elemente z uporabo tako imenovanih

”holografskih leˇc¹²“ [19].

Kljub ogromni razliki v velikosti, zmogljivosti in mobilnosti naprav Goo- gle Glass in Microsoft Hololens, v primerjavi s predhodnimi mobilnimi HMD sistemi, je podroˇcje AR iger, ki uporablja te sisteme, nekoliko manjˇse kot bi morda priˇcakovali. Kombinacija cene in drugih faktorjev je vplivala na relativno redkost teh sistemov danes. Podjetje Google in Microsoft sta zato naslednje generacije Google Glass in Microsoft Hololens prilagodila za profe- sionalno, industrijsko uporabo v obliki

”Hololens 2“ [20] in

”Glass Enterprise Edition“ [15].

Hkrati z razvojem HMD sistemov, pa se je razvijal tudi drug pristop k uporabi mobilne AR tehnologije. Podroˇcju mobilne AR tehnologije se pridruˇzi nova naprava, s kamero, senzorji gibanja in dostopom do GPS - naprava, ki postane ena najbolj pogostih na svetu [8], pametni telefon.

2.3.2 AR igre na pametnih mobilnih napravah

Kot ena najbolj pogostih naprav na svetu [8], z dostopom do vseh senzorjev potrebnih za uporabo AR tehnologije, so pametni telefoni hitro postali ena izmed najbolj primernih naprav za uporabo AR tehnologije.

Leta 2005 je izdana prva AR igra, igrana na telefonu. Izdelal jo je Anders Henrysson kot demonstracijo prilagoditve programskega knjiˇznice ARToolKit za operacijski sistem Symbian, uporabljen na telefonih Nokia [18]. Igra je dvema igralcema omogoˇcila igranje tenisa. Sledenje je omogoˇcila prilagoditev programske knjiˇznice ARToolKit v kombinaciji z visoko-kontrastno, ˇcrno- belo oznaˇcbo na igralni povrˇsini, ki je obema napravama omogoˇcila skupen koordinatni prostor. Podatke o teniˇski ˇzogi sta si napravi delili z uporabo tehnologije Bluetooth. Uporaba igre in izgled oznaˇcb, potrebnih za sledenje,

12See-through holographic lenses

je vidna na sliki 2.5.

Slika 2.5: Prikaz igre na zaslonu telefona (levo) in ˇcrno-bele sledilne oznaˇcbe (desno) [18].

Mobilne AR igre so se razvijale hkrati s tehnologijo mobilnih pametnih naprav. V naslednjih letih je igri ARTennis sledilo ˇse veliko drugih. Ena izmed takih iger je postala ena izmed najbolj uspeˇsnih mobilnih iger, tako v ˇzanru lokacijskih, AR iger, kot tudi mobilnih iger na sploˇsno [29].

”Pokemon Go“ je prva lokacijska, AR igra, ki je stopila v javno zavest.

Podjetje Niantic je igro izdalo julija 2016. Igra je kmalu postala takrat najbolj igrana mobilna igra [29] in je izkoristila polni potencial pametnih telefonov. Uporabniki so lahko lovili Pokemone in obiskovali arene, oboje vezano na geografsko lokacijo. Igra je uporabila praktiˇcno vse senzorje upo- rabne za AR tehnologijo, ki jih povpreˇcen pametni telefon ponuja. GPS je omogoˇcil geografsko sledenje gibanja uporabnikov, uporabno za geografsko vezane funkcionalnosti igre, kamera, senzorji gibanja in zaslon, pa za prikaz digitalnih elementov v resniˇcnem okolju. Prikaz obojega je viden na sliki 2.6.

Igra Pokemon Go je na vrhuncu dosegla 147 milijonov meseˇcnih igralcev in zasluˇzila veˇc kot 6 milijard ameriˇskih dolarjev [31]. Igra predstavlja enega veˇcjih, uspeˇsnih posegov tehnologije obogatene resniˇcnosti v javno ˇzivljenje, saj je uporaba le-te nemalo pripomogla k ogromnemu ˇstevilu igralcev.

Slika 2.6: Virtualni elementi v resniˇcnem okolju (levo) in uporaba GPS loka- cije v virtualnem okolju (desno) [29].

S ˇstevilom uporabnikov igre Pokemon Go in, poslediˇcno, ˇstevilom uporab- nikov mobilne AR tehnologije, se lahko primerjajo le ˇse druˇzabna omreˇzja, ki v zadnjih letih bolj in bolj uporabljajo tehnologijo obogatene resniˇcnosti. Si- cer manj interaktivna uporaba tehnologije kot v AR igrah, veˇcinoma v obliki raznih filtrov in kratkih izkuˇsenj ali predstavitev, je obogatena resniˇcnost na raznih druˇzabnih omreˇzjih zelo pogosta.

2.4 Druˇ zabna omreˇ zja in AR

Mobilni pametni telefoni so ena izmed najbolj pogostih naprav danes [8].

Leta 2017 so pametni telefoni zasedali 50.9% trga, 6% veˇc kot osebni raˇcunalniki [8].V zadnjih letih je deleˇz le narasel - koliˇcina uporabnikov pametnih telefo- nov je narasla na 6.4 milijarde [28]. Na eni najpogostejˇsih naprav na svetu, so ene izmed najbolj uporabljanih aplikacij druˇzabna omreˇzja [4].

Druˇzabna omreˇzja so obstajala ˇze vrsto let, preden so zaˇcela ponujati funkcionalnosti AR tehnologije, relativno pozno v primerjavi z namenskimi AR aplikacijami. Leta 2015 je druˇzabno omreˇzje Snapchat, podjetja Snap Inc., prviˇc svojim uporabnikom ponudilo AR funkcionalnosti. Druˇzabno omreˇzje, ki temelji na poˇsiljanju slik in kratkih video posnetkov, je tako bilo prvo izmed veˇcjih druˇzabnih omreˇzij, ki se je podalo v razvoj in uporabo te tehnologije [24]. Uporabnikom so tako omogoˇcili uporabo AR filtrov, ime- novanih

”Snapchat Lens¹³,“ s katerimi so lahko dodajali 2D in 3D virtualne elemente v svoje okolje.

Slika 2.7: Primer AR Snapchat Lens-a [26]

Uporabi tehnologije za AR filtre se je, po uspehu druˇzabnega omreˇzja Snapchat, pridruˇzilo podjetje Facebook z druˇzabnimi omreˇzji Instagram, Fa- cebook in Messenger.

13Snapchat leˇca, slo.

Tekmovanje med druˇzabnimi omreˇzji je tako vkljuˇcilo tudi tekmovanje v izdelavi in uporabi AR tehnologije. Podjetje Snap Inc. je tako leta 2017, po veˇc kot 3000 interno zgrajenih AR

”Lens-ih“, izdalo prostodostopen program Lens Studio [23]. Program, razvit iz internega orodja, uporabnikom omogoˇca razvoj in objavo lastnih AR izkuˇsenj na omreˇzju Snapchat. Omogoˇca do- stop do dobro dokumentiranega API vmesnika, uporabljenega za razvoj AR

”Lens-ov.“

Podjetje Facebook je ˇse isto leto izdalo lastno, prostodostopno, razvojno okolje imenovano SparkAR [34]. Podobno kot Lens Studio, okolje SparkAR uporabnikom omogoˇca dostop do API vmesnika, uporabljenega za razvoj AR filtrov za platforme Facebook, Messenger in Instagram.

Slika 2.8: Lens Studio (levo)[23] in SparkAR (desno)[34]

Obe platformi sta podprti in redno posodobljeni. V zadnjih letih sta se razvili iz preprostih razvojnih okolij, v orodja za resne AR trˇzne kampanje na druˇzabnih omreˇzjih, ki dosegajo stotine miljonov uporabnikov. Podjetja in organizacije kot so Gucci, WHO, Ralph Lauren in druga, vsa koristijo AR trˇzenje na platformah Snapchat in Instagram [33]. ˇZelje po izboljˇsavi so omogoˇcile nove in zanimive funkcionalnosti na obeh platformah, a voditelj na podroˇcju inovacij in koliˇcine funkcionalnosti, ki jih razvojno okolje omogoˇca, je podjetje Snap Inc., z razvojnim okoljem Lens Studio.

V zadnjih treh letih je izˇslo veˇc verzij, vsaka verzija je izboljˇsava prejˇsnje.

Najnovejˇsa, verzija 4.1, uporabnikom, med drugim, omogoˇca tudi uporabo lastnih modelov strojnega uˇcenja tipa .onnx, za potrebe sledenja z uporabo raˇcunalniˇskega vida, ali lastne

”pretvorbe stilov¹⁴,“ oboje vidno na sliki 2.9.

Slika 2.9: Lens, ki uporablja ML model za prepoznavanje in sledenje avtomo- bilov (levo)[26]in Lens, ki uporablja ML model za

”style transfer“, uporabnika izriˇse v risanem stilu (desno)[23].

Zaradi funkcionalnosti programa Lens Studio, ga bomo uporabili za ra- zvoj lastne AR izkuˇsnje - AR Sobe Pobega. Podroben opis in uporaba ra- zvojnega okolja sledi v naslednjih poglavjih.

14Style Transfer, ang.

Pregled uporabljenih tehnologij

Razvoj AR Sobe Pobega vkljuˇcuje uporabo razliˇcnih tehnologij iz razliˇcnih podroˇcij. Zdruˇzuje kreativen proces izdelave virtualnih elementov in pisanja scenarija poteka igre ter tehniˇcen proces implementacije le-teh v smiselno delujoˇco celoto.

Za implementacijo potrebujemo razvojno okolje z dostopom do AR funk- cionalnosti in zmoˇznostjo izrisovanja virtualnih, 2D in 3D elementov ter podporo programiranja interakcij z le-temi. Za izdelavo virtualnih elemen- tov potrebujemo programsko opremo, ki omogoˇca izdelavo 3D modelov in podpira izvoz le-teh v ˇzeljenem podatkovnem tipu. Izdelava 3D modelov vkljuˇcuje tudi izdelavo 2D tekstur, uporabljenih zanje. Poleg 3D elementov bomo ustvarili tudi 2D elemente. Zato potrebujemo programsko opremo, ki omogoˇca urejanje in izdelavo 2D elementov.

Razvoj AR Sobe Pobega bo tako potekal v prostodostopnem, razvojnem okolju Lens Studio [23], za katerega smo se odloˇcili na podlagi izkuˇsenj in funkcionalnosti, ki jih ponuja. Uporabljene 3D modele bomo izdelali v pro- stodostopnem programu Blender [6]. Teksture in ostale 2D elemente bomo izdelali v programih Adobe CC.

17

3.1 Lens Studio

Razvojno okolje Lens Studio je bilo izdano leta 2017. Sprva le interno orodje podjetja Snap Inc., je po krajˇsem obdobju zaprte beta verzije, postalo javno dostopno. Razvoj in redne posodobitve se nadaljujejo ˇse danes - v ˇcasu pisanja diplomske naloge, je bila verzija razvojnega okolja 4.1. Predstavitev in uporaba razvojnega okolja temelji na tri-letnih izkuˇsnjah avtorja in API dokumentaciji, dostopni na uradni spletni strani razvojnega okolja.

Razvojno okolje omogoˇca dostop do funkcionalnosti, potrebnih za razvoj AR izkuˇsenj. Pisanje skript je v jeziku JavaScript in temelji na dogodkih¹, kjer lahko definiramo vhode z unikatnimi zastavicami, funkcije, implementi- ramo interakcije in drugo. Vhodi so objekti - od 2D ali 3D elementov, do drugih skript, ki imajo definirane globalno dostopne funkcije.

3.1.1 Osnoven pregled

Ko program zaˇzenemo in ustvarimo nov projekt, nas priˇcaka osnoven po- gled. Osnovno okno programa Lens Studio ima ˇsest podoken, oznaˇcenih s ˇstevilkami na sliki 3.1. Podokna so potrebna za delovanje v tem razvojnem okolju zato, ker razvijamo z razliˇcnimi tipi elementov, ki zasedajo razliˇcne virtualne prostore. ˇStevilke na seznamu pod sliko 3.1, ustrezajo ˇstevilkam podoken na sliki 3.1.

1event-driven programming, ang.

Slika 3.1: Osnoven pogled programa Lens Studio.

1. Podokno scene, urejevalnika in urejevalnika materialov: Glavno podokno za urejanje postavitve scene. Omogoˇca ogled tako 3D kot 2D prostora. Na vrhu okna so zavihki, ki nam omogoˇcajo menjavo pogleda med urejevalnikom skript, materialov in grafiˇcnim, vozliˇsˇcnim² ureje- valnikom skript. Pogled scene nam omogoˇca ogled tako lokalnega³, kot celotnega⁴ 3D prostora. Prikaz lahko omejimo tudi glede na sloje izrisovanja⁵.

2. Podokno objektov: Podokno objektov nam prikazuje vse objekte na sceni. Lahko jih dodajamo, briˇsemo ali spreminjamo, spreminjamo hierarhijo izrisovanja⁶, sloje izrisovanja ali starˇsevske objekte.

3. Podokno sredstev: Podokno sredstev nam prikazuje vsa sredstva, ki smo jih uvozili v program - 2D ali 3D elemente in skripte. Prikazuje

2Node Based Script Graph Editor, ang.

3Local space, ang.

4World space, ang.

5Render layer, ang.

6Render order, ang.

tudi izrisne tarˇce⁷, ki doloˇcajo hierarhijo izrisovanja in kateri elementi so vidni med snemanjem ter kateri po posnetku videa ali slike.

4. Beleˇzno podokno⁸: Beleˇzno podokno prikazuje podrobna sporoˇcila napak, delovanja skript in izpisov funkcijeprint.

5. Podokno podrobnosti: Ko v podoknu 2. s klikom izberemo objekt, se v podoknu podrobnosti prikaˇzejo dodatni podatki izbranega objekta.

Ti vkljuˇcujejo poloˇzaj, rotacijo in velikost objekta in druge, dodatne komponente, ki jih objekt ima.

6. Podokno predogleda: Podokno predogleda nam prikazuje delovanje AR izkuˇsnje. Omogoˇca menjavo scen, ki vkljuˇcujejo posnetke ljudi in okolja, simulacijo razliˇcnih naprav z razliˇcno velikimi zasloni in predo- gled izvornega uporabniˇskega vmesnika aplikacije Snapchat. Slednje je ˇse posebej pomembno, ˇce implementiramo dodatni uporabniˇski vme- snik, saj moramo poskrbeti, da se ne prekriva z izvornim.

3.1.2 Scena

Izrisovanje scene temelji na izrisnih slojih in virtualnih kamerah, ki doloˇcajo, ali je kontekst elementa 2D ali 3D. Tako 2D kot 3D sceni sta vidni v po- doknu scene, ki ga lahko prilagodimo glede na ˇzeljene sloje, na 2D ali 3D kontekst, vidno na sliki 3.2. Elementi v 2D kontekstu zasedajo zaslonski pro- stor⁹, za katerega potrebujemo namenski izrisni sloj in namensko, virtualno, ortografsko kamero¹⁰ za ta sloj.

7Render target, ang.

8Logger, ang.

9Screen-space, ang.

10Ortographic camera, ang.

Slika 3.2: Primer scene v 2D kontekstu (levo) in primer scene v 3D kontekstu (desno)

Delo z izrisnimi sloji nam omogoˇca loˇcitev virtualnih elementov, ne glede na kontekst. V praksi nam to omogoˇci, da lahko imamo veˇc virtualnih ele- mentov, ki zasedajo isti prostor, a so vidni le virtualnim kameram, ki imajo omogoˇcene izbrane sloje. S tem lahko navidezno isto, prenatrpano sceno loˇcimo na veˇc razliˇcnih, ki jih lahko z uporabo skript prikaˇzemo kadarkoli in kakorkoli ˇzelimo.

Razvojno okolje nam v objektnem podoknu, slika 3.1, toˇcka 2., omogoˇca dodajanje nove virtualne kamere. Virtualni kameri nato dodelimo enega ali veˇc, obstojeˇcih ali novo ustvarjenih, izrisnih slojev, ki jih dodelimo tudi ˇzeljenim elementom. Pri tem pazimo, da je element v vidnem polju izbrane virtualne kamere, (slika 3.2). Proces dodajanja virtualne kamere in izbora ter dodeljevanja izrisnih slojev kameri in elementu, je viden na sliki 3.3.

Slika 3.3: Dodajanje virtualne kamere (1), izbor izrisnih slojev kamere (2), izbor izrisnih slojev elementa (3).

Elementom v sceni lahko spreminjamo poloˇzaj, rotacijo in velikost, z upo- rabo podokna podrobnosti, slika 3.1, toˇcka 5., pa tudi druge lastnosti in komponente. Elementom na istih izrisnih slojih lahko doloˇcimo hierarhijo izrisovanja, ki doloˇca vrstni red izrisovanja elementov za ta sloj.

3.1.3 Skripte in animacije

Da bi razvoj AR izkuˇsenj v programskem okolju pribliˇzali zaˇcetnikom in uporabnikom brez izkuˇsenj v programiranju, sta za preproste animacije in interakcije implementirani dve orodji.

• Tween Manageromogoˇca preproste animacije 2D ali 3D elementov - rotacije, translacije in skaliranje. Uporabniki lahko doloˇcijo zaˇcetno in konˇcno stanje, trajanje animacije in funkcijo poteka¹¹animacije. Povod za animacijo je lahko doloˇcen s skripto ali izbran v podoknu. Orodje temelji na funkcijski knjiˇznici TweenJS [37].

11Easing function, ang.

• Behavior Systemomogoˇca preproste interakcije tipa dogodek-posledica.

Uporabniki lahko izberejo dogodek in posledico, tarˇco dogodka in tip posledice. Posledica se lahko doloˇci tudi s skripto. Na primer, dotik zaslona skrije ali ponovno prikaˇze doloˇcen element.

Slika 3.4: Behavior Script, ki ob koncu dotika sproˇzi programatsko funkcijo

”scene“ (levo) in Tween, ki element

”Plane“ premakne na koordinate

”End“

(desno).

Kompleksnejˇse interakcije se piˇse v skriptah v jeziku JavaScript. Pro- gramsko okolje ima dobro dokumentiran API, dostopen na uradni spletni strani, ki omogoˇca razvoj dodatnih, kompleksnih interakcij in animacij. Pro- gramsko okolje ima lasten, dinamiˇcen urejevalnik z dostopom do osnovnih funkcij jezika JavaScript in namenskih API funkcij.

Elemente je potrebno definirati kot vhode na vrhu skripte, da omogoˇcimo dostop do njihovih lastnosti v kontekstu skripte, ki jih lahko potem poljubno spreminjamo. API nam omogoˇca tudi dostop do orodij Tween Manager in Behavior System, za katere lahko definiramo lastne funkcije in odzive.

1 // - - - J a v a S c r i p t - - - - -

2 // @ i n p u t S c e n e O b j e c t box

3 // @ i n p u t S c e n e O b j e c t t w e e n

4

5 f u n c t i o n a n i m a t e () {

6 p r i n t (" A n i m a t i o n s t a r t e d ... ") ;

7 g l o b a l. t w e e n M a n a g e r . s t a r t T w e e n (s c r i p t. tween , " m o v e ") ;

8 }

9

10 var t a p E v e n t = s c r i p t. c r e a t e E v e n t (" T a p E v e n t ") ;

11 t a p E v e n t . b i n d (f u n c t i o n( e )

12 {

13 s c r i p t. box . e n a b l e d = f a l s e;

14 a n i m a t e () ;

15 }) ;

Izsek kode 3.1: Primer skripte

V izseku kode 3.1, je primer preproste skripte, ki demonstrira definiranje vhodov, kreiranje dogodkov in definiranje funkcij. Skripta ob dotiku zaslona skrije element box in kliˇce funkcijo animate, ki sproˇzi Tween z imenommove in v beleˇzno podokno, slika 3.1, toˇcka 4., izpiˇse niz

”Animation started...“.

3.1.4 Omejitve

Konˇcana AR izkuˇsnja, razvita v programskem okolju Lens Studio, se lahko objavi in uporablja na platformi Snapchat. Ker je Snapchat mobilna aplika- cija, moramo ob razvijanju v tem programskem okolju upoˇstevati doloˇcene omejitve, ki zagotavljajo delovanje na veˇcini mobilnih naprav [23].

• FPS: AR izkuˇsnja naj med delovanjem cilja na 30 sliˇcic na sekundo.

Za mobilni operacijski sistem iOS je spodnja meja 27 sliˇcic na sekundo, na napravah iPhone 6 in boljˇsih, za mobilni operacijski sistem Android pa je spodnja meja 15 sliˇcic na sekundo, na napravah nivoja Samsung Galaxy S6 in boljˇsih.

• Spomin: AR izkuˇsnja naj med delovanjem, ne preseˇze 150 MB RAM spomina.

• Velikost: Celotna AR izkuˇsnja z vsemi potrebnimi sredstvi, naj ne presega 8 MB.

• Resolucija textur: Uporabljene teksture, naj ne presegajo resolucije 2048x2048 px.

• 3D modeli: Uporabljeni 3D modeli, naj imajo manj kot 100000 tri- kotnikov.

Razvoj je tako potrebno prilagoditi zgoraj napisanim omejitvam, da lahko konˇcano AR izkuˇsnjo objavimo in uporabljamo na platformi Snapchat. Za- radi omejitev velikosti, ima razvojno okolje Lens Studio integrirano moˇznost stiskanja in optimizacije slikovnih datotek. Postopek omogoˇca izbiro tipa op- timizacije in kvaliteto, viden na sliki 3.5. Dobro optimizirane datoteke bodo zniˇzale velikost AR izkuˇsnje in porabo spomina RAM.

Slika 3.5: Moˇznosti stiskanja in optimizacije slikovnih datotek.

Porabo spomina RAM zniˇzamo tudi z optimizacijo scene. Dodajanje vir- tualnih kamer in izrisnih slojev je sicer neomejeno, vendar drastiˇcno vpliva na koliˇcino uporabljenega spomina RAM. Animirani deli in izvajanje skript prav tako vplivajo na porabo spomina RAM, zato moramo biti pozorni pri

uporabi, implementaciji in izvajanju skript in animacij. Izvajanje skript in animacije elementov vplivajo tudi na delovanje izkuˇsnje same, saj lahko dra- stiˇcno zniˇzajo koliˇcino sliˇcic na sekundo, zato je optimiziranje scene in upo- rabljenih elementov, ena najpomembnejˇsih stvari, ki jih lahko naredimo, da zagotovimo gladko delovanje izkuˇsnje.

Kljub strogim omejitvam na porabo prostora in spomina RAM ter zah- tevam delovanja, je veˇc kot dovolj manevrskega prostora za razvoj zanimive, interaktivne in zabavne AR izkuˇsnje. Omejitve nas primorajo v kreativne reˇsitve in dobro naˇcrtovanje ˇzeljenih funkcionalnosti.

3.1.5 Objava

Objava je zadnji korak razvoja AR izkuˇsnje v programskem okolju Lens Stu- dio. Tekom dela lahko AR izkuˇsnjo naloˇzimo na telefon za potrebe testiranja, a je dostopna le nam. Javna objava nam omogoˇca objavo naˇsega dela, do- stopnega vsem uporabnikom platforme.

Pred objavo v podoknu

”Project Info“ doloˇcimo ime AR izkuˇsnje, iz- beremo za katero kamero je bila primarno narejena, in izberemo primeren namig, ki uporabniku nakaˇze uporabo izkuˇsnje. Osnovni namigi so prepro- sti, zato je pri veˇcjih projektih potrebna implementacija lastnega namiga.

Podokno nam prikaˇze tudi trenutno velikost izkuˇsnje in nas opozori, ˇce je prevelika. Za objavo potrebujemo ˇse ikono in predogled izkuˇsnje v akciji, ki je lahko video, krajˇsi od treh sekund, ali slika. Podokno je vidno na sliki 3.7.

Slika 3.6: Podokno

”Project Info“.

Ko smo prepriˇcani, da smo upoˇstevali vse omejitve in izpolnili ter dodali vse potrebne dodatne elemente, kot so ikona in predogled, lahko izkuˇsnjo objavimo. Imamo veˇc moˇznosti objave, ki spreminjajo vidnost izkuˇsnje - ali je dostopna vsem, samo tistim s povezavo, ali pa je skrita.

Slika 3.7: Objava nove izkuˇsnje (levo) in izbor vidnosti (desno).

Objavljena, javna izkuˇsnja je tako dostopna vsem. Okolje nam omogoˇca dostop do podatkov uporabe, kjer lahko vidimo koliˇcino interakcij, deljenja, ogledov in uporab AR izkuˇsnje.

3.2 Blender

Za izdelavo 3D elementov, uporabljenih v AR Sobi Pobega, bomo upora- bili prostodostopno orodje Blender [6], izdano 13. oktobra 2002 pod GNU GPL licenco s strani neprofitne organizacije

”Blender Foundation“ [6]. V letih razvoja, ki so sledila, je organizacija Blender Foundation, s pomoˇcjo aktivne skupnosti uporabinkov, izdala vrsto kratkih animiranih filmov, ki so dokazovali zmogljivosti programa. Z razliˇcico Blender 2.8, izdano julija 2019, je Blender prodrl v industrijo in se s tem priznal kot legitimna alternativa drugim, plaˇcljivim orodjem [6].

Prostodostopno, odprtokodno orodje Blender je odliˇcno za potrebe di- plomske naloge, saj podpira vse potrebne podatkovne tipe in omogoˇca zmo- gljiv, intuitiven delovni tok. Uporabili bomo razliˇcico 2.93.2.

Slika 3.8: Osnoven pogled programa Blender

Zaradi omejitev programskega okolja Lens Studio, je potrebno omejiti koliˇcino ploskev 3D modelov. Zato bomo uporabili tehnike modeliranja za 3D modele s preprosto topologijo. Uporaba tekstur in tekstur normal, nam bo omogoˇcila sprejemljiv nivo podrobnosti kljub omejitvam, umetniˇski slog

pa lahko prilagodimo

”low-poly¹²“ naˇcinu modeliranja.

Da se izognemo preostrim robovom preprostih 3D modelov, lahko upora- bimo orodje

”Bevel“, ki nam omogoˇca

”zaokroˇzevanje“ stranic med dvema ploskvama. Robovi so v resniˇcnem ˇzivljenju redkokdaj popolnoma ostri, zato mehkejˇsi robovi 3D modelov pogosto izgledajo bolj realistiˇcno kot ostri [7].

Orodje izbrano stranico, glede na doloˇcen nivo, razdeli in jo s tem zaokroˇzi.

Slika 3.9: Stranica kocke z razliˇcnimi nivoji uporabe orodja Bevel.

Uporabo orodja Bevel bomo kombinirali s funkcionalnostjo

”Smooth Shade¹³“, ki bo dodatno omehˇcala sence in povrˇsino 3D modela. S tem si bomo za- gotovili bolj realistiˇcne 3D modele, kljub manjˇsemu ˇstevilu ploskev. Poleg gladkega senˇcenja, pa bomo uporabili tudi funkcionalnost

”Auto Smooth¹⁴“, ki doda dodaten parameter k definiranju ostrega roba, kot med ploskvami.

Efekt obeh funkcionalnosti je viden na sliki 3.10. Sicer relativno subtilen pri oglatih 3D modelih, se najbolje vidi, ko so modeli animirani in se svetlobni kot spreminja.

12Nizka koliˇcina ploskev, slo.

13Gladko senˇcenje, slo.

14Avtomatsko glajenje, slo.

Slika 3.10: Senˇcenje brez glajenja (levo), gladko senˇcenje in

”auto smooth“

parameter vrednosti 45°.

S pomoˇcjo omenjenih funkcionalnosti in nekaj modifikatorjev, podrobneje predstavljenih v poglavju 5.1.1, bomo ustvarili preproste, a efektivne 3D elemente, ki jih bomo uporabili v naˇsi AR izkuˇsnji. Ker 3D modelov ne bomo animirali v programu Blender, jih bomo izvozili v podatkovnem tipu .obj, ki sicer ne podpira izvoza tekstur in materialov, kar pa ni problem, saj jih bomo uvozili in naredili v programu Lens Studio.

3.3 Programi Adobe Creative Cloud

Za izdelavo 2D elementov in nekaterih tekstur 3D elementov, bomo potrebo- vali tudi nekatere programe zbirke Adobe Creative Cloud. Adobe Creative Cloude je zbirka veˇc kot 20 programov za kreativen proces dela, ki vkljuˇcuje programe kot so After Effects, Lightroom, Premiere, Photoshop CC, Illu- strator CC ... Slednja bomo uporabili za izdelavo 2D elementov AR sobe pobega.

3.3.1 Adobe Photoshop CC

Adobe Photoshop CC je programsko okolje, ki uporabniku omogoˇca obdelavo in manipulacijo slik. Uporabili ga bomo za manipulacijo prostodostopnih tekstur, pridobljenih iz virov kot socc0textures inBlenderKit, in za izdelavo namenske teksture, edinstvene razvojnemu okolju Lens Studio, imenovane parametri materiala¹⁵, ang., ki vpliva na izraˇcun odboja svetlobe s parametri kovinskosti¹⁶, grobosti¹⁷ in ambientnega senˇcenja.

Slika 3.11: Primer teksture parametrov materiala, ki zdruˇzuje teksture grobo- sti, kovinskosti in ambientnega senˇcenja.

Teksturo parametrov materiala, vidno na sliki 3.11, izdelamo tako, da v program Photoshop uvozimo teksture kovinskosti, grobosti in ambientnega senˇcenja ter jim spremenimo barvne kanale, ki jih zasedajo. Tekstura kovin- skosti tako zasede rdeˇci barvni kanal, grobosti zelen in tekstura ambientnega senˇcenja moder barvni kanal. S spremembo barvnih kanalov teksture ko-

15Material params

16Metallic, ang.

17Roughness, ang.

vinskosti, grobosti in ambientnega senˇcenja, zdruˇzimo v eno teksturo, kar je uporabno predvsem zaradi omejene porabe prostora izkuˇsnje.

3.3.2 Adobe Illustrator CC

Adobe Illustrator CC je programsko okolje, ki uporabniku omogoˇca izdelavo vektorskih grafik. Uporabili ga bomo za izdelavo elementov uporabniˇskega vmesnika in ikone AR izkuˇsnje, upoˇstevajoˇc omejitve razvojnega okolja Lens Studio. Programsko okolje ne podpira vektorskega zapisa grafik, temveˇc le dva podatkovna tipa, .png in .jpg, v katerih bomo izvaˇzali naˇse elemente.

Podatkovni tip.png, bomo uporabili ko bo potrebno ohraniti transparentnost grafike, podatkovni tip.jpg, pa ko to ne bo potrebno.

Slika 3.12: Urejanje podrobnosti izvoza podokna

”Save for Web (Legacy)“.

Programsko okolje nam omogoˇca nadzor nad kvaliteto izvoza vidno na sliki 3.12, s ˇcimer lahko omejimo velikost elementa samega, najverjetneje pa bo potrebno uporabiti tudi vdelano funkcionalnost optimiziranja slik v razvojnem okolju Lens Studio.

Naˇ crtovanje AR sobe pobega

Izdelava AR sobe pobega zdruˇzuje tako tehnoloˇski kot kreativen proces dela.

Orodja, predstavljena vpoglavju 3., nam bodo omogoˇcila izdelavo AR sobe pobega. S prostodostopnim programom Blender, bomo izdelali 3D elemente, ki bodo del izkuˇsnje. S programi Adobe CC, bomo izdelali 2D elemente, ki bodo sluˇzili kot ikone, elementi uporabniˇskega vmesnika in teksture. Z razvojnim okoljem Lens Studio, pa bomo vse elemente zdruˇzili in implemen- tirali v sobo pobega v obogateni resniˇcnosti.

4.1 Zakaj naˇ crtovati?

Zaradi kompleksnosti projekta in da zadostimo omejitvam razvojnega okolja Lens Studio, predstavljenih v podpoglavju 3.1.4, je potrebno celotno AR izkuˇsnjo dobro naˇcrtovati. Poskrbeti moramo, da uporabljeni elementi ne presegajo omejitev velikosti, delovanje pa ustreza omejitvam porabe spomina RAM in ciljni koliˇcini sliˇcic na sekundo.

Seveda pa moramo naˇcrtovati tudi izkuˇsnjo samo. Navodila morajo biti jasna in razumljiva, naˇcrtovati moramo intuitivne uporabniˇske interakcije, uganke in izzive. Potek celotne izkuˇsnje pa mora biti zanimiv in ne preveˇc zahteven.

33

4.1.1 Uporabniˇ ske interakcije

AR izkuˇsnja bo izkoristila polni potencial uporabniˇskih interakcij, podprtih v razvojnem okolju Lens Studio. Izzivi bodo uporabili funkcionalnosti dotikov zaslona, prepoznavanja predmetov in sledenja poloˇzaja ter rotacije naprave.

• Uporabniˇski vmesnik bo implementiran na podlagi dogodkov tipa

”TapEvent“ in uporabe sistema

”Behavior System“, za animacije pa bomo uporabili sistem

”Tween Manager“, obe orodji opisani v poglavju 3.1.3. S pomoˇcjo le-teh bomo implementirali funkcionalen uporabniˇski vmesnik.

1 // - - - J a v a S c r i p t - - - - -

2 // @ i n p u t C o m p o n e n t . S c r e e n T r a n s f o r m t a p T a r g e t

3

4 var t a p E v e n t = s c r i p t. c r e a t e E v e n t (" T a p E v e n t ") ;

5

6 t a p E v e n t . b i n d (f u n c t i o n( e )

7 {

8 var t a p P o s = e . g e t T a p P o s i t i o n () ;

9 if(s c r i p t. t a p T a r g e t . c o n t a i n s S c r e e n P o i n t ( t a p P o s ) ) {

10 // I z v a j a n j e p o s l e d i c e d o t i k a e l e m e n t a t a p T a r g e t

11 // ...

12 }

13 }) ;

Izsek kode 4.1: Primer uporabe dogodka TapEvent za potrebe uporabniˇskega vmesnika.

• Prepoznavanje predmetovbomo izkoristili z uporabo funkcionalno- sti ”Scan“. Relativno nova funkcionalnost, ki je izˇsla z verzijo razvoj- nega okolja 4.1, nam omogoˇca prepoznavo predmetov. Funkcionalnost prepozna 500 predmetov kategorije

”objects“, celoten seznam je dosto- pen na spletni dokumentaciji [32]. Uporaba funkcionalnosti je vidna na izseku kode 4.2.

1 // - - - J a v a S c r i p t - - - - -

2 // @ i n p u t C o m p o n e n t . S c r e e n T r a n s f o r m s c a n B u t t o n

3 // @ i n p u t A s s e t . S c a n M o d u l e s c a n M o d u l e

4 // @ i n p u t A s s e t . T e x t u r e s c r e e n T e x t u r e

5

6 f u n c t i o n s c a n C o m p l e t e ( j s o n ) {

7 // K l i c s c a n uspel , o b d e l a v a r e z u l t a t a j s o n

8 // ...

9 }

10

11 f u n c t i o n o n F a i l u r e ( e ) {

12 // s c a n f a i l e d

13 p r i n t (" S c a n f a i l u r e : " + e ) ;

14 }

15

16 var t a p E v e n t = s c r i p t. c r e a t e E v e n t (" T a p E v e n t ") ;

17 t a p E v e n t . b i n d (f u n c t i o n( e )

18 {

19 var t a p P o s = e . g e t T a p P o s i t i o n () ;

20 if(s c r i p t. s c a n B u t t o n . c o n t a i n s S c r e e n P o i n t ( t a p P o s ) ) {

21 s c r i p t. s c a n M o d u l e . s c a n ([ S c a n M o d u l e . C o n t e x t s . O b j e c t s ] , s c a n C o m p l e t e , o n F a i l u r e ) ;

22 }

23 }) ;

Izsek kode 4.2: Primer uporabe funkcionalnosti scan. Ob dotiku elementa scanButton, se izvede oddaljen klic za funkcionalnost scan. ˇCe uspe, se kliˇce funkcija scanComplete, ˇce ne se kliˇce funkcija onFailure.

• Do rotacije in lokacije naprave bomo dostopali znotraj dogodka

”UpdateEvent“. Z uporabo lastnosti objektov

”.transform“, lahko do- stopamo do rotacije in lokacije scenskih objektov tako v lokalnem, kot celotnem prostoru. Na podlagi tega lahko implementiramo interakcije, ki temeljijo na razdalji med uporabnikom in virtualnim elementom.

Primer dostopa do lokacij je viden na izseku kode 4.3.

1 // - - - J a v a S c r i p t - - - - -

2 // @ i n p u t C o m p o n e n t . C a m e r a c a m e r a

3 // @ i n p u t S c e n e O b j e c t o b j e c t

4

5 var u p d a t e E v e n t = s c r i p t. c r e a t e E v e n t (" U p d a t e E v e n t ") ;

6

7 var c a m T r a n s f o r m = s c r i p t. c a m e r a . g e t T r a n s f o r m () ;

8 var o b j e c t T r a n s f o r m = s c r i p t. o b j e c t . g e t T r a n s f o r m () ;

9

10 u p d a t e E v e n t . b i n d (f u n c t i o n( e )

11 {

12 var c a m P o s = c a m T r a n s f o r m . g e t W o r l d P o s i t i o n () ;

13 var o b j P o s = o b j e c t T r a n s f o r m . g e t W o r l d P o s i t i o n () ;

14 // ...

15 }) ;

Izsek kode 4.3: Dostopanje do lokacije elementa object in lokacije uporabnika skozi virtualno kamero camera.

Uporabiˇski vmesnik, interakcije glede na razdaljo med virtualnimi elementi in uporabnikom ter uporaba funkcionalnosti

”Scan“ v kombinaciji z resniˇcnimi, otipljivimi elementi, tako pokrijejo spekter podprtih interakcij.

4.1.2 Uganke in izzivi

Implementirane uganke in izzivi morajo ustrezati omejitvam razvojnega oko- lja in osnovni zanki poteka iz podpoglavja 2.1.1. Izkuˇsnja bo zato imela tri med seboj povezane izzive, kjer bo reˇsitev prvega izziva sluˇzila kot namig ali kljuˇcen element drugega. Izzivi se bodo razlikovali glede na uporabljeno tehnologijo, saj bo vsak temeljil na drugi funkcionalnosti razvojnega okolja in drugem vidiku tehnologije obogatene resniˇcnosti. Tekom reˇsevanja izzivov se bo uporabniku meril ˇcas, ki bo prikazan na koncu izkuˇsnje.

• Izziv 1: Iskanje predmeta. Uporabniki bodo morali poiskati re- sniˇcen predmet, nakljuˇcno izbran iz seznama. Z uporabo funkcional- nosti

”Scan“ razvojnega okolja Lens Studio, ki posnetek zaslona poˇslje na oddaljeni streˇznik, kjer se z uporabo raˇcunalniˇskega vida predmet klasificira. Predmeti so izbrani iz seznama podprtih predmetov [32], iz- branih pa jih je deset: apple, spoon, bread, chair, clock, couch, lemon, plate, ruler, scarf.

Vsi nizi so sestavljeni iz petih ˇcrk, saj je predmet tega izziva namig za reˇsitev naslednjega. Poleg dolˇzine, so bili predmeti izbrani tudi glede na njihovo pogostost v povpreˇcnem gospodinjstvu. Zaradi uporabe tehnologije

”scan“, bo na zaˇcetku izkuˇsnje uporabnik dobil sporoˇcilo, da se bodo posnetki zaslona, uporabljeni za prepoznavo predmetov, poslali na oddaljen streˇznik. Brez privoljenja uporabnika, izziv ne bo deloval.

Slika 4.1: Sporoˇcilo o uporabi tehnologije

”scan“.

• Izziv 2: Cryptex. Cryptex je votel valj, na katerem je cilindriˇcna, ˇcrkovna, kombinacijska kljuˇcavnica. Termin za predmet je skoval pi- satelj Dan Brown za svoj roman Da Vincijeva ˇSifra [11]. Uporabniki bodo morali poiskati pravilno pet-ˇcrkovno geslo, ki bo cryptex odprlo.

Namig za geslo je predmet, ki so ga morali poiskati v izzivu 1. Na primer, ˇce je predmet iz izziva 1 jabolko, je geslo za cryptexapple. V cryptexu se skriva kljuˇc, predmet, potreben za reˇsitevizziva 3.

Izziv bo izkoristil zaslonski prostor, na katerem se bo pojavil upo- rabniˇski vmesnik, ki bo uporabnikom omogoˇcil premik posameznih ci- lindrov na ˇzeljeno ˇcrko.

Slika 4.2: Primer cryptex-a s petimi cilindri [12].

• Izziv 3: Sef. Izziv bo izkoristil funkcionalnosti sledenja gibanja upo- rabnika. Pred uporabnikom se bo pojavil sef v obliki kocke, s petimi kljuˇcavnicami. Kljuˇc iz izziva 2 odpre le eno kljuˇcavnico - tisto, ki ima enak simbol kot kljuˇc.

4.1.3 Uporabniˇ ski vmesnik

Uporabniˇski vmesnik bo uporabniku omogoˇcil interakcijo z virtualnim oko- ljem, poleg tega pa bo prikazoval vizualne namige. Vkljuˇcevati mora nekaj kljuˇcnih funkcionalnosti.

• Navodila. Navodila morajo biti jasna in razumljiva. Prikazala se bodo na zaˇcetku AR izkuˇsnje, med reˇsevanjem izzivov pa na namenskem podoknu in z vizualnimi namigi.

• Vizualni namigi. Vizualni namigi so sploˇsni 2D elementi, ki se bodo prikazali glede na kontekst. Priizzivu 1, na primer, bodo pokazali, ali je uporabnik skeniral pravilen predmet.

• Interakcije. Uporabniˇski vmesnik za interakcije je tudi odvisen od konteksta. Pri izzivu 2, na primer, bo uporaben za rotacijo cilindrov cryptexa.

Implementacija bo izkoristila funkcionalnosti orodij

”Behavior System“

in”Tween Manager“ v kombinaciji s programskimi dogodki tipa

”TapEvent“

za animacije in delovanje. Pri izgledu uporabniˇskega vmesnika pa moramo biti pozorni na postavitev elementov, da jih ne prekrivajo elementi izvornega uporabniˇskega vmesnika aplikacije Snapchat. Za to deloma poskrbi razvojno okolje Lens Studio, z uporabo omejitev izrisnih regij v zaslonskem prostoru.

Slika 4.3: Moˇznosti omejevanja izrisovanja 2D elementov glede na regijo za- slona.

Kot je vidno na sliki 4.3, bomo veˇcino elementov izrisovali v regiji z ime- nom ”varno izrisovanje¹“, ki zagotovi, da se 2D elementi ne prekrivajo z elementi uporabniˇskega vmesnika aplikacije Snapchat. Za neinteraktivne 2D elemente, ki sluˇzijo izgledu ali izpisu raznih informacij, lahko uporabimo

1Safe Render, ang.

regijo z imenom

”v ˇzivo²,“ pri kateri moramo sami paziti na morebitna pre- krivanja, a nam omogoˇci dostop do veˇcje povrˇsine zaslonskega prostora.

4.1.4 Potek izkuˇ snje

Potek AR sobe pobega bo sledil osnovni zanki opisani v podpoglavju 2.1.1.

Uporabnika bo ob zagonu AR izkuˇsnje pozdravilo sporoˇcilo z navodili upo- rabe in zgodbo. Ko bo uporabnik sporoˇcilo zaprl, se bo zaˇcel ˇsteti ˇcas in soba pobega se bo uradno zaˇcela.

Prvi izziv bo izziv 1, opisan v poglavju 4.1.2. Takoj, ko bo uporabnik s telefonom posnel pravi predmet, mu bo na voljo postal izziv 2, dostopen skozi uporabniˇski vmesnik. Ko bo v cryptexizziva 2vnesel pravilno ˇsifro, bo uporabniku na voljo zadnji izziv, izziv 3. Po uspeˇsnem zakljuˇcku zadnjega izziva, se bo uporabniku prikazal zakljuˇcni pogled in ˇcas, porabljen za reˇsitev izkuˇsnje.

2Live, ang.

Izdelava AR sobe pobega

Izdelava AR sobe pobega obsega izdelavo 2D in 3D elementih v programih Blender, Adobe Illustrator CC in Adobe Photoshop CC ter uporoba in imple- mentacijo le-teh v AR izkuˇsnjo v razvojnem okolju Lens Studio. Predstavitev uporabljene tehnologije je v poglavju 3, uporabljene tehnike razvoja pa bodo predstavljene v tem poglavju.

5.1 Elementi

AR izkuˇsnja za delovanje uporablja 2D in 3D elemente. 2D elementi so uporabljeni za potrebe uporabniˇskega vmesnika, 3D elementi pa za izziva 2 in 3, opisana v podpoglavju 4.1.2. Pri izdelavi smo bili pozorni na omejitve razvojnega okolja Lens Studio, opisane v podpoglavju 3.1.4.

5.1.1 3D elementi

Izdelava 3D modelov poteka v programu Blender, izdaja 2.93.2, kjer smo za materiale in teksture uporabili prostodostopno orodje

”BlenderKit“. Kjer je bila potrebna dodatna obdelava tekstur in za izdelavo teksture parame- trov materialov, opisane v podpoglavju 3.3.1, smo uporabili program Adobe Photoshop CC.

41

Cryptex

Cryptex je eden izmed izzivov sobe pobega in je sestavljen iz veˇc kombinacij- skih valjˇckov. Zaˇceli smo z modeliranjem osnovnega kombinacijskega valjˇcka.

Ker ima angleˇska abeceda 26 ˇcrk, smo ustvarili nov valj z osnovno ploskvijo, ki ima 26 toˇck ali ogliˇsˇc¹. Plaˇsˇc valja je tako sestavljen iz 26 ˇstirioglatih ploskev, ki jih bomo uporabili za prikaz posameznih ˇcrk abecede.

Slika 5.1: Dodajanje valja (levo) in izhodiˇsˇcna toˇcka modeliranja (desno).

Robove valja smo omehˇcali z orodjem

”bevel“, predstavljenim v pod- poglavju 3.2. Stranice, ki loˇcujejo ploskve, smo potrojili z uporabo orodja

”bevel“, kar nam je omogoˇcilo, da smo ploskve, ki bodo prikazovale ˇcrke, loˇcili s plitvimi vdolbinami in jih s tem dodatno poudarili. Za prikaz teks- tur je potrebno 3D model UV razviti. UV razvijanje je proces, potreben za projekcijo 2D tekstur na 3D model. Ogliˇsˇca 2D likov v UV koordinatnem prostoru ustrezajo ogliˇsˇcem 3D modela, urejanje UV mreˇze pa nam omogoˇci nadzor nad projekcijo teksture. Za UV razvijanje 3D modela je bilo po- trebno oznaˇciti robove², po katerih se 3D model razvije. Program Blender nam omogoˇca avtomatsko razvijanje glede na oznaˇcene robove. Nastala, av- tomatsko generirana UV mreˇza, je potrebovala nadalnje obdelovanje, saj so

1Vertex, ang.

2Seam, ang.

ploskve, namenjene ˇcrkam, bile raztegnjene. Ker urejene UV mreˇze olajˇsajo proces izdelave tekstur, smo UV mreˇzo kombinacijskega valja prilagodili po- trebam naˇse teksture.

Slika 5.2: Valj z oznaˇcenimi robovi (1), avtomatsko generirana UV mreˇza (2), popravljena UV mreˇza (3).

Z UV razvojem je model osnovnega kombinacijskega valjˇcka konˇcan. Ker je naˇs cryptex namenjen za nize dolˇzine 5 ˇcrk, smo uporabili modifikator

”Array³“, ki omogoˇca preprosto ponavljanje 3D modelov. Modifikator smo potrdili in nastalim 3D modelom dodelili popravljeno UV mreˇzo, vidno na sliki 5.2, saj vseh 5 modelov uporablja isto teksturo.

Slika 5.3: Nastavitve modifikatorja

”Array“ (levo) in rezultat (desno).

Cryptex potrebuje le ˇse robne elemente, ki kombinacijske valjˇcke drˇzijo skupaj. Naredili smo jih iz dveh preprostih valjev, katerima smo omehˇcali

3Vrsta, slo.

izgled s funkcionalnostjo mehkega senˇcenja in uporabo orodja

”bevel“. Upo- raba slednjega pri modeliranju osnovnega kombinacijskega valjˇcka, sluˇzi tudi kot loˇcilo med ponavljajoˇcimi se kombinacijskimi valjˇcki.

Slika 5.4: Osnoven, neteksturiran 3D model Cryptex-a.

Modeliranje 3D modela Cryptex-a je s tem konˇcano. 3D model ima 1678 ogliˇsˇc in 1846 ploskev ter je tako pripravljen na teksture. Osnovne teksture smo pridobili z orodjem

”BlenderKit“. Dodatno obdelavo tekstur smo nare- dili v programu Adobe Photoshop, kjer smo teksturi kombinacijskih valjˇckov dodali ˇcrke in zdruˇzili teksture ambientnega senˇceja, kovinskosti in grobosti, v teksturo parametrov materialov, po postopku, opisanem v podpoglavju 3.3.1. Konˇcane teksture so vidne na sliki 5.5.

S teksturami je 3D model, potreben za izziv 2 AR sobe pobega konˇcan.

Ker bo animiranje posameznih kombinacijskih valjˇckov potekalo v razvojnem okolju Lens Studio, lahko 3D model izvozimo v podatkovnem tipu .obj in ga uvozimo v Lens Studio. Model, kakrˇsen izgleda s konˇcanimi teksturami, upodobljen v izrisnem grafiˇcnem okoljuEevee programa Blender, je viden na sliki 5.6.

Slika 5.5: Osnovna tekstura kombinacijskih valjˇckov (1), tekstura normal (2), tekstura parametrov materiala (3), osnovna tekstura robnih valjˇckov (4), te- kstura normal (5), tekstura parametrov materiala (6)

Slika 5.6: Konˇcan 3D model Cryptex-a, upodobljen v izrisnem grafiˇcnem oko- lju Eevee programa Blender.

Sef

Sef je tretji izziv sobe pobega. Osnovna oblika sefa je kvadrat, kar nam olajˇsa modeliranje 3D modela. Modeliranje smo zaˇceli s kvadratom, ki smo ga z orodjem

”bevel“ in funkcionalnostjo gladkega senˇcenja omehˇcali. Na petih ploskvah sefa smo vzdignili ploskve, ki bodo sluˇzile kot osnova kljuˇcavnice.

Spodnje ploskve sefa se nismo dotaknili, saj bo v izkuˇsnji vzporedna s tlemi in uporabniku tako nevidna. Znova se zanaˇsamo na teksture, da dodajo fine podrobnosti 3D modela, zato je osnovni model preprost.

Slika 5.7: Osnoven 3D model sefa.

Sledili so vizualni namigi kljuˇcavnic, ki uporabniku pomagajo pri reˇsevanju izziva. Vizualni namigi so preprosti simboli: kvadrat, krog, trikotnik, karo in preprosta zvezda. Simboli so preprosti 3D modeli, ki so dodani k osnov- nemu modelu, vidnemu na sliki 5.7. Simboli ustrezajo simbolu kljuˇca in so predstavljeni na sliki 5.8.

Slika 5.8: 3D modeli simoblov (levo) in osnoven 3D model sefa z vizualnimi namigi (desno).

Za modeliranje kljuˇcavnic smo uporabili Blenderjev modifikator

”Boo- lean“. Modifikator

”Boolean“ omogoˇca osnovne operacije unije, preseka in razlike med dvema 3D modeloma. Za potrebe sefa, smo uporabili razliko, kar pa je pomenilo, da naredimo model

”polne“ kljuˇcavnice. Modifikator je pre- prosto, a uˇcinkovito orodje za dodajanje tovrstne geometrije 3D modelom, saj vse do potrditve omogoˇca spreminjanje poloˇzaja in oblike 3D modela uporabljenega za operacijo.

Slika 5.9: Nastavitve modifikatorja

”Boolean“ in model

”polne“ kljuˇcavnice (desno).

Z uporabo modifikatorja

”Boolean“ smo konˇcali z modeliranjem 3D mo- dela sefa. Priprave UV mreˇze smo tokrat prepustili programu Blender, saj teksturam nismo dodali dodatnih podrobnosti. 3D model ima 1357 ogliˇsˇc in

2596 ploskev ter je bil izvoˇzen v podatkovnem tipu .obj. Model brez tekstur je viden na sliki 5.10.

Slika 5.10: Konˇcan, neteksturiran 3D model sefa.

Modelu smo tokrat dodelili tri materiale, saj nam tako program Blen- der, kot razvojno okolje Lens Studio to dopuˇsˇca. S tem pridobimo dodatne podrobnosti, brez zdruˇzevanja dveh (ali veˇc) tekstur in dodatnega urejanja UV mreˇz. Teksture in materiale smo znova pridobili z orodjem

”Blender- Kit“, material, uporabljen za namige - simbole, pa smo generirali z uporabo urejevalnika materialov razvojnega okolja Lens Studio. Teksture parametrov materiala smo znova naredili iz tekstur kovinskosti, grobosti in ambientnega senˇcenja v programu Adobe Photoshop CC, po postopku, opisanem v pod- poglavju 3.3.1. Uporabljene teksture so vidne na sliki 5.11, 3D model sefa, kakrˇsen izgleda s konˇcanimi teksturami, upodobljen v izrisnem grafiˇcnem okolju Eevee programa Blender, pa je viden na sliki 5.12.

Slika 5.11: Osnovna tekstura sefa (1), tekstura normal (2), tekstura parame- trov materiala (3), osnovna tekstura ploskev kljuˇcavnic (4), tekstura normal (5), tekstura parametrov materiala (6).

Slika 5.12: Konˇcan 3D model sefa, upodobljen v izrisnem grafiˇcnem okolju Eevee programa Blender.

Kljuˇc

Kljuˇc je nagrada izziva 2 in povezava med staromodnim izgledom 3D modela Cryptex-a in znanstveno fantastiˇcnim izgledom 3D modela sefa, ki je glavni del izziva 3. 3D model kljuˇca zato zdruˇzuje staromodne in znanstveno fan- tastiˇcne elemente. Zaˇceli smo s preprostim valjem, ki smo ga oblikovali v osnovno obliko staromodnega kljuˇca z uporabo orodij

”extrude“ in

”bevel“.

Ostre robove smo dodatno omehˇcali s funkcionalnostjo gladkega senˇcenja.

Slika 5.13: Osnoven 3D model kljuˇca.

Kljuˇcu smo nato dodali znanstveno fantastiˇcen element, ki, med drugim, sluˇzi tudi prikazu vizualnega namiga, potrebnega za reˇsitev izziva 3. Element je preprost, saj se zanaˇsamo na teksture, da nam prikaˇzejo dodatne podrob- nosti. Zaˇceli smo z osnovno kocko, ki smo ji spremenili obliko in omehˇcali robove z orodjem

”bevel“ in funkcionalnostjo gladkega senˇcenja.

Znanstveno fantastiˇcni element kljuˇca smo dodatno povezali s kljuˇcem, z uporabo bezierjevih krivulj, ki sluˇzijo kot 3D modeli ˇzic, ki vodijo iz znan- stveno fantastiˇcnega elementa v kljuˇc. Bezierjeve krivulje nam omogoˇcajo preprosto urejanje in dodajanje toˇck krivulj, brez dodatne geometrije. Ko smo zadovolnji z lego in obliko krivulje, lahko geometrijo dodamo v podoknu krivulj. Celoten postopek je viden na sliki 5.14.