Možnosti využití 3D na webu Srovnání současných technologií

Transkript

1 Oficiální zadání

2 České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačové grafiky a interakce Bakalářská práce Možnosti využití 3D na webu Srovnání současných technologií Josef Slabihoudek Vedoucí práce: Ing. David Sedláček Studijní program: Softwarové technologie a management Obor: Web a multimedia květen 2012

3

4 Poděkování Rád bych poděkoval panu Ing. Davidu Sedláčkovi za pomoc s výběrem technologií, použitých programů a cenné rady při vývoji. Dále bych mu rád poděkoval za ochotu akceptovat téma této práce a jeho nasměrování správným směrem.

5

6 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

7 Abstract This bachelor project describes technologies which allow to display 3D content in web browsers. There is a comparison of some technologies from different points of view. Project is focused on system and browser independency, hardware requirements, interaction possibilities and preparation complexity. Project describes also tools and technologies used for creating 3D interactive internet applications. Applied technology is used for the realization of internet presentation of the company beeing engaged in security and information technology. Abstrakt Tato bakalářská práce se zabývá technologiemi, které umožňují zobrazit 3D obsah ve webových prohlížečích. Součástí práce je porovnání vybraných technologií z různých pohledů. Zaměřuje se především na systémovou a prohlížečovou nezávislost, hardwarovou náročnost, možnosti interakce a složitost přípravy scény. V práci jsou také popsány jednotlivé nástroje a technologie pro tvorbu 3D interaktivních internetových aplikací. Vybraná technologie je použita pro realizaci internetové prezentace firmy zabývající se bezpečnostními a informačními systémy.

8

9 Obsah Kapitola 1 - Úvod Motivace Cíl práce 1 Kapitola 2 Přehled dostupných programů Adobe Flash CS Adobe Flash Builder Flash Develop Adobe Flash Player Adobe Photoshop CS Gimp VRML Pad Cortona 3D BS contact Autodesk Maya Autodesk 3ds Max Blender NetBeans 4 Kapitola 3 Přehled dostupných technologií VRML Adobe Flash Adobe Flex WebGL Unity Microsoft Silverlight 11 Kapitola 4 Porovnání vybraných technologií Systémová nezávislost Hardwarová náročnost Prohlížečová nezávislost, podpora Možnosti interakce Náročnost přípravy scény 17

10 4.6 Výběr nejvhodnější technologie pro finální prezentaci 20 Kapitola 5 Realizace 3D webové prezentace Vize projektu Vytvoření základního navigačního prvku Modelování Texturování Animování Vytvoření předběžného načítání 27 Kapitola 6 Závěr Zhodnocení cílů bakalářské práce a vlastního přínosu Doporučení ohledně dalšího pokračování práce 28 Kapitola 7 Seznam použité literatury Knižní zdroje: 29 Kapitola 8 Přílohy Obsah přiloženého CD 30

11 Seznam obrázků 3.1 Obrázek 3.1 Logo VRML Obrázek 3.2 Logo Flash Obrázek 3.3 Logo Flex Obrázek 3.4 Logo WebGL Obrázek 3.5 Logo Unity3D Obrázek 3.6 Logo SilverLight Obrázek 3.7 Škoda auto konfigurátor 12 4 Obrázek 4.1 Render dema 13 4 Obrázek 4.2 Demo VRML 14 4 Obrázek 4.3 Demo Flash 14 4 Obrázek 4.4 Demo WebGL Obrázek 4.1 Ukázka kódu VRML Obrázek 4.2 Ukázka kódu Flash Obrázek 4.3 Ukázka kódu WebGL Obrázek 5.1 Ukázka základního tvaru Papervision3D Obrázek 5.2 Ukázka karuselu s plochami Obrázek 5.3 Ukázka implementace jednotlivé položky menu 5.2 Obrázek 5.4 Ukázka volané funkce posluchačem událostí Obrázek 5.5 Polygonální modelování Obrázek 5.6 NURBS modelování 26

12 5.5 Obrázek 5.7 Animace Flash Obrázek 5.8 Animace Maya 27

13 Seznam tabulek 5.1 Tabulka 5.1 Přehled verzí Adobe Photoshop Tabulka 3.1 Přehled nepodporovaných grafických karet Tabulka 4.1 Sestava Tabulka 4.2 Sestava Tabulka 4.3 Sestava Tabulka 4.4 Sestava Tabulka 4.5 Zhodnocení 15

14 Kapitola 1 Úvod Tématem mé bakalářské práce je porovnání technologií pro 3D prezentaci na internetu. V dokumentu jsou popsány nejen dostupné technologie, ale také možné nástroje pro tvorbu všech částí aplikace. Po porovnání vybraných technologií jsem zvolil jednu, ve které je provedena webová prezentace firmy zabývající se bezpečnostními a informačními systémy. Výsledná aplikace je otestována na různých platformách a systémech především s ohledem na komerční využití aplikace, klade tedy důraz na přehlednost a přívětivost užití především pro potencionálního zákazníka. 1.1 Motivace Webová 3D prezentace je jistě zajímavý způsob, jak zaujmout návštěvníka internetových stránek. V dnešní době jsou běžnému uživateli internetu k dispozici miliardy stránek, avšak většina z nich se drží nejčastějších schémat rozložení. U naprosté většiny z nich můžeme najít vertikální menu v levé části obrazovky, nebo horizontální těsně pod názvem webu. Jistě, takovéto standardní rozložení a koncepce mají svou výhodu, uživatel je na ně již zvyklý, nemusí se učit nic nového. Zde přichází na řadu otázka, jestli si návštěvník zapamatuje při prohlížení dvaceti podobných stránek právě tu naši? Co můžeme udělat pro to, abychom se mu nějakým pozitivním způsobem zapsali do paměti? Jedna z možností jak návštěvníka uchvátit je právě změna, zajímavý, ale ne komplikovaný design webového prostředí, nová úroveň interaktivity, nabídnout mu informace způsobem, který ho zaujme na první pohled. Myslím, že atraktivní 3D prezentace splňuje veškeré tyto podněty. 1.2 Cíl práce Hlavním cílem této bakalářské práce je na základně stanovených hodnotících kritérií vybrat nejvhodnější technologii a vytvořit v ní prezentaci společnosti zabývající se bezpečnostními a informačními technologiemi. 1

