Porovnání prezentací měst ve VRML a Google Earth. Karel Hrůza

České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce Bakalářská práce Porovnání prezentací měst ve VRML a Google Earth Karel Hrůza Vedoucí práce: prof. Ing. Jiří Žára, CSc. Studijní program: Softwarové technologie a management, Bakalářský Obor: Web a multimédia 4. ledna 2012

v Poděkování Rád bych poděkoval vedoucímu této práce, panu prof. Ing. Jiřímu Žárovi, CSc., za trpělivé vedení, poskytnutí cenných rad a praktických připomínek.

vii Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu 60 Zákona č. 121/2000 Sb., o právu autorském, o právu souvisejících s právem autorským a o změně některých zákona (autorský zákon). V Benešově dne 4. 1. 2012...

Abstract This bachelor s thesis compares the usability of the model of a square in VRML and Google Earth technologies. The work focuses on problems of navigation, interaction and information search. The aim of this study was to create a model of Masaryk square in Benešov using both technologies, execute a user tests and evaluate obtained results. Abstrakt Tato bakalářská práce se zabývá porovnáním využitelnosti modelů náměstí v technologii VRML a Google Earth. Práce se zaměřuje na problematiku navigace, interakce a vyhledávání informace. Úkolem práce bylo vytvořit model Masarykova náměstí v Benešově v obou prezentačních technologiích, provést uživatelské testy a zhodnotit získané výsledky. ix

Obsah 1 Úvod...1 2 Analýza projektu...3 2.1 Model náměstí...3 2.2 VRML...3 2.3 VRML prohlížeče...3 2.4 Google Earth...4 2.5 Google SketchUp...5 3 Realizace...7 3.1 Získání materiálů...7 3.2 Modelování...7 3.2.1 VRML...8 3.2.2 Google Earth...15 3.3 Textury...16 3.4 Výsledný model...17 4 Testování...19 4.1 Nastavení testu...19 4.2 Pre-test a Post-test dotazníky...19 4.3 Seznam úloh...20 4.3.1 Zadání...21 4.3.2 Ideální průběh...23 4.4 Vyhodnocení...25 5 Závěr...29 Literatura...31 A Seznam použitých zkratek...33 xi

xii OBSAH B Vyplněné dotazníky...35 C Instalační a uživatelská příručka...43 D Obsah přiloženého CD...45

Seznam obrázků 2.1 Ukázka scény v prohlížeči Cortona3D...4 2.2 Aplikace Google Earth...5 2.3 Ukázka části modelu náměstí v aplikaci Google SketchUp...6 3.1 Ukázka objektů s texturou ve formátu PNG...9 3.2 Ukazatel míst umístěný ve scéně...10 3.3 Vlevo upozornění na interaktivní prvky u budov a vpravo u jiných objektů...11 3.4 Ukázka zobrazené informace o budově...12 3.5 Panel pro ovládání procházky...15 3.6 Ukázka části scény v Google Earth...16 3.7 Vlevo hotová textura budovy a vpravo výřezy ze čtyř fotografií, které sloužily pro zhotovení textury vlevo...17 3.8 Porovnání se skutečností, nahoře realita, střed VRML a dole Google Earth...18 B.1 B.2 B.3 B.4 B.5 B.6 B.7 B.8 B.9 B.10 B.11 B.12 B.13 B.14 Pre-test dotazník číslo 1...35 Post-test dotazník číslo 1...35 Pre-test dotazník číslo 2...36 Post-test dotazník číslo 2...36 Pre-test dotazník číslo 3...37 Post-test dotazník číslo 3...37 Pre-test dotazník číslo 4...38 Post-test dotazník číslo 4...38 Pre-test dotazník číslo 5...39 Post-test dotazník číslo 5...39 Pre-test dotazník číslo 6...40 Post-test dotazník číslo 6...40 Pre-test dotazník číslo 7...41 Post-test dotazník číslo 7...41 xiii

xiv SEZNAM OBRÁZKŮ

Seznam tabulek 3.1 Přehled počtů vybraných objektů ve scéně...8 4.1 4.2 4.3 4.4 Pre-test dotazník...20 Post-test dotazník...20 Shrnutí Pre-test dotazníků...26 Shrnutí Post-test dotazníků...26 xv

xvi SEZNAM TABULEK

Kapitola 1 Úvod Virtuální realita je poměrně mladá technologie, avšak má veliký potenciál, aby se stala součástí běžného života. Každá virtuální realita má vlastní cíle. Nejznámější virtuální realitou jsou počítačové hry. Jejich účelem je především pobavit. Virtuální realita je využívána i v mnoha jiných oborech. V posledních několika letech vzrůstá atraktivita virtuálních 3D světů. Velkou zásluhu na tom má aplikace Google Earth [6], která umožňuje prohlížení Země jako ze satelitu. Uživatelům tak nabízí možnost procestovat celý svět z vlastního domova. Google Earth obsahuje 3D modely některých větších měst, ve kterých se uživatelé mohou volně pohybovat, prohlédnout si vzdálené stavby a využít mnoho jiných funkcí. Jelikož mám kladný vztah k virtuální realitě a především díky předmětu 3D modelování a virtuální realita, jsem se rozhodl, že se tématem mé bakalářské práce stane virtuální scéna, kterou vytvořím v technologii VRML. Prvotní myšlenkou bylo Masarykovo náměstí v Benešově, které v této technologii vymodeluji. Později se tato myšlenka rozrostla v nápad, kde se budu zabývat porovnáním využitelnosti virtuálních měst v technologii VRML a Google Earth. Nejdříve jsem prostudoval literaturu, zabývající se webovými prezentacemi měst z hlediska běžných návštěvníků. Zaměřil jsem se mimo jiné na problematiku navigace, interakce a vyhledávání informací. Na základě těchto informací jsem navrhl uživatelské testy a později je využil pro testování s uživateli. Velkou část práce zahrnovalo modelování vlastního náměstí. Cílem práce je vytvořit model Masarykova náměstí v obou technologiích a zjistit jeho využitelnost. Scény by si měly být v rámci možností použité technologie podobné. Měly by obsahovat interaktivní a navigační prvky, které návštěvníkům ulehčují pohyb a orientaci ve virtuálním městě a informační složku. Uživatelé by měli mít možnost ve scéně vyhledávat různé informace. 1

