interaktivní model sluneční soustavy · mendelova univerzita v brně provozně ekonomická...

Mendelova univerzita v BrněProvozně ekonomická fakulta

Interaktivní model Sluneční soustavy

Bakalářská práce

Vedoucí práce:Ing. Jiří Lýsek, Ph.D. Barbora Čápová

Brno 2015

V této části bych ráda poděkovala vedoucímu práce, Ing. Jiřímu Lýskovi, Ph.D.za odborné vedení. Dále také mé rodině, která mě morálně podporovala, předevšímmému oblíbenému strýci, jenž mě uvedl včas na správný směr.

Čestné prohlášeníProhlašuji, že jsem tuto práci: Interaktivní model Sluneční soustavyvypracovala samostatně a veškeré použité prameny a informace jsou uvedeny v se-znamu použité literatury. Souhlasím, aby moje práce byla zveřejněna v souladus § 47b zákona č. 111/1998 Sb., o vysokých školách ve znění pozdějších předpisů,a v souladu s platnou Směrnicí o zveřejňování vysokoškolských závěrečných prací.Jsem si vědoma, že se na moji práci vztahuje zákon č. 121/2000 Sb., autorský zákon,a že Mendelova univerzita v Brně má právo na uzavření licenční smlouvy a užití tétopráce jako školního díla podle § 60 odst. 1 Autorského zákona.Dále se zavazuji, že před sepsáním licenční smlouvy o využití díla jinou osobou(subjektem) si vyžádám písemné stanovisko univerzity o tom, že předmětná licenčnísmlouva není v rozporu s oprávněnými zájmy univerzity, a zavazuji se uhradit pří-padný příspěvek na úhradu nákladů spojených se vznikem díla, a to až do jejichskutečné výše.

V Brně 3. ledna 2016 ................................................................

4

AbstractČápová, B. Interactive model of the Solar System. Bachelor thesis. Brno, 2016

Bachelor thesis focused on creating an interactive website application depictingthe Solar System using available technologies for presentation od 3D content forWebGL platform. Final application is identified for educational purposes.

KeywordsUnity3D, Rhinoceros, WebGL, JavaScript, C#.

AbstraktČápová, B. Interaktivní model Sluneční soustavy. Bakalářská práce. Brno, 2016

Práce se zabývá vytvořením interaktivní webové aplikace pomocí dostupnýchtechnologií pro prezentaci 3D obsahu pro platformu WebGL. Výsledná aplikace jeurčená k didaktickým účelům.

Klíčová slovaUnity3D, Rhinoceros, WebGL, JavaScript, C#.

OBSAH 5

Obsah1 Úvod a cíl práce 7

1.1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.2 Cíl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Model Sluneční soustavy 82.1 Pozice objektů ve Sluneční soustavě . . . . . . . . . . . . . . . . . . . 8

3 Literární rešerše 103.1 Dostupné 3D modely Sluneční soustavy . . . . . . . . . . . . . . . . . 10

3.1.1 Solar System Scope . . . . . . . . . . . . . . . . . . . . . . . . 103.1.2 SPONLI 3D model . . . . . . . . . . . . . . . . . . . . . . . . 113.1.3 Project Metis . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.4 NASA’s Eyes . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.5 Celestia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.1.6 Stellarium . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.2 Dostupné technologie pro prezentaci interaktivního 3D obsahu . . . . 153.2.1 Unity 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.2.2 Unreal Engine 4 . . . . . . . . . . . . . . . . . . . . . . . . . 163.2.3 BigWorld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.2.4 GameMaker . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.2.5 Reach3Dx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3 Nástroje pro 3D modelaci . . . . . . . . . . . . . . . . . . . . . . . . 173.3.1 Blender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.3.2 Autodesk Maya . . . . . . . . . . . . . . . . . . . . . . . . . . 183.3.3 Autodesk 3D Studio Max . . . . . . . . . . . . . . . . . . . . 183.3.4 Cinema 4D . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.3.5 Rhinoceros 3D . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4 Materiál a metodika zpracování 204.1 Vývoj aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.1.1 Modelovací nástroj Rhinoceros 3D . . . . . . . . . . . . . . . 204.1.2 Herní Engine Unity . . . . . . . . . . . . . . . . . . . . . . . . 204.1.3 Global Illumination . . . . . . . . . . . . . . . . . . . . . . . . 204.1.4 Light Mapping . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.2 Webová část . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.2.1 Rozvržení stránky . . . . . . . . . . . . . . . . . . . . . . . . 214.2.2 Responsivní design . . . . . . . . . . . . . . . . . . . . . . . . 224.2.3 Foundation framework . . . . . . . . . . . . . . . . . . . . . . 224.2.4 Cílová platforma . . . . . . . . . . . . . . . . . . . . . . . . . 23

OBSAH 6

5 Implementace 285.1 Modelace objektů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5.1.1 Vesmír . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.1.2 Planety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.1.3 Kosmická zařízení vyrobená lidmi . . . . . . . . . . . . . . . . 29

5.2 Uživatelské prostředí . . . . . . . . . . . . . . . . . . . . . . . . . . . 315.2.1 Úvodní obrazovka . . . . . . . . . . . . . . . . . . . . . . . . 325.2.2 Model Sluneční soustavy . . . . . . . . . . . . . . . . . . . . . 325.2.3 Scény s jednotlivými objekty . . . . . . . . . . . . . . . . . . 33

5.3 2D hra Přistávání na měsíci . . . . . . . . . . . . . . . . . . . . . . . 33

6 Export výsledné aplikace 376.1 Komunikace mezi webem a Unity . . . . . . . . . . . . . . . . . . . . 39

7 Testování 40

8 Zhodnocení 428.1 Budoucnost vývoje her pro WebGL . . . . . . . . . . . . . . . . . . . 428.2 Závěr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

9 Reference 43

1 ÚVOD A CÍL PRÁCE 7

1 Úvod a cíl práce1.1 ÚvodSluneční soustava a vesmír vůbec je zajímavé a fascinující téma. Lidstvo již od ne-paměti sledovalo Slunce a jiné vesmírné objekty a snažilo se porozumět vesmírnýmzákonům. I v dnešní době s veškerými civilizačními vymoženostmi nás stále pohledna hvězdy fascinuje, ale i naše Sluneční soustava pro nás zůstává tajemnou. Tatoaplikace by měla pomoci se zorientovat zábavnou a hravou formou v našem vesmír-ném okolí.

Pomocí interaktivního ovládání je možné uživatele poučit o objektech našehovesmíru, o jejich vzájemném působení i o nejvýznamnějších technických zařízeníchvyrobených lidskou rukou. Tento model je svým zaměřením určen především prodoplnění výuky na základních školách, ale i pro laickou veřejnost. Informace o pla-netách a technických zařízeních obsažené v modelu doplňuje synchronizovaná částwebové aplikace zobrazující příslušnou stránku na Wikipedii, kde má uživatel mož-nost se dozvědět další informace.

Již Jan Ámos Komenský tvrdil, že nejlepší metodou učení je formou hry a zá-bavy (škola hrou), a proto tato aplikace obsahuje i interaktivní 2D hru Přistávánína Měsíci, při které musí uživatel prokázat rychlost reakcí, předvídavost apod.

V současné době existuje několik webových modelů zobrazujících naši Slunečnísoustavu, které se navzájem liší především obsahem informací poskytujících uživa-teli, přičemž ani jeden z nich neumožňuje si podrobněji zobrazit technická zařízeníve vesmíru, jako sondy a stanice, a dozvědět se o nich něco nového.

1.2 Cíl práceCílem mojí bakalářské práce je vytvoření interaktivní webové aplikace, pomocí her-ního enginu Unity, která zábavnou formou představuje fungování vesmíru. Uživatelsi bude moct udělat ucelený obrázek na naši Sluneční soustavu, dozvědět se zajímavéinformace o planetách, ale i o technických výzkumných prostředcích nacházejícíchse ve vesmíru, které si bude moct podrobně zobrazit. Model bude propojen i sestávajícími naučnými stránkami, takže se návštěvník stránky dozví nové informace.Aplikace poběží na nejpopulárnějších webových prohlížečích (Internet Explorer, Mo-zilla Firefox, Google Chrome, Opera).

2 MODEL SLUNEČNÍ SOUSTAVY 8

2 Model Sluneční soustavyNaše soustava obsahuje osm planet, několik měsíců a nespočet asteroidů a technic-kých zařízení jako satelitů, sond a družic. Do modelu jsem tedy zahrnula všech osmplanet, přičemž u zobrazení jednotlivých planet s větším množstvím přirozených sa-telitů jsem do modelu zahrnula pouze ty významnější. Tedy ve všech případech ty,které ostatní předčí svojí velikostí.

Množství technických zařízení ve vesmíru je obrovské a mohou se dělit podlezpůsobu určení, statusu aktivity (zda je s nimi středisko na Zemi v kontaktu), polohyve vesmíru (tedy jestli se nachází v naší Sluneční soustavě či mimo ni) a dalšíchkritérií. Z tohoto důvodu jsem se rozhodla uživateli zobrazit pouze některé z nich,především ty nejznámější. Mezi vybrané objekty patří Mezinárodní vesmírná stanice,Hubblův teleskop, sonda Voyager 1, která je nejvzdálenějším lidským výtvorem,sonda Cassini, jež se nachází poblíž Saturnu, New Horizons, který se blíží okrajinaší soustavy a v současné době posílá nové záběry z povrchu Pluta, Gallileo, ježzkoumá planetu Jupiter a její okolí a družici Rosettu, jež jako první přistála napovrchu komety.

2.1 Pozice objektů ve Sluneční soustavěCo velmi ulehčuje práci všem tvůrcům modelů naší soustavy je fakt, že všechnyplanety obíhají vzájemně přibližně v rovině rovníku Slunce, tedy jakémsi placatémdisku s maximální odchylkou 10°, což je při použitém měřítku 3D modelu zanedba-telná hodnota. Z tohoto důvodu jsem se i já rozhodla o umístění planet se stejnouhodnotou na ose y.

Dalším problémem při modelování jsou orbity planet. V jednodušších mode-lech obíhají planety kolem Slunce po kruhových drahách místo po elipsách. Proúčely mojí bakalářské práce jsem chtěla použít eliptické dráhy, ovšem po konzultacis Mgr. Janem Píšalou z Hvězdárny a planetária Brno jsem toto rozhodnutí přehod-notila. U většiny planet je totiž elipticita drah zanedbatelná (u Země se tato hodnotapohybuje okolo 3%)a zejména při vytváření modelu k didaktickým účelům jsem serozhodla ponechat kruhové oběžné dráhy. Také bylo důležité při modelování roz-myslet si velikosti planet. Rozměry planet, jenž patří mezi vnitřní (Merkur, Venuše,Země, Mars) jsou zhruba stejné, to samé platí i pro vnější planety (Jupiter, Saturn,Uran, Neptun), přičemž ty mají zhruba desetkrát větší rozměry oproti vnitřním.