15 Kapitola 2 Přehled dostupných programů Tato kapitola obsahuje přehled programů, které jsem použil při výběru nejvhodnější technologie pro výslednou prezentaci a její následné realizaci. Zmiňuje a popisuje také možné alternativní programy, vysvětlení, proč je jeden vhodnější než druhý. 2.1 Adobe Flash CS5 Vývojové prostředí Flash CS5 je komerční aplikace od společnosti Adobe. Toto vývojové prostředí se zaměřuje především na vytváření animací a různorodý multimediální obsah. Je v něm možné také zapisovat kód v jazyce ActionScript 3.0, ale jelikož je primárně určen pro animování, s rostoucí velikostí projektu je vhodné přejít na Flash Builder, protože při vytváření obsáhlejších aplikací a tím narůstajícím množstvím kódu dochází ke značnému zpomalení celé aplikace. 2.2 Adobe Flash Builder Flash Builder je také vývojové prostředí od společnosti Adobe, postavené na Java platformě Eclipse. Na rozdíl od prostředí Flash CS nemůžeme ve Flash Builderu vytvářet animace, kreslit apod. Toto prostředí je zaměřeno především na psaní kódu, což má za následek, že na rozdíl od Flashe CS je prostředí Flash Builderu svižné i při vytváření obsáhlých aplikací. Toto prostředí také umožňuje využít některé z mnoha předpřipravených komponent. 2.3 Flash Develop Flash Develop je alternativní vývojové prostředí k Adobe Flash Builderu. Jedná se o open source projekt, který vznikl v roce Původně bylo určeno pro začínající programátory flashových aplikací, ale díky velké oblibě a uživatelské základně je dnes k dispozici nepřeberné množství pluginů, s kterými téměř dosahuje kvalit Adobe Flash Builderu. Jeho asi hlavní nevýhodou oproti originálnímu vývojovému prostředí od společnosti Adobe je daleko menší provázanost s vývojovým prostředím Adobe CS, které se u originálních produktů s každou verzí více a více blíží dokonalosti. 2.4 Adobe Flash Player Adobe Flash Player umožňuje přehrávání animací a spouštění aplikací vytvořených v programech jako Flash CS, Flash Builder, nebo Flash Develop. Tento multimediální přehrávač byl původně vytvořený společností Macromedia, dnes patřící pod Adobe. Díky podpoře spouštění skriptů napsaných v jazyce ActionScript zajišťuje až netušené možnosti 2

16 interakce na nejrůznějších platformách a systémech. Tento přehrávač je možné mít jako samostatnou aplikaci, nebo častěji jako plugin do webového prohlížeče. K dispozici je také rozšířená debuggovací verze pro vývojáře. 2.5 Adobe Photoshop CS6 Adobe Photoshop je grafický editor pracující s bitmapovou grafikou. První verze programu Photoshop vyšla již v roce 1990, po třech letech vývoje bratrů Thomase a Johna Knolla. V současnosti je na trhu již třináctá verze s označením CS6. Verze Datum vydání 1.0 únor červen listopad září listopad květen únor září (CS) březen (CS2) říjen (CS3) duben (CS4) září (CS5) duben (CS5.5) květen (CS6) březen 2012 Tabulka 5.1 Přehled verzí Adobe Photoshop 2.6 Gimp Gimp, neboli GNU Image Manipulation Program je alternativou ke komerčnímu Adobe Photoshopu. Dokáže upravovat bitmapovou grafiku a je poskytován pod volnou licencí. Historie Gimpu sahá do roku 1995, konkrétně ke studentům Kalifornské univerzity. Aby Spencer Kimball a Peter Mattis mohli vytvořit nezávislý program, museli vytvořit novou grafickou knihovnu a vznikla tak GTK gimp toolkit. Na ní je mimo jiné postavené grafické prostředí pro unixové operační systémy GNOME. 2.7 VRML Pad VRML pad je vývojové prostředí pro jazyk VRML od společnosti Parallel Graphics. Dnes je k dispozici verze 3.0. VRML pad je velmi schopný pomocník při editování scény, má vestavěné velmi užitečné funkce, jako jsou například detekce chyb v kódu, inteligentní dokončování, nebo automatizace skriptování. 3

17 2.8 Cortona 3D Cortona 3D je plugin do webových prohlížečů a primárně umožňuje přehrávání VRML97 souborů. Podporuje 3D akcelerátory jako DirectX a OpenGL. K dispozici je zdrama. 2.9 BS contact BS contact je VRML prohlížeč od společnosti Bitmanagement Software GmbH. Jeho hlavní výhodou oproti Cortoně 3D je v intenzivnějším vývoji, obsahuje tedy mnohem více funkcí, avšak v plné verzi je placený. Za zmínku jistě také stojí podpora stereoskopického zobrazení Autodesk Maya První verze tohoto profesionálního programu pro 3D grafiku vznikla v roce 1998, od roku 2006 patří pod Autodesk. Maya je často využívána pro filmové efekty a tvorbu počítačových her. Je zajímavé, že ačkoli Autodesk již při koupi měl vlastní velice úspěšný 3D modelář, nechává oba dva produkty na trhu koexistovat. Dnes je k dispozici placená verze Maya Unlimited a verze Maya PLE, která je poskytována zdarma pro nekomerční účely. Nevýhodou této bezplatné veze je však vodoznak, který modely obsahují. Autodesk je ke studentům obecně velmi vstřícný a tak je k dispozici bezplatná roční studentská verze Autodesk 3ds Max Autodesk 3ds Max se vyvinul z programu 3D Studio, které bylo vytvořeno pro platformu DOS. Na přejmenování 3D Studio Max došlo při přeprogramování pro operační systém Windows NT. Stejně jako Maya je profesionálním 3D grafickým editorem, který se hojně využívá ve filmovém a herním průmyslu Blender Bledner je jedním z nejpopulárnějších Open Source 3D grafických modelářů. Pomocí nejrůznějších pluginů umožňuje vytvářet scény a animace srovnatelné s velmi drahými 3D modeláři. Jeho nevýhodou je občasná nestabilita a poněkud nepřehledné menu NetBeans Projekt NetBeans spadá pod firmu Sun Microsystems. Jako open source produkt byl uvolněn již v červnu Primárně je toto vývojové prostředí určeno pro tvorbu aplikací v jazyce Java, ale aktuální verze podporuje i další programovací jazyky, jako například C++, PHP, Ruby a další. Vzhledem k přehlednému rozhraní a velkým možnostem rozšíření je 4