2 KAPITOLA 1. ÚVOD

Kapitola 2 Analýza projektu 2.1 Model náměstí Benešov je město ve Středočeském kraji, přibližně 40 km jihovýchodně od Prahy. Masarykovo náměstí se nachází v centru města. Na náměstí je možné najít různé obchody, městskou radnici, banky, okresní soud a jiné. Tvar náměstí je obdélníkový, budovy jsou umístěny po jeho obvodu. Náměstí dvakrát protíná jednosměrná silnice a obsahuje parkovací místa. Střed je vyplněn zelení, lavičkami, odpadními koši, městskou kašnou. Povrch náměstí je převážně vydlážděn zámkovou dlažbou a pozemní komunikace jsou pokryty asfaltovou směsí. 2.2 VRML VRML je jazyk pro popis 3D scén se statickými a dynamickými objekty. Na počátku 90. let vznikla ve firmě Silicon Graphics aplikační knihovna OpenInventor, která se stala základem jazyka VRML. Tato první verze byla vhodná především pro popis statické scény a proto později vzniká formát VRML 2.0 (VRML 97), který umožňuje definovat ve virtuální scéně dynamiku a interakci. Definice virtuálních světů se zapisují jednoduchou formou pomocí uzlů do textových souborů s příponou.wrl. Pro složitější scény lze využít skripty. Uživatelé jsou ve virtuálních světech reprezentováni avatary. 2.3 VRML prohlížeče Pro prohlédnutí vytvořeného světa je potřeba mít nainstalovaný program, který je schopen zpracovat textový popis a zobrazit ho do vizuální podoby. Obvykle se VRML prohlížeče ale 3

4 KAPITOLA 2. ANALÝZA PROJEKTU integrují do internetových prohlížečů, ve kterých je možné si scény prohlédnout (Obr. 2.1) a navíc umožňují pohyb ve virtuálním světě a případnou interakci s objekty. Mezi nejznámější VRML prohlížeče patří: BS Contact [2] Cortona3D Viewer [3] Cosmos Player Obrázek 2.1: Ukázka scény v prohlížeči Cortona3D 2.4 Google Earth Aplikace Google Earth (Obr. 2.4) byl vytvořen firmou Keyhole pod názvem Earth Viewer a v roce 2004 zakoupen společností Google. Google Earth je 3D mapa světa, která návštěvníkům umožňuje procestovat celý svět, přeletět na libovolné místo, zobrazit satelitní snímky, mapy, terén, prostorové budovy, galaxie ve vzdálených koutech vesmíru i hlubiny oceánů. Obsahuje také spoustu různých funkcí. Například vyhledávání míst, firem a přidávání vlastních 3D budov.

2.5 GOOGLE SKETCHUP 5 Obrázek 2.2: Aplikace Google Earth 2.5 Google SketchUp Google SketchUp [7] je software, který slouží pro tvorbu a úpravu 3D modelů (Obr. 2.5). SketchUp je snadno naučitelný program, pomocí kterého si můžeme vymodelovat vlastní dům nebo známé budovy. Vytvořené modely je možné sdílet s ostatními uživateli pomocí služby Galerie 3D objektů Google. Aplikace nabízí mnoho nástrojů pro modelování. Například nástroj kreslení, otáčení, posouvání, kóty, textury a barvy, řezy, změna velikosti a umožňuje i vytvářet animace a rastrové obrázky.

6 KAPITOLA 2. ANALÝZA PROJEKTU Obrázek 2.3: Ukázka části modelu náměstí v aplikaci Google SketchUp

Kapitola 3 Realizace 3.1 Získání materiálů Před vlastním modelováním jsem se vydal na Masarykovo náměstí v Benešově. Vzal jsem si sebou digitální fotoaparát a pravítko. Rozměry menších objektů jsem měřil pravítkem a zapisoval do sešitu, který jsem měl také sebou. Rozměry budov jsem získal tak, že jsem požádal rodiče, aby se postavili co nejblíž k budově a já si mohl budovu s nimi vyfotografovat. Protože výšku a šířku osoby na fotografii znám, snadno jsem rozměry budov určil. Tímto způsobem jsem zjistil rozměry několika budov, ostatní jsem určil podle rozměrů sousedních, které jsem již znal. Všechny objekty jsem důkladně zdokumentoval pomocí fotoaparátu, abych je mohl využít pro modelování a především tvorbu textur. Dále jsem použil klasickou mapu náměstí a letecké snímky pro přesnější umístění objektů a získání přibližných rozměrů náměstí. 3.2 Modelování Scéna obsahuje různé objekty (domy, stromy, lavičky, odpadní koše a jiné). Některé objekty jsou ve scéně použity vícekrát (Tab. 3.2). Objekty jsem do scény umísťoval podle získaných materiálů a dbal jsem na to, aby model vypadal co nejvíce podle reality. Podle zadání jsem měl vytvořil model náměstí v technologii VRML a Google Earth. Nejdříve jsem začal s modelem ve VRML, protože s touto technologií mám větší zkušenosti. Veškerý kód jsem psal v programu VrmlPad [5], nevyužil jsem žádný 3D modelář. Po dokončení práce na modelu ve VRML, jsem se pustil do druhé technologie s pomocí programu Google SketchUp. Práce na modelu v aplikaci SketchUp, která umožňuje přímý export do formátu pro Google Earth (.kmz), byla výrazně méně časově náročná. Bylo to způsobeno z větší části tím, že jsem mohl využít textury, přesné rozměry a rozmístění objektů z již hotového modelu ve VRML. 7