Planety jsou na svých orbitách rozmístěny náhodně, protože i po konzultacis Mgr. Píšalou jsem zjistila, že jejich přesné stanovení je velmi obtížné určit a aniodborníci z brněnské hvězdárny nemají v této věci úplně jasno.

Při vytváření modelu se skutečným poměrem a vzdáleností planet se tak člověknevyhne vytvoření dvou v podstatě rozdílných soustav. Vnitřní planety, jenž obklo-pují Slunce, tvoří jeden model, nebo jednu ”vrstvu”, která je blízko u sebe i u centranaší soustavy a všechny planety v ní mají rychlou oběžnou dobu. Navíc se tyto pla-nety vyznačují menší velikostí, s čímž se musí počítat při vytváření modelu. Další

2.1 Pozice objektů ve Sluneční soustavě 9

tzv. ”vrstvou” jsou vnější planety, které se vyznačují většími rozměry a hmotností,jedná se o plynné obry a všichni mají mnohem pomalejší dobu oběhu, tedy doba nežplaneta oběhne Slunce je u nich mnohem delší.

Kvůli obrovským vzdálenostem mezi jednotlivými planetami a celkově velkérozlehlosti Sluneční soustavy nebylo vhodné zachovávat tyto vzdálenosti v modelu.Při zachování poměrů těchto vzdáleností nebylo možné zobrazit většinu vnitřníchplanet, které jsou příliš malé a příliš blízko u Slunce. Protože bylo v modelu potřebazobrazit v jedné scéně všechny planety, aby byly viditelné, rozhodla jsem se vnitřníplanety zvětšit v optimálním měřítku a vnější planety naopak zmenšit podle jejichvelikostí, ovšem v rozdílných poměrech, aby nedocházelo ke kolizi mezi planetami.I když vzdálenosti mezi planetami jsou odlišné od skutečnosti, doba jejich oběhubyla v aplikaci vypočítána podle skutečné doby oběhu planet.

3 LITERÁRNÍ REŠERŠE 10

3 Literární rešerše3.1 Dostupné 3D modely Sluneční soustavyV současné době existují 3D modely ve formách interaktivní webové aplikace, mo-bilní či desktopové aplikace. Největší množství modelů je ve formě desktopovéhosoftwaru a až poté pro webové prohlížeče. Do výčtu jsem zařadila především modelydostupné z webových stránek, ale i tři standalone aplikace, které si dle mého názoruzaslouží zmínku.

3.1.1 Solar System Scope

Tento pravděpodobně nejznámější model pro webové prohlížeče, dostupný na strán-kách www.solarsystemscope.com, lze zobrazit pomocí internetového prohlížeče, aleuživatel má možnost tuto aplikaci spustit za poplatek i na mobilních zařízeních čina počítači pomocí programu Adobe Air. Webová verze nabízí pohled na všechnyplanety v naší soustavě v menších vzdálenostech od Slunce tak, aby se celý modelvešel na obrazovku počítače. Model nabízí několik možností nastavení, třeba zob-razit informace o délce roku na různých planetách, možnost zrychlit/zpomalit časa tím tedy ovlivnit rychlost jejich rotace kolem vlastních os a další. Dalším možnýmvylepšením je volba zobrazení planet ve skutečném velikostním poměru.

Obrázek 1: Solar System Scope

3.1 Dostupné 3D modely Sluneční soustavy 11

3.1.2 SPONLI 3D model

Model vytvořený pro amatérské astronomy na adrese http://web.sponli.com/en/3d/zachycuje základní model Sluneční soustavy, tedy planety bez měsíců, přičemž jemožné si zobrazit jednotlivé detaily o planetách. Dalšími zajímavými nástroji nastránce je např. možnost zobrazení noční oblohy s hvězdnými souhvězdími a jejichnázvy z různých míst světa a v libovolném čase, dále také denní a noční mapu,tedy pohled na povrch Země, na kterém je znázorněna oblast, kterou v reálném časeosvětluje naše Slunce. Na stránkách je také k dispozici velké množství astrofotografií,záznamy o Sluneční aktivitě, případně také záběry z profesionálních teleskopů.

Obrázek 2: 3D model SPONLI

3.1.3 Project Metis

Model dostupný na webových stránkách http://project-metis.com/SolarSystem/ po-skytuje základní pohled na planety naší Sluneční soustavy včetně pásu astreoidůmezi Marsem a Jupiterem s možností zobrazení základních informací o vybranémobjektu. V modelu je také možné se pohybovat po vybraných ”cestách”, což zna-mená, že o veškeré ovládání se v ten moment stará webová aplikace a postupně sezaměřuje na planety v modelu v daném pořadí. Uživatel si po přihlášení také můžesestavit vlastní cestu mezi planetami.

3.1.4 NASA’s Eyes

NASA’s Eyes je soubor několika modelů, kde každý zobrazuje jiné objekty neboskupiny těles, dostupný ve formě desktopové aplikace pro operační systémy Win-dows a Mac OS X nebo ve formě mobilní aplikace pro Android či iOS. Pro spuš-tění všech modelů stačí stáhnout základní aplikaci volně ke stažení ze stránek


Obrázek 3: Projekt Metis

http://eyes.nasa.gov. Uživatel si poté může zobrazit libovolný model podle toho,o jaká tělesa má zájem. NASA nabízí podrobný pohled na planety naší Slunečnísoustavy včetně jejich měsíců prostřednictvím aplikace Eyes on the Solar System,přičemž je možné si zobrazit informace o jednotlivém objektu. Dalšími modely jsouEyes on the Earth, který vykresluje Zemi, důležité informace o ní, a také zobrazujepolohy NASA družic v reálném čase, nebo Eyes on Exoplanets, jež zachycuje planetyvně našeho solárního systému a umožňuje na něj uživateli bližší pohled. Za zmínkuurčitě stojí, že model Eyes on Exoplanets je denně aktualizován na základě novýchúdajů z družice Kepler a dat zjištěných pozorováním ze Země. Dále je možné zblízkapozorovat sondy, které jsou právě aktivní na misi – New Horizons, který se nyní blížík okraji naší Sluneční soustavy, Cassini, která obíhá mezi Saturnovy prstenci a ně-kolik dalších.

3.1.5 Celestia

Program Celestia je desktopová aplikace pro operační systémy Windows, Linux a OSX, volně ke stažení na stránkách http://www.shatters.net/celestia/. Umožňuje jinýpohled na Sluneční soustavu než ostatní modely, uživatel se v něm může pohybovatlibovolně mezi planetami, kometami a ostatními objekty. Je velmi zajímavé v němpozorovat detaily, které pozorovateli uniknou v menším modelu – např. umístěnítechnických těles (Mezinárodní vesmírné stanice, Hubblova teleskopu a sond Cas-sini, Galileo). Umožňuje pohyb ve 3D pomocí myši, klávesnice či pomocí menuobsahujícího všechny dostupné objekty v modelu, které si lze prohlédnout zblízka.Z mého subjektivního hlediska je tento model velmi zajímavý, protože umožňujejiný úhel pohledu na celou soustavu, ale zároveň ovládání v 3D prostoru pomocí


Obrázek 4: NASA’s Eyes - Eyes on the Solar System

klávesnice a myši je trochu nepraktické a není příliš intuitivní. Lepší možností ovlá-dání je používání menu, kde si lze vybrat objekt, na který program přiblíží a takto”přeskakovat” mezi různými tělesy. Tento program se stal mým hlavním důvodemv rozhodování k vytvoření modelu, který umožňuje přehled nad všemi planetamiz horního pohledu, ale neumožňuje se mezi nimi volně pohybovat.

3.1.6 Stellarium

Opět trochu odlišný pohled na Sluneční soustavu nabízí stand-alone aplikace Stella-rium, k dispozici zdarma na stránkách http://www.stellarium.org/cs/. Umožňujezobrazit vesmírná tělesa z povrchu Země, především hvězdná souhvězdí s jejich ná-zvy, viditelné planety v naší soustavě, exoplanety, ale i velmi vzdálené objekty jakomlhoviny s jejich názvy a základními údaji, přičemž má uživatel možnost zvolit sizemskou lokaci, ze které bude objekty pozorovat v reálném čase. Tato aplikace jevelmi zajímavá nejen pro amatérské pozorovatele hvězdné oblohy, ale i pro začáteč-nické nadšence, a i když neumožňuje celkový pohled na Sluneční soustavu, domnívámse, že v tomto výčtu by neměla chybět.


Obrázek 5: Celestia program

Obrázek 6: Program Stellarium

3.2 Dostupné technologie pro prezentaci interaktivního 3D obsahu 15

3.2 Dostupné technologie pro prezentaci interaktivního 3D ob-sahu

V dnešní době je k dispozici velké množství herních enginů, které se dají rozdělitna komerční nebo volně dostupné. Ty se dále dají třídit podle hlavního programo-vacího jazyka, v němž vývojáři pracují (od Pascalu přes Perl až po Objective-C),cílové platformy (Windows, Linux, Cross-platform), počtu zobrazovaných dimenzí(2D, 3D) a dalších kritérií. Nejpopulárnější herní enginy jsou vesměs komerční, bo-hužel většina jich neumožňuje export aplikace do webového prostředí, ale pět nej-populárnějších s možností vývoje her pro webové prohlížeče zobrazuje následujícítabulka.

Jméno Programovací jazykUnity C#, UnityScript, BooUnreal Engine C++BigWorld C++, PythonGameMaker GMLReach3Dx Haxe language

Tabulka 1: Seznam herních enginů s možností vývoje do webového prostředí

3.2.1 Unity 3D

Patří mezi jeden z nejpopulárnější herních enginů, první verze byla spuštěna roku2005. Zatímco prvotní verze byla omezena pouze na operační systém OS X pro vý-voj i publikaci her, v současné době umožňuje Unity podporu obrovského množstvíplatforem, konkrétně 21, a je tedy díky ní možné vyvíjet aplikace pro mobily (An-droid, iOS, BlackBerry, Windows 8, Tizen), konzole (PlayStation, Xbox, Wii U)a samozřejmě i desktopové aplikace (Windows, OS X, Linux). Další podporovanouplatformou je Unity Web Player, který je dostupný pouze na Windows a OS X a díkyníž umožňuje zobrazení aplikací na většině webových prohlížečů včetně Facebooku.Od verze Unity 5.0 je navíc možné obsah prezentovat ve webovém prostředí pomocíWebGL. Unity podporuje programování her pomocí C#, UnityScript (který odka-zuje na JavaScript, ovšem používaný v prostředí Unity) a Boo (jazyk se syntaxíinspirovanou Pythonem). Obrázek 7 zachycuje procentní podíl skriptů vytvořenýchv daných programovacích jazycích v Unity (Aleksandr, 2014).