18 velmi pohodlné editovat v NetBeans i kód, pro který tento mocný nástroj nebyl původně určen. Ve své práci jsem ho využil například pro úpravu HTML kódu. 5

19 Kapitola 3 Přehled dostupných technologií Tato kapitola obsahuje přehled technologií, které umožňují tvorbu 3D webových aplikací. Popisuje také některé další, které bylo nezbytné využít ať už pro srovnání vybraných technologií, nebo pro tvorbu finální 3D webové prezentace. 3.1 VRML Obrázek 3.1 Logo VRML Virtual Reality Modeling Language je grafický formát, který byl navržen pro popis trojrozměrných scén. Historie jazyku VRML sahá až na konec 80. let, konkrétně k programátorům Silicon Graphics, kteří navrhli knihovnu Inventor zajišťující práci s prostorovými objekty. Inventor fungovala jako nadstavba grafické knihovny GL. Na začátku 90. let došlo k její inovaci a byla vytvořena nová knihovna OpenGL (open graphics library). Tato nová vylepšená knihovna se stala průmyslovým standardem pro tvorbu počítačové grafiky. Po vzniku OpenGL bylo potřeba obnovit také Inventor, vznikla tedy nová knihovna, pojmenovaná OpenInventor a ta se stala stavebním kamenem jazyka VRML. Jako další významná data ve vývoji bych ještě vytyčil rok 1995, tedy datum vzniku VRML 1.0, kdy došlo k významnému rozšíření jazyka o možnost využití prostorových dat z internetu. Dalším důležitým bodem ve vývoji VRML byl rok 1997, kdy vznikla verze 2.0, dodnes používaná také pod označením VRML97. Tato poslední verze se stala standardem označeným jako ISO/IEC :1997. Jazyk VRML byl navržen pro použití na internetu, což je jedna z jeho silných stránek. Velkou výhodou je možnost tvorby nejen statických, ale i dynamických světů. To pro nás znamená, že jednotlivé objekty ve scéně mohou například reagovat na přítomnost virtuálního návštěvníka, časovač, objekty generující události, mohou se také přemisťovat, měnit barvu a podobně. Ve své době jazyk VRML přinesl možnost lidem prohlížet prostorové světy bez nutnosti instalace a platby drahých, náročných profesionálních programů, tedy zpřístupnil tuto technologii víceméně každému, kdo měl doma počítač, internetový prohlížeč a přehrávač VRML. 6

20 Právě nutnost instalovat speciální prohlížeč možná stojí za tím, že se technologie masově nerozšířila. I přes široké možnosti využití pro reklamní účely, nejrůznější vizualizace a simulace rozmanitých struktur, tedy tento jazyk nyní považujeme víceméně za přežitý. 3.2 Adobe Flash Obrázek 3.2 Logo Flash Flash jako takový vznikl přibližně před 14 ti lety roku Vyvinula ho firma Macromedia, která je nyní ve vlastnictví společnosti Adobe Systems. Flash není jen vektorový grafický program, ale komplexní multimediální platforma. To ve zkratce znamená, že již dávno není využíván pouze ke tvorbě křivkových animací, ale v současné době zajišťuje chod interaktivním internetovým aplikacím, které se souhrnně označují jako RIA (tedy rich internet applications). ActionScript je objektově orientovaný programovací jazyk, který se používá v aplikacích platformy Flash. Jazyk ActionScript a Flash se vyvíjely společně. Zezačátku v prvních třech verzích platformy Flash nebyl jazyk ActionScript vůbec implementován. Veškeré ovládání objektů ve scéně se provádělo přes předem definované akce, které zajišťovaly jen to nejzákladnější, tedy procházet časovou osu, popřípadě odkazovat na nějaké URL. Teprve až od verze čtyři bylo vývojářům umožněno vkládat jednoduchý zdrojový kód, kterému se začalo tehdy ještě neformálně říkat ActionScript. S příchodem verze pět se tento skriptovací jazyk více vyvinul a stala se z něj tak oficiální součást Flashe, což zaručilo jeho kontinuální vývoj. Postupem času byl tento skriptovací jazyk obohacen o možnosti řízení textů, zvuků, videí, sofistikovanějších animací a tak podobně. Další výrazný bod ve vývoji nastal v roce 2003, kdy vznikl jazyk ActionScript 2.0. Tento rok je důležité zdůraznit hlavně proto, že v tuto dobu již byl jazyk na srovnatelné úrovni s ostatními objektově orientovanými jazyky na trhu, jako jsou například Java, nebo C#. S příchodem této přelomové verze se o něj začala zajímat nejen širší veřejnost, ale i zkušení programátoři. Těm se však v porovnání s již zaběhnutými objektově orientovanými jazyky nezdála hlavně efektivita ActionScriptu 2.0. Do jisté míry to bylo zapříčiněno tím, jak se jazyk vyvíjel. Každá nová verze byla vlastně úpravou té minulé a tak se projevovala stále více skutečnost, že přehrávač Flash Player nebyl původně konstruován pro rozsáhlé internetové aplikace, nebo hry náročné na výkon. Čím dál tím více vyplývala na povrch skutečnost, že pokud se má ActionScript udržet při životě, bude potřeba naprogramovat novou verzi, zcela od základu. K tomu došlo v roce 2006, kdy společnost Adobe představila jazyk ActionScript 3.0. Verze 3.0 je současnou verzí jazyka ActionScript. Je obohacena o mnohé nové funkce a přináší slíbený nárůst efektivity. Tuto verzi poprvé začlenilo vývojové prostředí Flash CS3, 7