8 KAPITOLA 3. REALIZACE Tabulka 3.1: Přehled počtů vybraných objektů ve scéně Objekt Celkový počet budova 27 strom 26 lavička 26 odpadní koš 9 betonové patníky 25 3.2.1 VRML Pro vývoj jsem použil program VrmlPad, který nabízí řadu funkcí pro usnadnění práce. Barevně odlišuje jednotlivé příkazy, nabízí editor materiálů, náhledy vytvořených objektů, automaticky validuje kód a další. Všechny objekty jsou vytvořeny pomocí konstrukce PROTO. Hlavní soubory obsahují klíčová slova EXTERNPROTO, která oznamují, kde jsou uloženy definice prototypů, jaké parametry mají a jaká jména jsou jim přiřazena pro aktuální soubor. Snažil jsem se co nejčastěji využívat konstrukci DEF a USE, která dokáže již zapsanou informaci opakovaně využít. Budovy Většina budov se skládá z přední stěny a střechy. Pro jejich vytvoření jsem použil uzel IndexedFaceSet, který umí vytvořit libovolnou plochu definovanou pomocí bodů a samostatně mapovat texturu pro každou z nich. U některých budov bylo potřeba vymodelovat i jiné části, protože jsou viditelné při pohybu po náměstí. Pro vytvoření modelů se složitější geometrií (Obr. 3.1) jsem použil textury, které mohou být v některých svých částech průhledné (grafický formát PNG). Modelování těchto objektů by bylo příliš časově náročné. Výsledný model s použitím textury ve formátu PNG byl plně postačující.

3.2 MODELOVÁNÍ 9 Obrázek 3.1: Ukázka objektů s texturou ve formátu PNG Lavičky Při modelování laviček jsem hojně využíval konstrukci DEF a USE. Lavička se skládá ze tří dřevěných prken a dvou kovových noh na každé straně. Dřevěné prkno má tvar kvádru, pro který existuje reprezentace v podobě geometrie Box. Uzel Extrusion umožňuje dvourozměrnou plochu zadanou body vytáhnout do prostoru. Tímto způsobem jsem vytvořil jednu nohu lavičky, ostatní jsem zkopíroval pomocí již zmíněné konstrukce a s využitím rotace a posunutí umístil na správná místa. Zeleň Obecně mají stromy, keře složitou geometrii. Ve VRML existuje uzel Billboard, který má za úkol natáčet všechny své potomky směrem k avatarovi. Všechny stromy a keře jsem vytvořil jako dvourozměrné plochy s texturou ve formátu PNG, které výše zmíněný uzel vždy natáčí k uživateli. Ukázka stromu je vidět na obrázku 3.1. Ve scéně jsou celkem čtyři různé druhy stromů, které se liší texturou nebo velikostí. Odpadní koše Tento objekt je složený ze dvou uzlů Box, které představují kvádry. Jeden z nich má namapovanou texturu otvoru do koše a je umístěn na vrchní straně druhého.

10 KAPITOLA 3. REALIZACE Městská kašna Při realizaci kašny jsem používal dvě základní tělesa (Box a Cylinder) a uzel Billboard. Jednu ze čtyř postranních ramen, které obklopují ve středu umístěný válec a rovinná plocha jako potomek uzlu Billboard, jsem vymodeloval ze tří vhodně natočených a umístěných kvádrů. Pro ostatní jsem použil konstrukci DEF a USE. Ukazatelé míst Ukazatelé míst (Obr. 3.2) jsou prvky navigace, uživatele mohou okamžitě přesunout na cílové místo. Jsou realizováni Viewpoity, každé takové stanoviště má definovanou polohu a směr pohledu a ve scéně jsou 3. Tato stanoviště jsou umístěna před budou lékárny, kostelem sv. Anny a Music Barem xxx. Model ukazatele se skládá z válce (uzel Cylinder), na kterém jsou umístěny objekty typu Anchor. Malý ukazatel ve tvaru šipky je vytvořen z dvou objektů umístěných vedle sebe. Jedním je kvádr s geometrií Box a druhým trojúhelník, který je vytažený do prostoru s pomocí uzlu Extrusion. Obrázek 3.2: Ukazatel míst umístěný ve scéně

3.2 MODELOVÁNÍ 11 Prvky upozorňující na interaktivní objekty Ve scéně jsou dva druhy prvků, které upozorňují uživatele na možnost interakce (Obr. 3.3). První z nich je rámeček měnící svou barvu a druhý má podobu informačního íčka, který je doplněn o pohyb ze shora dolů. Objekt ve tvaru informačního íčka je vytvořen ze tří kvádrů a jedné koule (uzel Box a Sphere). Pro vytvoření pohybu jsem využil uzel Script, který mění jeho polohu, konkrétně jeho polohu v rovině y. Následující kód ukazuje funkci měnící jeho polohu v závislosti na čase: function pohybi (hodnota){ icko.translation = new SFVec3f (0, Math.sin (hodnota*math.pi), 0); } Rámeček mění svou barvu mezi zelenou a červenou, je definován body, které jsou zapsány v uzlu IndexFaceSet. Změnu barvy jsem realizoval ve skriptu. Obrázek 3.3: Vlevo upozornění na interaktivní prvky u budov a vpravo u jiných objektů Interaktivní objekty Mezi interaktivní objekty patří ukazatelé míst, o kterých jsem se již zmínil. Jejich celkový počet ve scéně je 4. Některé budovy a objekt digitální hodiny (Obr. 3.3) jsou také interaktivní. Uživatelé mají možnost o daném objektu zjistit různé informace. Ve všech případech pouze kliknutím na objekt. Vlastní informace jsou zapsány na textuře, která se uživateli po kliknutí zobrazí (Obr. 3.4) a pohybuje spolu s avatarem. Na uživatele to působí jako pevně umístěné objekty na obrazovce. Toto jsem realizoval prostřednictvím uzlu ProximitySensor, který snímá pozici a orientaci avatara a přeposílá tuto informaci objektu s informační texturou. Zobrazování a skrývání