Na základě této analýzy se od Unity 5.0 přestává podporovat dokumentacepro Boo a místo toho se klade větší důraz na zdokonalování dokumentace pro C#(Aleksandr, 2014). Nespornou výhodou Unity je její podrobná dokumentace, kteráje lehce přístupná i z vývojového prostředí, vzdělávací tutoriály a velká uživatelskázákladna, která se podílí na zodpovídání dotazů na Unity fóru. Uživatelé mají navícmožnost účastnit se diskuzí a hlasování o chystaných nových rozšířeních enginu.

3.2 Dostupné technologie pro prezentaci interaktivního 3D obsahu 16

Obrázek 7: Procentní podíl skriptů vytvořený v různých jazycích

Unity se dělí na dvě verze – komerční UnityPro a nekomerční volně dostupnou verziUnity.

3.2.2 Unreal Engine 4

Je herní engine, jehož první verze byla použita již v roce 1998 ve hře Unreal, při-čemž od této doby byl již několikrát vylepšen a doplněn. Unreal engine je hlavnímkonkurentem Unity Enginu, přičemž oba se střídavě objevují na předních příčkáchv uživatelských preferencích. V UnrealEngine lze programovat hry pomocí jazykaC++, navíc má velmi rozsáhlou základnu uživatelů, a tím pádem je k dispoziciobrovské množství návodů a již hotových doplňků do hry. Je k dispozici ve volnědostupné verzi, vývojář platí 5% ze zisku pouze v případě překročení 3000$ zisku(Doskočil, 2014).

3.2.3 BigWorld

BigWorld je především nástroj pro vytváření MMO her (Massively Multiplayer On-line Games) a virtuálních světů. Vytvořené hry jsou k dispozici na platformáchWindows PC, prohlížeči, iOS, Xbox 360 a PlayStation 3. Nejznámější publikovanouhrou z BigWorld je Game of Tanks, jež drží několik ocenění včetně Guinnessovarekordu za nejvíce online připojených hráčů na jednom MMO serveru. BigWorld jedostupný v komerční i indie verzi.

3.3 Nástroje pro 3D modelaci 17

3.2.4 GameMaker

Největší výhodou tohoto enginu je, že patří k těm jednodušším, a je vhodný pro za-čátečníky ve tvorbě 2D her. K programování je používán jazyk GML (Game MakerLanguage) se syntaxí podobnou jazyku C s možností použití i syntaxe Pascalu. Jedostupný ve třech verzích – Standard (zdarma), Professional a Master Collection,které se liší podporovanými doplňky. Jeho hlavní nevýhodou je vyšší cena v porov-nání s ostatními enginy.

3.2.5 Reach3Dx

Reach3Dx je herní engine poprvé spuštěn roku 2014. Jeho architektura je založenana OpenFL frameworku a Haxe, a umožňuje tak vývojářským týmům jednodušeupravovat a rozšiřovat výslednou aplikaci. Tento engine se především zaměřuje a jeoptimalizován pro každou platformu s možností vývoje pro Flash, HTML5, Androida iOS (Wawro, 2014).

3.3 Nástroje pro 3D modelaciV rámci mojí práce bylo nezbytné využití některého 3D modelovacího programua to nejen pro modelaci planet, ale především technických objektů, od mezinárodnívesmírné stanice ISS (International Space Station) až po družice a sondy. Stejnějako herních enginů existuje i obrovské množství programů pro modelování ve 3D,přičemž za ty profesionálnější si uživatel připlatí. V této době je dostupný už i bez-platný a kvalitní software pro 3D modelování, z nichž každý z nich se liší svýmispecifickými vlastnostmi. Některé jsou vhodné pro modelování architektonickýchobjektů (AutoCAD, Revit, Google SketchUp…), některé zas pro modelování přírody(e-on Vue). Pro začátečníky v 3D modelování jsou k dispozici programy s velmiintuitivním ovládáním a zároveň i pokročilý uživatel si vybere z široké nabídkynástrojů. Níže jsou informace o pěti nejpopulárnějších programech pro modelovánípostav a 3D konceptů.

3.3.1 Blender

Bezesporu nejpopulárnější bezplatný nástroj pro 3D modelaci s obrovskou uživatel-skou základnou a tedy i obrovským množstvím návodů na vytváření objektů, jakod profesionálů, tak od nadšenců. Většinou je používán pro vytváření animovanýchfilmů, vizuálních efektů i video her, umožňuje totiž práci s časovou osou. I kdyžpro začátečníka bez předchozích zkušeností může být Blender trochu složitý, je toopravdu užitečný nástroj, který dokonce umožňuje vytvářet samotné hry za pomocísenzorů a na ně navázaných kontrolerů.


3.3.2 Autodesk Maya

Maya, produkt firmy Autodesk, je jedním z nejpopulárnějších komerčních modelo-vacích nástrojů, které používají i profesionální filmová studia při vytváření svýchobjektů do filmů či her. Maya má velmi přizpůsobitelné uživatelské prostředí, kterési lze nastavit podle osobních preferencí, což je jedním z důvodů její velké oblibymezi tvůrci modelů. Maya je v současné době používána pro širokou škálu filmů, seri-álů a her, mezi nejznámější filmy, při kterých byla použita pro vytváření speciálníchefektů patří Game of Thrones, Frozen, The Matrix či hra Halo. Jedno z největších CGstudií Pixar používá mezi jinými také program Maya pro modelování svých postav(Estrada, 2015). Maya také získala mnoho ocenění, mezi nimi např. i akademickouodměnu od Academy of Motion Picture Arts and Sciences.

3.3.3 Autodesk 3D Studio Max

Další z profesionálních nástrojů od firmy Autodesk pro 3D modelaci, často takévyužívaný profesionálními studii pro výrobu speciálních efektů do filmů, her či re-klam. Narozdíl od nástroje Maya má 3D Studio Max kratší učící křivku, čímž je vícevhodný pro začátečníky, dále také poskytuje více nástrojů pro samotnou modelaci(D’Andrea, 2015). Program také podporuje tvorbu architektonických 3D modelůpomocí pluginů.

3.3.4 Cinema 4D

Modelovací program, který si svoji oblibu získal především intuitivním ovládáníma přehledným uživatelským prostředím a je zároveň využíván i profesionály při vy-tváření speciálních efektů k populárním americkým filmům (Iron Man, Cloudy witha Chance of Meatballs) (MaxOn, 2015). Cinema 4D také nabízí možnost výrobydynamických animací, animací postav, tvorbu vlasů a chlupů, inteligentní částicovýsystém a mnoho dalšího. Program poskytuje také několik vlastních shaderů pro de-finici vykreslování textur na sofistikovanějších površích (Anon, 2012).

3.3.5 Rhinoceros 3D

Rhinoceros od společnosti McNeel & Associates je modelovací program vhodný provytváření rozličných objektů, je možné s jeho pomocí vymodelovat komplexní po-stavičky, architektonické návrhy či strojírenské součástky. Rhinoceros dokáže vytvá-řet, editovat, analyzovat a převádět NURBS křivky, plochy a tělesa. Podpora sítía mraků bodů umožňuje vytvářet různé myslitelné tvary (Dimensio, 2015).

Program nemá tak rozsáhlou uživatelskou základnu jako např. Blender, ale i takje volně k dispozici množství návodů pro začátečníky, přičemž přímo na oficiálníchstránkách programu jsou k dispozici návody, manuály či odkaz na podrobnou do-kumentaci. Rhinoceros poskytuje základní operace pro vytváření 3D modelů a pod-


poruje rozsáhlé množství formátů. Neposkytuje možnosti pro práci s časovou osoua tedy ani tvorbu animací.

4 MATERIÁL A METODIKA ZPRACOVÁNÍ 20

4 Materiál a metodika zpracováníTato kapitola je rozdělena na dvě části, tedy na část zabývající se vývojem samotnéaplikace Sluneční soustavy a na část popisující implementaci do webového prostředí.

4.1 Vývoj aplikace4.1.1 Modelovací nástroj Rhinoceros 3D

Nástroj Rhinoceros byl zvolen pro účel vytvoření této práce především z toho dů-vodu, že už s ním mám zkušenosti a také je velmi vhodný na vytváření přesnýchtechnických modelů. Dle mého názoru má Rhinoceros intuitivní ovládání, a proto jevhodný i pro začátečníky v 3D modelování.

Program Rhinoceros používá pro reprezentaci křivek a povrchů NURBS (Non-Uniform Rational B-Splines), které popisují matematickou reprezentaci těchto geo-metrických objektů pomocí matematických formulí (Kříž, 2008). Unity nepodporujeimport objektů definovaných v NURBS, je tedy potřeba objekty konvertovat na Me-she skládající se z optimálního počtu polygonů.

4.1.2 Herní Engine Unity

Program Unity 3D je dostupný pro operační systémy Windows, Linux i MacOSv nejnovější verzi verzi 5.3. Dělí se na Personal edition (Indie), kterou je možnévolně stáhnout z oficiálních stránek Unity a na Professional version (Pro), u které jezapotřebí zakoupit licenci. Toto je jedna z mála nevýhod Unity oproti Unreal Enginu,který je dostupný zdarma se všemi funkcemi a rozšířeními (v prostředí Unity nemáuživatel bez licence možnost využívat např. sdílení pomocí cloud technologie, přístupke zdrojovému kódu či jiné).

Vývojář v Unreal Enginu platí poplatek pouze za velmi specifických podmínek(pokud se z jeho díla stane komerční produkt bude Unreal požadovat 5% z hrubýchtržeb) (Doskočil, 2014). Komerční verze Unity nabízí množství rozšíření, která ovšemve většině případů nejsou pro úspěšnou aplikaci nutná. Unity vyzývá své uživatelek zasílání zpětné vazby ohledně jejich softwaru a poskytuje každé 3 měsíce novouverzi programu, tudíž je velká šance, že jsou jakékoliv menší chyby v další verziodstraněny. Příkladem může být možnost vývoje pro platformu WebGL; o tomtoproblému se zmiňuji v následující sekci zabývající se vývojem modelu pro webovoučást.

4.1.3 Global Illumination

Moderní hry benefitují z GI (Global Illumination), což je skupina algoritmů, technika modelů, které se používají pro realistické vykreslování světel v 3D prostoru. Daloby se říct, že GI v podstatě definuje proces, který simuluje nepřímé osvětlení (jakoodrazy světla či míchání barev) (Digital-Tutors Team, 2012). Zabezpečuje nejenom

4.2 Webová část 21

vykreslování světla vycházejícího ze zdroje (direct illumination), ale i odrazy světlaz jiných objektů (indirect illumination). Toto je samozřejmě velmi náročné pro za-řízení, na kterém se výsledná aplikace nachází a proto herní enginy včetně Unityposkytují techniky, jak se s tímto problémem vypořádat ještě před spuštěním hry,než za běhu hry.