21 CS4 přidalo další funkce, z nichž bych, vzhledem k zaměření mé práce, rád vytknul práci s 3D grafikou. Poslední verze vývojového prostředí nese název CS5. Nepřináší žádné dramatické změny jazyka ActionScript 3.0, tedy alespoň z pohledu uživatele. Očima vývojáře můžeme spatřit spoustu pomocných funkcí, jako například automatické dokončování kódu. Soubory vytvořené ve Flashi mají příponu.swf, od označení Shockwave Flash. Toto označení je víceméně zastaralé, protože platforma Shockwave se již před nějakou dobou oddělila, nicméně přípona souborů zůstala nezměněná. Soubor vytvořený ve Flashi interpretuje, nebo můžu říci, přehrává Adobe Flash Player. Flash Playeru máme několik verzí, může totiž fungovat jako samostatný program, nebo existuje v podobě zásuvných modulů do internetových prohlížečů. Dále jsou k dispozici rozšířené debuggovací verze pro vývojáře. Tímto jsem se dostal k podobnému problému, jako u VRML, tedy že k přehrání Flashových souborů je také bezpodmínečně nutný speciální přehrávač, který není integrován přímo do instalace internetového prohlížeče. U Flashe to ovšem není takový problém, jako například u VRML, jelikož dle dostupných statistik počet uživatelů, kteří přistupují na nějakou webovou stránku zaznamenávající softwarové vybavení klienta a jsou vybaveni flashovým přehrávačem, je velmi vysoký. Hovoří se přibližně až o 99 % uživatelů. Za toto masivní rozšíření může fakt, že Flash je nejdostupnější a nejrozšířenější formou videoprezentace na internetu. Každý uživatel, který si někdy pustil video z jakéhokoliv video serveru, jako je například YouTube, je tedy připraven na přehrání.swf souborů. 3.3 Adobe Flex Obrázek 3.3 Logo Flex První vydání Flexu je z roku 2004 od firmy Macromedia. Současná verze platná od roku 2008 nese označení Adobe Flex 3. Jedná se o sadu komponent pro tvorbu a vývoj bohatých internetových aplikací. Přesněji, jedná se o vývojovou technologii, nikoliv běhové prostředí. Flex je programátorská záležitost, vývojář pracuje s již předpřipravenými komponentami, celý kód je objektově orientovaný. Při pohledu na kód se nezapře jistá podobnost s HTML/JavaScriptem. To je dáno definicí uživatelského rozhraní, které je provedeno ve značkovacím jazyce MXML. Pro vývojáře je tento fakt velikou výhodou, jelikož výstupem je vždy platný XML dokument, což zajišťuje snadné používání dalších komponent od různých výrobců 8

22 Vývojovým prostředím pro Flex je Adobe Flash Builder, vcelku dobrou alternativou je freewarový Flash Develop. Ačkoliv nemají vývojáři Flexu rádi zaměňování s Flashem jako takovým, nutno podotknout, že v obou technologiích se používá ActionScript a jako běhové prostředí obě používají Adobe Flash Player. To je vzhledem k rozšířenosti Flash Playeru obrovská výhoda. Koncový uživatel nemusí vůbec poznat, zda-li ovládá aplikaci vytvořenou ve Flexu, nebo ve Flashi. Vzájemné propojení těchto technologií je již dnes na velmi dobré úrovni, není problém některé animace vzájemně integrovat. Firma Adobe údajně v příštích verzích plánuje pro tyto dva nástroje společné souborové projekty. Další velkou výhodou je poměrně značný počet dostupných rozšíření. Pro podporu třetího rozměru ve flashových aplikacích je asi nejlepší Papervision3D. Pomocí jazyka ActionScript 3.0 můžeme tvořit různá primitiva, nastavovat scénu, připravovat reakce na akce uživatele a dokonce i importovat hotové 3D objekty některého z programů pro 3D grafiku ve formátu Collada. Díky Papervision3D tak může uživatel v okně svého webového prohlížeče vybaveného pouze flashovým přehrávačem vidět plně prostorový objekt a to v reálném čase. Formát Collada (Collaborative Design Activity) umožňuje ukládat nejen statické 3D objekty, ale také animace. Jedná se o XML dokument, což zajišťuje jeho snadnou editaci v jakémkoliv textovém editoru. Jedná se o poměrně nový formát, který byl vyvinut společností Sony Computer Entertainment v říjnu roku 2004, jako oficiální formát pro PlayStation 3 a PlayStation Portable. Zajímavou skutečností je, že se Collada používá jako výchozí 3D formát pro modely v programu Google Earth. 3.4 WebGL Obrázek 3.4 Logo WebGL WebGL je technologie umožňující použití a vytvoření 3D grafiky ve webovém prohlížeči. Je postavená na základě OpenGL ES 2.0, používá multiplatformní rozhraní OpenGL, což zajišťuje její použitelnost na různých systémech. WebGL je přímo koncipováno pro standard HTML 5. Z toho vyplývá jedna pro uživatele velice důležitá skutečnost k prohlížení aplikace naprogramované ve WebGL není potřeba instalovat žádný další přehrávač, nebo běhové prostředí. Návštěvník stránek si vystačí pouze s internetovým prohlížečem. Mezi klíčové výhody použití WebGL dále patří hardwarová akcelerace 3D grafiky a její provázanost s HTML obsahem, díky čemuž je zaručena snadná interakce s jinými HTML prvky za pomocí standardních mechanismů. 9