12 KAPITOLA 3. REALIZACE a skrývání jsem implementoval ve skriptu, který dostane událost o kliknutí (uzel TouchSensor) na aktivní plochu na budově nebo připravené značce křížku v kolečku, které je v pravém horním rohu zobrazeného okna (Obr. 3.4). Funkce plnící tuto úlohu jsou ukázány v následujícím kódu: function zrus (hodnota){ if (hodnota){ info.scale = new SFVec3f (0, 0, 0); zavrit.scale = new SFVec3f (0, 0, 0); } } function zobraz (hodnota){ if (hodnota){ info.scale = new SFVec3f (1.2, 1.2, 1); zavrit.scale = new SFVec3f (1.3, 1.3, 1); } } Scéna obsahuje 5 interaktivních budov. Jedná se o hostinec U Zlaté hvězdy, dvě papírnictví, květinářství a městský úřad. Obrázek 3.4: Ukázka zobrazené informace o budově Mapa Mapa je jednoduchý plánek, který uživatelům pomůže se lépe orientovat v neznámém prostředí. Vytvořil jsem ho jako texturu, kterou jsem namapoval na dvourozměrnou plochu.

3.2 MODELOVÁNÍ 13 Zobrazování a skrývání mapy funguje stejně jako zobrazování a skrývání informací o budovách s rozdílem, že pro zobrazení je na obrazovce vlastní tlačítko. Aby uživatel věděl, na jakém místě se nachází, umístil jsem do mapy červené kolečko, které se pohybuje s avatarem. Pro jeho implementaci jsem musel využít uzel Script a ProximitySensor. Protože jsou rozměry náměstí jiné než rozměry mapy, musel jsem vymyslet funkci, která bude souřadnice převádět. Převodní hodnoty této funkce jsem zjistil testováním různých hodnot. Výsledná převodní funkce je ukázána v následujících řádcích: function poloha (hodnota){ pol.translation = new SFVec3f (-hodnota[2] / 2100 +.0715, -hodnota[0] / 1740 +.055, -.129); } Mapa se zobrazuje ve středu obrazovky. Aby se uživatel mohl při otevřené mapě pohybovat, nastavil jsem jí částečnou průhlednost. Dále jsem do mapy umístil tři modré značky, které uživatele můžou přesunout na jejich místo v modelu náměstí. Jsou realizovány a fungují stejně jako ukazatelé míst. Procházka Návštěvníkům virtuálního světa jsem připravil automatickou procházku po náměstí. Vlastní procházka je realizována uzlem PositionInterpolator a OrientationInterpolator, ve kterých jsem nadefinoval řadu pozičních bodů a bodů udávající směr pohledu. Dále jsem se rozhodl, že vytvořím jednoduché ovládání (Obr. 3.5), které bude umožňovat již spuštěnou procházku úplně zastavit, pozastavit a znovu spustit od začátku nebo od dříve pozastaveného místa. Tento úkol nečekaně provázelo nejvíce problémů. Především pokračování od místa, ve kterém byla procházka pozastavena. Čas ve virtuálním světě pořád plyne a nedá se zastavit. Musel jsem použít jiný způsob. Průběžně jsem si ukládal parametr fraction_changed, který generuje hodnotu uplynulého času v rámci jedné smyčky, z TimeSensoru. Díky této informaci jsem dokázal, aby procházka začala z místa, ve kterém byla pozastavena. Drobným problémem byla situace, kdy uživatel pozastavil procházku, následně se začal pohybovat po scéně a poté chtěl v procházce pokračovat. Toto jsem vyřešil tak, že jsem si vytvořil pomocný Viewpoint, při pozastavení procházky mu nastavil aktuální pozici a orientaci a nastavil ho jako aktuální. Naopak při požadavku pokračovat v procházce jsem změnil aktuální Viewpoint na Viewpoint procházky. Následující kód ukazuje funkce starající se o správné chování procházky:

14 KAPITOLA 3. REALIZACE //Ridi OrientationInterpolator a PositionInterpolator a spravne ukonceni function fch (hodnota){ if (caspauza > 0.9) { jepauza = TRUE; caspauza = 0; vp2.position = new SFVec3f(65, 1.61, 200); vp2.orientation = new SFVec3f(0, 0, 0, 0); vp2.set_bind = TRUE; prochazka.tspauza = FALSE; } if (!jepauza){ vp1.set_bind = TRUE; pi.set_fraction = ((1+hodnota-casStart) % 1)+x; oi.set_fraction = ((1+hodnota-casStart) % 1)+x; caspauza = ((1+hodnota-casStart) % 1)+x; } } function start(hodnota){ vp2.set_bind = TRUE; jepauza = FALSE; casstart = cas; x = 0; prochazka.tspauza = TRUE; } function pauza(hodnota){ if(!jepauza){ jepauza = TRUE; vp2.position = p.position_changed; vp2.orientation = p.orientation_changed; vp2.set_bind = TRUE; }else{ jepauza = FALSE; x = caspauza; casstart = cas; vp1.set_bind = TRUE; } } function zrusit(hodnota){ prochazka.tspauza = FALSE; jepauza = TRUE; }

3.2 MODELOVÁNÍ 15 Obrázek 3.5: Panel pro ovládání procházky 3.2.2 Google Earth Modelování v aplikaci SketchUp se převážně provádělo myší s využitím již připravených nástrojů. Nejvíce jsem používal nástroj čára, se kterým jsem vytvořil převážnou část náměstí. Aby měly objekty správné rozměry, aplikace nabízí kótování, které ukazuje rozměr mezi dvěma body nebo délku čáry. Velice jednoduché bylo aplikování textury na vymodelované objekty. Pro tento účel jsem použil funkci plechovka barvy, která dokázala místo barvy použít texturu uloženou v souboru. Textura se na objekty mapuje automaticky, ale jsou zde nástroje, které dokáží špatně namapovanou texturu opravit podle představ. Jedná se o funkce pro přesun, změnu měřítka, otočení, deformaci a oříznutí textury. Ve scé-ně jsou některé objekty použity více než jednou. Protože by bylo zbytečné modelovat například 20 úplně stejných objektů, Google SketchUp umí vytvořit z jakéhokoliv objektu komponentu a tu lze opakovaně vkládat do scény. Interaktivní a navigační části jsem nevytvářel v programu SketchUp. Vymodelovanou statickou scénu jsem umístil do Google Earth, kde jsem také zjistil souřadnice Masarykova náměstí v Benešově a model podle nich umístil. Do adresářové struktury vloženého místa (model Masarykova náměstí) jsem přidal značky pro místa, ukazatele míst a předpřipravenou virtuální procházku (na obrázku 3.6 v levé části). Ukazatelé míst dokáží stejně jako v technologii VRML přenést návštěvníka světa na cílové místo. Pro jeho vytvoření tam stačilo pouze dojít ve scéně a zaznamenat do správného ukazatele aktuální pohled. Abych vytvořil virtuální procházku, musel jsem spustit nahrávání mého pohybu a po náměstí se projít. Pak jsem jedním tlačítkem nahranou procházku uložit do adresářové struktury místa. Realizace značek míst probíhala stejně jako realizace ukazatelů míst, pouze s tím rozdílem, že jsem k tomu připsal textový popis. Výsledek je možné vidět na obrázku 3.6. Protože v této technologii není možné realizovat automatické otáčení dvourozměrné plochy podle pozice a orientace avatara, rozhodl jsem se, že ve scéně nebudou stromy, které by jako dvourozměrné plochy pouze kazily realističnost.