4.1.4 Light Mapping

Vykreslování světla v Unity může být tvořené během hry (tedy realtime, které jevhodnější pro méně komplexnější hry), pomocí světelných map (kdy jsou informaceo světle uloženy v texturách statických objektů), nebo kombinací obou těchto tech-nik.

Lightmapping, nebo také Baked Light, je rozšíření podporované v Unity a vevětšině herních enginů, umožňující rychlejší vykreslení hry za pomocí namapovánísvětel a stínů do textur. Toto je vhodné především pro hry s velkými scénami, kdevypočítávání světla může hru výrazně zpomalit. Pro tyto komplexnější hry je protodoporučeno ”zapéct” informace o světle působícím na statické objekty do speciálníchsvětelných textur, Light Maps, které překrývají objekty ve scéně, viz Obrázek 8(Narpas, 2011).

Obrázek 8: Krychle s jednoduchou light mapou

Tímto způsobem se vypočítání světel a stínů provádí jen jednou, což velmipozitivně ovlivňuje rychlost hry.

4.2 Webová část4.2.1 Rozvržení stránky

Stránka s výslednou aplikací byla rozdělena horizontálně na poloviny, přičemž levápolovina patří vygenerovanému Unity obsahu a pravá polovina je určena pro panels informacemi o modelu či pro prvek <iframe> s měnícím se obsahem. Toto místo


bylo použito pro zobrazení informací o modelu, především pro popsání velikostíplanet ve scéně a vzdáleností mezi nimi. Při spouštění scén s jednotlivými planetamije zobrazena na tomto místě příslušná stránka z Wikipedie. Nad těmito dvěmačástmi jsou umístěné odkazy, které zajistí spuštění příslušné scény pro návštěvníkastránky po kliknutí na odkaz. Tímto způsobem se může uživatel podrobněji podívatna jednotlivé planety a případně jejich měsíce. Pokud se ve scéně vyskytuje víceobjektů, vespod stránky se objeví jejich seznam. Ve všech případech jde o vypsanénázvy planet a jejich měsíce. Po kliknutí na odkaz se jménem příslušného tělesa sezobrazí ve scéně šipka ukazující na tento objekt pro lepší orientaci uživatele.

4.2.2 Responsivní design

S přibývajícím množstvím zařízení schopných zobrazovat webový obsah vzrůstái nutnost řešení otázky responsivního designu, který se stará o to, jak se bude danáwebová stránka zobrazovat na zařízeních s odlišnou velikostí obrazovky. V současnédobě musí každý tvůrce při vytváření webové stránky počítat nejenom s uživatelis různými velikostmi dispeje u notebooku či stolního počítače, ale také s uživatelizobrazujícími stránku na chytrých mobilech či tabletech. Řešení se nabízí mnoho,například pomocí nové layout metody Flexboxu a obrovského množství frameworků.Pro účel vytvoření této práce jsem zvolila framework Foundation.

Rozložení výsledné webové stránky je rozčleněné horizontálně na dvě stejnéčásti, přičemž levý sloupec zaujímá Unity aplikace a pravý je vyplněn prvkem<iframe>, který se stará o zobrazování Wikipedie pro jednotlivá tělesa (případněpro úvodní informace o modelu). Šířka prvku <canvas> s vygenerovaným obsahembyla zmenšena z původních 960px×600px na 795px×600px, pro optimální zobrazeníjak interaktivního Unity obsahu, tak informačního panelu stránky.

4.2.3 Foundation framework

Framework je v podstatě standardizovaný set konceptů, praktik a kritérií pro řešeníjednoho podobného problému. V případě webových stránek se jedná o několik sou-borů a složek obsahujících standardizovaný kód (v HTML, CSS, JS či jiném jazyce),které jsou používány pro podporu vytváření webových stránek. Foundation je front-end framework (zaměřuje se na uživatelovo rozhraní), jehož základem (jako ostatněskoro každého frameworku pro tvorbu responzivního designu) je mřížka. Ta je veFoundation tvořena 12ti sloupci, jejichž šířka není dána staticky, ale v procentech.Různé kombinace sloupců jsou přiřazené třídám, takže pro vytvoření layoutu nenínutné napsat ani řádek CSS kódu, ale stačí pouze přiřadit prvkům správnou tříduv HTML kódu (Johnson, 2012). Šířku zobrazovaného obsahu tedy nastavíme při-dáním příslušné třídy danému prvku <div>. Tímto způsobem, tedy použitím třídy.row a kombinací tříd .small/medium/large-x pro jednotlivé sloupce lze definovat ja-kýkoliv layout. Třídy .small/medium/large-x slouží k vytváření různých layoutů prozařízení s různou velikostí displeje. Pokud chceme například 2 sloupečky pro malá


zařízení a 3 sloupce pro střední a velká zařízení, lze toho dosáhnout definovánímvíce tříd pro ten samý sloupec.

Obrázek 9: Použití frameworku Foundation. Zdroj: (Sevilleja, 2014)

Obrázek 10: Použití frameworku Foundation - výsledek. Zdroj: (Sevilleja, 2014)

4.2.4 Cílová platforma

Při začátku psaní této práce Unity 4.x nepodporovala jinou prezentaci vygenerova-ného obsahu do webového prostředí jiným způsobem než pomocí Unity pluginuWeb Player.

Zvolením této možnosti je Unity obsah načten do prohlížeče pomocí Unity WebPlayer pluginu, přičemž jeho komunikace s HTML kódem probíhá díky vygenero-vanému skriptu nazvaném UnityObject2, který musí být načten jako první, což jezajištěno na začátku vygenerovaného HTML souboru v sekci <head>. Tento souborje možné upravit (např. přizpůsobit instalační proces). I když je možné tento skriptexportovat spolu s ostatními soubory stránky na vzdálený server, lepším řešením jenačíst tento skript přímo z Unity serveru pro podporu HTTPS.

Od Unity verze 5 přibyla nově v seznamu platforem, pro které lze vytvářetaplikace, možnost vývoje pro WebGL.

WebGL je grafická knihovna vestavěná do prostředí prohlížeče, která umožňujeprogramům v JavaScriptu 3D renderování uvnitř prohlížeče bez nutnosti použitíjakéhokoliv pluginu. Obsah na webové stránce může použít API založené na OpenGLES pro vykreslení 3D grafiky do HTML5 prvku <canvas> (Echterhoff, 2014).

Unity WebGL do určitého stupně podporují všechny hlavní webové pro-hlížeče, přičemž podporované vlastnosti výsledné hry se liší mezi jednotlivýmiprohlížeči. Tato omezení se týkají jednotlivých verzí nejpopulárnějších prohlí-žečů a vzhledem k jejich rychlému vývoji je očekáváno, že se v budoucnostizmění. Například optimální podporu FullScreen módu (implementací HTML5 API


Element.requestFullScreen) neposkytuje prohlížeč Apple Safari 8 (a výše) – jemožné zobrazit aplikaci přes celou obrazovku, ovšem Safari neumožní aplikaci přijí-mat vstup z klávesnice. Podrobnější informace je možné nalézt v Unity dokumentaci.Správné fungování WebGL na různých platformách také závisí na několika fakto-rech (verze operačního systému, potřebné ovladače…) – tento pojem je znám jakoBlacklists/Whhitelists.

WebGL obsah není momentálně podporovaný na mobilních zařízeních. Na těchvýkonnějších může fungovat optimálně, ovšem spousta současných zařízení není do-statečně výkonná na spuštění tohoto obsahu a nemá ani dostatečné množství paměti.V těchto případech je uživateli zobrazena varovná hláška. Podpora Unity obsahu proWebGL mobilní zařízení v současné době není žádná, i když eventuálně do budouc-nosti není vyloučena. V současné době mobilní webové prohlížeče nejsou dostatečněvyvinuté pro komplikovanější WebGL aplikace (Tautvydas, 2015).

Srovnání1. Komunikace

Výhody použití Unity Web Playeru jsou více zřetelné na straně vývojáře apli-kace, především protože komunikace mezi webovým prohlížečem a obsahemv Unity probíhá velmi přímočaře a je velmi jednoduchá na implementaci. Vo-lání funkcí definovaných uvnitř Unity z webového prostředí lze docílit velmilehce použitím definovaných funkcí volaných JavaScriptem.Následující příklad zachycuje volání funkce LoadNewSceneFromWeb s paramet-rem _mercury, která se nachází ve skriptu, jež má jako komponentu nastavenýobjekt _Manager. Objekt s takto přichyceným skriptem se musí nacházet vescéně, která je v daný moment zobrazovaná v prohlížeči. Tato funkce spustíz webového prohlížeče novou scénu zobrazující planetu Merkur po kliknutí naodkaz.$("a.mercury").click ( function(){

u.getUnity().SendMessage("_Manager","LoadNewSceneFromWeb", "_mercury")});

Volání z prohlížeče do Unity při použití WebGL probíhá velmi podobně, jedinýrozdíl je pouze v tom, že není nutné zajišťovat odkaz na objekt Unity webplayer.$("a.mercury").click ( function(){

SendMessage("_Manager","LoadNewSceneFromWeb", "_mercury")});

Ovšem při opačném směru komunikace, tedy z Unity do webového prostředí, jezjevná výhoda použití pluginu Web Player, s nímž lze ze skriptu psaném v ja-zyce C# (příp. JavaScript) volat funkce napsané pro webovou stránku v Ja-vaScriptu velmi jednoduše. Následující příkaz spustí z prostředí Unity funkci


LoadNewSceneFromUnity s parametrem _iss, kterou je potřeba mít definova-nou v jazyce JavaScript pro webovou stránku se spuštěnou aplikací.Application.ExternalCall("LoadNewSceneFromUnity","_iss")

Tento proces za použití WebGL probíhá mnohem komplikovaněji. V tomto pří-padě je potřeba vytvořit kód pro WebGL plugin a umístit jej do JavaScriptsouboru k samotnému projektu do složky Assets/Plugins/WebGL s použitímpřípony .jslib. V tomto skriptu je třeba definovat potřebné funkce syntaxí:var MyPlugin = {

ZmenIFrame: function(str) {str = Pointer_stringify(str);if (str == "iss") {

showFrame("https://cs.wikipedia.org/wiki/Voyager_1");}

}};mergeInto(LibraryManager.library, MyPlugin);

Takto definovaná funkce zavolá v JavaScriptovém souboru globální funkcishowFrame, která změní obsah HTML prvku <iframe> na požadovanoustránku.V C# skriptu, ze kterého budou tyto funkce volány, je třeba includovat kni-hovnu System.Runtime.InteropServices a poté tyto funkce definovat:[DllImport("__Internal")]private static extern void ZmenIFrame(string str);