23 Jelikož se WebGL řadí mezi nízko úrovňové rozhraní pro programování aplikací, je potřeba pro oživení i zdánlivě jednoduché scény, v porovnání s ostatními technologiemi, napsat spoustu kódu a programovat akce na scéně, které jsou v jiných technologiích buď částečně, nebo úplně zautomatizovány. Ve výhodách zmíněná hardwarová akcelerace může být zároveň i docela závažným problémem, zvláště při komerčním využití WebGL, jelikož je nutné vlastnit podporovanou grafickou kartu. Pro vlastníka nepodporované grafické karty je tak ve webovém prohlížeči WebGL ve výchozím nastavení deaktivováno. Windows Linux Mac Intel GMA 945 AMD/ATI ATI Radeon HD2400 NVIDIA GeForce FX Go5200 Intel, ovladače Mesa starší ATI Radeon 2600 series než 7.9 NVIDIA GeForce FX Go5200 ATI Radeon X1900 GeForce 7300 GT NVIDIA GeForce FX Go5200 Tabulka 3.1 Přehled nepodporovaných grafických karet 3.5 Unity Obrázek 3.5 Logo Unity3D Technologie Unity 3D je vývojový nástroj určený především pro tvorbu 3D videoher. Zmiňuji ho hlavně proto, že také umožňuje vytvářet interaktivní obsah a různorodé 3D animace, které jsou stejně jako hry v něm vytvořené spustitelné na mnoha platformách. Pochopitelně vzhledem k zaměření mé práce je nejzajímavější plugin do webového prohlížeče. Jeho instalace probíhá podobně, jako například u přehrávače Adobe Flash Player. Bohužel však není zdaleka tak rozšířený, protože na rozdíl od přehrávání videa je hraní webových her, zvláště takto náročných, zábavou daleko menšího okruhu lidí. Jelikož je Unity 3D zaměřeno především na hraní her, podporuje rozmanité moderní technologie, které využívají i nejnovější herní enginy. Ve výčtu nechybí například takové grafické prvky, jako jsou dynamické stíny, reflexe mapování a podobně. Opravdovou třešničkou na dortu je pak vestavěná podpora NVIDIA PhysX fyzikálního enginu, který je schopný v reálném čase zohledňovat vlastnosti látek ve scéně, kolize vrstev a podobně. Dalším velkým plusem enginu Unity 3D je jeho multiplatformnost. Aplikace v něm naprogramované fungují na Nintendu Wii, Xboxu 360, Playstationu 3, iphonu, ipadu, 10

24 zařízeních využívající operační systém Android a přes Unity Web Player plugin ve všech nejrozšířenějších webových prohlížečích. 3.6 Microsoft Silverlight Obrázek 3.6 Logo SilverLight Microsoft Silverlight je platformou, primárně určenou pro tvorbu business a multimediálních aplikací. Stejně jako například Flash je schopen fungovat pomocí stažitelné komponenty ve webovém prohlížeči. Podporovány jsou Internet Explorer, Firefox, Safari, Opera a Chrome. Na Linuxu je tato technologie dostupná také, ale pod jiným označením Moonlight. Moonlight je za podpory Microsoftu vyvíjen americkou společností Novell jako svobodná implementace Silverlightu. Vývoj této technologie začal v roce 2007, nyní je k dispozici verze 5 z roku 2011, která konečně umožňuje účinně využít 3D obsah i za pomoci procesoru grafické karty. Obrázek 3.7 Škoda auto konfigurátor 11

25 Kapitola 4 Porovnání vybraných technologií V této kapitole budu srovnávat VRML, WebGL a kombinaci Flash/Flex/Papervision3D. Mezi hlavní hodnotící kritéria budou patřit: 1. Systémová nezávislost 2. Prohlížečová nezávislost 3. Hardwarová náročnost 4. Možnosti interakce 5. Náročnost přípravy scény Dále pro výběr nejvhodnější technologie vzhledem ke komerčnímu nasazení na internet vezmu v potaz některé důležité skutečnosti, jako například postoj významných softwarových společností na trhu k jednotlivým technologiím a jejich dostatečnou podporu. Pro testování byl vytvořen jednoduchý 3D objekt, kamera na sloupu pouličního osvětlení. K jeho vytváření byl použit 3D modelář Blender. Z níže uvedených obrázků je patrné, že export do formátu Collada nefunguje zcela korektně, proto jsem po této zkušenosti na tvorbu 3D objektů pro finální prezentaci použil program Maya Obrázek 4.1 Render dema 12

26 Obrázek 4.2 Demo VRML Obrázek 4.3 Demo Flash 13

27 Obrázek 4.4 Demo WebGL 4.1 Systémová nezávislost Systémovou nezávislost ověřím na následujících operačních systémech: 1. Microsoft Windows Vista 32bit SP2 2. Microsoft Windows XP SP3 3. Linux Kubuntu Android Na operačních systémech od společnosti Microsoft fungují bez problému všechny technologie. Na Linuxu bylo obtížné, jak už to tak bývá, zprovoznit téměř vše. Nicméně díky multiplatformním prohlížečům, jako je například Firefox funguje WebGL. Dále pod tímto operačním systémem funguje Flash, hlavně zásluhou oficiálního pluginu od společnosti Adobe. Nejrozšířenější prohlížeč VRML Cortona3D není pro Linux k dispozici. Pro operační systém Android existuje spousta prohlížečů, aplikací a rozšíření, díky kterým je na přenosných zařízeních možné prohlížet aplikace ve všech zkoumaných technologiích. Za Flashem a WebGL zaostává pouze VRML, které je možné spouštět přes placenou aplikaci. Ostatní prohlížeče jsou zdarma. 4.2 Hardwarová náročnost Vzhledem k trendům poslední doby zmenšování přenosných počítačů, výroby úsporných přenosných systémů, smartphonů a tabletů, bude potřeba otestovat plynulost 3D 14