16 KAPITOLA 3. REALIZACE Obrázek 3.6: Ukázka části scény v Google Earth 3.3 Textury Převážná část textur byla vytvořena z fotografií pořízených na Masarykově náměstí. Úpravy fotografií a výroba všech textur byla prováděna v bitmapovém grafickém editoru Gimp 2 [4]. Největším problémem při pořizování fotografií určených pro textury byly různé objekty, které překážely před objektivem. Nejčastěji šlo o pouliční lampy a stromy. V důsledku toho jsem musel některé budovy fotografovat z větší blízkosti, abych tyto nežádoucí objekty nemusel z fotografie složitě odstraňovat. Tím bohužel někdy vznikl problém, že se mi celá budova nevešla do záběru a byl jsem nucen udělat snímků více. Spojit více částí vyfotografované budovy do jedné textury bylo mnohem snazší než odstraňovat například strom. U některých fotografií vznikalo perspektivní nebo soudkovité zkreslení. Grafický editor Gimp nabízí nástroj Perspektiva, kterým můžu tato zkreslení dostatečně snížit. Ukázka vytvořené textury pro budovu městského úřadu a několik fotografií, ze kterých byla vytvořena a které obsahují zkreslení a nežádoucí objekty, jsou vidět na obrázku 3.7.

3.4 VÝSLEDNÝ MODEL 17 Obrázek 3.7: Vlevo hotová textura budovy a vpravo výřezy ze čtyř fotografií, které sloužily pro zhotovení textury vlevo 3.4 Výsledný model Výsledné scény v obou technologií obsahují stejné objekty (kromě stromů, viz. část 3.2.2). Porovnání těchto modelů s realitou je vidět na obrázku 3.8.

18 KAPITOLA 3. REALIZACE Obrázek 3.8: Porovnání se skutečností, nahoře realita, střed VRML a dole Google Earth

Kapitola 4 Testování 4.1 Nastavení testu Testovacím místem pro všechny provedené testy byla místnost v panelovém bytě. Pozvaní lidé seděli u stolu s kancelářskou židlí a vykonávali všechny úkoly na notebooku Acer Aspire 5552G-N954G50MN s připojenou myší CM STORM Laser Inferno. Uživatel nemusel instalovat žádný software. Aplikace Google Earth a prohlížeč virtuální reality pro jazyk VRML BS Contact byl již nainstalován. Výchozím stavem byl zapnutý notebook se spuštěným programem BS Contact a otevřeným adresářem, ve kterém byly dva soubory určené pro aplikaci Google Earth. Testované osoby jsem podrobně instruoval, jakým způsobem mají spustit scénu s náměstím pro aktuální test. U testu jsem byl přítomen pouze já a zastával jsem roli moderátora i pozorovatele. Dotazníky a úkoly pro test dostal každý z účastník vytištěné na papíře. Před začátkem testu jsem dal účastníkům na výběr mezi seznámením se s ovládáním samostatně nebo krátkém tutoriálu ode mě. 4.2 Pre-test a Post-test dotazníky Před začátkem vlastního testování modelů, jsem každému z účastníků dal k vyplnění Pre-test dotazník a po splnění posledního úkolu Post-test dotazník. Otázky, které dotazníky obsahovaly jsou uvedeny v tabulkách 4.1 a 4.2. 19

20 KAPITOLA 4. TESTOVÁNÍ Tabulka 4.1: Pre-test dotazník 1 K jakým účelům nejčastěji používáte počítač? Zábava / Vzdělávání / Informace / Jiné 2 Používáte webové mapy? Ano / Ne 2a K jakým účelům je využíváte? 3 Znáte aplikaci Google Earth? Ano / Ne Máte zkušenosti s virtuálními světy na webu? 4 (virtuální procházka zámeckým parkem, virtuální návštěva galerie,...) Ano / Ne Tabulka 4.2: Post-test dotazník 1 Jak obtížné pro Vás byly jednotlivé úkoly? 2 V jaké technologii Vám dělalo největší problémy se přesunout k cílovému místu? 3 V jaké technologii bylo pro Vás snazší vyhledat budovu? 4 Nastaly nějaké neočekávané problémy při zjišťování telefonního čísla na papírnictví? Jaké? 5 Dělalo Vám problémy zjistit informace o Městském úřadu v technologii VRML? Snadné / Průměrné / Těžké VRML / Google Earth VRML / Google Earth Ano / Ne / Nevím 6 Co Vám dělalo největší problémy? 7 Co se Vám nejvíce líbilo? 8 Vyzkoušeli jste virtuální procházku? 9 Byla orientace snazší ve scéně pouze s budovami? Ano / Ne Ano / Ne / Nevím 4.3 Seznam úloh Testování modelů probíhalo ve 4 etapách. Pro každou technologii byly vytvořeny dvě scény. Rozdíl mezi nimi byl takový, že jedna neobsahovala všechny objekty, obsahovala pouze budovy.

