Na tomto místě se bude nacházet oficiální zadání bakalářské práce.
ii
České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce
Bakalářská práce
Využití technologie VRML pro prodej zboží a nabídku služeb Aleš Havlíček
Vedoucí práce: Mgr. Jiří Danihelka
Studijní program: Softwarové technologie a management Obor: Web a multimedia 25. května 2011
iv
v
Poděkování Tímto bych rád poděkoval především celé své rodině za trpělivost a podporu, která mi byla věnována během tvorby této práce. Velké díky patří také vedoucímu práce panu Mgr. Jiřímu Danihelkovi, za jehož vstřícnost, ochotu a důležité rady jsem nesmírně vděčný.
vi
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ávech souvisejících s právem autorským a o změně některých zákonů (autorský zákon).
V Praze dne 25.5.2011
………………………………………………………………
viii
Abstract This bachelor thesis deals with the appropriate combination of a virtual reality (3D world) with a purchase at a classic internet shop. Through the 3D model of the classic shop and interactive environment brings the project online shopping closer to customers as close to the normal reality as possible. The goal of this thesis is the possibility of looking at actual data and information from online shop using the virtual reality.
Abstrakt Tato bakalářská práce se zabývá vhodným spojením virtuální reality (3D světa) s nákupem v klasickém internetovém obchodu. Prostřednictvím 3D modelu kamenného obchodu a interaktivního prostředí se projekt snaží přiblížit zákazníkům nakupování na internetu co nejblíže k jejich běžné realitě nakupování. Přínosem této práce je tedy možnost procházet aktuální data a informace z internetového obchodu pomocí virtuální reality.
ix
x
Obsah 1 Úvod................................................................................................................................. 1 2 Použité technologie .......................................................................................................... 3 2.1 Modelovací jazyk virtuální reality VRML ............................................................... 3 2.2 Vhodnost použití jazyka VRML ............................................................................... 4 2.3 Programovací jazyk PHP .......................................................................................... 5 2.4 Značkovací jazyk HTML .......................................................................................... 6 3 Návrh vzhledu virtuálního obchodu................................................................................. 9 3.1 Návrh exteriéru ....................................................................................................... 10 3.2 Návrh interiéru ........................................................................................................ 15 4 Získávání informací o mobilních telefonech ................................................................. 21 5 PHP parsování ................................................................................................................ 23 5.1 Co je to parser? ....................................................................................................... 23 5.2 PHP Simple HTML DOM Parser ........................................................................... 23 5.3 Popis a implementace PHP skriptu ......................................................................... 25 6 Popis a implementace VRML scény .............................................................................. 29 6.1 Transformace OUTSIDE_SCENE.......................................................................... 29 6.2 Transformace INSIDE_SCENE.............................................................................. 31 6.3 Průchod virtuální scénou......................................................................................... 34 7 Redukce scény pro mobilní zařízení .............................................................................. 37 7.1 Redukce geometrie.................................................................................................. 38 7.2 Redukce textur ........................................................................................................ 40 7.3 Komplikace během redukce scény.......................................................................... 41 7.4 Změny v redukované scéně ..................................................................................... 41 8 Testování ........................................................................................................................ 43 8.1 Měření v plnohodnotné scéně ................................................................................. 43 8.2 Měření v redukované scéně .................................................................................... 44 9 Závěr .............................................................................................................................. 45 Literatura ............................................................................................................................ 47 Seznam použitých zkratek ................................................................................................. 49 Obsah přiloženého CD ....................................................................................................... 51 xi
xii
OBSAH
Seznam ilustrací Model obchodu se zdroji inspirace………………………………………………………11 Úprava bézierových křivek ve tvaru symbolu…………………………………………..12 Mapování textury na válcové těleso…………………………………………………….. 14 FluxStudio – mapování textur…………………………………………………………... 15 Nabídka mobilních telefonů…………………………………………………………….. 17 Ukázka nástroje Decimate v programu Blender……………………………………….. 19 Schéma získávání dat z Vodafone e-shopu…………………………………………....... 22 Pohled venkovního viewpointu na vchod obchodu…………………………………….. 34 Pohled druhého viewpointu na nabídku telefonů a zákaznické pulty…………………... 35 Volba otázek pro interaktivní rozhovor………………………………………………… 36 Ukázka přední a zadní strany panelu…………………………………………………… 36 Nastavení parametrů nástroji Poly Reducer…………………………………………….. 38 Dialogové okno funkce „Uložit pro web a zařízení“ programu Adobe Photoshop…….. 40 Redukovaná veze virtuální scény spuštěná v emulátoru………………………………... 42
xiii
xiv
SEZNAM ILUSTRACÍ
Kapitola 1
Úvod Tato práce má za cíl posoudit vhodnost použití virtuální reality pro nabídku a prodej zboží a služeb na internetu. Přesněji tedy virtuální realita popsána pomocí jazyka VRML. Projekt od základu popisuje modelování interaktivního kamenného obchodu Vodafone, jeho okolí a interiér s autentickými doplňky značky Vodafone. Dále řeší vhodnou nabídku zboží. V tomto případě se zbožím rozumí mobilní telefony společnosti Vodafone, které lze prostřednictvím virtuálního obchodu objednat. Je zde kladen důraz především na přenesení aktuálních dat přímo z internetového obchodu a jejich vhodné zobrazení ve virtuálním světě. Toho je dosaženo za pomoci parsování HTML kódu webové stránky Vodafone prostřednictvím knihovny napsané v jazyce PHP. Další fáze práce spočívá ve zredukování virtuálního světa do takové podoby, aby se dal spustit i na mobilním telefonu (PDA). Jedná se zde o zjednodušení většiny geometrie do opravdu jednoduchých tvarů a také o co největší kompresi textur. Dal se zde samozřejmě předpokládat problém s výkonností takového mobilního zařízení.
1
2
KAPITOLA 1 ÚVOD
Kapitola 2
Použité technologie 2.1 Modelovací jazyk virtuální reality VRML Jazyk VRML je základním stavebním kamenem této práce. Přesnější je tedy označení VRML97, jak je dnes nazvána poslední verze jazyka. V poslední verzi byl definován v roce 1997 a zároveň se tak stal mezinárodním standardem ISO. VRML slouží pro popis interaktivní trojrozměrné scény za pomoci vektorové grafiky. Jedná se o textový formát souboru, jenž je založen na deklarativním programování. Slovo „deklarativní“ tedy označuje, že za pomoci tohoto jazyka pouze definujeme to, jaký chceme provést úkon, a o provedení tohoto úkonu se již postará interpreter (speciální vykonávací program) jazyka. Jak je již zmíněno výše, VRML dokáže popsat nejen statický 3D svět, ale v jeho schopnostech je také možnost přidání interakce do takového světa. Díky zmíněné vlastnosti dokáže tento grafický nástroj reagovat na různé události (např.: kliknutí myši, táhnutí myší, detekce uživatele v určité oblasti) a spouštět tím tak další události (např.: přehrání zvukového klipu, transformace těles, změna barev, pozice uživatele). Virtuální scéna je popsána pomocí jednotlivých objektů, resp. uzlů, které jsou hierarchicky uspořádané do stromové struktury. Soubor VRML obsahuje na prvním místě hlavičku, ve které se definuje kódování celého textu. Poté následují většinou uzly WorldInfo (krátké informace o druhu virtuálního světa a o jeho autorovi), NavigationInfo (předdefinovaný způsob pohybu po scéně, jeho rychlost atd.) a ViewPoint (záchytné body ve scéně, do kterých se může postupně uživatel přemisťovat pouhým kliknutím na tlačítko). Po těchto základních deklaracích následují uzly, z nichž se dá rozdělit většina na statické a dynamické. Statické uzly popisují především tvar a vzhled těles, jejich textury, zvuky, světla, a různé seskupování uzlů. Dynamické uzly se naopak starají o změnu vlastností ostatních uzlů za pomoci generování určitých událostí.
3
Ve VRML souboru se také velmi často objevují příkazy pro definování tzv. prototypů – uzel PROTO nebo EXTERNPROTO. Tato deklarace je jedna z nejmocnějších v celém jazyce VRML. Pomocí těchto příkazů lze totiž vytvořit vlastní uzel, s vlastními parametry. Následně lze pak tento uzel používat tam, kde je zrovna potřeba, jako je tomu u běžně předdefinovaných uzlů. Další silnou zbraní ve světě VRML je konstrukce příkazů DEF a USE. Za pomoci příkazu DEF lze snadno pojmenovat, resp. definovat uzel, který se má v souboru opakovat. Na druhé straně příkazem USE a definovaným jménem lze tento uzel znovu použít, aniž by se musel popisovat celý opakovaně. Této jazykové konstrukce se dá s elegancí využít při definici materiálů, tvarů, ale i složitějších struktur. Navíc za použití těchto příkazů se snadno ulehčí práce, celý kód se stane více přehledným a především by tyto příkazy měly napomoci k rychlejšímu vykreslení scény. Neméně důležitá je konstrukce příkazů ROUTE … TO, pomocí které se popíše spojení mezi statickými a dynamickými prvky scény. Přesněji tedy tento příkaz propojí již definovaný uzel (příkazem DEF – viz výše), jehož výstupem je nějaká událost, s dalším definovaným uzlem, jež tuto vyslanou událost přijme. Poslední zde popsaný příkaz bude uzel SCRIPT, který umožňuje použití skriptovacích jazyků JAVA a ECMAScript (většinou známý jako JavaScript). Tento uzel je tedy téměř „všemocný“ a dodává tak jazyku VRML velkou variabilitu a možnost využití. Dokáže dodat většinu interaktivity statickým objektům ve virtuálním světě.
2.2 Vhodnost použití jazyka VRML Jazyk VRML je koncepčně postaven tak, aby se co nejvíce hodil do prostředí Internetu, přesněji do prostředí WWW. S jeho pomocí se lze odkazovat na určitá místa na Internetu, nebo dokonce data z Internetu přímo získávat a zobrazovat. To vše díky parametru url, do kterého lze například přímo vložit adresu odněkud z WWW. VRML scénu (soubor) lze snadno vložit do kódu jazyka HTML a zobrazit jej tak ve kterémkoliv webovém prohlížeči. Do kódu HTML lze VRML soubor (ve tvaru soubor.wrl) vložit pomocí tagu (značky) <embed>. Tento tag ovšem značí, že do HTML vkládáme soubor, který není přímo podporován, ale pomocí pluginu (zásuvného modulu) lze tento soubor zobrazit. Tady ovšem narážíme na jeden z největších problémů jazyka VRML. K zobrazení jeho souboru potřebujeme totiž doinstalovat určitou aplikaci
4
(plugin). Asi nejznámějšími aplikacemi pro prohlížení VRML světů jsou Cortona3D Viewer a BS contact. Obě aplikace jsou k dispozici zdarma. Instalace není nijak náročná pro běžného uživatele internetu, ale u mnoha uživatelů tato skutečnost znamená okamžité zatracení dané technologie, protože pro její spuštění musí ještě „něco“ udělat. Až na jednu nevýhodu je tedy jazyk VRML ideální pro zobrazování na internetových stránkách a dává tak velice mnoho možností pro své uplatnění. Dodává schopnosti přiblížit uživatelům objekty ve 3D zobrazení a docílit tak realističtějšího pocitu při prohlížení internetových stránek. Existuje zajisté nesčetně odvětví, ve kterých se dá jazyk VRML uplatnit. Asi nejpodstatnější využití bude při zobrazování nejrůznějších produktů a výrobků, které nabízejí prodejci a výrobci při svém prodeji na internetu. Díky takovému zobrazení má uživatel možnost prohlédnout si produkt ze všech možných úhlů a stran. Může dokonce vyzkoušet i funkčnost takového produktu – např. posouvat s různými částmi, dostat zvukovou nebo světelnou (grafickou) odezvu atd. Navíc např. při kliknutí na nějaký objekt (tlačítko) ve virtuálním světě se uživatel může snadno odkázat přímo na webovou stránku, kde již bude moci daný produkt zakoupit. Dané skutečnosti je právě využito v této práci. Další odvětví, ve kterém by se VRML mohlo využít, jsou různé vizualizace staveb např. pro prodej realit, pro zobrazování historických pamětihodností (které např. nejsou veřejnosti často přístupné) aj. Snadno se dá také představit umělecká galerie, ve které se jednoduše prochází za pomoci virtuálního světa a lze tak prohlížet nejrůznější umělecká díla. Ať jsou to klasické obrazy, různé plastiky, sochy, nebo dokonce nějaký interakční exponát, pomocí kterého sám uživatel vytváří umělecké dílo. Na takovýto druh zobrazení se VRML velice hodí. Případů, kde lze VRML s úspěchem využít, se zajisté najde celá řada. Výpisem všech možností se práce nezabývá, přesto je zde uvedeno pouze několik příkladů. Při psaní předchozího textu bylo čerpáno ze zdrojů [1], [2], [3], [4].
2.3 Programovací jazyk PHP Jazyk PHP je velice rozšířený a oblíbený skriptovací jazyk pro tvorbu webových stránek s dynamickým obsahem. Nejčastěji bývá vložen přímo do kódu jazyka HTML mezi značky . PHP je jazyk interpretovaný, což znamená, že daný PHP kód
5
musí vykonat (interpretovat) nějaký externí program (interpreter), jehož výstupem je výsledný „čistý text“, který je vložen na místo původního (provedeného) PHP kódu do HTML stránky. Jak již bylo zmíněno, PHP skript se musí někde vykonat. To místo, kde se vykoná se nazývá webový server. Asi nejznámějším webovým serverem je Apache. Díky tomu, že se PHP kód spouští na webovém serveru, je samotný jazyk PHP nezávislý na platformě. PHP je tedy velice oblíbený a to z mnoha důvodů. Syntaxe tohoto jazyka je velice jednoduchá, protože vychází z několika známých programovacích jazyků jako je Pascal, C, Java atd. PHP také disponuje širokou základnou funkcí a podporou mnoha knihoven. Další nespornou výhodou je snadná spolupráce s mnohými databázovými systémy, jako jsou např. MySQL, PostgreSQL, Oracle a další. Programovací jazyk PHP byl v tomto projektu použit nejen kvůli své jednoduchosti a přístupnosti, ale především díky existenci volně šiřitelné knihovny s názvem PHP Simple HTML DOM Parser. Pomocí této knihovny se dala získat data z oficiálních internetových stránek firmy Vodafone, vhodně je zpracovat a následně je využít pro zobrazení ve virtuálním obchodu téže firmy. O tom, jak přesně se PHP a zmiňovaná knihovna využila při tvorbě celého projektu, se bude detailněji zaobírat následující kapitola. Při psaní předchozího textu bylo čerpáno ze zdrojů [5], [6].
2.4 Značkovací jazyk HTML Jazyk HTML se používá pro tvorbu základních webových stránek. Jeho počátky sahají až do roku 1989, kdy se poprvé začalo na jazyku pracovat. Za tolik let prošel jazyk HTML mnoha úpravami a byl vydán v různých verzích. Aktuální verze je HTML 5, která je poměrně čerstvá, a stále se na ní pracuje. HTML je tvořen tzv. tagy (značkami). Většina z nich je párových, což znamená, že každý tag má svojí „otevírající“ a „uzavírající“ verzi, a mezi tyto dvě verze každého párového tagu se vepíše text, který má být většinou zobrazen. Druh tagu potom určuje, jak se text zapsaný mezi jeho dvěma verzemi zobrazí.
6
V projektu je použit jazyk XHTML, což je vlastně rozšířená verze jazyka HTML o několik maličkostí. Tento jazyk je zde využit k utvoření základních webových stránek, tak aby do nich mohl být následně vložen PHP skript a soubor VRML. Níže je uvedená základní struktura HTML stránky, přičemž v tagu je příklad vložení VRML souboru za pomoci tagu <embed>. Při psaní předchozího textu bylo čerpáno ze zdroje [7].
Návrh vzhledu virtuálního obchodu Protože jsou ve virtuální scéně nabízeny přímo produkty společnosti Vodafone, byl vzhled virtuálního obchodu z části inspirován skutečným vzhledem kamenných obchodů této společnosti. Jedná se tedy především o interiér, přesněji o tři základní prvky interiéru, což jsou:
osvětlení zákaznických pultů,
sedačky,
zákaznické pulty.
Ostatní prvky virtuální scény, kromě modelu prodavačky, již byly výsledkem autorovi tvůrčí činnosti. Žádost na zdokumentování prvků interiéru Vodafone obchodu byla bohužel zamítnuta. Důvod byl ten, že mohlo dojít ke zdokumentování bezpečnostních prvků Vodafone prodejny, což by bylo nepřípustné. Je nutno dodat, že se jednalo pouze o ústní žádost v jedné z pražských prodejen. K písemné žádosti by se asi společnost Vodafone stavěla jinak. Nezbylo tedy nic jiného, než vystačit pouze se zdroji nalezenými na síti Internet. Většina složitějších tvarů byla vymodelována ve 3D modeláři Blender. Z tohoto programu byly objekty exportovány přímo do souboru typu *.wrl, což je soubor jazyka VRML. Exportované objekty, jejichž geometrie je definována za pomoci uzlu IndexdFaceSet, byly následně upravovány přímo v editoru jazyka VRML (v programu VrmlPad). Až zde se také jednodušším objektům přiřazovaly textury a materiály. Na texturování složitějších tvarů (především válcového tvaru) byl použit software FluxStudio.
9
3.1 Návrh exteriéru Základním stavebním kamenem při návrhu exteriéru byl tvar samotného obchodu. Ten se musel odvíjet od způsobu nabídky zboží, v tomto případě mobilních telefonů. Nabídka mobilních telefonů byla vytvořena tak, že každá textura s mobilním telefonem byla umístěna na samostatný panel (desku) obdélníkového tvaru (podrobnější popis nabídky telefonů následuje v návrhu interiéru). Tyto panely bylo zapotřebí následně rozmístit po místnosti požadovaného tvaru. Aby byly panely dostatečně velké a byly zároveň ihned všechny viditelné po průchodu uživatele dveřmi, byl ihned zamítnut čtvercový, respektive obdélníkový půdorys obchodu. Následující možností byl obchod kruhového půdorysu, pro který bylo následně rozhodnuto.
Modelování budovy Základem pro modelování tvaru obchodu byl tedy půdorysový kruhu – v Blenderu objekt zvaný Circle, ze kterého pomocí funkce EXTRUDE (tažení, vytahování) a transformace vrcholů vzešel finální tvar budovy. Průchod do budovy dostal také tvar kruhu. Ten byl vytvořen pomocí boolovské funkce DIFFERENCE (rozdíl) tak, že od objektu budovy byl odečten objekt válcového tvaru. Nad vchod byla ještě umístěna plocha pro texturu s názvem obchodu. Následující ilustrace znázorňuje, kde byla nalezena inspirace pro tvar budovy a její finální tvar.
10
Ilustrace 1: Model obchodu se zdroji inspirace, zdroje: http://www.figurka.cz/domov/zahrada/eva-solo-ptaci-budka-zihana, http://www.aha-nabytek.cz/ http://www.binkyswoodworking.com/Birdhouse.php, stav z 1.5.2011
Modelování vchodových dveří Dalším důležitým prvkem exteriéru a v tomto případě i interiéru byly vchodové dveře. Při jejich návrhu bylo namístě dodržet koncepci oblých tvarů. Museli být tedy také kulatého tvaru. Z estetického hlediska a čistě subjektivního názoru vzešel návrh na dvoudílné posunovací dveře, které bylo tedy nutné vhodně rozdělit na dvě části. Obyčejné rozdělení válcových dveří na dvě půlky se zdálo být fádní a neoriginální. Přišel tedy v úvahu nápad na rozdělení dveří na části ve tvaru symbolu jin-jang (symbol znázorňující rovnováhu sil a vzájemné doplňování). Dal se zde ale předpokládat problém s přesným vymodelováním obou částí tak, aby do sebe obě důkladně zapadaly. Tento problém opravdu nastal při prvním pokusu modelování v Blenderu. V první řadě bylo zapotřebí vložit do blenderu obrázek se symbolem jin-jang, aby mohl sloužit jako předloha pro přesné „obkreslení“ tvaru dveří. Základ pro modelování byl Bezier Circle, neboli kruh definovaný za pomoci bézierových křivek. Jeho průměr
11
byl nastaven přesně podle průměru symbolu jin-jang. Následně byl objekt Bezier Circle duplikován a zároveň bylo deaktivováno jeho zobrazení ve scéně, aby nezavazel při „obkreslování“ poloviny symbolu jin-jang. Základní Bezier Circle je tvořen čtyřmi kotevními body. Pomocí funkce Subdivide (rozdělení) bylo na kruh přidáno více kotevních bodů, aby se dal s větší přesností vytvořit požadovaný tvar. Každý kotevní bod má jeden nebo dva tzv. záchytné body. Transformací kotevních i záchytných bodů vznikl přesný tvar, tj. polovina symbolu jin-jang (Ilustrace 2). Pomocí funkce Extrude byl vytažen jak upravený tvar z křivek, tak jeho původní (skrytá) duplikovaná verze do požadované šířky. Posledním krokem bylo odečtení poloviny vymodelovaného symbolu od celého válce, který vznikl vytažením z duplikovaného kruhu. Znovu za pomoci boolovské funkce Difference. Takto vznikla i druhá polovina symbolu (dveří).
Ilustrace 2: Úprava bézierových křivek ve tvaru symbolu, zdroj symbolu jin-jang: http://www.kaneva.com/mykaneva/PictureDetail.aspx?assetId=5102982, stav z 10.1.2011
12
Modelování ostatních objektů z exteriéru U dalších prvků z exteriéru již nebude následovat detailní popis jejich vymodelování v softwaru Blender. Důvod je takový, že většina těchto objektů je již velmi jednoduchých tvarů, a proto nejsou ani nijak náročné na modelování. Jedná se o reklamní poutače, které jsou umístěny před vchodem, aby posílily dojem uživatele, že se jedná opravdu o vchodové dveře. Dále je tu samotná podlaha okolo obchodu, což je prostá rovinná plocha. Celý prostor kolem obchodu ohraničují čtyři stěny, které byly vytvořeny z objektu typu Cube (krychle). Posledním prvkem exteriéru vymodelovaným v Blenderu je kruhové ohraničení kolem stromů a jejich dno ve tvaru kruhové plochy. Zmíněné ohraničení bylo vymodelováno pomocí dvou válců tak, že od válce většího průměru se odečetl válec menšího průměru. Poslední prvky, které se ještě nachází v exteriéru virtuální scény, jsou stromy a lidé. To ovšem nejsou žádné 3D modely, jak by se na první pohled mohlo zdát. Tyto prvky jsou definovány přímo v jazyce VRML, a to uzlem Billboard. Tento uzel má za úkol dynamicky natáčet jeho potomky vždy čelem k avatarovi (uživateli), ať už se pohne kamkoliv. Defaultně se potomci uzlu Billboard natáčí podle osy Y, tato osa jde samozřejmě změnit. Jedná se tedy pouze o obdélníkovou plochu, která je určená pomocí uzlu IndexedFaceSet. Na tuto plochu byla následně nanesena částečně průhledná textura (buď člověka, nebo stromu). Ve výsledku působí tyto objekty na uživatele opravdu trojrozměrně, i když se jedná pouze o klasický 2D obrázek, který se dynamicky natáčí k uživateli. Tyto objekty jsou zde hlavně proto, aby vytvořily realističtější dojem z virtuální scény, a zároveň také proto, aby vyplnili prostor.
Texturování exteriéru Většině objektů z exteriéru stačilo přiřadit texturu pouze v programu VrmlPad. Velkou nevýhodou zmíněného softwaru je absence vestavěného editoru pro mapování textur na složitější tvary. Jediný objekt, u kterého byl s texturováním problém, bylo válcové ohraničení kolem stromů. Jazyk VRML totiž i u válcového tělesa používá mapování textury stále jako na rovinnou plochu, proto dochází po obvodu válce na dvou místech (naproti sobě) k deformaci textury (Ilustrace 3).
13
Ilustrace 3: Mapování textury na válcové těleso
Jsou zde dvě možnosti jak texturu na válec správně mapovat. První je ta, že se mapování nadefinuje ručně pomocí parametrů texCoord a texCoordIndex. Prostřednictvím zmíněných dvou parametrů určíme body na rovinné textuře, a následně definujeme, jak se tyto body mají spojit (v jakém pořadí) s body na prostorovém tělese. Tento způsob mapování je ale u složitějších tvarů téměř neproveditelný. Druhá možnost je použití externího editoru, který umožňuje grafické mapování textur. V tomto případě byl použit program FluxStudio. Tento software umožňuje jak import, tak export souboru *.wrl. Podstatným kladem softwaru je možnost určit tvar tělesa, respektive jeho části, na které bude následně nanesena textura. Pokud tedy v tomto případě vybereme, že bude textura mapována jako na objekt válcového tvaru (Ilustrace 4), bude textura na objekt nanesena správným způsobem a na žádných místech nedojde k deformaci.
Při psaní předchozího textu bylo čerpáno ze zdroje [1].
14
Ilustrace 4: FluxStudio – mapování textur
3.2 Návrh interiéru Při návrhu interiéru bylo snahou co nejvíce napodobit design značky Vodafone. O této značce je známo, že velice dbá na design svých obchodů a vůbec všeho, co je s touto značkou spojeno. Důraz při návrhu interiéru byl tedy kladen především na:
časté používání červené barvy (základní barva značky Vodafone),
kontrast použitých barev, moderní vzhled celého obchodu,
napodobení tří základních prvků většiny Vodafone prodejen (zákaznický pult, sedačky, světla nad zákaznickým pultem).
V interiéru se nachází ještě jeden významný prvek, a tím je postava prodavačky. Je zde umístěna kvůli interaktivnímu rozhovoru, který s ní může uživatel vést. Tato postava
15
byla převzata z internetové databáze 3D modelů a následně byla její geometrie zjednodušena v modeláři Blender.
Návrh nabídky mobilních telefonů Nabídka mobilních telefonů je vlastně to nejdůležitější, o co v tomto projektu jde. Musela být navrhnuta tak, aby co nejefektivněji dokázala zaujmout uživatele. Musela také umožňovat pohodlné prohlížení, a to v dostatečné velikosti. V podstatě se rozhodovalo mezi dvěma způsoby. V prvním případě mohla být nabídka tvořena jedním velkým panelem, na kterém by byl obrázek mobilního telefonu, jeho označení, cena, informace o něm, tlačítko BUY (koupit) a tlačítko MORE INFORMATION. Na tomto velkém panelu by se nacházely šipky (doleva, doprava), pomocí nichž by se přecházelo na další, respektive předešlý mobilní telefon (tzv. listování). Nevýhoda tohoto způsobu je v tom, že takto tvořená nabídka nevypadá příliš efektně a ani se nepřibližuje situaci v reálných obchodech. Výhodou ovšem je, že při procházení celé nabídky nemusí uživatel nikam přecházet, stojí na jednom místě a pouze kliká na šipky. Další výhodou je, že zde není limit na množství takto nabízených mobilních telefonů. Druhá možnost, která byla zároveň zvolena, je následující. Každý mobilní telefon bude umístěn na samostatném menším panelu. Tento panel bude otočný, přičemž na přední straně bude obrázek telefonu, jeho označení, cena a dvě tlačítka – BUY, INFO. Kliknutím na tlačítko INFO se panel otočí o 180°. Na této straně panelu bude seznam jeho nejdůležitějších vlastností, tlačítko MORE INFORMATION a namísto tlačítka INFO bude na této straně tlačítko BACK, pomocí kterého se panel otočí zpět na stranu s obrázkem telefon. Tato možnost nabízení zboží je daleko efektnější pro uživatele a zároveň je možno vidět na jeden pohled všechny panely s telefony. Malou nevýhodou je, že při prohlížení všech mobilních telefonů musí uživatel přecházet mezi panely. Na druhou stranu se tento způsob podobá více reálné nabídce mobilních telefonu, kde je každý mobilní telefon samostatně vystaven. Větší nevýhodou je ovšem to, že jsme zde limitováni počtem panelů v závislosti na velikosti obchodu. V tomto případě jsme omezeni obvodem kruhové stěny obchodu, na které jsou panely s telefony umístěny. Tento problém lze ale řešit například druhou řadou panelů umístěnou nad první, přičemž by se tyto řady mohly měnit stisknutím nějakého tlačítka.
16
Ilustrace 5: Nabídka mobilních telefonů
Modelování v Blenderu V Benderu byl vymodelován téměř celý interiér, až na panely s mobilními telefony, plochu s reklamou a model prodavačky. Při modelování šlo většinou o drobné úpravy základních geometrií (těles):
podlaha, strop obchodu – křivkový objekt BEZIER CIRCLE konvertovaný na objekt typu Mesh,
kruhový plášť obchodu – objekt CIRCLE „vytažený“ pomocí funkce EXTRUDE,
plocha s nápisem „Offer of mobile phones“ - objekt PLANE,
sedačky – jeden menší a druhý větší objekt CYLINDER, nahoře nad větším válcem ještě BEZIER CIRCLE také konvertovaný na Mesh, zákaznický pult – celý z objektů CUBE a CYLINDER.
17
Import modelu postavy Jak již bylo zmíněno výše, model postavy byl převzat z internetové databáze 3D modelů (turbosquid.com). Model zde disponoval několika formáty, z nichž byl nejvhodnější formát *.obj. Tento formát totiž jako jediný dokázal importovat 3D modelář Blender bez chyby. V Blenderu došlo k několika úpravám, které se týkaly především redukce geometrie. Importovaná postava byla velice detailně vymodelována a obsahovala mnoho částí, které byly absolutně zbytečné pro její využití v tomto projektu, proto byly tyto části z celého modelu odstraněny. Následuje výčet odstraněných částí:
kompletní vnitřní kostra postavy,
jedna vrstva vlasů,
řasy,
zuby a jazyk, hodinky.
Pro zjednodušení geometrie byl zvolen nástroj Decimate, který redukuje počet vrcholů v dané geometrii, což má za následek i zredukování počtu hran a ploch. Po této redukci následovala ještě transformace paží směrem k tělu. Transformace bylo docíleno pouhým přesouváním a rotací vrcholů v editačním módu. Následující krok byl export z Blenderu do souboru jazyka VRML. Tento soubor se již upravil pomocí editoru VrmlPad, v němž byly jednotlivým částem postavy přiřazeny materiály. I přes velkou redukci geometrie se zdá být postava velice oblých tvarů. Této skutečnosti je v jazyce VRML docíleno pomocí parametru creaseAngle uzlu IndexedFaceSet. Tímto parametrem se nastaví hraniční úhel mezi dvěma sousedními nerovinnými plochami geometrie, který má být ještě považován za oblý přechod mezi těmito plochami. Nastavením vysokého čísla např. 1.5, se tedy zdá, jako kdyby byla postava dokonale oblá bez jakýchkoliv hran.
Při psaní předchozího textu bylo čerpáno ze zdroje [1].
18
Ilustrace 6: Ukázka nástroje Decimate v programu Blender, zdroj původního modelu postavy: http://www.turbosquid.com/, stav z 2.11.20110
19
20
KAPITOLA 3 NÁVRH VZHLEDU VIRTUÁLNÍHO OBCHODU
Kapitola 4
Získávání informací o mobilních telefonech Důležitým přínosem této práce je také propojení virtuálního světa přímo s e-shopem firmy Vodafone. Pomocí PHP skriptu a s využitím knihovny PHP Simple HTML DOM Parser se z webové stránky Vodafone vyberou data o jednotlivých mobilních telefonech, které se uloží na server a následně se z nich vytvoří VRML soubor (nabídka mobilních telefonů na otáčecích panelech), který se poté za pomoci uzlu Inline vloží přímo do hlavní virtuální scény (Ilustrace 7). Data, která se přebírají z oficiálního e-shopu, jsou následující:
název (označení) mobilního telefonu,
obrázek mobilního telefonu,
cena s tarifem a standardní cena,
bodové informace, jež shrnují nejdůležitější vlastnosti telefonu,
odkaz na webovou stránku, kde již lze mobilní telefon zakoupit.
Tato data se na serveru aktualizují 1x denně, a to při prvním načtení webové stránky s virtuální scénou daného dne. Aktualizace se projeví zpožděním při načítání webové stránky. V případě, že celá aktualizace proběhne v pořádku, je o tom uživatel informován v liště Database status (nad oknem s virtuální scénou) zprávou „Phone database updated“. Při dalších návštěvách toho dne se již bude zobrazovat zpráva „Pohne database is actual“. Pokud dojde při parsování k nějaké chybě, např. když Vodafone změní kódování svých stránek a PHP parser nenajde požadované parametry, data na serveru se nezaktualizují a uživatel o tom bude informován zprávou „Parser error: Phone database wasn´t updated. Last update: (datum poslední aktualizace)“.
21
Požadavek dat
PHP
data
SCRIPT Parsovaná data
Vodafone e-shop
Web server
data
Hlavní scéna
Vygenerovaný
vložená do
Inline {..}
webové
VRML soubor panels.wrl
stránky
Ilustrace 7: Schéma získávání dat z Vodafone e-shopu
22
Kapitola 5
PHP parsování 5.1 Co je to parser? Parser může být popsán jako program, který na vstup dostane množství dat, ve kterých je schopen se zorientovat pomocí jejich struktury. Následně dokáže parser vyhledat požadované informace z tohoto vstupu a dodat je na svůj výstup. V tomto případě je vstupem pro parser XHTML kód, jehož strukturu určuje tzv. Document Object Model (DOM). S pomocí DOM a vstupních parametrů dokáže tedy parser přistupovat k požadovaným XHTML tagům a jejich obsah posílat na svůj výstup, kde může být dále zpracován.
5.2 PHP Simple HTML DOM Parser Jedná se o volně dostupnou open-source knihovnu napsanou v jazyce PHP 5+. Voláním funkcí z této knihovny lze opravdu snadnou cestou parsovat většinu HTML/XHTML stránek. Tato knihovna vyžaduje verzi PHP 5+. Mezi její další vlastnosti patří také schopnost parsovat i nevalidní HTML/XHTML stránky. K určení požadovaného tagu (elementu) tato knihovna využívá tzv. selektorů (speciální argumenty), jež jsou stejné jako u známého JavaScriptového frameworku jQuery. Pomocí selektorů lze tedy například určit, že chceme najít HTML tag
, který má parametr class="modry". Pro snadnější vysvětlení budou dále uvedeny názorné příklady.
Při psaní předchozího textu bylo čerpáno ze zdrojů [8], [9], [10].
23
Následující příklady jsou převzaty ze zdroje [10].
// Načte a vytvoří DOM objekt z URL nebo ze souboru $html = file_get_html('http://www.google.com/');
// Najde všechny obrázky a zobrazí jejich webovou adresu foreach($html->find('img') as $element) echo $element->src . ' ';
// Najde všechny odkazy a zobrazí jejich webovou adresu foreach($html->find('a') as $element) echo $element->href . ' ';
// Najde všechny elementy, jejichž parametr class=foo $ret = $html->find('.foo');
// Najde všechny elementy, které mají atribut "id" $ret = $html->find('*[id]');
// Najde všechny odkazy a obrázky které mají atribut "title" $ret = $html->find('a[title], img[title]');
// Najde všechny
v
s atributem class=hello $es = $html->find('table.hello td');
// Ukázka vnořených selektorů // Najde všechny elementy
v elementech
foreach($html->find('ul') as $ul) { foreach($ul->find('li') as $li) { // něco proveď… } }
24
5.3 Popis a implementace PHP skriptu PHP skript si nejprve ověří, zda byla již v aktuální den webová stránka načtena a data o mobilních telefonech aktualizována, či nikoliv. Pokud se již tak stalo, přiřadí se do proměnné pouze zpráva o tom, že databáze telefonů je aktuální. V opačném případě se pokračuje na vytvoření DOM objektu z URL e-shopu Vodafone. Následně se již v cyklech hledají požadované obsahy nebo parametry elementů, které byly určeny příslušnými selektory. Tyto informace z vybraných elementů se přiřazují do proměnných typu pole. Tato pole (kromě pole s URL na obrázky telefonů), se poté pomocí PHP funkce serialize() převedou do jednoho velkého řetězce, který je následně uložen do textového souboru. V dalším kroku se tyto soubory načítají, a jejich obsah (dlouhý řetězec serializovaných dat) se zpětně převede opět na datový typ pole pomocí funkce unserialize(). Pole s odkazy na obrázky telefonů je využito ve funkci copy(), která zkopíruje obrázky ze zadaných odkazů na webový server. V následujícím kroku se načtená pole ze souborů použijí na vytvoření řetězce psaného již v jazyce VRML, který se poté uloží jako textový soubor panels.wrl. Tento soubor tedy definuje nabídku mobilních telefonů na otáčecích panelech s již aktuálními daty. Níže uvedené ukázky PHP skriptu jsou součástí souboru project.php. Nejedná se o souvislý kód, ale pouze o části kódu, které na sebe nemusejí navazovat.
// načtení PHP knihovny include_once('simple_html_dom.php'); // Vytvoření DOM objektu $html = file_get_html ('http://eshop.vodafone.cz/hs.htm?lang=en');
25
// Najde odkazy na mobilní telefony // V elementu h2 s parametrem class= 'ttleBlue' hledá // elementy a (odkazy) foreach ($html->find('h2.ttleBlue') as $element) { foreach ($element->find('a') as $result) { // str_replace nahrazuje řetězec '&' za znak '&' $array_href[$j] = 'http://eshop.vodafone.cz/' . str_replace('&', '&', $result->href); $j++; $continue = TRUE; // pokud je nalezeno 19 odkazů (podle počtu panelů // ve scéně) ukončí se oba cykly if ($j > 18) { break 2; } } } // uvolnění paměti $html->clear(); unset($html);
// serializuje data (odkazy na mobilní telefony) // a uloží je do textového souboru $serialized_data["href"] = serialize($array_href); $file = fopen("parser/href.txt", "w+"); fwrite($file, $serialized_data["href"]); fclose($file);
// načte ze souboru řetězec, který deserializuje a vloží // ho do proměnné (pole) $file1 = fopen("parser/href.txt", "r"); $count1 = filesize("parser/href.txt"); $serialized_string1 = fread($file1, $count1); $array_href = unserialize($serialized_string1); fclose($file1);
26
// Najde "bodové informace" o mobilních telefonech, // z původně uložených odkazů na mobilní telefony do pole, // a uloží je do dvourozměrného pole for ($m = 0; $m < 19; $m++) { // Vytváří DOM objekt z každého odkazu na m. telefon $html_mobile = file_get_html($array_href[$m]); // Pokud není odkaz funkční if (!($html_mobile)) { $status = "Parser error: Phone database wasn´t updated. Last update: " . $save_date; $continue = FALSE; break; } else { $continue = FALSE; $n = 0; // Hledá elementy s parametrem id='#navlist'. // Jedná se o elementy
- nečíslovaný seznam. // V
pak vnořeným cyklem hledá elementy
, // tedy položky nečíslovaného seznamu foreach ($html_mobile->find('#navlist') as $ul) { foreach ($ul->find('li') as $li) { $array_info[$m][$n] = $li->innertext; $n++; $continue = TRUE; } } // Musí vyčistit paměť, aby nedošlo k přeplnění $html_mobile->clear(); unset($html_mobile); } }
27
KAPITOLA 5 PHP PARSOVÁNÍ
28
Kapitola 6
Popis a implementace VRML scény Celá VRML scéna je tvořena hlavním souborem vodafone_center.wrl, do kterého se načítají další wrl soubory pomocí uzlu Inline, nebo je z tohoto hlavního souboru odkazováno na externí prototypy, které jsou také uloženy jako soubory typu wrl. Hlavní soubor je rozdělen na dvě základní části pomocí transformací OUTSIDE_SCENE a INSIDE_SCENE. Tyto dvě transformace rozdělují scénu na venkovní a vnitřní část. Každá z těchto částí je nasvícena čtyřmi světly typu SpotLight. Před oběma transformacemi se ještě nacházejí deklarace externích prototypů, které se v transformacích používají.
6.1 Transformace OUTSIDE_SCENE Před transformací OUTSIDE_SCENE je deklarován pouze jeden prototyp a tím je prototyp Tree (strom) – soubor tree.wrl. Tato transformace dále obsahuje potomky – další transformace, které popisují všechny venkovní objekty: podlaha, stěny, hlavní budova, stojany před vchodem a další. Za detailnější popis stojí vchodové dveře. Ty se automaticky otevírají/zavírají a vydávají přitom zvuk. To vše díky detekci uživatele (avatara) za pomoci uzlu ProximitySensor. Tomuto senzoru se definuje velikost pole, do/z kterého když uživatel vejde, generuje tento senzor určitou událost. Ta je odeslána do skriptu SCRIPT_DOOR, který se stará o zbytek. Ukázka zmíněného skriptu následuje níže. V transformaci OUTSIDE_SCENE je dále definováno šest uzlů Tree (načtený externí prototyp) reprezentující natáčecí textury stromů (billboardy) a jejich ohraničení ve tvaru válce. Tyto uzly jsou definovány pomocí čtyř parametrů: poloha prototypu, čtyři souřadnice určující velikost billboardu, textura billboardu a samotná poloha billboardu vůči celému prototypu. Posledními objekty v této transformaci jsou samotné billboardy s texturami lidí. Je jich zde osm, přičemž při jejich definování je využívána
29
konstrukce DEF … USE, proto se nejedná o 8x vloženou stejnou definici pouze s odlišnými parametry.
Následuje ukázka ECMA skriptu SCRIPT_DOOR, která se nachází v hlavním souboru vodafone_center.wrl.
# Skript na otevírání/zavírání dveří DEF SCRIPT_DOOR Script { field SFBool open FALSE #Příchozí událost od proximity senzoru eventIn SFTime active #Příchozí událost od time senzoru eventIn SFFloat time_changed #Odchozí událost – výstup skriptu eventOut SFFloat new_time url
["javascript: function active(value,time) { //Zneguje pouze proměnnou při vstupu avatara //do oblasti proximity senzoru //indikuje zda jsou dveře otevřené, nebo ne open = !open; } function time_changed(value,time) { //Pokud jsou dveře otevřené, pošle vstupní //hodnotu rovnou na výstup. //Pokud jsou ale dveře zavřené, dá na //výstup hodnotu v podstatě opačnou, //proměnná value může být číslo (0-1) if (open) new_time=value; else new_time=1-value; } ",]
}
30
6.2 Transformace INSIDE_SCENE Před samotnou transformací jsou deklarovány tři externí prototypy, které jsou uvnitř následně využity:
Desk (zákaznický pult), definován v souboru vodafone_desk.wrl,
Seat (sedačka), definován v souboru seat.wrl,
Lamp (světla, žárovky nad pultem), definován v souboru lamp.wrl.
Tato transformace samozřejmě obsahuje také „jednoduché“ objekty jako transformace OUTSIDE_SCENE, které není nutné popisovat. Jedná se opět pouze o vygenerované objekty programem Blender, kterým je přiřazen materiál a textury. Jedním z důležitých prvků v transformaci INSIDE_SCENE je načtení souboru panels.wrl pomocí příkazu Inline. Soubor je generován pomocí PHP skriptu a obsahuje aktuální data z e-shopu Vodafone. Neboli definici devatenácti panelů s nabídkou mobilních telefonů, které se nacházejí na stěně obchodu, za zákaznickými pulty. Všechny panely jsou definovány pomocí externího prototypu Panel, který je načten ze souboru panel.wrl. Zbývající tři prototypy (Seat, Desk, Lamp) jsou všechny ve scéně použity třikrát. U prototypu Lamp lze pomocí parametrů určit pouze umístění ve scéně a měřítko (velikost). Prototyp Seat má také pouze dva nastavitelné parametry a to je také umístění ve scéně a vrchní textura sedačky. Prototyp Desk již nabízí více parametrů – umístění, velikost, natočení, textura zákaznické obrazovky, textura obrazovky prodejce a dvě textury časopisů. Prostřední zákaznický pult, za kterým stojí prodavačka, má namísto zákaznické obrazovky tři tlačítka. Na každém tlačítku je textura s otázkou, na kterou po „kliknutí“ dostane uživatel zvukovou odpověď. Úplně posledním prvkem v transformaci INSIDE_SCENE je načtení souboru girl.wrl uzlem Inline. Jedná se o soubor s transformací, jež definuje postavu prodavačky. Tato transformace mimo jiné obsahuje i ProximitySensor (detekce polohy uživatele), který po příchodu uživatele před prostřední pult aktivuje zvuk s přivítáním zákazníka v obchodě.
31
Prototyp Panel Následuje ukázka parametrů prototypu Panel ze souboru panel.wrl:
PROTO Panel [ field SFVec3f PANEL_TRANS -14.5 0 0 #poloha field SFRotation PANEL_ROTATION 0 0 1 0 #natočení field MFString PHONE_TEXTURE ["1.jpg"] #obrázek tel. field MFString TEXT_NAME ["Phone"] #Název tel. field MFString TEXT_PRICES ["Prices"] #Dvě ceny tel. field MFString LINK_URL [""] #Odkaz na stránku s tel. field MFString PHONE_DETAILS [""] #Bodové info o tel. field SFBool ADD_MONTHLY FALSE #Nabídka měsíce field SFBool ADD_NEW FALSE #Novinka v e-shopu ]
Poslední dva parametry ADD_MONTHLY a ADD_NEW jsou oba typu SFBool a mohou tedy nabývat jedné z logické hodnoty TRUE/FALSE. Jsou zde proto, aby označily panely, na kterých je telefon měsíce nebo nový telefon v e-shopu. Tyto panely se poznají malou plochou (geometrie Box) s nápisem „Monthly special“, respektive „New on eShop“, která je dodána nad obrázek telefonu. Tímto „přidáním“ se rozumí vložení potomka do uzlu základní transformace prototypu Panel. Toto vše obstarává ECMAscript s názvem SCRIPT_ADD, který se také nachází v souboru panel.wrl. Následuje ukázka tohoto skriptu.
32
DEF SCRIPT_ADD Script { eventOut MFNode objects #Vystup skriptu – VRML uzel field SFBool add_mont IS ADD_MONTHLY field SFBool add_new IS ADD_NEW url
["javascript: function initialize() { if (add_mont) { obj1 = Browser.createVrmlFromString( //Zde se nachází popis geometrie a //vzhledu přidané tabulky v jazyce VRML //textura s nápisem Monthly special ); objects = obj1; } if (add_new) { obj2 = Browser.createVrmlFromString( //Zde se nachází popis geometrie a //vzhledu přidané tabulky v jazyce VRML //textura s nápisem New on eShop ); objects = obj2; } add_mont = false; add_new = false; } ",]
}
33
6.3 Průchod virtuální scénou Pro naprosto korektní průchod celou virtuální scénou je zapotřebí mít nainstalovaný jeden ze dvou webových prohlížečů – Internet Explorer, nebo Google Chrome. Oba prohlížeče totiž jako jediní dovedou přehrát zvuky, které virtuální scéna obsahuje. Ostatní testované prohlížeče (Opera, Mozilla Firefox, Safari) zvuky nepřehrávají, ale jinak na nich lze samozřejmě celou virtuální scénu spustit a procházet ji. Dalším potřebným softwarem pro spuštění scény je některý z prohlížečů wrl soborů. Jsou to například Cortona 3D viewer, nebo BS Contact. Takový software se přidá do webového prohlížeče jako plugin a lze tak již virtuální scénu spustit. Po spuštění scény je uživatel situován na místo prvního viewpointu, tedy před vchod virtuálního obchodu (Ilustrace 8).
Ilustrace 8: Pohled venkovního viewpointu na vchod obchodu
34
Po přiblížení ke dveřím se znakem společnosti Vodafone se tyto dveře za zvukového doprovodu automaticky otevřou. Po průchodu dveřmi se uživateli naskytne pohled téměř totožný s druhým viewpointem (Ilustrace 9), tedy pohled na zákaznické pulty a nabídku mobilních telefonů.
Ilustrace 9: Pohled druhého viewpointu na nabídku telefonů a zákaznické pulty
Pokud uživatel přijde k prostřednímu zákaznickému pultu, zahájí se virtuální rozhovor s prodavačkou přehráním uvítacího zvukového klipu. Dále může uživatel pokračovat ve virtuálním rozhovoru pomocí tří tlačítek s otázkami, na které mu bude odpovězeno také formou zvukového klipu (Ilustrace 10). Poslední, a zároveň nejdůležitější možnost interakce, je procházení nabídky mobilních telefonů. Po přistoupení k některému z panelů se uživatel doví název a dva druhy cen mobilního telefonu. Pokud již tyto informace uživateli dostačují pro nákup telefonu, má možnost kliknout na tlačítko BUY. Po kliknutí bude uživatel přesměrován na webovou stránku oficiálního e-shopu společnosti Vodafone, kde již bude moci vybraný telefon zakoupit. Pokud se ale uživatel bude chtít dozvědět více informací o mobilním telefonu, může kliknout na tlačítko INFO, po čemž se panel otočí (za zvukového doprovodu)
35
o 180°. Na této straně panelu uživatel nalezne základní vlastnosti telefonu v několika bodech (podle toho, zda tyto údaje obsahují stránky Vodafone – u některých levných telefonů tyto informace ani neuvádějí). Pokud ani tyto informace nebudou pro uživatele dostačující, může kliknout na tlačítko MORE INFORMATION a bude tak opět přesměrován na oficiální stránku s vybraným telefonem, kde se již nacházejí detailnější informace. Pro otočení panelu zpět do původní polohy musí uživatel „kliknout“ na tlačítko BACK.
Ilustrace 10: Volba otázek pro interaktivní rozhovor
Ilustrace 11: Ukázka přední a zadní strany panelu
36
Kapitola 7
Redukce scény pro mobilní zařízení Možnost navštívit virtuální scénu pomocí mobilního zařízení, přesněji pomocí PDA, byl jeden z cílů této práce. První rozhodnutí se týkalo výběru vhodného prohlížeče wrl souborů. Volba probíhala opět mezi již zmíněnými prohlížeči, tedy Pocket Cortona a BS Contact mobile. Podle názvů je ale patrné, že se jedná o verze prohlížečů určené pro mobilní zařízení. Jednoznačně byl zvolen prohlížeč Pocket Cortona, a to hned ze dvou důvodů. Tento prohlížeč byl využíván již při tvorbě plnohodnotné verze virtuální scény a nebyl tedy důvod to v této situaci měnit. BS Contact mobile je navíc k dispozici pouze v testovací verzi, ve které se ani nepodařilo otevřít požadovaný wrl soubor. Software Pocket Cortona vyžaduje pro svůj běh na mobilním zařízení systém Microsoft Windows Mobile 2003 nebo novější. Testování virtuální scény pro PDA probíhalo na dvou zařízeních. Prvním bylo zařízení HTC Touch Pro a druhým byl emulátor systému Windows Mobile běžící na operačním systému Microsoft Windows 7. Na obou těchto „zařízeních“ byl nainstalován systém Microsoft Windows Mobile 6.5. Samotná redukce virtuální scény pro PDA spočívala především ve dvou bodech. Prvním bylo zjednodušení geometrie objektů ve scéně a druhým bodem byla redukce použitých textur. Během zjednodušování geometrie bylo v jednom případě nezbytné zcela změnit tvar redukovaného objektu (vchodové dveře). V některých dalších případech si redukce vyžádala dokonce kompletní vypuštění objektů ze scény (postava prodavačky, text na panelech). Naopak některé objekty jednoduchých tvarů (zdi kolem budovy, stojany před vchodem) nedoznaly ve verzi pro PDA žádných změn. Redukce textur spočívala ve většině případů v zmenšení rozměrů obrázků a převodu do grafického formátu GIF.
37
7.1 Redukce geometrie Veškerá redukce geometre probíhala ve 3D modeláři Blender. Program nabízí dvě možnosti jak redukovat složité tvary. První možnost byla již využita pro zjednodušení geometrie postavy prodavačky, při níž se využil nástroj, respektive modifikátor zvaný Decimate. V tomto případě bylo využito druhé možnosti, a tou je použití skriptu zvaného Poly Reducer. Tento skript je aplikovatelný pouze v editačním módu Blenderu. ale ve svém principu je téměř totožný s modifikátorem Decimate. Přesto se ale najdou odlišnosti mezi těmito dvěma nástroji. Nástroj Poly Reducer je možno specifikovat více parametry (Ilustrace 12), dokáže udržet původní materiál ploch, umí zachovat UV souřadnice textur a podobně. Nejdůležitější výhodou oproti nástroji Decimate je ale schopnost zachovat věrnější tvar redukovaného objektu i při opravdu velkých redukcích.
Výše zmíněným způsobem byly redukovány všechny následující objekty, jež jsou uvedeny v tabulce (Tabulka 1). Tabulka porovnává počty ploch (Faces), ze kterých je tvořena geometrie objektů původní scény a scény redukované pro mobilní zařízení.
Při psaní předchozího textu bylo čerpáno ze zdroje [11].
38
Hlavní budova Ohraničení kolem stromů + kruhová plocha pod nimi Vnitřní plášť (stěna) obchodu Podlaha obchodu Strop obchodu Sedačka Zákaznický pult
Původní scéna Počet ploch 222 270 205 35
Redukovaná scéna Počet ploch 141 223 85 14
35 214 483
21 108 371
Tabulka1: Porovnání počtu ploch geometrie objektů
V průběhu redukce docházelo i k jistým nechtěným důsledkům. Díky zjednodušování geometrie se totiž některé objekty, respektive některé z jejich ploch, začaly protínat. V opačných případech se některé plochy protínat přestaly, a to na místech kde tomu tak původně bylo. Dělo se tak především u objektů, které byly v těsné blízkosti: hlavní budova – vnitřní plášť budovy, vnitřní plášť budovy – strop a podlaha. Tento důsledek byl následně opraven pomocí transformace jednotlivých ploch nebo pouze jejich vrcholů. Jak již bylo zmíněno výše, vchodové dveře nebyly upraveny pomocí skriptu Poly Reducer. Mělo to velice prostý důvod. Po zredukování geometrie kulatých dveří došlo totiž k tomu, že do sebe obě půlky dveří absolutně nepasovaly. Transformace obou polovin do takových tvarů které by do sebe zapadaly by byla nejen časově náročná, ale asi by i postrádala smysl. Nedokázal by se totiž zachovat původní záměr – aby dveře zůstaly alespoň přibližně ve tvaru symbolu jin-jang a přitom nebyla jejich geometrie příliš složitá. Z těchto důvodů došlo k vytvoření dveří ve tvaru kvádru. Samozřejmě bylo nutné upravit tvar vchodu jak u budovy, tak u jejího vnitřního pláště. Další rozhodnutí ohledně redukce geometrie se týkalo postavy prodavačky. Znovu zde byl zvažován poměr redukce proti zachování tvaru tohoto objektu. Došlo ale na názoru, že postava prodavačky nemusí být nutně v mobilní verzi zachována. Ve výsledku byl tedy ze scény objekt postavy odstraněn.
39
7.2 Redukce textur Redukce textur spočívala u většiny z nich v následujících dvou krocích:
zmenšení rozměrů (téměř u všech textur až na polovinu původní velikosti),
převedení do formátu GIF s velmi nízkým počtem barev.
Oba předchozí kroky byly aplikovány v jediném softwaru. Byl jím pokročilý grafický editor Adobe Photoshop CS4. Nabízí totiž výbornou funkci, kterou lze pohodlně ukládat obrázky do formátů určených především pro zobrazení na internetu. Jmenuje se „Uložit pro web a zařízení“. Pomocí této funkce lze měnit rozměry obrázku, určit požadovaný formát, jeho kompresi (v případě JPEG), počet barev (v případě GIF), kontrolovat výslednou velikost obrázku po optimalizaci atd. Ukázka dialogového okna s možným nastavením je na následujícím obrázku (Ilustrace 13).
Ilustrace 13: Dialogové okno funkce „Uložit pro web a zařízení“ programu Adobe Photoshop
40
7.3 Komplikace během redukce scény Po dokončení redukce geometrie zbývalo „mobilní“ verzi otestovat. V klasické verzi Cortony nebyl sebemenší problém se spuštěním virtuální scény. Naopak se redukce projevila pohotovým načtením celé scény a celkovou rychlostí při procházení a interakci. Problém ovšem nastal při spouštění virtuálního světa ve verzi Cortony pro mobilní zařízení. Jak na zařízení HTC Touch pro, tak v emulátoru došlo při načítání světa k velké časové prodlevě. Ani po delším čekání (cca deset minut) se virtuální svět nepodařilo spustit. Výlučnou metodou (postupným odebíráním objektů ze scény) bylo zjištěno, že za onu časovou prodlevu může prototyp otáčejícího panelu. Přesněji šlo o problém při zobrazení dlouhých textů (název telefonu, dvě ceny, informace o telefonu), které byly přiřazovány do parametrů VRML uzlu Panel. Tyto texty jsou v prohlížeči rozloženy na mnoho trojúhelníků, což obrovským způsobem zpomaluje jejich zobrazení. Řešením mohla být pouze jedna věc. Nahrazení textů obrazovou texturou. Po této úpravě již nebyl s načtením scény na mobilním zařízení problém. O další komplikaci se opět postaral prototyp Panel. Z nějakého důvodu nefungovalo na „mobilní“ verzi otáčení panelu o 180°. Panel se vždy otočil o neznámý úhel a vrátil se do původní polohy, nebo zůstal vychýlený v nějakém nesmyslném úhlu. Zmíněný problém se ale nepodařilo vyřešit. Možnost otáčení panelu musela být tedy z redukované scény odebrána.
7.4 Změny v redukované scéně V následujících bodech je uvedeno, kterých změn doznala redukovaná scéna oproti verzi původní:
zjednodušení geometrie objektů,
redukce textur,
komprese delších zvukových klipů (přivítání, odpovědi na otázky),
absence modelu prodavačky,
41
absence otáčení panelů s telefony – nemožnost zobrazení zadní strany panelu s bodovými informacemi o mobilním telefonu,
nemožnost spustit PHP skript pro aktualizaci databáze mobilních telefonů – nabídka mobilních telefonů je tedy pouze pevně zadána,
nemožnost odkázat uživatele na webové stránky Vodafone.
Ilustrace 14: Redukovaná verze virtuální scény spuštěná v emulátoru
42
Kapitola 8
Testování Testování virtuální scény probíhalo formou měření snímkové frekvence, jejíž jednotkou je fps, neboli snímek za sekundu. Bylo provedeno jak na plnohodnotné verzi virtuálního světa, tak na té redukované.
8.1 Měření v plnohodnotné scéně Projekt byl testován na notebooku DELL Studio 1555 s následující konfigurací:
procesor:
Intel Core 2 Duo P8700 – 2.53GHz
paměť (RAM):
4GB
grafická karta:
Ati Mobility Radeon HD 4570; vlastní paměť 512MB
rozlišení obrazovky:
1920 x 1080 px
operační systém:
Windows 7 64bit
webový prohlížeč:
Opera 11.11
VRML prohlížeč:
Cortona 3D Viewer 6.0; render DirectX; maximalizované okno ve webovém prohlížeči
Měření bylo uskutečněno odděleně v exteriéru i interiéru. V obou případech se snímková frekvence měřila dvěma způsoby: rychlým přepínáním mezi dvěma viewpointy umístěnými blízko sebe, volným procházením.
43
Mezi dvěma viewpointy fps 41 25
Exteriér Interiér
Volné procházení fps 39 27
Tabulka 2: Výsledky testování plnohodnotné verze virtuální scény
8.2 Měření v redukované scéně Testování redukované scény proběhlo na mobilním zařízení (PDA) HTC Touch Pro s následující konfigurací:
procesor:
QUALCOMM(R) 7201A – 528MHz
paměť (RAM):
288MB
rozlišení displeje:
640 x 480 px
počet zobrazitelných barev:
65 536
operační systém:
Windows mobile 6.5
VRML prohlížeč:
Pocket Cortona
Měření zde bylo uskutečněno také odděleně (exteriér, interiér) a opět dvěma způsoby (přepínání mezi viewpointy, volné procházení), jako tomu bylo u předchozího testování.
Exteriér Interiér
Mezi dvěma viewpointy fps 1 1,4
Volné procházení fps 3,2 2,4
Tabulka 3: Výsledky testování redukované verze virtuální scény
44
Kapitola 9
Závěr Během práce na projektu se podařilo vytvořit komplexní virtuální obchod pro nabídku a prodej zboží. Nabídka mobilních telefonů byla vytvořena tak, aby byla pro uživatele co nejpřehlednější a dala se pohodlně procházet. Přínosem je ovšem přímé spojení s oficiálním internetovým obchodem, prostřednictvím kterého je možné udržovat nabídku mobilních telefonů stále aktuální. Dalším výsledkem této práce je zjednodušená verze virtuálního obchodu pro mobilní zařízení. Tato verze sice musela oproti té původní akceptovat několik omezení, ale přesto lze na mobilním zařízení virtuální obchod navštívit. Kvůli nedostatečnému výkonu mobilního zařízení není ale pohyb ani po redukované virtuální scéně příliš plynulý, což je také patrné z výsledků testování. Do budoucna by se dalo určitě přemýšlet o využití této práce pro základy prodeje na Internetu pomocí virtuální reality. Zajisté by takovýto koncept uživatele posunul daleko blíže ke každodenní realitě. Internetové nákupy by se tak mohly stát ještě pohodlnějšími, než jsou dnes. Na tento projekt by se zajisté dalo s úspěchem navázat a přidat tak další možnosti prodeje zboží a služeb prostřednictvím virtuálního světa. V případě obchodu v oblasti telekomunikací by šlo práci rozšířit například o nabídku různých tarifů ve spojení s mobilními telefony. Dále by mohl být tento projekt rozšířen o nějakou formu webové poradny a zodpovídat tak například nejčastěji kladené otázky nebo pomáhat při nastavení mobilních telefonů či jiných zařízení. Další výsledek tohoto projektu je vystavení práce mezi ostatní výzkumné projekty na webových stránkách výzkumného a vývojového centra: http://internet3d.rdc.cz/vodafonecenter/
45
46
KAPITOLA 9 ZÁVĚR
Literatura [1] Jiří Žára, VRML 97 Laskavý průvodce virtuálními světy, Computer Press, Praha, první vydání, 1999 [2] VRML: jazyk pro popis virtuální reality - Root.cz, http://www.root.cz/clanky/vrml-jazyk-pro-popis-virtualni-reality/, stav z 10.4.2011 [3] VRML – Wikipedie, http://cs.wikipedia.org/wiki/VRML, stav z 10.4.2011 [4] Výukové pásmo VRML, http://dcgi.felk.cvut.cz/home/zara/vyuka/vrml/tutorial/pasmo/vrml_uvod_pasmo_1.html, stav z 10.4.2011 [5] PHP – Wikipedie, http://cs.wikipedia.org/wiki/PHP, stav z 20.4.2011 [6] Všechno, co jste chtěli vědět o PHP | Interval.cz, http://interval.cz/clanky/vsechno-co-jste-chteli-vedet-o-php/, stav z 20.4.2011 [7] HyperText Markup Language – Wikipedie, http://cs.wikipedia.org/wiki/HyperText_Markup_Language, stav z 22.4.2011 [8] PHP (57) - XML -Linux Software, http://www.linuxsoft.cz/article.php?id_article=459, stav z 29.4.2011 [9] Michal Maňák, jQuery – selektory, http://www.manakmichal.cz/blog/clanek/jquery-selektory/, stav z 29.4.2011 [10] PHP Simple HTML DOM Parser, http://simplehtmldom.sourceforge.net/, stav z 22.11.2010 [11] BlenderWiki, http://wiki.blender.org/index.php/Doc:Manual/Modeling/Scripts, stav z 10.5.2011
47
48
LITERATURA
48
Příloha A
Seznam použitých zkratek VRML
Virtual Reality Modeling Language
HTML
HyperText Markup Language
XHTML
eXtensible HyperText Markup Language
PHP
Personal Home Page / Hypertext Preprocessor
PDA
Personal Digital Assistant
DOM
Document Object Model
URL
Uniform Resource Locator
FPS
Frames Per Second
49
50
PŘÍLOHA A SEZNAM POUŽITÝCH ZKRATEK
Příloha B
Obsah přiloženého CD V kořenu CD se nachází dvě složky, tato práce ve formátu pdf a textový soubor readme.txt s návodem jak správně spustit projekt. Ve složce „instalace_cortona“ se nachází instalátory VRML prohlížeče Cortona (verze pro mobilní zařízení i verze pro PC). Ve složce projekt jsou umístěny soubory samotného projektu, jež se spustí souborem project.php.