28 webového prostředí na systémech s různým využitím od pracovních počítačů, přes herní sestavy až k přenosným zařízením. Jako hodnotící stupnici budu používat čísla 1 až 5, kde 1 bude znamenat bezproblémový chod a 5 v případě, že shledám na daném zařízení aplikaci jako nepoužitelnou, nebo se jí nepodaří rozchodit. Pro testování byly vybrány následující sestavy: Procesor Operační paměť Grafická karta Procesor Operační paměť Grafická karta Procesor Operační paměť Grafická karta Procesor Operační paměť Grafická karta Pracovní počítač Notebook Dell Latitude E4300 Intel Core 2 Duo P Ghz 4GB DDR3 Intel 4300MHD Tabulka 4.1 Sestava 1 Herní sestava AMD Athlon 64 X Mhz 4 GB DDR2 800 Mhz MSI Ge-Force nx8800gtx 768 MB DDR3 Tabulka 4.2 Sestava 2 Starší pracovní sestava AMD Thunderbird 900 Mhz 2 GB Integrovaná Tabulka 4.3 Sestava 3 Smartphone HTC HD2 (Android) Qualcomm Snapdragon 1 Ghz 1GB Qualcomm Tabulka 4.4 Sestava 4 VRML Flash/Flex/Papervision WebGL Sestava č Sestava č Sestava č Sestava č Tabulka 4.5 Hodnocení Při testování jsem zjistil, že nejméně náročná technologie je jednoznačně VRML. Funguje bez záseků i na deset let starém počítači. U Flashe velmi záleží na rozmanitosti scény. Při zobrazování jednoduchých objektů je velmi svižný i na pracovních strojích, ale při zapojení komplikovaných grafických efektů, jako je například mlha a podobně může být velmi hardwarově náročný. Na všech testovaných strojích nejhůře běhalo WebGL, které pro 15

29 korektní běh vyžaduje některou ze seznamu podporovaných grafických karet. I na ne zcela slabé sestavě č. 1 nepříliš komplikovaný objekt při manipulaci vykazuje značný pokles plynulosti pohybu. 4.3 Prohlížečová nezávislost, podpora Hodnotícím kritériem prohlížečové podpory nebude jen zda-li je vůbec možné danou technologii zprovoznit. Zaměřím se také na případnou složitost uvedení do chodu pro běžného uživatele a případnou stabilitu pluginů. Jednotlivé technologie budou testovány na následujících nejrozšířenějších prohlížečích: 1. Google Chrome m 2. Opera 11.52, sestavení FireFox Internet Explorer 9 Ve spojitosti s WebGL je nejvíce zmiňován Google Chrome. Spoustu webů zabývající se touto tématikou na něj přímo odkazuje. Nicméně ve skutečnosti není zprovoznění WebGL v tomto prohlížeči vůbec triviální. Ochota prohlížeče korektně spustit aplikaci se velmi liší verze od verze. Díky této skutečnosti musí často i zkušenější uživatel zavítat na nějaké fórum, aby zjistil, jak je na tom s podporou právě ta jeho verze. Jako nejpoužitelnější se pro WebGL jeví Firefox. Verze má sice v základu také WebGL vypnuté, ale povolení není nikterak náročné a po asi třech krocích funguje zcela automaticky a spolehlivě. Velkým problémem se pro WebGL stává Internet Explorer. Jelikož se společnost Microsoft rozhodla tuto technologii víceméně ignorovat, nepřichází její integrace do Internet Exploreru vůbec v úvahu. Microsoft se dokonce o WebGL vyjádřil jakožto o potencionálním nebezpečí, kritizoval také velkou nestabilitu aplikací v něm vytvořených. Dalším a možná tím hlavním důvodem je přivedení na trh své vlastní technologie pro 3D webovou prezentaci Microsoft Silverlight. Jak pro Flash, tak pro VRML existují pluginy do všech nejrozšířenějších prohlížečů. Flash je na tom o něco lépe, jednak díky masové rozšířenosti a jednak jednoduchosti instalace. Ve všech prohlížečích je uživatel na nepřítomnost Flashového přehrávače upozorněn ihned, nemusí zjišťovat, proč se aplikace nezobrazuje. 16

30 4.4 Možnosti interakce Možnosti interakce jsou v jednotlivých technologiích na velice dobré úrovni. I u staršího VRML lze vkládat javascript, různé body reagující na uživatelovo chování a navázat na ně další akce. Ve Flashi a WebGL lze lépe omezit uživatelův pohyb, protože běhová prostředí nemají v základu žádná předpřipravená tlačítka, jako Cortona3D. Při správném naprogramování tedy nehrozí, že by se nám návštěvník mohl ztratit v prostoru. Ve Flashi lze oproti VRML například přistupovat k jednotlivým částem primitiv, čehož se dá také využít. WebGL má krásně čitelný kód a díky provázanosti s HTML 5 posunuje možnosti interakce na úplně novou úroveň. 4.5 Náročnost přípravy scény V tomto bodě hodnocení se zaměřím hlavně na vývojáře, jak rozdílným způsobem se dá v jednotlivých technologiích dosáhnout podobného výsledku, s jakou námahou a jak efektivně. Svojí roli bude také hrát případná existence různých vývojových prostředí, jejich dostupnost a komfort při práci s nimi. Jednoznačně nejjednodušší při přípravě podobné scény se mi zdá VRML. Jednotlivé náročnější objekty je možno importovat z libovolného 3D modelovacího prostředí a poupravit cestu k texturám. Zápis kódu je přehledný a srozumitelný. K dispozici je přehledný editor VRML Pad zvýrazňující syntaxi. Obrázek 4.1 Ukázka kódu VRML97 17

31 Uprostřed se, co se náročnosti týká, umístil Flash. U Flashe je značná výhoda ve velikém množství předpřipravených akcí a komponent, z čehož vyplývá, že je co do psaní kódu nejméně náročný. Na pár řádcích se dá vytvořit opravdu poutavá aplikace. Také vývojové prostředí, ať už komerční Flash Builder, nebo freewarový Flash Develop poskytují pro programátora příjemné pracovní prostředí s mnohými funkcemi. Obrázek 4.2 Ukázka kódu Flash 18

32 Jednoznačně nejnáročnější mi připadá práce s WebGL. I pro jednoduchou věc je potřeba napsat spoustu kódu. Mnoho například ve Flashi zautomatizovaných věcí zde musí programátor obstarat sám. Zatím jsem také nenarazil na nějaké sofistikovanější vývojové prostředí. Obrázek 4.3 Ukázka kódu WebGL 19