4.3 SEZNAM ÚLOH 21 4.3.1 Zadání VRML, část první 1. Rozhlédněte se okolo aktuální pozice. 2. Využijte připravené virtuální procházky k rozhlédnutí se po náměstí. 3. Přesuňte se k městské radnici pomocí chůze avatara. 4. Přesuňte se ke kostelu sv. Anny pomocí ukazatelů míst. 5. Vyhledejte pekařství. 6. Zjistěte značku piva, které prodávají v hostinci U Zlaté hvězdy. 7. Zjistěte adresu Městského úřadu Benešov. 8. Najděte květinářství a zjistěte, kdy mají v sobotu otevřeno. 9. Najděte telefonní číslo na papírnictví. 10. Zjistěte bližší informace o digitálních hodinách na náměstí. 11. Najděte obchod s elektronikou a zjistěte internetovou adresu do jejich e-shopu. VRML, část druhá 1. Přesuňte se ke kostelu sv. Anny pomocí chůze avatara. 2. Přesuňte se k lékárně U Zlatého orla pomocí ukazatelů míst. 3. Vyhledejte GE Money Bank. 4. Zjistěte adresu hostince U Zlaté hvězdy. 5. Zjistěte telefonní číslo na odbor financí a majetku na Městském úřadu v Benešově.

22 KAPITOLA 4. TESTOVÁNÍ Google Earth, část první 1. Přesuňte se na Masarykovo náměstí Benešov. 2. Rozhlédněte se okolo aktuální pozice. 3. Využijte připravené virtuální procházky k rozhlédnutí se po náměstí. 4. Přesuňte se k městské radnici pomocí chůze avatara. 5. Přesuňte se ke kostelu sv. Anny pomocí ukazatelů míst. 6. Vyhledejte pekařství. 7. Zjistěte značku piva, které prodávají v hostinci U Zlaté hvězdy. 8. Zjistěte adresu Městského úřadu Benešov. 9. Najděte květinářství a zjistěte, kdy mají v sobotu otevřeno. 10. Najděte telefonní číslo na papírnictví. 11. Najděte obchod s elektronikou a zjistěte internetovou adresu do jejich e-shopu. Google Earth, část druhá 1. Přesuňte se ke kostelu sv. Anny pomocí chůze avatara. 2. Přesuňte se k lékárně U Zlatého orla pomocí ukazatelů míst. 3. Vyhledejte GE Money Bank. 4. Zjistěte adresu hostince U Zlaté hvězdy. 5. Zjistěte telefonní číslo na odbor financí a majetku na Městském úřadu v Benešově.

4.3 SEZNAM ÚLOH 23 4.3.2 Ideální průběh VRML, část první 1. Uživatel se pomocí myši nebo šipek na klávesnici otočí doleva a doprava. 2. Uživatel klikne na tlačítko s nápisem Procházka a dalším kliknutím procházku spustí. 3. Uživatel se přesune pomocí myši nebo klávesnice k městské radnici. 4. Uživatel dojde k některému z ukazatelů míst a kliknutím vybere kostel sv. Anny. 5. Uživatel se přesune pomocí myši nebo klávesnice k pekařství. 6. Uživatel se přesune pomocí myši nebo klávesnice k hostinci U Zlaté hvězdy a kliknutím na název budovy si informaci zobrazí. 7. Uživatel se přesune pomocí myši nebo klávesnice k městskému úřadu a kliknutím na název budovy nebo jinou část budovy si informaci zobrazí. 8. Uživatel se přesune pomocí myši nebo klávesnice ke květinářství a kliknutím na název budovy si informaci zobrazí. Ovšem tato informace tam není a proto bude uživatel hledat jiné. (ukončeno moderátorem) 9. Uživatel se přesune pomocí myši nebo klávesnice k papírnictví a kliknutím na název budovy si informaci zobrazí. Ve scéně jsou dvě papírnictví. 10. Uživatel se přesune pomocí myši nebo klávesnice k hodinám a kliknutím na ně si informaci zobrazí. 11. Uživatel bude chodit po náměstí pomoci myši nebo klávesnice a hledat obchod s elektronikou. Ovšem tato budova ve scéně neexistuje. (ukončeno moderátorem) VRML, část druhá 1. Uživatel se přesune pomocí myši nebo klávesnice ke kostelu sv. Anny. 2. Uživatel dojde k některému z ukazatelů míst a kliknutím vybere lékárnu 3. Uživatel se přesune pomocí myši nebo klávesnice k GE Money Bank.

24 KAPITOLA 4. TESTOVÁNÍ 4. Uživatel se přesune pomocí myši nebo klávesnice k hostinci U Zlaté hvězdy a kliknutím na název budovy si informaci zobrazí. 5. Uživatel se přesune pomocí myši nebo klávesnice k městskému úřadu a kliknutím na název budovy nebo jinou část budovy si informaci zobrazí. Google Earth, část první 1. Uživatel myší klikne na název Masarykovo náměstí Benešov v levém postranním panelu. 1. Uživatel se pomocí myši nebo šipek na klávesnici otočí doleva a doprava. 2. Uživatel myší klikne na Prohlídku v levém postranním panelu. 3. Uživatel se přesune pomocí myši nebo klávesnice k městské radnici. 4. Uživatel klikne v levém postranním panelu na Ukazatele míst a vybere kostel sv. Anny. 5. Uživatel se přesune pomocí myši nebo klávesnice k pekařství. 6. Uživatel se přesune pomocí myši nebo klávesnice k hostinci U Zlaté hvězdy a kliknutím na žlutý připínáček si informaci zobrazí. Nebo klikne v levém postranním panelu na Informace a vybere hostinec U Zlaté hvězdy. 7. Uživatel se přesune pomocí myši nebo klávesnice k městskému úřadu a kliknutím na žlutý připínáček si informaci zobrazí. Nebo klikne v levém postranním panelu na Informace a vybere městský úřad. 8. Uživatel se přesune pomocí myši nebo klávesnice ke květinářství a kliknutím na žlutý připínáček si informaci zobrazí. Avšak tato informace tam není a proto bude uživatel hledat jiné v levém postranním panelu nebo přímo na náměstí. (ukončeno moderátorem) 9. Uživatel se přesune pomocí myši nebo klávesnice k papírnictví a kliknutím na žlutý připínáček si informaci zobrazí. Nebo klikne v levém postranním panelu na Informace a vybere papírnictví. Ve scéně jsou dvě papírnictví. 10. Uživatel bude chodit po náměstí pomocí myši nebo klávesnice a hledat obchod s elektronikou chozením. Nebo ho bude hledat v levém postranním panelu. (ukončeno moderátorem)

