Virtuální zákaznické centrum

Transkript

1 České vysoké učení technické v Praze Fakulta elektrotechnická Bakalářská práce Virtuální zákaznické centrum Radek Sedláček Vedoucí práce: Mgr. Jiří Danihelka Studijní program: Softwarové technologie a management Obor: Web a multimédia 2011

2 Poděkování Na tomto místě bych rád poděkoval vedoucímu bakalářské práce Mgr. Jiřímu Danihelkovi, za užitečné informace a pomoc při vypracování bakalářské práce.

3 Prohlášení Prohlašuji, že jsem svou bakalářskou práci napsal samostatně s použitím citovaných pramenů. Souhlasím se zapůjčováním práce a jejím zveřejňováním. V Praze dne

4 Abstrakt Práce se zabývá modelováním virtuálního zákaznického centra mobilního operátora, v tomto případě Vodafonu. První část práce obsahuje seznámení s mobilním operátorem Vodafone. Druhou částí práce je popis modelování použitých objektů a interakcí v projektu. Na závěr jsou popsány vybrané alternativy k VRML. Cílem práce je především vytvořit interaktivní model, který by interaktivní cestou uživatelům nabídl virtuální prostředí s ukázkou produktů mobilního operátora. Abstract This bachelor s thesis deals with the modeling of virtual customer care center of mobile operator, in this case Vodafone. The first part includes familiarization with mobile operator Vodafone. The second part is a description of the modeling of objects and interactions in the project. Finally describe the selected alternative to VRML. The aim is primarily to create an interactive model that offeres products to users through an interactive virtual environment.

5 Obsah 1. Úvod O Vodafonu Historie Virtuální zákaznické centrum Vymodelované objekty Stůl Židle Konferenční stolek Sedačka Postava Interakce Animace dveří Interakce postavy Informační tabule Plakáty s mobily Závěr Přínos práce Budoucí využití práce Alternativy k VRML X3D WebGL SilverLight Posouzení splnění zadání práce Snímková rychlost modelu Obsah přiloženého CD Literatura

6 1. Úvod Tato práce slouží jako ukázka možného 3D obchodování na internetu. Zákazníci mají možnost se, za pomoci webového prohlížeče, procházet po virtuálním světě, který jim interaktivně nabídne různé produkty a služby mobilního operátora Vodafone. Svět byl modelován v programu 3D studio max 9 a poté exportován do VRML (Virtual Reality Modeling Language), kde byl následně upravován a doplněn o skripty a interakce. Bohužel VRML je v jistých ohledech dost neohebný jazyk, například texturování jednotlivých polygonů objektu různými texturami je natolik komplikované, že je téměř nemožné psát to ručně, takové případy jsem řešil předsunutím a otexturováním nového boxu před daný polygon. Obr. 1.1 Pohled na budovu 2

7 Samotná budova obsahuje přízemní podlaží složené ze vstupní chodby, místnosti s recepcí a turnikety, malou místností pro prezentace, hlavní halou s fontánkami, vystavenými plakáty a informační tabulí pro zákazníky. Obr. 1.2 Malá prezentační místnost Obr. 1.3 Recepce 3

8 2. O Vodafonu Vodafone (zkratka z voice-data-phone) je druhým největším mobilním operátorem na světě (největším je China Mobile). Působí ve více než 30 zemích světa. Na obrázku níže je znázorněn rozsah působiště Vodafonu. Obr Země, kde působí Vodafone / Země, kde má Vodafone partnery 2.1 Historie Vznik Vodafonu se datuje už v roce 1983, kdy získal britskou mobilní licenci. V roce 1985 se v síti Vodafone uskutečnil první hovor. Od té chvíle se Vodafone stále rozšiřuje, v roce 1994, jako první operátor, spustil ve Velké Británii krátké textové zprávy SMS (Short Message Service). V roce 2000 se stal nejrychleji se rozvíjejícím operátorem ve střední a východní Evropě. Následující informace se týkají Vodafonu v ČR. Rychlostí výstavby své sítě vytvořil Vodafone nový rekord v historii GSM (síť na frekvencích 900 a 1800 Mhz, na kterou získal licenci v roce 1999): během 9 měsíců pokryl 98% obyvatelstva. V roce 2001 otevírá s Ericssonem a Českým vysokým učením technickým v Praze Výzkumné a vývojové centrum. Na český trh vstoupil v roce 2006 získáním tuzemského operátora Oskar Mobil a.s., od počátku se snaží navázat na image "lidového operátora", kterou u nás Oskar zavedl. V roce 2009 má Vodafone přes 3 miliony zákazníků. 4