Po tomto je možné funkce volat jednoduše pomocí jejich názvu.Hodnoty jednoduchého číselného typu lze takto posílat mezi funkcemi. Jinédatové typy budou předány jako ukazatele na tyto hodnoty a proto jenutná jejich následná konverze. Pro textové řetězce je možné použít funkciPointer_stringify. Pro pole primitivních datových typů, Unity překladač em-scripten nabízí různé ArrayBufferViews do svojí dynamicky alokované paměti(heap) podle velikosti a možnosti znaménka: HEAP8, HEAPU8 (unsigned),HEAP16…(Unity, 2015).

2. Hlídání pamětiDalším bodem, který musí vývojář aplikace pro WebGL ohlídat je rozsah pa-měti, který bude dostupný pro WebGL aplikaci. Tato hodnota se dá nastavitv Unity v sekci Build Settings (Player Settings), ale je potřeba ji volit uváženě.Pokud je příliš nízká, prohlížeč zobrazí out-of-memory varování, protože na-čtený obsah a scény budou potřebovat více paměti, než množství paměti, kterébude dostupné. Ovšem pokud bude hodnota příliš velká, některé prohlížeče naněkterých zařízeních nebudou schopny zobrazit obsah, protože prohlížeč nebudemít k dispozici požadované množství paměti (Unity, 2015). O tomto problému


se dále zmiňuji v kapitole Testování. V případě použití pluginu Web Player nenínutné tento problém řešit.

3. Použití šablonObě cílové platformy, Unity Web Player i WebGL poskytují možnost vyu-žití vlastních šablon, jež jsou umístěné ve specializované složce projektu (As-sets/WebGL Templates či Assets/WebPlayerTemplates). Každá složka s vlastníšablonou obsahuje soubor index.html spolu s ostatními soubory, jež výslednástránka potřebuje (skriptové soubory, styly v CSS, soubory frameworku atd.).Standardně jsou k dispozici od Unity šablony, jež jsou vhodné spíše pro testo-vání. Při používání komunikace mezi prohlížečem a Unity jsou nutné prvky, ježbudou spouštět nějaké události. S použitím šablon není nutné pro každý novýbuild projektu přepisovat celý nově vygenerovaný HTML soubor, ale pouzev Build Settings zvolit vybranou šablonu. Během sestavování projektu Unityhledá speciální řetězce a nahrazuje je hodnotami z editoru. Tyto řetězce zahr-nují například název aplikace, její rozměry a další, celý seznam lze nalézt nastránkách Unity dokumentace, přičemž je možné vytvořit své vlastní značky.Tyto značky jsou uvozeny znakem % a lze díky nim například změnit název hrynázvem zvoleným v editoru – MojeAplikace.

<title>%UNITY_WEB_NAME%</title>Toto bude ve výsledném souboru index.html nahrazeno<title>MojeAplikace</title>

Při výstupu do WebGL je nutné, aby výsledný HTML soubor obsahoval prvek<canvas> s definovaným id="canvas", do kterého se vykreslí výsledná hra.Dále je potřeba do souboru šablony vložit značku %UNITY_WEB_LOADER_GLUE%.Sem vygeneruje Unity skript s objektem Module, jenž udržuje nutné informaceo potřebné velikosti paměti pro WebGL obsah, zacházení s chybami či odkazypro aplikaci.

var Module = {TOTAL_MEMORY: 629145600errorhandler: null,compatibilitycheck: null,

};

Nevýhodou použití Unity pluginu oproti WebGL je bezesporu nutnost instalacetohoto pluginu do prohlížeče a závislost na jeho správně proběhlé instalaci. Zatímcopro vývojáře Unity je výhodnější a jednodušší z hlediska implementace použít UnityWeb Player, pro koncového uživatele výsledné aplikace už to není tak výhodné. Musísi poradit s instalací, která se, především méně zkušenému uživateli nemusí úspěšněpovést a také s faktem, že Google Chrome od roku 2014 nepodporuje framework propluginy NPAPI, na kterém je plugin Web Player postavený a tudíž je tak nedostupnýpro jeden z nejpopulárnějších webových prohlížečů.


Možnost exportu pro platformu WebGL byla po většinu vývoje této aplikace vefázi ”Preview”, což znamená, že je možné publikovat hry na platformu WebGL, aleje třeba počítat s určitými omezeními ve vlastnostech buildu a v kapacitě prohlížečů(Echterhoff, 2014). Nově, od verze Unity 5.3 (vydané 7.12.2015) je WebGL poprvéoficiálně na seznamu plně podporovaných platforem. Od této verze také vývoj proplugin Unity Web Player dostal nálepku deprecated a od verze 5.4 (plánované vydánív březnu 2016) nebude již podporován (Berger, 2015).

Toto také mimo jiné přispělo k mému rozhodnotí publikace aplikace do prostředíWebGL.

5 IMPLEMENTACE 28

5 ImplementacePopis samotné výroby scén aplikace v prostředí Unity 3D a následné vyexportováníaplikace.

5.1 Modelace objektů5.1.1 Vesmír