4.4 VYHODNOCENÍ 25 Google Earth, část druhá 1. Uživatel se přesune pomocí myši nebo klávesnice ke kostelu sv. Anny. 2. Uživatel klikne v levém postranním panelu na Ukazatele míst a vybere lékárnu U Zlatého orla. 3. Uživatel se přesune pomocí myši nebo klávesnice k GE Money Bank. 4. Uživatel se přesune pomocí myši nebo klávesnice k hostinci U Zlaté hvězdy a kliknutím na žlutý připínáček si informaci zobrazí. Nebo klikne v levém postranním panelu na Informace a vybere hostinec U Zlaté hvězdy. 5. Uživatel se přesune pomocí myši nebo klávesnice k městskému úřadu a kliknutím na žlutý připínáček si informaci zobrazí. Nebo klikne v levém postranním panelu na Informace a vybere městský úřad. 4.4 Vyhodnocení Funkčnost modelu ve VRML jsem otestoval pro prohlížeč Cortona3D a BS Contact. Ze získaných odpovědí z Pre-test dotazníku usuzuji, že účastníci testů často pracují s počítačem a nemají problém s vyhledáváním míst ve webových mapách a mají alespoň malé zkušenosti s aplikací Google Earth. Z poslední otázky Pre-test dotazníku je patrné, že virtuální světy jsou pro většinu z nich něčím novým. Je docela zajímavé, že šest ze sedmi účastníků odpověděli na otázku týkající se aplikace Google Earth kladně, ale s virtuálními 3D modely měst se nesetkali, ačkoliv Google Earth taková města obsahuje. Shrnutí všech odpovědí, které jsem z těchto dotazníků získal, ukazuje tabulka 4.3. Připravené úkoly byly snadné až průměrné. Post-test dotazníky dále ukazují, že největší problém byl pohyb po scéně v aplikaci Google Earth, ale zároveň díky postrannímu panelu, ve kterém bylo možné některé budovy najít, bylo velice snadné a rychlé získat požadované informace o budovách a případně se tam i přesunout. Většina účastníků uvedla, že se lépe orientovali ve scéně, ve které byly pouze budovy. Z toho usuzuji, že pokud návštěvník virtuálního města hledá informace nebo chce získat lepší přehled o rozmístění budov, jsou objekty doplňující scénu spíše nežádoucí. Například jeden z účastníků testu se divil, když se z ničeho nic nemůže hýbat, protože se zasekl o nějaký objekt. Tabulka 4.4 obsahuje shrnutí Post-test dotazníků. V příloze jsou umístěné kopie vyplněných dotazníků. Obrázky B.1 až B.14.

26 KAPITOLA 4. TESTOVÁNÍ Tabulka 4.3: Shrnutí Pre-test dotazníků Číslo otázky Shrnutí odpovědí 1 Účastníci si mohli vybrat libovolný počet odpovědí. Odpověď zábava zvolilo 6 účastníků. Odpověď vzdělávání zvolili 4 účastníci. Odpověď informace zvolilo 6 účastníků. Odpověď jiné zvolili 2 účastníci. 2 Všichni účastníci zvolili odpověď ano. 2a Nejčastěji účastníci odpovídali, že chtějí najít cestu nebo místo. 3 Všichni účastníci kromě jednoho zvolili odpověď ano. 4 Všichni účastníci kromě dvou zvolili odpověď ne. Tabulka 4.4: Shrnutí Post-test dotazníků Číslo otázky Shrnutí odpovědí 1 Odpověď snadné zvolilo 5 účastníků. Odpověď průměrné zvolili 2 účastníci. 2 Všichni účastníci zvolili odpověď Google Earth. 3 Všichni účastníci kromě jednoho zvolili odpověď Google Earth. 4 Nejčastější odpověď byla ne. 5 Všichni účastníci zvolili odpověď ne. 6 Většina účastníků napsala, že největším problémem bylo ovládání v Google Earth. 7 Nejčastěji se účastníkům líbili ukazatelé míst a vyhledávání informací v Google Earth. 8 Všichni účastníci zvolili odpověď ano. 9 Odpověď ano zvolilo 5 účastníků. Odpověď ne zvolili 2 účastníci. Průběh testování jsem dokumentoval, zapisoval jsem si délku trvání testů, zajímavé situace a různé problémy, které se v průběhu testování vyskytly. Splnění úkolů v obou technologií trvalo průměrně stejnou dobu (15 až 20 minut).

4.4 VYHODNOCENÍ 27 V jednom z úkolů v části VRML měli účastníci testování zjistit značku piva, které prodávají v hostinci U Zlaté hvězdy. Najít tuto budovu bylo bez problémů, ale někteří místo toho, aby klikli myší na název budovy, tak hledali značku piva na textuře budovy. Mapu náměstí, kterou jsem vytvořil pro technologii VRML, mnoho účastníků nepoužilo. Bylo to především v důsledkem faktu, že náměstí znají. Ale v rozhovoru ohledně využitelnosti takové mapy v neznámém prostředí říkali, že by ji určitě využili. Pouze by uvítali, aby obsahovala více informaci a symbolů, se kterými se setkávají v mapách na webu. V úkolu číslo 7 (VRML, první část) nikdo z účastníků nezaznamenal, že tato budova jako jediná ve scéně má aktivní celou přední stěnu a myší klikali na její nápis. Objekt digitální hodiny měl v technologii VRML nad sebou se pohybující íčko. Jeden z testujících místo kliknutí na vlastní objekt hodin klikal zprvu na íčko nad ním. V seznamu úkolů je úkol, ve kterém bylo požadováno zjistit telefonní číslo na papírnictví. Vytvořená scéna obsahuje dvě papírnictví. V technologii VRML účastníci našli pouze jedno z nich a tím byl úkol splněn. Ale v druhé technologii někteří našli telefonní čísla na obě papírnictví. Co se týče části Google Earth, tak největším problémem bylo ovládání avatara po scéně. Několikrát se stalo, že účastník testu se při snaze se přesunout k budově, nechtěně aktivoval režim Street View nebo se přesunul úplně mimo připravenou scénu. Ve scéně byly žluté připínáčky a vedle nich název budovy, které uživatele měli informovat o názvu a možnosti zobrazení nějakých informací, které se budovy týkají. Ve snaze získat o budově informace bez využití postranního panelu někteří klikali přímo na název u připínáčku, ale nic se nestalo, protože pro zobrazení informace je nutné využít právě žlutý připínáček a ne text vedle něj. Návštěvníci by uvítali ukazatele míst pro více budov. Velice úspěšný byl seznam budov v technologii Google Earth, díky kterému nebylo nutné běhat po náměstí a budovy hledat.