9 2.2 Virtuální zákaznické centrum Předlouhou pro virtuální zákaznické centrum se z části stala budova Vodafonu Vinohradská 167, Praha 10. Proto může virtuální centrum nabídnout zákazníkům pro ně již povědomé prostředí. Na následujících obrázcích je vidět porovnání převzatých částí zákaznického centra se scénou. Mezi fotografiemi a vymodelováním scény je časový rozdíl, fotografie byly pořízeny až později, výzdoba a zařízení bylo z části pozměněno. Obr Turnikety s výtahy Obr Stolky Obr Pohled do chodby 5

10 Obr Vstupní chodba Obr Sedačky Obr Stolek recepce 6

11 3. Vymodelované objekty V této části bude popsáno modelování jednotlivých objektů použitých v práci. Jak jsem zmínil již v úvodu, použil jsem pro práci nejprve 3D studio max. S ním jsem pracoval poprvé, takže začátky během seznamování se s programem nebyly o úplně ideální. Jako první věc jsem modeloval obvodové zdi interiéru, abych získal určitou představu o rozměrech prostorů. Nejdříve jsem si nakreslil malý plánek, který jsem okótoval, abych mohl spočítat přesné souřadnice jednotlivých částí. Retrospektivně bych tento krok považoval asi za nadbytečný, protože 3D max obsahuje funkci align, kde si lze nastavit zarovnání podle vybraných os. Obr. 3.1 První plánek Zdi a podlahy jsou tvořeny jednoduchými boxy, výšku jsem si zvolil 40, ostatní rozměry se od toho odvíjely. Obr. 3.2 Tvorba boxu 7

