Univerza v Ljubljani Fakulteta za elektrotehniko, Fakulteta za raˇcunalniˇstvo in informatiko Tim Kriˇznik Veˇcuporabniˇske spletne aplikacije v navidezni resniˇcnosti Diplomsko delo Univerzitetni ˇstudijski program prve stopnje Multimedija Mentor: doc. dr. Joˇze Guna Ljubljana, 2020 Zahvala Iskreno se zahvaljujem vsem, ki so mi pomagali na poti do te diplomske naloge. Zahva- ljujem se svojemu mentorju, doc. dr. Joˇzetu Guni za vse nasvete, pomoˇcpri izvedbi eksperimentov in ˇcas, ki mi ga je namenil, da sem lahko brez teˇzav dokonˇcal to delo. Iskreno se zahvaljujem tudi starˇsema ter sestri Maji, ki mi predstavlja zgled v iskanju novih znanj. Hvala vam za podporo, odrekanja in potrpeˇzljivost skozi vsa ta leta. Na koncu se ˇzelim ˇse zahvaliti vsem prijateljem ter Blaˇzu, za ideje, nasvete, spod- budne besede in nepozabno ˇstudentsko ˇzivljenje. iii iv Povzetek Z uporabo tehnologij navidezne resniˇcnosti se ustvarjajo raˇcunalniˇsko generirana oko- lja, v katera uporabniki vstopajo najveˇckrat z uporabo oˇcal za navidezno resniˇcnost. Od samih zaˇcetkov sta pri njeni komercializaciji bila problem ˇsirˇsa dostopnost in cena. Navidezna resniˇcnost na spletu ponuja nekaj reˇsitev; dostopnost na vseh napravah z brskalniki, preproste nadgradnje in najpomembneje – potencial za nove oblike socialnih vezi na medmreˇzju. Spletni brskalniki namreˇcdobro obvladujejo komunikacijske proto- kole, vstop v deljena virtualna okolja pa je danes mogoˇcpreko klika na povezavo. Da bi tehnologije vseh resniˇcnosti v brskalnikih postale ˇsirˇse uveljavljene in prostor za nove inovacije, je potrebno oceniti sisteme v katere jih ˇzelimo integrirati. Kakˇsne so razlike pri razvoju virtualnih svetov v brskalnikih z razliˇcnimi knjiˇznicami? Katere naprave jih podpirajo? Kako kompleksne scene so priporoˇcene? Kakˇsno stopnjo in kvaliteto ko- munikacije omogoˇcajo? Za odgovore na ta vpraˇsanja so v okviru te naloge raziskovane knjiˇznice, optimizacijske tehnike in omreˇzne arhitekture, ki so na voljo spletnim aplika- cijam navidezne resniˇcnosti. V eksperimentalnem delu se naslovijo vplivi kompleksne geometrije, ˇstevila klicev za izris na grafiˇcni procesor, vrste senˇcenja in omreˇzne arhi- tekture na aplikacijo, ustvarjeno s knjiˇznico A-Frame, na veˇcnapravah. Optimizacije teh ˇstirih elementov potekajo vzporedno z razvojem praktiˇcne rabe za to aplikacijo. Predstavljen je primer uporabe na aplikaciji preprostega virtualnega portfolia, ki obli- kovalcem ali umetnikom omogoˇci inovativen prikaz njihovega dela. Rezultati izvedenih optimizacij kaˇzejo na to, da je navidezna resniˇcnost na spletu ˇse mlada tehnologija, ki jo razvijalci teˇzje prilagajajo specifiˇcnim napravam, kot to omogoˇcajo domorodne reˇsitve. Pri tem so zahtevana dobra znanja grafiˇcnega cevovoda, 3D modeliranja in programiranja. Kljuˇcne besede: Navidezna resniˇcnost, WebVR, WebXR, veˇcuporabniˇska izkuˇsnja, potopitveni splet, virtualna okolja, A-Frame. v vi Povzetek Abstract Virtual reality technology is a computer-generated environment usually accessed via head-mounted displays. Since its beginnings, poor accessibility and high costs have played a large role in the way it was popularized. Web-based VR bridges that gap with wide access on most modern devices with installed browsers. It removes the need of app installations and most importantly – it offers a new form of social interactions on the internet. Web browsers along with internet protocols allow the possibility of shared networked environment presented in virtual reality on any website. In order for all forms of cross reality technologies to become widely established and offer innovation opportunities, it is necessary to assess the systems in which we want to integrate them. How do web-based VR frameworks differ in terms of development? Which devices support them? What complexity and level of communication do they offer? In order to answer these questions, this thesis focuses on presenting most of the available web- based VR frameworks, optimization techniques and network architectures available to developers. The experimental setup addresses the effects of complex geometry, number of draw calls, types of shading, and the network architecture on the performance of A- Frame application on multiple devices (mobile phone, laptop and standalone VR set). Optimization of these four elements is implemented through a simple use case. A virtual reality portfolio is proposed that allows designers and artists to display their work in a shared VR room. Optimization results suggest that web-based virtual reality is still progressing in terms of good performance across all platforms. Its adaptation requires basic knowledge of graphics pipeline operations, 3D modeling and programming. Key words: Virtual reality, WebVR, WebXR, multiuser experiences, immersive web, networked virtual enviroments, A-Frame. vii viii Abstract Vsebina 1 Uvod 1 2 Tehnologija navidezne resniˇcnosti 3 2.1 Zgodovinskikontekst............................. 4 2.2 Osnovedelovanjainizzivi .......................... 6 2.3 Podroˇcjauporabe............................... 11 2.4 Naprave za navidezno resniˇcnost . 12 2.5 Prihodnost .................................. 15 3 Spletne tehnologije za navidezno resniˇcnost 17 3.1 Potopitvenisplet ............................... 17 3.2 WebVR/XR API . 18 3.3 Izrisovanje 3D grafik v brskalniku . 20 3.3.1 WebGL in grafiˇcni cevovod . 21 3.3.2 Optimizacija upodabljanja . 23 3.4 Orodjazarazvijalce ............................. 26 3.4.1 Three.js................................ 27 3.4.2 A-Frame . 29 3.4.3 React 360 . 32 3.4.4 Babylon.js . 33 3.4.5 Ostale JavaScript knjiˇznice in orodja . 34 3.4.6 Unity WebXR izvoznik . 35 3.5 PrimerjavaJavaScriptknjiˇznic . 35 4 Primerjava domorodnih in spletnih tehnologij 37 4.1 Dosegljivost . 39 4.1.1 Podpora naprav . 39 4.1.2 Podpora brskalnikov . 40 4.2 Zmogljivost izrisovanja . 41 4.3 Omreˇznost in veˇcuporabniˇska izkuˇsnja . 43 5 Deljena virtualna okolja 45 5.1 Na poti v “metauniverzum” . 45 5.2 Doseg iluzije in zahteve QoS . 46 5.3 Internet in omreˇzni protokoli . 49 5.3.1 Transportni sloj . 50 5.3.2 Aplikacijski sloj . 51 5.3.3 Omreˇzna hitrost . 52 ix x Vsebina 5.4 Arhitekture .................................. 53 5.4.1 Modelstreˇznikodjemalec . 54 5.4.2 Peertopeer.............................. 55 5.4.3 Multicast . 57 5.5 WebSockets .................................. 57 5.6 WebRTC ................................... 58 5.7 Deljenaokoljavnavidezniresniˇcnosti . 61 6 Optimizacija aplikacij navidezne resniˇcnosti na spletu 63 6.1 Hipoteze in raziskovalna vpraˇsanja . 64 6.2 Izbiraknjiˇznice ................................ 64 6.3 Zmogljivost izrisovanja . 64 6.3.1 Metodologija . 64 6.3.2 Izvedba ................................ 66 6.3.3 OPTIMIZACIJA 1: Geometrija 3D modela . 67 6.3.3.1 Rezultati meritev . 68 6.3.3.2 Razprava . 69 6.3.4 OPTIMIZACIJA 2: Steviloklicevzaizrisˇ . 70 6.3.4.1 Rezultati meritev . 72 6.3.4.2 Razprava . 73 6.3.5 OPTIMIZACIJA 3: Osvetljevanje materialov . 74 6.3.5.1 Rezultati meritev . 75 6.3.5.2 Razprava . 76 6.4 OPTIMIZACIJA 4: Vpliv omreˇzne arhitekture . 77 6.4.1 Metodologija . 77 6.4.2 Izvedba ................................ 77 6.4.3 Rezultati meritev . 79 6.4.4 Razprava . 80 7 Dopolnitev aplikacije 81 7.1 Uporaba optimizacij . 81 7.2 Dodatnielementi ............................... 81 7.2.1 Fizikalnost in interaktivnost . 81 7.2.2 Navigiranje . 82 7.2.3 Vkljuˇcitevmultimedijskihvsebin . 82 7.3 Vtisi razvijanja spletne aplikacije navidezne resniˇcnosti . 83 8 Zakljuˇcek 85 Literatura 87 Seznam slik 2.1 Spekter meˇsanih resniˇcnosti (Kishino & Milgram, 1994). 3 2.2 Casovnicaˇ razvoja navidezne resniˇcnosti [2, str. 13]. 6 2.3 Kocept interakcije ˇclovek raˇcunalnik z VR [2, str. 6]. 7 2.4 Vidnopoljeinperifernivid. ......................... 8 2.5 Delovanje pospeˇskometra. 9 2.6 Delovanje ˇziroskopa. 9 2.7 Razlika med stereo in prostorskim zvokom. 10 2.8 Spreminjanje fiksacij v VR glede na oddaljenost objektov. 11 2.9 Oglas za avtomobil v spletni VR [21]. 12 2.10 Oglas za nanizanko Stranger Things na VR spletni strani [21]. 12 2.11 Oˇcala Oculus Rift, Cardboard, HTC Vive, PS4VR, Samsung GearVR, Microsoft HoloLens in Google Daydream [46]. 13 3.1 SpekterWebXRprikazov. .......................... 20 3.2 Osnovno delovanje grafiˇcnega cevovoda [40]. 22 3.3 Shema CPU in GPU izrisovanja ter moˇzna ozka grla (ˇcrtkano). 23 3.4 Usklajeno in neusklajeno ˇcasovno delovanje enot CPU in GPU. 25 3.5 Primer izrisa preproste kocke s Three.js knjiˇznico. 28 3.6 Vgrajeni A-Frame urejevalnik 3D scene. 29 3.7 Primer izrisa preproste kocke z A-Frame knjiˇznico. 31 3.8 Osnovna scena React 360 [52]. 32 3.9 Veˇcdimenzionnalni spletni brskalnik Janus [60]. 35 3.10 Steviloˇ iskalnih poizvedb v zadnjih petih letih za knjiˇznice A-Frame, Babylon.js in Three.js [avgust, 2020, dostop: Google Trends]. 36 4.1 Zmogljivost in dosegljivost domorodnih in spletnih aplikacij. 37 4.2 Podpora brskalnikov za WebVR/XR. (rumeno - deluje le s Samsung GearVR). Povzeto: avgust, 2020 [43][70]. 41 4.3 Arhitektura delovanja WebGL knjiˇznice [49]. 42 5.1 Vpliv latence in trepetanja na dostavo paketov [81]. 48 5.2 TCP/IP sklad. 49 5.3 Enkapuslacija omreˇznih paketov TCP/IP. 50 5.4 Vpliv pasovne ˇsirine na latenco. 52 5.5 Model sistema virtualnega okolja za dva udeleˇzenca. [80] . 54 xi xii Seznam slik 5.6 Vzpostavljanje povezave odjemalcev s streˇznikom [80]. 55 5.7 1 - Preprost sistem peer-to-peer, 2 - peer-to-peer model z gostiteljem, 3 - peer-to-peer model z zbirnim streˇznikom [80]. 56 5.8 Vzpostavljanje multicast skupine [80].