28 KAPITOLA 4. TESTOVÁNÍ

Kapitola 5 Závěr Cílem této bakalářské práce bylo vytvořit prostorový model Masarykova náměstí a přilehlých budov ve městě Benešov v technologii VRML a Google Earth. Dále navrhnout uživatelské testy pro porovnání využitelnosti modelů v obou prezentačních technologiích a na dostatečně rozsáhlé skupině uživatelů testy provést a vyhodnotit. Model byl navrhnut tak, aby dostatečně věrohodně reprezentoval skutečné náměstí a nabízel návštěvníkům možnosti, které od něho očekávají. Snažil jsem se do scény vložit prvky, které jim pomohou v oblasti orientace a získání informace. V obou technologiích byly možnosti modelování objektů obdobné, ale realizace interaktivních a navigačních prvků rozdílné. Snažil jsem se, aby výsledné scény poskytovaly návštěvníkům stejné možnosti. Zejména proto, že při testování by byla některá technologií znevýhodněna. Jakmile jsem dokončil implementační část, mohl jsem začít s testováním s uživateli. Co se týče vlastního modelu a podobnosti se skutečností, tak si myslím, že jsem cíl splnil. Například proto, že žádný s účastníků testů neměl problémy v modelu budovy rozpoznat a všechny úkoly splnit. Výsledky testování dále ukázaly některé nedostatky modelů a technologií. Největším problémem bylo ovládání pohybu avatara po scéně v Google Earth. Ale pozitivním zjištěním byl seznam míst, který obsahoval všechny informace o připravených budovách a objektech a díky kterému se mohli uživatelé k cílovému místu jednoduše přesunout. Tuto možnost můj model ve VRML neumožňoval, ale jistě by šla implementovat. V případě velkého prostorového modelu (například celého města) by bylo vhodné, aby model umožňoval zobrazit seznam míst, interaktivní mapu a případně vyhledávání. Jedna část testování probíhala ve scéně, ve které byly pouze budovy. Chtěl jsem zjistit, zda objekty doplňující scénu uživatelům spíše vadí nebo naopak. Z testování vyplynulo, že pro orientaci a pohyb ve virtuálním světě je lepší tyto objekty vynechat. Další vývoj práce by se mohl zaměřit na více komplexnější virtuální světy a rozšíření funkcionality vyhledávání míst, budov nebo informací. 29

30 KAPITOLA 5. ZÁVĚR

Literatura [1] Žára Jiří. Laskavý průvodce virtuálními světy. http://www.cgg.cvut.cz/laskavypruvodce/, stav z 26. 12. 2011. [2] BS Contact. http://www.bitmanagement.com/, stav z 26. 12. 2011. [3] Cortona3D Viewer. http://www.cortona3d.com/products/cortona-3d-viewer.aspx, stav z 26. 12. 2011. [4] Gimp 2. http://www.gimp.org/, stav z 26. 12. 2011. [5] VrmlPad. http://www.parallelgraphics.com/products/vrmlpad/, stav z 26. 12. 2011. [6] Google Earth. http://www.google.com/intl/cs/earth/index.html, stav z 26. 12. 2011. [7] Google SketchUp. http://sketchup.google.com/, stav z 26. 12. 2011. 31

32 LITERATURA

Příloha A Seznam použitých zkratek VRML Virtual Reality Modeling Language PNG Portable Network Graphics 3D Three-Dimensional GIMP GNU Image Manipulation Program 33

34 SEZNAM POUŽITÝCH ZKRATEK

Příloha B Vyplněné dotazníky Obrázek B.1: Pre-test dotazník číslo 1 Obrázek B.2: Post-test dotazník číslo 1 35

36 PŘÍLOHA B. VYPLNĚNÉ DOTAZNÍKY Obrázek B.3: Pre-test dotazník číslo 2 Obrázek B.4: Post-test dotazník číslo 2

37 Obrázek B.5: Pre-test dotazník číslo 3 Obrázek B.6: Post-test dotazník číslo 3

42 PŘÍLOHA B. VYPLNĚNÉ DOTAZNÍKY

Příloha C Instalační a uživatelská příručka Technologie VRML Pro zobrazení modelu náměstí je potřeba mít nainstalovaný prohlížeč VRML. Hlavní soubor celé scény se jmenuje namesti.wrl. Instalátor BS Contact a Cortona3D jsou součástí přiloženého CD. Technologie Google Earth Pro zobrazení modelu náměstí je potřeba mít nainstalovanou aplikaci Google Earth. Doporučuji vypnout zobrazování terénu. 43

44 INSTALAČNÍ A UŽIVATELSKÁ PŘÍRUČKA

Příloha D Obsah přiloženého CD CD readme.txt - obsah CD ge model1.kmz - finální model scény v technologii Google Earth model2.kmz - model scény v technologii Google Earth obsahující pouze budovy sketchup.skp - model scény v programu Google SketchUp vrml model1 - adresář finální scény v technologii VRML model2 - adresář scény v technologii VRML obsahující pouze budovy install BS_Contact_Installer.exe - instalátor prohlížeče BS Contact cortona3d.msi - instalátor prohlížeče Cortona3D text hruzaka1_2012bach.pdf - text bakalářské práce v PDF hruzaka1_2012bach.odt - text bakalářské práce v OpenOffice 45