12 Nastavení pro exportování do VRML je zobrazeno na obr. 3.3 Obr. 3.3 Nastavení exportu Ve VRML samotném je třeba nastavit avatara (rychlost pohybu, velikost) a jeho počáteční pozici. To zajišťuje kód níže. NavigationInfo { type "WALK" speed 10 avatarsize [ 1, 13.5, 1 ] headlight TRUE Viewpoint { position orientation description "default" 8

13 Dále si nastavíme pozadí scény, to je děláno z jednoho obrázku, který byl rozdělen na poloviny a každá polovina byla ještě ozrcadlena, takže nám vzniknou ve výsledku 4 části. Background { skycolor groundcolor backurl "bg/newyork_leva.jpg" fronturl "bg/newyork_prava2.jpg" lefturl "bg/newyork_leva2.jpg" righturl "bg/newyork_prava.jpg" Ven přidáme ještě pár stromů, ty jsou řešeny jako billboard. Billboard je skupinový uzel, který otáčí svou lokální soustavou souřadnic okolo osy rotace (axisofrotation) tak, aby osa z mířila směrem k pozorovateli. children Billboard { axisofrotation children [ Shape { geometry Box { size appearance Appearance { texture ImageTexture { url "trees/trees54.png" material Material { transparency 1 ] 9

14 3.1 Stůl Jako další bylo třeba vymodelovat nábytek, třeba takový obyčejný stůl použitý v prezentační místnosti. U těchto objektů není třeba řešit přesné rozměry, konečná velikost se určí pomocí scale těsně před exportováním do VRML, které popíši později. Stůl je tvořen vrchní deskou a 4 nohama. Vrchní deska je tvořena z nízkého válce, který má půlku vertexů posunutou. Aby šlo manipulovat s jednotlivými vertexy, je třeba objekt nejprve překonvertovat na editovatelný polygon. Na obrázcích je znázorněn stručný postup. Obr Konverze objektu Obr Posun vybraných vertexů Nakonec stačí přidat stolu texturu a nohy, nohy jsou jen 4 válce rozmístěné pod deskou. Texturu přidáme tak, že si označíme desku a pomocí zkratky M vyvoláme Material Editor. Klikneme na čtvereček znázorněný šipkou na obr a zvolíme 10

15 bitmapu. Obr Material Editor Po zvolení bitmapy jí můžeme nastavit scale nebo posun. To lze nastavovat také později ve VRML ručně, vypadá to následovně. texture ImageTexture { url "./maps/drevo.jpg" texturetransform TextureTransform { center scale

16 3.2 Židle Dále je třeba vymodelovat židli. Tato židle se skládá ze 2 boxu (sedák a opěradlo) a 2 válců, které jsou postupně extrudovány do následujícího tvaru. Obr Židle Následující obrázky znázorňují použití funkce extrude. Před použitím funkce je třeba objekt překonvertovat na editable poly. Obr Funkce Extrude 12

17 Prostým vysouváním vrchního polygonu, jeho natočením a opětovném vysunutí lze dosáhnout konečného stavu, který je vidět na obrázku Konferenční stolek Malý konferenční stolek je složen ze 2 skleněných desek a 4 noh. Deska je tvořena boxem, který měl boční polygon vyextrudován a následně zmenšen pomocí funkce Uniform Scale. Obr Extrudování bočního polygonu desky Poté stačí desku zkopírovat pomocí zkratky ctrl + V, posunout níž a následně zmenšit pomocí scale. Po přidání nohou je stolek hotov. Materiály skleněných desek se nastavují až ve VRML. Obr Kopírování desky 13

18 Obr Finální podoba stolku v 3Ds maxu Nastavení materiálu na sklo: material DEF sklo Material { ambientintensity 0 shininess 0.1 diffusecolor specularcolor emissivecolor transparency Sedačka Sedačka se modelovala v zásadě obdobně jako předešlé objekty. Je složena z několikasegmentového boxu (4x4), který má vyextrudovány obvodové polygony, přibližně do následující podoby. Obr Prvotní fáze sedačky 14

19 Pro zjemnění objektu jsem použil funkci MeshSmooth, která se nachází v Modifier Listu. Polštář je poté modelován prakticky stejně. Obr Finální fáze sedačky 3.5 Postava Před samotným modelováním postavy jsem si sehnal obrázky lidské postavy zepředu a zboku a ty jsem nastavil jako texturu dvěma boxům podle obrázku níže. Ty jsem freeznul, abych je nemohl nechtěně označit při samotném modelování. Obr Předloha postavy Samotný základ modelování je jednoduchý. Přepneme se na boční pohled a začneme malým boxem jako podpatek a ten postupně po kouskách extrudujeme a následně posouváme vertexy tak, aby kopírovaly tvar obrázku postavy. 15

20 Obr Modelování boty postavy Tímto způsobem lze vymodelovat celé tělo. Pro mě nastal problém při modelování hlavy. Ať jsem se snažil, jak jsem se snažil, pořád mi ve výsledku vycházela jakási brambora. Celé modelování postavy vyžaduje trpělivost a pohrávání si s vertexy. Nakonec se z koule podařilo vytvarovat hlavu. Obr Hlava postavy I když v 3D maxu vypadá postava vyhlazeně, tak po vyexportování do VRML byla hrubá a hranatá. To vyřešil příkaz creaseangle (zadává se v radiánech), který zaobluje hrany. Já jsem použil creaseangle

21 4. Interakce Nyní přišly na řadu samotné interakce. Ve své práci jsem použil několik typů interakcí pomocí touch senzoru, proximity senzoru a anchoru. Touch senzor umožňuje spouštění animace po kliknutí na daný objekt. Proximity senzor reaguje na vstup/výstup avatara z vymezené oblasti. Anchor definuje objekty jako odkaz, po kliknutí na objekt se odkáže na danou url, tou může být jiná wrl scéna nebo odkaz na webové stránky. 4.1 Animace dveří První animací, kterou bylo potřeba vytvořit, bylo otevírání dveří, aby se dalo po scéně volně pohybovat. Spouštění animace dveří je řešeno pomocí proximity senzoru. DEF door_sensor_vchod ProximitySensor{ center size enabled TRUE Ten spouští animaci otevírání po vstupu avatara do oblasti vymezené atributem size se středem v center. Po opuštění oblasti se spustí animace zavírání dveří. Dále je třeba nastavit časovač animace a samotnou animaci, níže je ukázka kódu pro animaci jedné části dveří. DEF timer_open TimeSensor { cycleinterval 4 loop FALSE DEF timer_close TimeSensor { cycleinterval 3 loop FALSE DEF vchod_open_1 PositionInterpolator { key [0, 0.03, 0.06, 0.09, 0.12, 0.15, 0.18, 0.21, 0.24, 0.27, 0.3, 0.6, 0.63, 0.66, 0.69, 0.72, 0.75, 0.78, 0.81, 0.84, 0.87, 0.9, ] keyvalue [ , , , , 17

22 , , , , , , , ,] DEF vchod_close_1 PositionInterpolator { key [0, 0.03, 0.06, 0.09, 0.12, 0.15, 0.18, 0.21, 0.24, 0.27, 0.3, 0.6, 0.63, 0.66, 0.69, 0.72, 0.75, 0.78, 0.81, 0.84, 0.87, 0.9, ] keyvalue [ , , , , , , , , , , ,] ROUTE door_sensor_vchod.entertime TO timer_open.set_starttime ROUTE door_sensor_vchod.entertime TO vchod_dvere_open.starttime ROUTE door_sensor_vchod.exittime TO timer_close.set_starttime ROUTE door_sensor_vchod.exittime TO vchod_dvere_close.starttime ROUTE timer_open.fraction_changed TO vchod_open_1.set_fraction ROUTE timer_close.fraction_changed TO vchod_close_1.set_fraction Route je příkaz definující cestu mezi uzlem generujícím nějakou událost a uzlem, který tuto událost zpracovává (ROUTE Node.eventOut_changed TO Node.set_eventIn). 4.2 Interakce postavy Aby mohla postava mluvit bylo třeba nejprve vytvořit hlas. K tomu jsem použil program Voice Reader, který převádí text na řeč a umožňuje jej uložit do souboru typu.mp3 nebo.wav. Ve scéně se u postavy spouští pomocí proximity senzoru a je nadefinován následovně. DEF NPC_sensor_leva ProximitySensor center size enabled TRUE Sound { source DEF leva_postava AudioClip { url "leva_postava.wav" loop FALSE 18 {

23 intensity 0.8 location direction 111 minback 30 minfront 30 maxback 60 maxfront 60 ROUTE NPC_sensor_leva.enterTime TO leva_postava.starttime Dále pomocí touch senzoru, který je přiřazen hlavě postavy, se pouští skript, který zapíná a vypíná malou informační tabulku s odkazy na internetové stránky. To je řešeno pomocí skupinového uzlu Switch. Ten zobrazuje své potomky v závislosti na hodnotě whichchoice, pokud ma whichchoice hodnotu menší než 0, tak nezobrazuje žádné potomky. V praxi to vypadá následovně. DEF STAV Script { eventin SFTime click eventout SFInt32 stav_changed field SFInt32 stav -1 url "javascript: function click() { if (stav==0) stav = 1 else stav=0 stav_changed = stav; " Group { children [ DEF menu Switch { whichchoice -1 choice [ // jednotliví potomci // ] ] 19

24 ROUTE spinac.touchtime TO STAV.click ROUTE STAV.stav_changed TO menu.whichchoice 4.4 Informační tabule Tabule je umístěna ve velké hale jako obrázek loga Vodafonu, který reaguje na kliknutí. Po kliknutí se zobrazí samotná nabídka. Obr Nabídka informační tabule Nápisy jsou tvořeny uzly Text, které umožňují generovat řetězce ve vrml scéně. Ty jsou poté součástí buď uzlu Anchor a odkazují na internetové stránky nebo jsou přiřazeny touch senzoru a spouštějí script podobně jako u postavy popsané výše. geometry Text { string ["Vodafone website"] fontstyle FontStyle { size 3.5 style "BOLD" family "SANS" 20

25 Popis uzlu Anchor, parametr udává doplňující informace pro internetový prohlížeč, url je pak samotná adresa cíle. Anchor{ children[ // potomci // ] parameter [ "target=_blank" ] url " Aby se uživatel nemusel přesně trefovat myší na daný text, je pod každý text vložen box s barvou pozadí, který reaguje stejně jako text. Na každé stránce je tlačítko Close, které vrátí uživatele na stránku s hlavní nabídkou. Stránka Services má na rozdíl od ostatních navíc ještě tlačítka Next a Prev, která pomocí skriptu níže přepínají texty v rámci svého rodiče. DEF STAV_NADPIS6_NEXT Script { eventin SFTime click eventout SFInt32 stav_changed field SFInt32 stav 0 url "javascript: function click() { if (stav<2){ stav = stav+1 stav_changed = stav; " DEF STAV_NADPIS6_PREV Script { eventin SFTime click eventout SFInt32 stav_changed field SFInt32 stav 0 url "javascript: function click() { if (stav>1){ stav=stav-1 stav_changed = stav; " 21

26 4.5 Plakáty s mobily Každý plakát je složen ze dvou boxů, kvůli rozdílnosti textur. Jeden má nastavenou texturu mobilního telefonu a druhý dodatečné informace o něm. Také mají dva rozdílné touch senzory, jeden spouští animaci otáčení oběma boxy a druhý spouští animaci opačnou, která vrátí boxy do původního stavu. Pod každým plakátem je ještě tlačítko, které odkazuje na daný mobilní telefon v e-shopu. Obr Plakáty mobilních telefonů 22

27 5. Závěr Model nabízí ukázku virtuálního světa, kde lze pohodlnou a zábavnou cestou prohlížet nebo nakupovat produkty mobilního operátora. 3D obchodování jako takové má jistě velkou budoucnost, tato práce nastínila možnosti nakupování za pomoci virtuálních světů. 5.1 Přínos práce Přínos této práce lze spatřovat v umožnění prezentace jednotlivých produktů a služeb ať už mobilního operátora či jiné společnosti. Práce může posloužit k rozvoji 3D obchodování. 5.2 Budoucí využití práce V budoucnu lze model použít jako ukázku marketingového využití 3D grafiky na internetu. 5.3 Alternativy k VRML VRML není jedinou možností pro tvorbu 3D scén v rámci webových prohlížečů. Níže je popsáno pár alternativ k VRML X3D X3D (Extensible 3D) je ISO standardem pro ukládání 3D scén postaveným na XML formátu. Vychází z VRML 97, umožňuje použít syntaxi jak XML tak VRML formátu, také získává výhody dalších open-source standardů jako DOM a Xpath. Ukázka kódu jednoduchého objektu v X3D scéně může vypadat následovně. 23

28 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" " <X3D profile="interchange" version="3.2" xmlns:xsd=" xsd:nonamespaceschemalocation=" "> <Scene> <Shape> <IndexedFaceSet coordindex="0 1 2"> <Coordinate point=" "/> </IndexedFaceSet> </Shape> </Scene> </X3D> WebGL WebGL (Web-based Graphics Library) je knihovnou, která rozšiřuje možnosti JavaScriptu a umožňuje mu generovat 3D grafiku. Je postaven na OpenGL ES 2.0 (OpenGL for Embedded Systems). WebGL je poměrně nový, norma byla vydána 3.března 2011, je tedy implementován až v pozdějších verzích internetových prohlížečů Google Chrome, Mozilla Firefox 4, Safari a Opera SilverLight SilverLight je platforma vytvořená společností Microsoft, která je určena pro tvorbu Rich Internet Aplikací s podobnými vlastnostmi jako aplikace Adobe Flash. Run-time Environment je v podobě pluginu pro webový prohlížeč. První verze SilverLight byly zaměřeny na streamování videa, pozdější verze se zaměřily na podporu multimédií, grafiky a animací. Uživatelské rozhraní se typicky definuje pomocí deklarativního programovacího jazyka XAML (Extensible Application Markup Language obdoba HTML využívaná pro popis grafického rozhraní). 24

29 5.5 Posouzení splnění zadání práce Zadání práce: Vytvořte interaktivní virtuální centrum pro zákazníky mobilního operátora. Vymodelujte interiér centra (vstupní chodby, stoly, sedačky, květinovou výzdobu, apod.) a navrhněte, jaké služby (informace, nabídka tarifů) by bylo možné takto nabízet. Vytvořte virtuální postavu, se kterou návštěvník virtuálního světa může navázat interaktivní rozhovor. Umožněte navštívit virtuální svět pomocí mobilního telefonu (PDA). Splněné požadavky: Vymodelování interiéru a vybavení. Interaktivní ukázky produktů, se směrováním na konkrétní webové stránky operátora. Vytvořena virtuální postava Práci je možné pouštět na PDA 25

30 5.6 Snímková rychlost modelu PC: Hardware: Procesor: Core2Duo 3GHz RAM: 3 072MB (DDR2 RAM 800MHz) Grafická karta: ATI Radeon HD 3870 Místnost FPS - pohyb Chodba FPS klidový stav fps 89 fps 85 fps 89 fps Recepce fps 89 fps Velká hala fps 89 fps Vnějšek fps 89 fps Prezentační místnost PDA: Na otestování práce na PDA jsem použil Microsoft Windows Mobile 6 Emulator, do něj bylo potřeba nejprve doinstalovat PocketCortona, aby bylo možné spouštět.wrl soubory. Dále bylo třeba zmenšit rozlišení textur. FPS klidový stav fps FPS - pohyb fps 26

31 6. Obsah přiloženého CD Na přiloženém CD je kromě tohoto dokumentu i vlastní model zákaznického centra. Popis jednotlivých adresářů a některých souborů: / (kořenový adresář) PC Model s texturami určený pro PC PDA Model s texturami určený pro PDA Text / PC /audio obsahuje zvukové soubory /bg obsahuje pozadí scény /maps obsahuje textury /trees obsahuje textury stromů prostor_final.wrl model / PDA /audio obsahuje zvukové soubory /bg obsahuje pozadí scény /maps obsahuje textury /trees obsahuje textury stromů prostor_final.wrl model / Text BP.pdf tato bakalářská práce ve formátu PDF 27

32 7. Literatura [1] VRML tutorials [online] [cit ]. VRML Interactive Tutorial. Dostupné z WWW: < [2] Encyklopedie Wikipedia: VRML (Virtual Reality Modeling Language) ( ) [3] ŽÁRA, Jiří. VRML 97 : Laskavý průvodce virtuálními světy. Vydání první. [s.l.] : Computer Press, s. ISBN