33 4.6 Výběr nejvhodnější technologie pro finální prezentaci Po vytvoření podobné scény ve VRML, kombinaci Flashe/Flexu/Papervisionu 3D a WebGL, jsem se nakonec rozhodl zvolit si cestu kombinace Flashe, Flexu a Papervisionu 3D. S VRML se sice krásně pracuje, ale již léta tuto technologii víceméně nikdo nepoužívá. Navíc fakt, že je nutná instalace speciálního prohlížeče, který ještě není na všechny platformy bezplatný, tuto možnost vylučuje. WebGL je z uvedených technologií nejnovější, nejpokročilejší, nevyžaduje instalaci běhového prostředí třetích stran, ale momentální základní nastavení internetových prohlížečů brání komerčnímu využití. Navíc negativní postoj Microsoftu k WebGL a jeho neochota implementovat podporu do Internet Exploreru mě přesvědčilo o tom, že čas WebGL ještě zcela nenastal. Flash sice vyžaduje instalaci Adobe Flash Playeru, ale jeho masová rozšířenost eliminuje tuto nevýhodu. Velké množství rozšíření, knihoven, jeho multiplatformnost a obrovská komunita lidí kolem Flashe vyvažuje i občasnou nestabilitu zásuvných modulů a v některých případech vyšší hardwarovou náročnost. Fakt, že je Flash tou správnou volbou pro komerční využití potvrzuje i skutečnost, že většina webových reklamních bannerů, které byly dříve tvořeny gifovými obrázky jsou nahrazeny právě Flashovými miniaplikacemi. 20

34 Kapitola 5 Realizace 3D webové prezentace V této kapitole je popsán postup tvorby 3D webové aplikace za použití kombinace technologií Flash/Flex/Papervision3D. Zachycuje také odchylky od původní vize, které bylo potřeba provést při objevení skrytých problémů, na které jsem při vývoji aplikace narazil. Některé problémy bylo nutno vyřešit drobným odklonem od původního záměru, ať už z důvodu náročnosti na výkon počítače, rychlost připojení, nebo objevení určitých limitujících skutečností vyplývajících z možností vybraných technologií. 5.1 Vize projektu Cílem projektu je vytvoření efektivní poutavé webové prezentace za použití 3D objektů. O jejich zobrazení se stará knihovna Papervision3D. Díky tomuto rozšíření pro platformu Flash můžeme vytvářet jednotlivá primitiva, nebo přímo importovat hotové modely ve formátu collada. Prvotním nápadem bylo využít tyto 3D modely jako navigační prvky. Vzhledem ke koncepci menu, které jsem vytvořil v podobě karuselu, se však tato volba postupně ukázala jako nevhodná, protože při otáčení jednotlivých položek a tím i detailních modelů rapidně rostla náročnost a klesala plynulost chodu aplikace. Modely ve formátu collada jsem tedy nahradil jednoduššími objekty. 5.2 Vytvoření základního navigačního prvku Jelikož se společnost, pro kterou je tato aplikace vyvíjena zabývá různými technologiemi, je potřeba vytvořit menu o následujících položkách: 1. CCTV kamerové systémy 2. EPS elektronická požární signalizace 3. EZS elektronická zabezpečovací signalizace 4. ACS přístupové systémy 5. STR strukturovaná kabeláž 6. o nás informace o společnosti 7. Kontakty telefony, y, adresy 8. Aktuality aktuální sdělení zákazníkům Jako základní navigační prvek mé aplikace jsem se rozhodl vytvořit rotační menu v podobě 3D karuselu. K tomuto rozhodnutí mě vedla skutečnost, že jsem na takové řešení oproti častým horizontálním a vertikálním menu narazil jen zřídka. Pokud někde byl použit podobný prvek, téměř nikdy nezastupoval funkci hlavního navigačního menu. 21

35 Po špatných zkušenostech s tvorbou jednotlivých položek karuselu z collada objektů jsem začal znovu vytvářet menu za pomocí Papervision3D primitiv. Jako druhá možnost mě napadla cesta vytvořit menu pomocí válce. Jelikož je možné v kódu přistupovat k jednotlivým jeho plochám, uživatel by nemusel poznat, že místo vícero objektů používá pouze jeden. Došlo by tak k ušetření výkonu a zvýšení rychlosti aplikace. Obrázek 5.1 Ukázka základního tvaru Papervision3D Bohužel po přidělení materiálu jednotlivým plochám válce došlo k výraznému omezení interaktivity. Posluchače událostí navázané na jednotlivé strany byly přiděleným materiálem, v tomto případě texturou, překryty a staly se tak nefunkčními. Řešením tohoto nešvaru je možnost navázat posluchač událostí na objekt, na který je textura namapována, což bohužel v tomto případě není možné. Pokud bychom tak učinili, všechny strany válce by nám odkazovali bez rozdílu na jedno místo v aplikaci. Nezbývalo nic jiného než od válce upustit a vrátit se opět k osmi samostatným objektům. Jako další přicházely v úvahu jednoduché plochy. Po otexturování a navázání posluchačů událostí fungovaly objekty spolehlivě jako obyčejná navigační tlačítka. Bohužel efekt z jednotlivých ploch nebyl moc uspokojivý, proto jsem se rozhodl zaobalit je do komponenty zvané container. Veliká výhoda tohoto kroku spočívá v zjednodušení pozicování jednotlivých ploch a možnost jejich seskupení a rozmístění do podoby karuselu. 22

36 Obrázek 5.2 Ukázka karuselu s plochami Takto sestavený základ menu jsem se ve finální podobě rozhodl ještě vylepšit a jednotlivé plochy nahradit dalším základním tvarem krychlí. Přiřazením textury pouze na přední a zadní stranu krychle jsem docílil zajímavého efektu dvou za sebou stojících ploch, z nichž každá může nést jiný materiál Obrázek 5.3 Ukázka implementace jednotlivé položky menu 23