Unity umožňuje vykreslení pozadí hry pomocí tzv. Skyboxu. Jedná se o šesti-strannou krychli, která obaluje vlastní scénu hry a na všech těchto stranách mánanesené textury požadovaného pozadí. Pro vytváření skyboxu existují různé me-tody, lze použít volně dostupné i komerční programy pro generování textur, pluginyči shadery pro 3D modelovací programy či je dokonce možné pro zkušenějšího uži-vatele skybox vytvořit ve 2D fotoeditoru. Pro vytvoření vesmírného skyboxu promoji práci jsem použila volně dostupný program SpaceScape od Alexe Petersona(dostupné na stránkách http://alexcpeterson.com/spacescape/). Program poskytujeněkolik tzv. šablon, už předem napojených textur, které dohromady tvoří celý sky-box a ze kterých si uživatel může vybrat tu požadovanou pro svůj projekt. Programtaké umožňuje barevně upravovat jednotlivé vrstvy textur, třeba barvy mlhovin čihvězd, případně je možné vytvořit svou vlastní vrstvu vesmíru.

5.1.2 Planety

Unity nabízí několik základních předem namodelovaných tvarů, včetně koule. I kdyžse Unity koule skládá z velmi nízkého počtu polygonů a při bližším přiblížení k ob-jektu lze rozlišit polygony a koule se tudíž jeví trochu jako hranatá, bylo vhodné jipoužít (místo vytváření v 3D modelovacím nástroji) z důvodu snížení místa v pa-měti, kterou aplikace výsledná bude zabírat.

Všechny planety a měsíce ve všech scénách tedy byly vytvořeny pomocí Unity,pouze u planet s prstenci (Saturn, Uran) byly tyto prstence vytvořeny v programuRhinoceros 3D a dále zkompletovány do jednoho herního objektu v prostředí Unity.Měřítka planet ve scéně zobrazující všechny objekty ve Sluneční soustavě jsou upra-vené pro jejich optimální zobrazení. V jednotlivých scénách jsou velikosti měsícůvzájemně ve stejném poměru, pouze jejich vzdálenosti od planet jsou upraveny tak,aby bylo zachováno jejich pořadí podle vzdálenosti od dané planety.

U modelování prstenců planety Saturn jsem se poprvé potýkala s problémemdefinování normál ploch, o kterých se více zmiňuji v následující podkapitole.

Pro vytvoření Slunce byla z několika dostupných řešení nakonec vybrána mož-nost přidání Point light do středu Sluneční soustavy a aplikování čočky na toto světlo(Lens Flare). Použitá čočka je z volně dostupného Asset balíčku od tvůrců Unity(zdarma ke stažení na https://www.assetstore.unity3d.com/en/#!/content/5).

5.1 Modelace objektů 29

Obrázek 11: Rozdíl mezi Unity koulí složenou z malého počtu polygonů a koulí vytvořenouprogramem Rhinoceros 3D s větším počtem polygonů

ShaderyPro vykreslování objektů Unity používá tzv. shadery, což jsou v podstatě skripty

psané v deklarativním jazyce zvaném ShaderLab, který deklaruje různé vlastnosti,které popisují daný shader (např. jaké vlastnosti shaderu budou zobrazené v inspek-toru materiálů, jaké je třeba činit ústupky ze strany hardwaru atd.) (Kerlow, 2011),zatímco skutečný kód shaderu je napsán v jazyce Cg nebo HLS, které umožňují sdělitgrafické kartě, jak nakonfigurovat vykreslování scény (Unity, 2015). Pro vykreslenívšech planet Sluneční soustavy jsem vycházela ze dvou volně dostupných shaderůod Matta Mechtleyho (Mechtley, 2012). Jeden z nich jsem použila pro planetu Zemia postupně upravila pro ostatní terestrické planety (Merkur, Venuše, Mars) a plynnéobry (Jupiter, Saturn, Uran, Neptun), které nemají rozmanitý povrch a tedy nenípotřeba pro ně vytvářet bump mapy. Na textury shaderů jsem použila především vy-sokorozlišné fotky z NASA, které jsou volně ke stažení na jejich stránkách. Z těchtotextur jsem potom vytvořila bump mapy pomocí pluginu NormalMap obrazovéhoeditoru Gimp.

5.1.3 Kosmická zařízení vyrobená lidmi

Z obrovského výčtu technických objektů vytvořených lidmi ve vesmíru jsem se roz-hodla pro modelaci pouze několika z nich, především těch nejpopulárnějších, pří-padně z nějakého hlediska výjímečných. Mezi tyto objekty jsem zařadila Mezinárodnívesmírnou stanici, Hubblův teleskop, sondy Voyager 1, Cassini, New Horizons, Gal-lileo a družici Rosettu. Tato zařízení se nezobrazuji ve scéně se Sluneční soustavou,ale v samostatných scénách, na které se uživatel dostane pomocí grafického rozhranímodelu.

Jak bylo zmíněno již v předešlé podkapitole o modelování planet, také tady bylonutné řešit problém směru normál v 3D prostoru. Tento problém bylo zprvu obtížné

5.1 Modelace objektů 30

Obrázek 12: Vztah mezi 3D modely, materiály a shadery v Unity

specifikovat a vyřešit, protože objekty vytvořené v programu Rhinoceros vypadají vevývojovém prostředí i po vyrenderování kompaktně a tak, jak byly pomocí nástrojůvytvořené, ale po importu do enginu Unity (či v podstatě do jakéhokoliv jinéhonástroje pro prezentaci 3D obsahu) jsem narazila na problém, že některé plochybylo možné vidět pouze z jedné strany. Toto ilustruje následující obrázek sondyNew Horizons.

Tento problém se týkal i ploch, které měly stanovenou alespoň minimálnítloušťku stěny. Toto bylo způsobeno špatně definovanými normálami objektu. ”Nor-mály jsou kolmé, referenční body na povrchu 3D modelu a definují, jestli se plochanachází na povrchu nebo vevnitř. Invertovaná normála ukazuje špatným směrema počítači říká, že se plocha nachází vevnitř, i když tomu tak není” (Futur3D, 2015).V programu Rhinoceros je možné normály jednotlivých ploch upravovat příkazemDir, jenž zobrazí směr normál dané plochy, které je pak možné invertovat příkazemFlip.

Toto je třeba provést pro každou plochu, kterou v Unity nejde vidět zvenčí.Takto vytvořené objekty bylo možné exportovat ve formátu .FBX, kde stačilo

vymezit počet polygonů, ze kterých se planeta bude skládat. Protože Rhinoceros3D jako vertikální osu používá osu z, je nutné po importu všechny modely otočito -90° po ose x; tedy všechny kromě planety Uran, která má jako jediná rotační osutéměř v rovině, ve které planeta obíhá. Unity podporuje formáty 3D objektů .OBJ

5.2 Uživatelské prostředí 31

Obrázek 13: Ukázka špatně směrujících normál u objektu

i .FBX, ale pro účely webové aplikace jsem zvolila druhý zmíněný z toho důvodu,že poskytuje větší kompresi souborů a tudíž vyexportované modely nezaberou to-lik místa, což výrazně urychlí načítání výsledné aplikace při zachování dostatečnékvality modelu.

5.2 Uživatelské prostředíUnity umožňuje od verze 4.6 vytvářet GUI prvky pomocí jejich nového GUI systému.Lze použít Unity předdefinovaná tlačítka, slidery, scrollbary či je možné vyrobitsvá vlastní. Při implementaci GUI prvků se využívá herního objektu Canvas (čispíše komponenty Canvas), který kontroluje, jak jednotlivé prvky budou vykresleny.Canvas je nezbytný pro vytváření grafických elementů, a i při vložení samostatnéhotlačítka, scrollbaru nebo jiného prvku do scény, Unity automaticky vloží nový Canvasdo hierarchie objektů a udělá tyto elementy jeho potomky. Při vytváření GUI tedymusí být ve scéně minimálně jeden herní prvek Canvas, nicméně, může jich být vescéně více. Toto je velmi výhodné při implementaci složitějšího UI s více prvky,kde je lze členit podle funkčnosti a přepínat jejich viditelnost pouze při úpraváchvelikostí či pozice.

I když jsou defaultní Unity prvky uživatelsky přívětivé, rozhodla jsem se vy-tvořit vlastní. Na tlačítka jsem použila textury vytvořené pomocí fotoeditoru Gimpa vyexportovala jako Sprite textury s různými hodnotami transparentnosti pro různéstavy tlačítka (Highlighted, Pressed, Disabled).

5.2 Uživatelské prostředí 32

Obrázek 14: Příkaz Dir v prostředí Rhinoceros 3D

5.2.1 Úvodní obrazovka

První scénu, kterou uživatel vidí při spuštění aplikace je uvítací obrazovka s možnostívolby, jakou scénu si přeje spustit. Události jsou na jednotlivé UI prvky navázanépomocí Event Trigger komponenty, která je součástí Unity. Prvky UI, u kterýchse očekává, že budou vykonávat nějakou funkci, mají automaticky přiřazenou kom-ponentu, jež ji umožňuje z prostředí editoru jednoduše přiřadit. To se dá provéstpřiřazením objektu, jež má k sobě připojený skript s požadovanou funkcí.

Pro prvky, pro něž není funkce typická (například Image), slouží komponentaEvent Trigger, jenž přiřazuje události podobným způsobem.

5.2.2 Model Sluneční soustavy

Samotná scéna zobrazující model umožňuje pohled na všechny planety obíhající ko-lem Slunce. Pro přehlednost modelu bylo vhodné zobrazovat popisky jednotlivýchplanet. Popisek se zobrazí po přejetím kurzorem přes příslušnou oběžnou dráhuplanety a zobrazí se vždy poblíž planety, přičemž s ní pokračuje v oběhu. Aby senemusel uživatel pracně snažit zobrazit popisek při přejetí kurzorem nad úzkou or-bitou, bylo třeba zvětšit tuto plochu. Toho bylo možné docílit vymodelováním orbitv programu Rhinoceros o stejném průměru, ale mnohonásobně větší tloušťce. Tytoorbity byly umístěny do modelu s neaktivní komponentou Mesh Renderer, aby ne-byly viditelné. Těmto orbitám bylo potřeba přidat komponentu Mesh Collider,která je schopná zaznamenávat pohyb kurzoru myši nad objektem. Je známo, žepoužívání Mesh Collider místo Collideru vytvořeném pomocí primitivních tvarů(Sphere Collider, Box Collider, Capsule Collider…) velmi negativně ovliv-

5.3 2D hra Přistávání na měsíci 33

Obrázek 15: Herní objekt Canvas s přiřazenou komponentou Canvas

ňuje výkon výsledné aplikace, ale tento efekt není velký při použití komponenty nastatické objekty, což bylo v tomto případě. Zobrazování jednotlivých popisků planetbylo poté možné zobrazovat a schovávat pomocí funkcí OnMouseOver a OnMouseExit.

V této obrazovce se také nachází Menu, kde si lze zobrazit informace o jednot-livých planetách a technických modelech nacházejících se v aplikaci. Po kliknutí naobrázek se spustí příslušná scéna zobrazující daný objekt.

5.2.3 Scény s jednotlivými objekty

Tyto scény mají jednotné 2D prvky zobrazující informace o interaktivitě dané scény,tedy především informují, jak ovládat příslušný objekt. Pro sondu Voyager 1 jezobrazen také v levém dolním rohu náhled zprávy, jenž byl přidán k zařízení předstartem. Ve scéně s New Horizons je zase po najetí myši na planetu Pluto, která senachází v dáli, zobrazen její popisek.

5.3 2D hra Přistávání na měsíciSoučástí aplikace je i 2D hra Přistávání na Měsíci, na kterou se lze dostat z úvodníobrazovky. Hra má tři levely obtížnosti (Easy, Medium, Hard), přičemž je při spuš-tění hry uživatel vždy vyzván ke zvolení obtížnosti.


Obrázek 16: Přiřazení funkcí prvkům GUI – Objekt GameController s přiřazeným skrip-tem LandingController

Při spuštění hry začne raketa padat volným pádem a hráč má za úkol zbrzditpád podržením mezerníku. Tímto ovšem také spaluje palivo, což si musí hráč ohlídatv levém horním rohu.

Jednotlivé úrovně se od sebe liší velikostí intervalu proměnné speed, která de-finuje hodnotu, ve kterém je možné úspěšně přistát s raketou na povrchu Měsíce.Tato proměnná uchovává informaci o rychlosti lodi hráče, přičemž zahrnuje do tétohodnoty také sílu gravitace. Pokud se hodnota vyskytuje ve stanoveném intervalunutném pro úspěšné přistání a zároveň se hráč nachází v určitém intervalu hodnotna ose y (tedy je blízko povrchu), může úspěšně přistát. Pokud dopadne raketa napovrch příliš prudce (tedy za vysoké rychlosti nacházející se mimo interval) či dojdehráči palivo, raketa se rozbije.

Nejjednodušší úroveň je definována největším rozpětím hodnot rychlosti, vekteré může hráč úspěšně přistát aniž by rozbil svoji vesmírnou loď. Tento rozptyl sepostupně zmenšuje pro ostatní, těžší úrovně hry.

O veškerou logiku hry, se z důvodu přehlednosti, stará jediný skript, Landing-Controller.cs, jenž je přiřazený jako komponenta prázdnému objektu.

Pro vytvoření co nejlepšího efektu jsem se rozhodla při běhu hry posouvatSprite texturou povrchu měsíce o velmi malou zápornou hodnotu po ose x. Na tomtopovrchu se zároveň zobrazuje stín, aby hráč měl představu, kde může přistát. Stínje realizován pomocí jednoduchého napůl transparentního Sprite obrázku, jenž měnísvoji velikost podle polohy rakety na ose y v určitém intervalu.

Kamery použité pro renderování 2D hry je vhodné nastavit do Projection móduOrthographic, který zajišťuje, že kamera objekty vyrenderuje bez jakéhokoliv smyslupro perspektivu. V této scéně se nachází celkem tři kamery, z nichž každá vykresluje


Obrázek 17: Zvětšené orbity s Mesh Colliders

jiné objekty, podle vrstvy, do níž tyto objekty přísluší. Jedna kamera slouží prorenderování Sprite textury povrchu měsíce, druhá pro vykreslení hráče a poslednípro zobrazení všech ostatních objektů, včetně prvků GUI. Při používání více kamerve scéně je především důležité si ohlídat, na jakou hloubku jsou jednotlivé kamerynastavené. Kamery s nejnižší hodnotou se renderují jako první a jsou tedy vhodnétřeba pro vykreslování prvků v pozadí a kamery s vyšší hodnotou se renderují teprvepotom.

Pro zatraktivnění aplikace pro konečného uživatele byl přidán objekt ParticleSystem, jenž obstarává zobrazení raketových spalin, které se tvoří při spalování pa-liva, tedy při stisknutí mezerníku.

Simulace tohoto smogu byla vytvořena upravením jednotlivých modulů tétokomponenty. Modulů pro úpravu je opravdu velké množství, takže nebylo ani nutnévytvářet vlastní texturu částice. Efektu spalování paliva motorem bylo možné do-sáhnout změnou velikosti části v průběhu hry a změnou jejich barvy.


Obrázek 18: Hra Přistávání na Měsíci – zobrazení scény včetně kamer a Systému částic

6 EXPORT VÝSLEDNÉ APLIKACE 37

6 Export výsledné aplikacePro překlad herního kódu (napsaném v C# nebo UnityScript) do JavaScriptu je vy-užívána technologie IL2CPP. IL2CPP převede kód na odpovídající C++ soubory,jenž je poté možno zkompilovat pomocí jakéhokoliv C++ překladače – např. Em-scripten do JavaScriptu. (Paleček, 2013).

Pro spuštění aplikace pro prostředí WebGL, je Unity runtime kód (v C neboC++) pomocí Emscripten překladače křížově přeložen (cross-compiled) do Ja-vaScriptu (asm.js).

Při vytváření buildu aplikace pro platformu WebGL je pravděpodobně nejdůle-žitější nastavení velikosti paměti, jakou daná aplikace dostane. ”WebGL obsah budespuštěný v prostředí internetového prohlížeče, takže jakákoliv potřebná paměť jímmusí být alokovaná a musí se také vyskytovat uvnitř paměťového prostoru prohlížeče.Množství dostupné paměti se liší podle prohlížeče, operačního systému a použitéhozařízení. Mezi určující faktory patří, jestli prohlížeč je 32 či 64-bitový proces, zdapoužívá pro jednotlivé záložky samostatné procesy nebo jestli obsah sdílí paměťovýprostor se všemi ostatními otevřenými záložkami a také kolik paměti vyžaduje Ja-vaScript engine prohlížeče ke zparsování kódu” (Unity, 2015).

Unity využívá paměť Unity Heap pro ukládání všech stavů hry, objektů a ak-tuálně načtených herních zdrojů a scén (Unity, 2015). Tuto hodnotu lze nastavitpodle potřeby před buildem hry v sekci Player Settings nebo po buildu přímo vevygenerovaném html souboru. Protože je potřeba aby tuto paměť alokoval prohlížeč,je potřeba ji nastavit na minimální hodnotu, která je ale zároveň dostatečně velkápro veškerý potřebný obsah.

Pro moje účely bylo nutné nastavit tuto hodnotu na 700MB. Při nižší hod-notě totiž aplikace byla velmi nestabilní a některé složitější scény (především sa-motný model Sluneční soustavy) se nepodařilo načíst. Velikost paměti dostupné proWebGL runtime je také možné nastavit přímo v souboru index.html, kde se na-chází vygenerovaný kód v JavaScriptu, který tuto hodnotu definuje v proměnnéTOTAL_MEMORY. Při vybrání WebGL jako výsledné platformy, Unity sama vy-generuje soubor index.html. Ten se liší podle zvolené šablony (případně vlastnídefinované šablony), ale vždy musí obsahovat prvek <canvas>, do kterého se vy-kreslí výsledná aplikace.

Do nové verze 5.3 Unity generovala složky Release a Compressed, přičemž je-jich obsah byl stejný, pouze složka Release nebyla zkompresovaná a nebyla tedyvhodná pro načítání obsahu aplikace ze vzdáleného serveru. Nově Unity vygenerujepouze jednu složku (podle nastavení Buildu na Development či Release build), kteráobsahuje vyprodukované soubory. Ve složce se nachází soubor UnityLoader.js,který je potřebný k načtení Unity obsahu do webové stránky. Dále také souborProjekt.data, jenž obsahuje všechny nutné soubory k aplikaci (Assets) a scény.A nakonec, součástí složky jsou i soubory Projekt.js, který obsahuje kód pro sa-motný WebGL přehrávač a Projekt.js.mem, jenž obsahuje binární obraz pro inici-alizaci paměti pro přehrávač (heap memory) (Unity, 2015).

6 EXPORT VÝSLEDNÉ APLIKACE 38

Samotnou aplikaci bylo třeba co nejvíce zmenšit aby na její stažení nemuseluživatel čekat moc dlouho. Při vytvoření WebGL buildu se všechny scény a souborypotřebné pro hru uloží do .data souboru, který bude stáhnut před spuštěním samotnéaplikace a jako nezkomprimovaná data budou udržována v paměti prohlížeče jakojeden sousledný blok po celou dobu běhu aplikace (Unity, 2015).

Pro zjištění, která část projektu zabírá nejvíce místa, je velmi užitečné po pro-vedení buildu aplikace zapnout Editor.log, který zobrazí Assety, jenž zabírají nejvícemísta.

Obrázek 19: Editor.log

Z Obrázku 19 lze vidět, že nejproblematičtější částí z hlediska obsazené pamětibyly Textury. Pro optimalizaci aplikace bylo provedeno zmenšení velikostí textura následně použití komprese do ztrátového formátu Crunch. Tato komprese pomáhádosáhnout nejmenšího obsazeného místa na disku a urychlení stahování aplikace(Unity, 2015). U této možnosti komprese je možné zvolit její úroveň, která bylanastavena na nejnižší možnou hodnotu, aniž by byla z výsledné aplikace zpozorova-telná jakákoliv nedostatečnost či rozmazanost textury (což bylo ve většině případůna desetinu plné hodnoty, tedy nejvyšší kvality). Toto pomohlo zmenšit podíl pa-měti, jenž zabíraly textury o více než 10%.

Unity nabízí určité možnosti zmenšení hry v sekci Player Settings před samot-ným vyexportováním aplikace. V sekci Publishing Settings je možné mimo nastavenívelikosti pro WebGL runtime také možnost nastavit Data caching, jež umožňujeautomatické cachování herních zdrojů (Assets) do databáze prohlížeče IndexedDB(Deveria, 2015). Bohužel tato možnost je podle webu caiuse.com v prohlížeči Safari 9podporovaná pouze částečně a tudíž v něm způsobovala problémy, jenž neumožnilyhru ani spustit.

Dalším důležitým bodem je zajištění plynulosti hry, a nastavení, kterého setento problém nejvíce týká, je nastavení kvality grafiky, kterou se Unity pokusí vy-renderovat pro danou aplikaci. Unity nabízí šest předdefinovaných nastavení kvality(Fastest, Fast, Simple, Good, Beautiful, Fantastic), přičemž vývojář má možnostvytvořit si vlastní stupeň kvality. Nejvyšší stupně (Beautiful a Fantastic) se nedo-

6.1 Komunikace mezi webem a Unity 39

poručují pro zařízení s omezeným množstvím paměti především pro mobilní zařizeníči starší hardware. Pro tuto aplikaci byla postačující úroveň kvality Simple, nižšíúrovně zobrazovaly rozmazané Sprite textury na pozadí scén (např. v úvodní scéně).

6.1 Komunikace mezi webem a UnityVe výsledné webové stránce se nad samotnou vygenerovanou aplikací nachází na-hoře lišta s odkazy na jednotlivé planety. Po kliknutí na libovolnou z nich se spustív Unity nová scéna s náhledem na tuto planetu a prvek <iframe> načte příslušnoustránku z wikipedie. Pokud se na scéně vyskytuje více objektů, zobrazí se jejich se-znam na liště pod aplikací. Při zvolení tělesa se opět pomocí funkce SendMessagezobrazí šipka nad daným tělesem. Pro přehlednost jsou všechny tyto události/eventypro komunikaci zahrnuty do jediného skriptu, který má jako komponentu nastavenýprázdný herní objekt _Manager, který toto obstarává. Objekt s tímto skriptem ob-sahuje každá scéna aplikace.

Komunikaci opačným směrem, tedy z Unity do webové stránky, bylo potřebarealizovat především v případě načítání nové scény z prostředí Unity. Napříkladpři zobrazení nové scény s technickým zařízením, jež se dá spustit kliknutím naobrázek s daným tělesem v menu Solárního modelu. V tomto případě bylo nutnéspustit příslušnou stránku v <iframe> zároveň se spuštěním scény. O to se staráfunkce ZmenIFrame (definovaná v JavaScript souboru MyPlugin.jslib), jež volá glo-bální funkci showFrame definovanou v JavaScriptovém souboru WebSkript.js, kterýje součástí projektu. Podle předaného parametru se zobrazí příslušná stránka Wi-kipedie. Toto využívám při změně scény z menu Solárního modelu, které zobrazujevšechny planety a technická zařízení. Po kliknutí na daný obrázek se uživatel do-stane na novou scénu zobrazující tento objekt a zároveň se tato informace předáwebové stránce a podle toho změní obsah prvku <iframe>.

U tohoto způsobu komunikace je nutné po každé změně, která je důležitá kesprávnému chodu stránky, plugin znovu naimportovat do složky Assets. K tomu jedostačující provést příkaz Reimport na daný soubor, jinak se veškeré nové změnysouboru neprovedou. Také je důležité si v nastavení pluginu ohlídat, pro jakou plat-formu se bude jeho kód vykonávat (není vhodné se spoléhat na default nastaveníFor Any Platform).

7 TESTOVÁNÍ 40

7 TestováníRychlost výsledné aplikace velmi záleží na použitém JavaScript enginu webovéhoprohlížeče. Pokud se jedná o Ahead-of-Time engine, AOT, jenž umí rozpoznat a op-timalizovat asm.js, výsledná aplikace je násobně rychlejší (Zakai, 2015).

Asm.js, Assembly JavaScript, je technologie, která umožňuje rapidní zrychlenízpracovávání kódu uvnitř prohlížeče až na úroveň nativního kódu. Největší výhodouasm.js je to, že se jedná v podstatě o podmnožinu JavaScriptu a tedy, pokud prohlí-žeč nepodporuje asm.js, kód je vykonán stejně jako JavaScript. Pokud jej prohlížečpodporuje, vykoná optimalizaci pomocí značek v komentářích kódu.

Na blogu Unity 3D (blogs.unity3d.com) je k dispozici velmi podrobný přehledporovnávající populární webové prohlížeče podle času zobrazení výsledné aplikace(Echterhoff, 2015). Pojednávající článek porovnává časy prohlížečů při zobrazováníUnity obsahu vytvořeného v Unity 5.3 pomocí WebGL.

Graf na Obrázku 20 (Echterhoff, 2015) zachycuje čas v sekundách, jenž bylopotřeba na vyrenderování prvního framu po otevření projektu z lokálního disku. Jenutné dodat, že graf nezachycuje nejnovější verze prohlížečů.

Obrázek 20: Doba načtení Unity obsahu pro různé prohlížeče. Firefox umožňuje cacho-vání kompilačních výsledků asm.js a tedy cold verze zaznamenává první běh kódu a hotnásledující běh s načítáním asm.js z cache paměti.

Tento graf souhlasí také s mým pozorováním načítání aplikace z lokálního disku.Výsledná aplikace má nastavené vracení pouze Explicitly Thrown Exceptionsa umožněnou možnost Strip Engine Code.

Aplikace byla spouštěna na MacBook Pro s IntelCore i5 2,7GHz, 8GB RAM(Intel Iris Graphics 6100).

7 TESTOVÁNÍ 41

Mozilla Firefox 43.0.3 (64-bit) 5.27 secMozilla Firefox 43.0.3 (32-bit) 8.43 secGoogle Chrome 47 (64-bit) 9.02 secSafari 9.0.1 (64-bit) 12.29 sec

Tabulka 2: Doba načtení Unity obsahu v HTML5 prvku <canvas>

Při načítání z lokálního disku nejlepších výsledků dosahoval prohlížeč MozillaFirefox, jenž jako jediný z výčtu podporuje asm.js. Google Chrome neumožňujeAOT, ale díky optimalizaci jeho JavaScript enginu V8 je více jak dvakrát rychlejšínež předchozí verze tohoto prohlížeče (Elias, 2013). Momentálně nejnovější verzeSafari 9.0.1 nepodporuje asm.js vůbec. Aplikace je funkční na nejnovější verzi webo-vého prohlížeče Microsoft Edge, pro nějž ovšem nemám statistiky doby načítánístránky. Aplikace nefunguje na mobilních zařízeních, pro která ani nebyla optima-lizována, především z důvodu velkého množství potřebné paměti. Všechny hodnotyjsou získané při spuštění aplikace s vymazanou cache pamětí prohlížeče.

8 ZHODNOCENÍ 42

8 Zhodnocení8.1 Budoucnost vývoje her pro WebGLWebGL se v současné době stává lákavou platformou na níž lze prezentovat 2Di 3D hry, o čemž svědčí i podpora dvou předních herních enginů Unity 3D a UnrealEngine, jenž oba umožňují export aplikace do prostředí WebGL. Kromě nich se mo-mentálně vyvíjí velké množství frameworků a enginů, určených pro vytváření herpřímo v HTML5 pomocí WebGL (Construct 2, Phaser, Pixi.js, Babylon…). Pravdě-podobně největší výhodou vytváření her pro WebGL je fakt, že aplikaci lze spustitna jakémkoliv zařízení jež podporuje HTML5, takže se zvýší množství potenciálníchzákazníků. Podle webu caniuse.com se tato hodnota pohybuje okolo 84%. Momen-tálně největším nedostatkem WebGL je částečná nebo přímo žádná podpora webo-vých prohlížečů na mobilních zařízeních (plně podporuje WebGL pouze iOS Safari9.2). Dalším problémem je také to, že mobilní prohlížeče s podporou WebGL jsouschopné zpracovat ”čisté” WebGL, ale jsou velmi omezené v hardwarovém vybavenía omezeními prohlížečů při parsování a načítání velkého množství JavaScript kódu.

8.2 ZávěrCílem práce bylo vytvoření interaktivní webové aplikace, která zobrazuje modelSluneční soustavy především pro didaktické účely. K tomuto byl využit herní engineUnity 3D s exportem aplikace pro platformu WebGL, jenž momentálně představujebudoucnost pro vytváření aplikací a her do webového prostředí.

Aplikace je funkční na populárních webových prohlížečích. Není kompatibilnís mobilními zařízeními, především kvůli svojí náročnosti na paměťový prostor, kterýje na těchto přístrojích velmi omezený.

Výsledná aplikace je využitelná ve školských zařízeních ke vzdělávacím účelům,obsahuje základní informace o Sluneční soustavě, planetách a technických zaříze-ních. Součástí je také 2D hra Přistávání na Měsíci. Aplikace je interaktivní, probíhákomunikace oběma směry, tedy z Unity do webového prohlížeče i naopak, čehož jevyužíváno především při spouštění nových scén s odpovídajícím obsahem informač-ního panelu v pravé části stránky.

Aplikace je především kvůli své velikosti více vhodná jako lokální, doba načí-tání vygenerovaného obsahu z Unity na webové stránce z lokálního disku je únosnáa odpovídá použitému materiálu (modelům zařízení, planet, texturám…) v projektu.Kvůli nutnému stahování velkého množství dat se příliš nehodí její umístění navzdáleném serveru.

Z didaktického hlediska, jedním z prvotních případných vylepšení aplikace bybylo přidání dalších významných modelů technických zařízení vyskytujících se vevesmíru. Dalším možným rozšířením by bylo přidání přídavných funkcí samotnémumodelu Sluneční soustavy, například možnost manipulace s časem, což by zvyšovaloči zmenšovalo rychlost, s jakou planety oběhnou Slunce.

9 REFERENCE 43

9 ReferenceMechtley, M.Unity3D Surface Shader Tutorial. Biphenyl [on-

line]. Biphenyl [online]. 2012 [cit. 2015-10-09]. Dostupné z:http://biphenyl.org/blog/2012/04/24/unity3d-surface-shader-tutorial/.

Estrada, A.What software do huge animation studios like Pixar orDreamWorks use? [online]. Quora [online]. 2015 [cit. 2015-12-11]. Do-stupné z: https://www.quora.com/What-software-do-huge-animation-studios-like-Pixar-or-DreamWorks-use.

D’Andrea, F.What’s the difference between AutoDesk’s Maya and 3DSMAX? [online]. Quora [online]. 2015 [cit. 2015-12-11]. Dostupné z:https://www.quora.com/Whats-the-difference-between-AutoDesks-Maya-and-3DS-MAX.

Doskočil, J.Unreal Engine 4 odteď pro každého. Jen za 19 dolarů mě-síčně [online]. Eurogamer [online]. 2014 [cit. 2015-12-11]. Dostupnéz: http://www.eurogamer.cz/articles/2014-03-19-unreal-engine-4-odte-pro-kadeho-jen-za-19-dolar-msin.

Echterhoff, J.UPDATED WEBGL BENCHMARK RE-SULTSUnity [online]. 2015 [cit. 2015-12-12]. Dostupné z:http://blogs.unity3d.com/2015/12/15/updated-webgl-benchmark-results/.

UnityHTML code to load Unity content [online]. Unity do-cumentation [online]. 2015 [cit. 2015-12-11]. Dostupné z:http://docs.unity3d.com/Manual/HTMLcodetoloadUnityWebPlayercontent.html.

Echterhoff, J.ON THE FUTURE OF WEB PUBLISHING INUNITY [online]. Unity [online]. 2014 [cit. 2015-12-11]. Dostupné z:http://blogs.unity3d.com/2014/04/29/on-the-future-of-web-publishing-in-unity/.

Tautvydas, Z.WebGL for Mobile Devices [online]. Unity forum [online]. 2015 [cit.2015-12-11]. Dostupné z: http://forum.unity3d.com/threads/webgl-for-mobile-devices.291068/.

Zakai, A.asm.js - frequently asked questions [online]. asm.js [online]. 2015 [cit.2015-12-11]. Dostupné z: http://asmjs.org/faq.html.

Paleček, J.Mozilla chce do webových prohlížečů přinést lepší 3D hry.PCWorld [online]. PCWorld [online]. 2013, 31.03.13, 13(3): 1 [cit. 2015-12-11].Dostupné z: http://pcworld.cz/novinky/mozilla-chce-do-webovych-prohlizecu-prinest-lepsi-3d-hry-45814/.

9 REFERENCE 44

Berger, T.Say Goodbye to Unity player [online]. Nordic Game Community [on-line]. 2015 [cit. 2015-12-21]. Dostupné z: http://nordicgame.com/say-goodbye-to-unity-web-player/.

MaxOnCUSTOMER SUCCESS STORIES: MOVIES [online]. MaxOn3D for the real world [online]. 2015 [cit. 2015-12-11]. Dostupné z:http://www.maxon.net/en/customer-stories/movies.html.

Echterhoff, J.UPDATED WEBGL BENCHMARK RESULTS [on-line]. The Unity Blog [online]. 2015 [cit. 2015-12-11]. Dostupné z:http://blogs.unity3d.com/2015/12/15/updated-webgl-benchmark-results/.

AnonMaking a stand-alone version of the game [online].BlenderWiki [online]. 2012 [cit. 2015-12-21]. Dostupné z:http://wiki.blender.org/index.php/Doc:2.4/Tutorials/Game_Engine/BSoDExamples/Making_a_standalone_game.

Digital-Tutors TeamUnderstanding Global Illumination [online].Unity documentation [online]. 2012 [cit. 2015-12-11]. Dostupné z:http://blog.digitaltutors.com/understanding-global-illumination/l.

Wawro, A.Reach3dx is a new 3D game engine from the crea-tors of Gamebryo [online]. GamaSutra - The Art & Businessof making Games [online]. 2014 [cit. 2015-12-11]. Dostupné z:http://www.gamasutra.com/view/news/212242/Reach3dx_is_a_new_3D_gameengine_from_the_creators_of_Gamebryo.php.

Deveria, A.IndexedDB [online]. Can I use…support tables forHTML5, CSS3, etc [online]. 2015 [cit. 2015-12-28]. Dostupné z:http://caniuse.com/#feat=indexeddb.

UnityBuilding and running WebGL project [online]. Unity documentation [online].2015 [cit. 2015-12-28]. Dostupné z: http://docs.unity3d.com/Manual/webgl-building.html.

UnityShaderLab syntax [online]. Unity documentation [online]. 2015 [cit. 2015-12-18]. Dostupné z: http://docs.unity3d.com/Manual/SL-Shader.html.

Kerlow I.V.Mistrovství 3D animace: [ovládněte techniky profesionálních filmovýchtvůrců!] Vyd. 1. Brno: Computer Press, 2011, 496 s. Mistrovství. ISBN 978-80-251-2717-9..

NarpasLightmap [online]. Wikipedia the free encyclo-pedia [online]. 2011 [cit. 2015-12-28]. Dostupné z:https://en.wikipedia.org/wiki/Lightmap#/media/File:Lightmap_Cube_Sample.png.

9 REFERENCE 45

Dimensio3D modelář volných tvarů Rhinoceros 5 [online]. DIMENSIO s.r.o.– vše pro práci ve 3D [online]. 2015 [cit. 2015-12-28]. Dostupné z:http://www.dimensio.cz/rhinoceros.

Unity2D Textures [online]. Unity documentation [online]. 2015 [cit. 2015-12-28].Dostupné z: http://docs.unity3d.com/Manual/class-TextureImporter.html.

UnityMemory Considerations when targeting WebGL [online]. Unitydocumentation [online]. 2015 [cit. 2015-12-18]. Dostupné z:http://docs.unity3d.com/Manual/webgl-memory.html.

Johnson J.A Beginner’s Guide to Zurb Foundation 3: The Grid [on-line]. Design shack [online]. 2012 [cit. 2015-12-11]. Dostupné z:http://designshack.net/articles/css/a-beginners-guide-to-zurb-foundation-3-the-grid/.

AleksandrDOCUMENTATION, UNITY SCRIPTING LANGUAGES ANDYOU [online]. The Unity Blog [online]. 2014 [cit. 2015-12-11]. Do-stupné z: http://blogs.unity3d.com/2014/09/03/documentation-unity-scripting-languages-and-you/.

Elias, A.Chrome 28 Beta: A more immersive web, everywhere [on-line]. Chromium Blog [online]. 2013 [cit. 2015-12-11]. Dostupné z:http://blog.chromium.org/2013/05/chrome-28-beta-more-immersive-web.html.

Sevilleja Ch.A Beginner’s Guide to Zurb Foundation 3: TheGrid [online]. Scotch [online]. 2014 [cit. 2015-12-11]. Dostupné z:https://scotch.io/tutorials/understanding-zurb-foundation-5s-grid-system.

Futur3DPravidla 3D modelování a tvorba STL souboru [online]. Futur3DHuman and technology [online]. 2015 [cit. 2015-12-11]. Dostupné z:http://www.futur3d.net/pravidla-3d-modelovani-a-tvorba-stl-souboru.

Kříž J.3ds max: hotová řešení Vyd. 1. Brno: Computer Press, 2008, 327 s. K oka-mžitému použití (Computer Press). ISBN 978-80-251-2163-4.

interaktivní model sluneční soustavy · mendelova univerzita v brně provozně ekonomická...

Documents