37 Důležitým funkčním prvkem jsou již několikrát zmíněné posluchače událostí. Jedná se o předpřipravenou komponentu platformy Flash, kterou stačí spustit na určitém objektu a při její aktivaci navázat spouštění požadovaných akcí. V příkladu kódu výše posluchač událostí reaguje na uživatelův pohyb myší. Pokud přejede přes instanci krychle uložené v proměnné eps, dojde k zavolání funkce epsrollover, která automaticky změní text v poli nazev_txt. Obrázek 5.4 Ukázka volané funkce posluchačem událostí 5.3 Modelování Pro modelování 3D objektů jsem si vybral po špatných zkušenostech ze srovnávací části bakalářské práce s programem Blender Mayu Na rozdíl od Blederu byla Maya při práci nesrovnatelně stabilnější, přehlednější a hlavně v ní spolehlivě funguje export do formátu collada Polygonální modelování Ve světě 3D grafiky se vše skládá z vrcholů, hran a polygonů. Dva vrcholy tvoří hranu, tři hrany polygon. Postupným vytahováním jednotlivých polygonů a aplikováním různých funkcí, jako je dělení, slučování, zvětšení/zmenšení dochází k tvorbě výsledného modelu. Při výrobě svých modelů jsem používal hlavně tuto techniku. Obrázek 5.5 Polygonální modelování 24

38 5.3.2 NURBS Pojmem NURBS se označuje matematický model pro generování a popis ploch i křivek. Velkou výhodou této techniky je snadná manipulace s křivkami pomocí kontrolních bodů. Tato technika velmi zjednodušuje modelování některých objektů, jako například kabelu. Můžeme křivkou vytyčit trasu a nechat po ní protáhnout plný kruh, čímž docílíme požadovaného efektu. Obrázek 5.6 NURBS modelování 5.4 Texturování Pro úpravu textur jsem použil program Adobe Photoshop CS6. Při texturování základních objektů tvořících jednotlivé položky menu jsem použil komponentu Adobe Flash zvanou MaterialList. Ta mi velmi usnadnila namapování textur na jednotlivé krychle. V programu Maya jsem použil UV Texture Editor, tedy nástroj určující jakým způsobem se objekt texturou obalí. 5.5 Animování Aby se použití 3D technologií co nejvíce zúročilo, rozhodl jsem se některé objekty ve scéně rozpohybovat. Při vývoji jsem použil dva způsoby závislé na typu 3D objektu. Základní objekty vytvořené jazykem Action Script 3.0 jsem rozpohyboval za pomocí funkcí v něm obsažených, jak je vidět z obrázku níže. 25

39 Obrázek 5.7 Animace Flash Objekty vložené do aplikace ve formátu collada oproti tomu mohou obsahovat svojí vlastní animaci přímo v souboru.dae. Rozpohybování objektu v sofistikovaném 3D modeláři za pomoci časové osy je rozhodně pohodlnější, než psát kód. V programu Maya 2011 jsem použil techniku zvaná klíčová animace. Ta spočívá ve vytvoření stěžejních bodů pohybu, takzvaných klíčových snímků a zbytek animace dopočítá počítač za nás. Obrázek 5.8 Animace Maya 26

40 5.6 Vytvoření předběžného načítání Protože zdaleka ne všichni jsou v dnešní době vybaveni vysokorychlostním internetem, zakomponoval jsem do aplikace předběžné načítání. Dosáhl jsem toho přidáním posluchače událostí na část kódu, která nahrává externí Flashový.swf soubor. Uživatel je o stavu načítání informován dynamicky se měnícím ukazatelem počtu procent nahraných dat. V této části vývoje jsem zvláště ocenil funkce rozšířené verze Adobe Flash Playeru, jako je simulace stahování, kde si mohu nastavit přenosovou rychlost a sledovat, jak by vypadalo načítání pro budoucího návštěvníka. 27

41 Kapitola 6 Závěr 6.1 Zhodnocení cílů bakalářské práce a vlastního přínosu V této práci jsem popsal nejvýznamnější technologie pro prezentaci 3D obsahu na internetu. Tři z nich, Flash, VRML 97 a WebGL jsem použil pro zobrazení jednoduchého 3D modelu. Toto demo jsem otestoval na různých operačních systémech a zařízeních a na základě výsledku jsem se rozhodl vyzkoušet si tu nejlepší z nich na větším projektu. Při programování finální prezentace jsem narazil na spoustu na první pohled skrytých problémů, jako například skutečnost, že verze knihovny Papervision3D 1.0 a 2.0 nejsou vzájemně kompatibilní, což jsem bohužel zjistil až v době, kdy jsem hlavní část projektu měl naprogramovanou ve staré verzi. Výslednou webovou prezentaci využívající 3D objekty se nakonec povedlo zprovoznit. 6.2 Doporučení ohledně dalšího pokračování práce Myslím si, že vytvořené uživatelské rozhraní je vcelku variabilní a použitelné. Pokud bude potřeba přidat další položku menu, stačí pouze definovat další objekt a přidat ho do skupiny s ostatními. V budoucnu by se tak mohla dodělat například klientská část aplikace, kde by uživatelé mohli najít soubory technické dokumentace k uskutečněným instalacím a podobně. 28

42 Kapitola 7 Seznam použité literatury 8.1 Knižní zdroje: 1. Žára, Jiří VRML 97 Laskavý průvodce virtuálními světy. Brno: Computer Press, Adobe Creative Team Adobe Flash CS4 Professional Oficiální výukový kurz. Brno: Computer Press Adobe Creative Team Adobe ActionScript3.0 Oficiální výukový kurz. Brno: Computer Press

43 Kapitola 8 Přílohy Přiložené CD je rozděleno dle následujícího schématu. Složky obsahují veškerý zdrojový kód, textury a modely. Text bakalářské práce je uložen v kořenovém adresáři CD. Výsledná aplikace se spouští souborem index.html ze složky Aplikace. 8.1 Obsah přiloženého CD 30