Sem vložte zadání Vaší práce.

Sem vložte zadání Vaší práce.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství Bakalářská práce Rozšíření platformy ExtBrain Universe Martin Šedivý Vedoucí práce: Ing. Tomáš Novotný 14. května 2012

Poděkování Rád bych poděkoval svému vedoucímu práce Ing. Tomáši Novotnému za skvělé nápady, cenné připomínky a hlavně za ochotu a čas, který této práci věnoval.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů. V souladu s ust. 46 odst. 6 tohoto zákona tímto uděluji nevýhradní oprávnění (licenci) k užití této mojí práce, a to včetně všech počítačových programů, jež jsou její součástí či přílohou a veškeré jejich dokumentace (dále souhrnně jen Dílo ), a to všem osobám, které si přejí Dílo užít. Tyto osoby jsou oprávněny Dílo užít v rámci licence Mozilla Public License 2.0 (http://mozilla.org/mpl/2.0/). Toto oprávnění je časově, teritoriálně i množstevně neomezené. V Praze dne 14. května 2012..................... 7

České vysoké učení technické v Praze Fakulta informačních technologií c 2012 Martin Šedivý. Všechna práva vyhrazena. Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora. Odkaz na tuto práci Martin Šedivý. Rozšíření platformy ExtBrain Universe: Bakalářská práce. Praha: ČVUT v Praze, Fakulta informačních technologií, 2012.

Abstract The aim of this bachelor thesis is to extend the already started project Ext- Brain Universe to movement control in 3D space using a mouse. Purpose of ExtBrain Universe project is to create virtual reality, which will display (simulate) functioning of the various worlds or systems such as universe or human body. Part of this thesis is to design and implement suitable movement control in virtual reality using a mouse in a web browser. To achieve the objective, WebGL and shaders (programs running on a graphics card) technologies are used. The thesis contains description of implementation of partial control and there are discussed pitfalls of applications running in a web browser associated with the use of mouse. Keywords WebGL, OpenGL, GLSL, shaders, 3D application, web browser, user interaction, control Abstrakt Cílem této bakalářské práce je rozšířit již započatý projekt ExtBrain Universe o ovládání pohybu v 3D prostoru pomocí myši. Účelem projektu ExtBrain Universe je vytvořit virtuální realitu, která bude zobrazovat (simulovat) fungování různých světů nebo systémů, jako je vesmír nebo lidské tělo. Součástí této práce je navrhnout a implementovat vhodné ovládání pohybu ve virtuální realitě pomocí myši ve webovém prohlížeči. K dosažení cíle je využívána technologie WebGL a shaderů (programy běžící na grafické kartě). Práce obsahuje popis implementace dílčích ovládacích prvků a jsou diskutována úskalí aplikace běžící ve webovém prohlížeči spojena s používáním myši. Klíčová slova WebGL, OpenGL, GLSL, shadery, 3D aplikace, webový prohlížeč, interakce uživatelů, ovládání 9

Obsah Úvod 15 1 Použité technologie 17 1.1 WebGL............................... 17 1.2 OpenGL............................... 17 1.3 GLSL (shadery)........................... 18 1.4 Transformace............................ 18 2 Implementační prostředí 21 2.1 Jazyk implementace........................ 21 2.2 Podpůrné knihovny......................... 21 3 Návrh aplikace 23 3.1 Struktura aplikace......................... 23 3.2 Návrh implementace........................ 24 4 Popis implementace 27 4.1 Jednoduché ovládání pohybu kamery z klávesnice........ 27 4.2 Vybírání objektů scény pomocí myši............... 28 4.3 Přiblížení kamery k vybranému tělesu.............. 31 4.4 Ovládání kamery vzhledem k vybranému objektu........ 36 4.5 Stavění budov a GUI........................ 39 4.6 3D mapa.............................. 44 4.7 Fyzikální vlastnosti pohybu kamery................ 45 5 Popis dokumentace 49 Závěr 51 Literatura 53 A Seznam použitých zkratek 55 B Obsah přiloženého CD 57 11

Seznam obrázků 1.1 OpenGL - postup zpracování dat................... 18 1.2 Kroky transformace vrcholů...................... 19 3.1 Zjednodušený diagram objektů - základ aplikace.......... 25 3.2 Zjednodušený diagram objektů - tělesa scény............ 26 4.1 Render scény v normálním režimu.................. 30 4.2 Render scény do textury při vybírání objektů............ 31 4.3 Průběh funkce pro výpočet aktuální rychlosti přiblížení...... 34 4.4 Průběh funkce pro výpočet změny směru pohledu.......... 35 4.5 Průběh funkce pro výpočet aktuální rychlosti rotace kamery.... 37 4.6 Render scény v režimu rotace kolem vybraného tělesa....... 38 4.7 Způsob vykreslování ukazatele rychlosti............... 39 4.8 Render scény do textury při zjišťování polohy nové budovy.... 42 4.9 Grafické uživatelské rozhraní s menu pro stavění budov...... 43 4.10 Render posuvníku při určování aktuální hodnoty.......... 44 4.11 3D mapa prostoru........................... 44 4.12 Průběh funkce pro výpočet zrychlení................. 46 4.13 Průběh funkce pro výpočet zrychlení při brždění pohybu...... 47 4.14 Průběh funkce pro výpočet útlumu.................. 48 13

Úvod Cílem této bakalářské práce je rozšíření projektu ExtBrain Universe pro interakci uživatelů v 3D prostoru z webového prohlížeče. Především je implementováno ovládání pomocí myši. Projekt ExtBrain Universe je platforma pro virtuální realitu, která si klade za cíl simulovat fungování různých druhů světů nebo systémů. Může se jednat třeba o zobrazení planet ve vesmíru, fungování mravenčí kolonie uvnitř mraveniště nebo i pohled zevnitř na lidské tělo. Co bude výslednou aplikací (jaký systém resp. svět bude zvolen) není předmětem projektu. Projekt se zabývá přípravou platformy pro zobrazování objektů, pohyb kamery (pohledu uživatele), fyziku pohybu apod. A to v 3D prostoru, nezávisle na tom, o jaké objekty se jedná. Projekt bude primárně sloužit jako výukový program. Výsledná aplikace poběží v internetovém prohlížeči na základě technologie WebGL. Velký důraz je kladen na to, aby aplikace byla schopna zobrazit velké množství objektů, ať už se bude jednat o planety ve vesmíru, či buňky v lidském těle. Mimo jiné i za tímto účelem se využívají shadery jazyka GLSL. Více o této technologii v kapitole 1 Použité technologie. Tato bakalářská práce rozšiřuje projekt o interakci s uživatelem. Jelikož bylo potřeba volně se pohybovat v prostorové scéně, součástí práce se stala také implementace ovládání pohybu kamery z klávesnice. Největší pozornost ale byla věnována ovládání pomocí myši. Nejprve bylo potřeba navrhnout a implementovat techniku vybírání jednotlivých objektů nacházejících se ve scéně, včetně plynulého přechodu kamery k vybranému objektu. Dále bylo implementováno otáčení kamery kolem vybraného objektu při současném stisku tlačítka a pohybu myši. Další částí této práce byla implementace přidávání nových objektů uživatelem pro simulaci stavění např. budov na planetách. K tomuto účelu bylo také navrženo vlastní GUI. 15

Úvod Nemalou částí bakalářské práce byla také implementace fyzikálních vlastností kamery, jako je maximální rychlost, zrychlení, útlum apod. Každý pohyb ve scéně musí tuto fyziku dodržovat. V úvodu práce je popsána použitá, již zmíněná, technologie WebGL (kapitola 1 Použité technologie ) a prostředí, ve kterém byla výsledná aplikace implementována (kapitola 2 Implementační prostředí ). Následuje kapitola Návrh aplikace, kde je popsána struktura výsledné testovací aplikace. Nejdůležitější částí práce je kapitola 4 Popis implementace, kde je popsáno, jak jsou jednotlivé ovládací prvky implementovány. Na závěr je v kapitole Popis dokumentace stručně popsána dokumentace zdrojových kódů. 16

KAPITOLA 1 Použité technologie Následující část popisuje technologie použité pro implementaci výsledné aplikace. Jedná se o grafické API WebGL založené na grafickém systému OpenGL a shaderové programy. V závěru kapitoly jsou popsány transformace - matematický aparát důležitý pro programování 3D grafiky. 1.1 WebGL Projekt je vyvíjen pomocí technologie WebGL. Jedná se o nízkoúrovňové 3D grafické API pro tvorbu webových aplikací. WebGL je multiplatformní a bezplatné. Jelikož je přímo implementováno v prohlížeči, umožňuje vytvářet webové 3D aplikace bez použití jakéhokoli zásuvného modulu. WebGL je založeno na grafickém systému OpenGL (konkrétně na verzi OpenGL ES 2.0). (3) 1.2 OpenGL OpenGl je API pro grafický hardware, které umožňuje vytvářet interaktivní 3D aplikace. Je nezávislé na hardwaru a použitelné na mnoha platformách. Z tohoto důvodu neobsahuje žádné příkazy pro práci s okny nebo s uživatelským vstupem. OpenGL také neobsahuje žádné funkce pro popisování 3D objektů. Popisuje pouze tři základní tvary - bod, přímka a polygon. (1) Dnes moderní OpenGL používá programovatelné zpracování dat vrcholů a fragmentů (dříve OpenGL používalo fixní zpracování). Samotné zpracování dat lze řídit pomocí malých programů - shaderů. (1) 17

1. Použité technologie 1.3 GLSL (shadery) Shadery (nebo také shaderové programy) jsou programy běžící na grafické kartě. Jsou napsány ve speciálním jazyce, nazvaném OpenGL shading Language (ve zkratce GLSL) (1). GLSL vychází z jazyka C, který byl rozšířen o vektorové a maticové typy a funkce pro práci s nimi. Tyto operace jsou typické pro zpracování 3D grafiky. GLSL také převzalo některé vlastnosti jazyka C++ (např. přetěžování funkcí nebo deklarování proměnných až v místě, kde jsou potřeba). (4) Existují dva druhy shaderů. Vertex-shader, který zpracovává data jednotlivých vrcholů a fragment-shader, který se stará o fragmenty. Ty jsou viditelné jako pixely, proto se také někdy fragment-shaderu říká pixel-shader. (1) OpenGL (WebGL) postupuje tak (viz obr. 1.1), že nejdříve zpracovává data vrcholů (souřadnice v prostoru, barvy, souřadnice textury, atd.) pomocí vertex-shaderu. Následně se z bodů sestaví základní tvary a ty se rasterizují do fragmetů, které se poté zpracují ve fragment-shaderu. Poslední část před samotným vykreslením výsledného obrázku je míchání (blending), kde se aktuální fragmenty smíchají s již vykreslenými pixely nebo je překreslí. data vrcholů data pixelů vertex shader rasterizace fragment shader blending výsledný obrázek Obrázek 1.1: OpenGL - postup zpracování dat 1.4 Transformace Důležitou součástí programování 3D grafiky (nejen OpenGL) jsou transformace. 3D objekty jsou reprezentovány body, které mají v prostoru čtyři 18

1.4. Transformace homogenní souřadnice (tři prostorové plus váha). Veškeré operace s objekty se dají provádět pomocí násobení těchto souřadnic příslušnou transformační maticí. Čtvrtá souřadnice je potřeba kvůli tomu, aby se i transformace posunutí dala realizovat pomocí matice. Násobením transformačních matic dochází ke skládání transformací. (2) Pro výslednou polohu objektu ve výřezu se provádějí následující kroky (viz obr. 1.2 - matice se postupně násobí zleva, proto je první operace úplně napravo): nejdříve se vrcholy násobí maticí modelu (transformace modelu ve scéně), pak maticí pohledu (posun, rotace kamery - pohledu) a nakonec maticí projekce (deformace vlivem např. perspektivního zobrazení). Jednotlivé transformační matice definují různé prostorové systémy, jako je prostor modelu, scény, kamery atd. matice projekce... matice pohledu matice modelu x y z w perspektiva transformace kamery transformace modelu souřadnice vrcholu Obrázek 1.2: Kroky transformace vrcholů 19

KAPITOLA 2 Implementační prostředí Tato krátká kapitola popisuje, jaký byl zvolen jazyk pro implementaci výsledné aplikace a jaké byly použity knihovny. 2.1 Jazyk implementace WebGL je (jak už bylo zmíněno) přímo součástí webového prohlížeče. Běží na straně klienta a je implementováno jako rozšíření (knihovna) JavaScriptu. Proto byl také JavaScript zvolen jako implementační jazyk tohoto projektu. 2.2 Podpůrné knihovny Za účelem zjednodušení práce s JavaScriptem byla v tomto projektu používána knihovna jquery spolu s jejím rozšířením pro podporu událostí spojených s kolečkem myši Mouse wheel extension. Pro správnou inicializaci WebGL je také využita podpůrná knihovna WebGL utils, která se mimo jiné stará o upozornění uživatele na to, když jeho prohlížeč nepodporuje WebGL. Programování 3D grafiky s sebou přináší časté používání vektorů a matic. Pro počítání s nimi byla použita knihovna glmatrix. 21

KAPITOLA 3 Návrh aplikace Výsledkem této bakalářské práce je program spustitelný ve webovém prohlížeči. Tato aplikace není zatím součástí celého projektu ExtBrain Universe, ale jedná se o samostatný program, který funguje nezávisle na projektu. Projekt je v této chvíli v počátcích a na samotném jádře aplikace se teprve pracuje. Součástí této práce byl tedy také návrh a implementace testovací aplikace, která zobrazuje 3D scénu s několika objekty. Jako ukázkový svět byl zvolen vesmír, kde není nijak omezen pohyb, a je tedy vhodný pro předvedení ovládání pohybu ve volném prostoru. Také nevyžaduje složité modelování objektů ani celé scény. Veškeré objekty (např. planety), se kterými může uživatel interagovat jsou reprezentovány koulemi různých barev a velikostí. Způsoby, jakým jsou reprezentovány např. objekty ve scéně nebo překlad a sestavování programů shaderů a jiné věci nesouvisející přímo se zadáním, nebyly pro tuto aplikaci stěžejní, a proto jim nebyla věnována taková pozornost jako vlastní implementaci ovládacích prvků. 3.1 Struktura aplikace Výsledná aplikace se skládá z jedné html stránky, která obsahuje prvek HTML5 Canvas. Skrze tento objekt WebGL vykresluje (renderuje) 3D grafiku. Veškerý JavaScriptový kód je umístěn do externích souborů. Plně funkční aplikace ve WebGL vyžaduje spoustu kódu, který není přímo součástí zadání této práce. Aby ale bylo možné otestovat funkčnost ovládacích prvků (kterými se naopak tato práce zabývá), bylo potřeba zahrnout činnosti 23

3. Návrh aplikace spojené s inicializací WebGL do testovací aplikace. Implementovány byly v podobě podpůrných funkcí, které byly přidány objektu window. Jedná se o získání objektu WebGLRenderingContext, který se používá ke správě OpenGL stavů a stará se o renderování do bufferů. Dále se jedná o inicializaci těchto bufferů a také překlad a sestavení jednotlivých programů shaderů. (5) JavaScript je prototypový programovací jazyk, a proto neobsahuje třídy, jako jiné objektově orientované programovací jazyky (např. C++), nicméně OOP podporuje. Implementace objektově orientovaného programu je v JavaScriptu díky tomu těžkopádnější záležitostí, ale i přesto bylo cílem projektu vytvořit objektově orientovaný program. Proto části aplikace týkající se ovládání pohybu ve virtuální realitě byly takto implementovány. 3.2 Návrh implementace Jelikož aplikace není přímo součástí projektu, ale slouží jen jako testovací prostředí pro ovládací prvky, není zde návrhu aplikace věnována příliš velká část. Nicméně alespoň stručný popis by tu být měl. Aplikace obsahuje hlavní smyčku - funkci, která je neustále volána v intervalu 1/60 s. V této smyčce se provádějí změny na objektech a je renderována celá scéna. Základem aplikace jsou tři objekty. První je objekt View, který reprezentuje kameru (pohled) ve scéně. V objektu jsou jako proměnné dvě matice, které zprostředkovávají transformaci celé kamery resp. středu otáčení. Důležitou částí objektu je metoda, která vrací výslednou pohledovou matici. Dále objekt obsahuje metody pro samotný pohyb a otáčení kamery. Tyto metody nastavují fyzikální parametry pohybu jako je rychlost, zrychlení atd. Výsledný pohyb se počítá v metodě update, která je volána v hlavní smyčce programu. Dalším objektem je objekt Scene, který se stará o renderování celé scény a ovládá veškerá tělesa nacházející se ve scéně. Obsahuje metody pro vykreslování na obrazovku a i pro renderování do textury (to je potřeba např. při vybírání těles myší - o tom ale později). Jedna z jeho hlavních proměnných je projekční matice, která definuje perspektivu. Objekt se také stará o shaderové programy, které předává jednotlivým tělesům při renderování. Třetím objektem je Control. Objekt se stará o veškeré ovládání. Obsahuje jednak metody volané v hlavní smyčce programu, které kontrolují stisknuté klávesy resp. tlačítka myši, a také jednotlivé handlery událostí, které je potřeba připojit příslušným objektům po načtení scény. 24

3.2. Návrh implementace Scene - projectionmatrix - shaderprogram + render() + renderpick() 1 View - viewmatrix - centermatrix + update() + getmatrix() 1 1 Control + checkkeyinput() + checkmouseinput() + handkeydown() + handkeyup() + handmousemove() + handmousewheel() 1 Obrázek 3.1: Zjednodušený diagram objektů - základ aplikace Další důležitou částí aplikace jsou tělesa zobrazovaná ve scéně a řízená objektem Scene. Nad všemi renderovatelnými tělesy stojí zastřešující objekt Objects, který obsahuje metody pro renderování tělesa. Metoda je volána objektem Scene, který metodě předá potřebné matice (projekční a pohledovou) a také příslušný program shaderu. O samotné shadery se objekt Objects nestará. Scéna totiž může obsahovat více těles se stejnými shadery a práce s nimi by pak nebyla příliš efektivní. O co se ale Objects stará je matice modelu. Tu má každé těleso svou vlastní. Podobně jako pohledová matice v objektu View je i modelová matice složena z více transformací. Tentokrát je rozdělena zvlášť na rotaci a translaci. Při výpočtu matice modelu se provádí nejdříve rotace a až potom posunutí. To způsobuje, že se objekt vždy otáčí kolem svého vlastního středu. Dále Objects obsahuje objekt bufferu (objekt OpenGL, který obsahuje informace o jednotlivých vrcholech tělesa) a metodu loaddata, která se stará o načtení potřebných dat o vrcholech tělesa. Poslední důležitou věcí, o kterou se Objects stará, je transformace těles. Objekt obsahuje různé metody pro pohyb, rotaci a změnu měřítka. 25

3. Návrh aplikace Všechny objekty reprezentující různá tělesa zobrazována ve scéně dědí od tohoto objektu. Nejdůležitější z nich je objekt Sphere. Reprezentuje všechna tělesa, se kterými může uživatel ve scéně interagovat (vybírat je, otáčet se kolem nich, přidávat nové atd.). Tato tělesa jsou v ukázkové aplikaci pro jednoduchost zobrazována jako koule. Další objekty dědící od Objects jsou např. prvky GUI (ty také uživatel ovládá, ale jedná se o jiný druh interakce). Všechny výše zmíněné objekty dědící od Objects musí implementovat svou vlastní metodu loaddata pro definování jednotlivých vrcholů, ze kterých se těleso skládá. Většinou je také potřeba, aby implementovaly vlastní metody pro renderování. Sphere Scene 1 0..* Objects - id - rotationmatrix - translationmatrix - bufferobject + getmodelmatrix() + render() + loaddata() - radius + loaddata() Grid + loaddata() + render() Obrázek 3.2: Zjednodušený diagram objektů - tělesa scény 26

KAPITOLA 4 Popis implementace Následuje popis implementace jednotlivých částí ovládání pohybu a uživatelského rozhraní. 4.1 Jednoduché ovládání pohybu kamery z klávesnice Jako první věc bylo potřeba implementovat ovládání pohybu v prostoru. Je zamýšleno, že uživatel se bude ve virtuální realitě pohybovat prostřednictvím jakési vesmírné lodě, sondy nebo třeba ponorky (záleží na aktuálním světě či systému) a bude objevovat svět. Vzhled a tvar dopravního prostředku nehraje roli, všechny se budou ovládat stejným způsobem a budou dodržovat stejná fyzikální pravidla. Dopravním prostředkem je možné se pohybovat dopředu, dozadu a otáčet se ve všech směrech. Snaha byla o to, aby se prostředkem rotovalo pomocí myši. Díky tomu by uživatel měl lepší kontrolu nad pohybem v prostoru, lépe by zaměřoval svůj pohled. V prohlížeči ovšem nelze pomocí JavaScriptu kontrolovat polohu myši (z důvodu bezpečnosti) a vzniká tedy problém, když myš opustí okno prohlížeče. V takovém okamžiku přestává aplikace zaznamenávat změny polohy myši a stává se neovladatelnou. Zabránit se tomu dá jedině tak, že se kurzor po každé změně polohy programově přesune zpět do středu okna. A to v JavaScriptu není možné. Proto bylo implementováno ovládání dopravního prostředku prostřednictvím klávesnice. Dalším problémem bylo to, jak JavaScript obsluhuje události při stisknutí a následném držení klávesy. Aby nedocházelo např. při psaní k opakovanému tištění téhož znaku, zpracovává se událost stisknutí klávesy pouze jednou a 27

4. Popis implementace pak se určitou dobu čeká. Pokud během této doby uživatel klávesu uvolní, JavaScript to chápe jako jedno stisknutí. Jinak je klávesa stále držená a událost se začne zpracovávat opakovaně. Znamená to, že při držení klávesy se nejprve jednou provede příslušná událost, nastane chvíli pauza a teprve pak se událost opakuje. Když by se tedy takováto obsluha držení klávesy aplikovala na ovládání kamery ve scéně, pohyb by to byl značně přerušovaný a tudíž velmi nepříjemný. Proto bylo zapotřebí navrhnout jinou obsluhu držení kláves. Správného fungování bylo dosaženo pomocí pole, do kterého se ukládají informace o tom, zda jsou klávesy stisknuté či nikoli. Při stisknutí klávesy je do příslušného prvku pole uložena true hodnota a při uvolnění hodnota false. Dále je potřeba, aby v každém kroku hlavní smyčky programu (více v kapitole 3.2 Návrh implementace ) proběhla kontrola, které klávesy jsou stisknuté, a na základě toho byly vykonány příslušné akce. Díky tomuto mechanismu je také možné obsluhovat více stisknutých kláves najednou. Indexem v poli kláves je kód příslušného znaku. 4.2 Vybírání objektů scény pomocí myši Jedna z hlavních částí této práce je implementace vybírání objektů nacházejících se ve scéně. Projekt je zaměřen primárně pro výukové účely a hlavním cílem je tedy objevovat svět a prohlížet si objekty. Aby si uživatel mohl detailně prohlédnout objekt nebo jeho část, musí mít možnost jednoduše se k objektu přiblížit a nasměrovat kameru na požadovanou část. Nyní už může uživatel ovládat přepravní prostředek a pohybovat se tak ve virtuálním světě. Ovládání prostředku je však provedeno tak, aby alespoň vzdáleně simulovalo chování reálné rakety (nebo jakéhokoli objektu letícího v prostoru) s ohledem na fyzikální vlastnosti. Díky tomu je ale velmi obtížné dostat se přepravním prostředkem přesně k objektu a ještě obtížnější je s ním manévrovat kolem objektu a zaměřit se tak na určitý detail. Proto bylo navrženo, aby uživatel kromě samotného ovládání přepravního prostředku klávesnicí měl ještě možnost ovlivnit polohu prostředku pomocí myši. A to tak, že kliknutím vybere libovolný objekt ve scéně, ke kterému bude následně přiblížen. Potom kliknutím na tento objekt a současným tažením se kolem něho bude otáčet. Pomocí kolečka myši může měnit vzdálenost od objektu. 28

4.2. Vybírání objektů scény pomocí myši Samotné ovládání pohybu klávesnicí je na celém manévrování vzhledem k objektu pomocí myši nezávislé. To znamená, že i po výběru předmětu, může uživatel dále ovládat raketu obvyklým způsobem pomocí klávesnice. Jenom se tím zase od vybraného objektu odpoutá. Implementace vybírání objektů Před změnou polohy kamery (přepravního prostředku) je nejdříve potřeba implementovat vybírání (nebo také anglicky picking ). Jedná se o mechanismus, který rozpozná, na jaký objekt bylo kliknuto myší ve 3D scéně. Jelikož se objekty nalézají v 3D prostoru (který je navíc zkreslený perspektivou) může se jednat o náročný úkol. K samotné implementaci byly však využity shadery, které problém zjednodušují. Zde je potřeba popsat, jak je scéna renderována v normálním režimu (tj. při zobrazování scény na obrazovku) pomocí shaderů. Každé těleso ve scéně má svou metodu pro renderování. Této metodě je prostřednictvím objektu Scene předán program shaderu, který obsahuje přeložené a slinkované shadery (vertex shader a fragment shader). Při renderování se ve vertex shaderu vypočítá poloha (souřadnice v prostoru) každého vrcholu příslušného tělesa. A to na základě transformace projekční, pohledovou a modelovou maticí (více v kapitole 1.4 Použité technologie ). Hlavní část kódu vypadá takto: gl_position = Pmatrix * Vmatrix * Mmatrix * vec4(position, 1.0); kde position je trojrozměrný vektor představující souřadnice aktuálního vrcholu. Výsledná pozice je v homogenních souřadnicích, proto čtyřrozměrný vektor. Fragment shader je o něco složitější. Jeho úkolem je vypočítat výslednou barvu jednotlivých fragmentů (barva na povrchu objektu). Pro realističtější vzhled scény je implementován zjednodušený Phongův osvětlovací model, kde se barva počítá na základě vektoru směřujícího ke světlu a normál jednotlivých vrcholů. Světlo je ve scéně pro jednoduchost pouze jedno a je umístěné v nekonečnu. Představuje tak vzdálené slunce. Hlavní část fragment shaderu vypadá takto: gl_fragcolor = vec4((ambient + diffuse).rgb, alpha); Výsledná barva fragmentu je v barevném modelu RGBA. Ambient a diffuse jsou předem vypočítané složky Phongova modelu a alpha je míra neprůhlednosti objektu. Spekulární složka osvětlovacího modelu zde není pro jednoduchost uvažována. Výsledek vyrenderované scény v normálním režimu je na obrázku 4.1. 29

4. Popis implementace Obrázek 4.1: Render scény v normálním režimu K samotnému vybírání těles byly také použity shadery a to následovně. Po kliknutí myší do okna prohlížeče se scéna ještě jednou vyrenderuje. Tentokrát se ovšem nebude zobrazovat to, jak jednotlivé objekty ve skutečnosti vypadají, ale vyrenderuje se informace, na základě které bude možné těleso identifikovat. Jednoduše řečeno, místo skutečné barvy se zobrazí identifikátor. Takto vyrenderovanou scénu nezobrazíme na monitor, ale uložíme do textury (odtud anglický název render to texture ). Následně se podíváme do této textury v místě, kam bylo kliknuto a přečteme hodnotu pixelu, která odpovídá ID vybraného tělesa. K renderování do textury je potřeba použít jiné shadery než při renderování v normálním režimu. Resp. jiný fragment shader. Vertex shader zůstane stejný (alespoň část týkající se výpočtu polohy vrcholu), protože poloha objektů se nemění, mění se pouze výsledná barva. Fragment shader uloží identifikátor objektu do hodnot RGBA. Jelikož scéna obsahuje několik druhů objektů, fragment shader neukládá pouze ID objektů, ale také jejich typ. Jedná se např. o tělesa, která uživatel objevuje, nebo o prvky GUI (tlačítka, posuvníky atd.). Oba druhy jsou renderovány do textury stejně, ale každý je pak jinak zpracováván. Samotné uložení hodnot vypadá následovně: gl_fragcolor = vec4(type, G, B, A); 30

4.3. Přiblížení kamery k vybranému tělesu Aplikace při renderování používá 32 bitovou barevnou hloubku. To znamená, že každý kanál barevného modelu má přiděleno 8 bitů. GLSL ukládá barvu do každého kanálu následujícím způsobem. Vezme přidělenou proměnnou typu float a její hodnotu od nuly do jedné přepočítá na rozsah 0 až 255. Ve skutečnosti má tedy typ float (v jazyce GLSL) při ukládání do barevného kanálu rozsah pouze 2 8 = 256 hodnot. Shader v tomto případě do R kanálu ukládá typ objektu a k uložení jeho ID využívá zbývající tři kanály G, B, A (čili 24 bitů). Z toho vyplývá, že je aplikace schopná rozpoznat 256 různých typů a až 2 24 = 16777216 různých objektů ve scéně. Pořadí bytů bylo zvoleno tak, že nejvýznamnější byte se nachází na začátku, tedy v G kanálu. Výsledek vyrenderované scény do textury je na obrázku 4.2. Rozdílné barvy těles odpovídají různým ID objektů (pro větší názornost bylo ID v tomto případě přesunuto na hodnoty RGB, alfa kanál byl nastaven na nenulovou hodnotu a typ objektu byl vynechán). Obrázek 4.2: Render scény do textury při vybírání objektů 4.3 Přiblížení kamery k vybranému tělesu Teď, když už je program schopný rozpoznávat, na která tělesa bylo kliknuto, je zapotřebí implementovat přiblížení kamery (přepravního prostředku) k vybranému objektu. 31

4. Popis implementace Veškeré ovládání přepravního prostředku se provádí pravým tlačítkem myši. Mezi toto ovládání patří i vybrání objektu. Levým tlačítkem se provádí jiné akce jako například budování objektů (o tom ale více v části 4.5 Stavění budov a GUI ). Uživatel má na výběr mezi několika variantami, jak těleso, ke kterému se chce přiblížit vybere. Pokud pouze na objekt klikne, bude přiblížen do optimální vzdálenosti od objektu. Pokud ovšem při vybírání pravé tlačítko podrží, dostane se zároveň do stavu, kdy se může pohybem myši kolem vybíraného tělesa otáčet. Tento stav zůstane i po skončení procesu přibližování. Poté ho lze znovu vyvolat opět podržením pravého tlačítka myši. Další variantou výběru je, že uživatel znovu podrží pravé tlačítko myši, ale tentokrát ho ještě během přibližovací animace uvolní. Tím se proces přibližování přeruší a záleží na tom, jak daleko od objektu kamera je. Pokud je dál než je maximální povolená vzdálenost, bude animace dál pokračovat až do dosažení této hranice. Pokud se nachází blíž, dojde rovnou k zastavení. Fungování objektu View Před samotným popisem implementace přiblížení, je potřeba popsat fungování objektu View, který se stará o pohyb přepravního prostředku. Jak už bylo popsáno dříve, objekt obsahuje metodu update, která je volána v každém cyklu hlavní smyčky programu. Tato metoda provádí jeden krok pohybu (resp. rotace) kamery. Tedy vypočítá transformaci pohledové matice pro tento jeden krok a matici transformuje. Krok pohybu je dán aktuální rychlostí. Určování této rychlosti při normálním pohybu přepravního prostředku je detailně popsán v sekci 4.7 Fyzikální vlastnosti pohybu kamery. Samotný objekt View se může nacházet v různých stavech (i ve více najednou). Na základě těchto stavů je v metodě update prováděna příslušná akce, především změna aktuální rychlosti a tím určována transformace kamery. Pro přiblížení kamery k vybíranému tělesu jsou definovány dva speciální stavy. Jeden pro přiblížení (transformaci) kamery a druhý pro změnu směru pohledu, tak aby kamera směřovala do středu objektu. Obě akce probíhají zároveň, takže vytvářejí dojem, že se jedná o jednu animaci. Obě jsou založené na tom, že se na začátku určí celá transformace (z polohy, ve které se přepravní prostředek nachází před přiblížením a polohy, kde má skončit) a ta je na základě matematických funkcí rozdělena na určitý počet dílčích transformací, které jsou prováděny jednotlivě v každém kroku animace. To znamená, že v každém kroku se musí vypočítat aktuální rychlost kamery. 32

4.3. Přiblížení kamery k vybranému tělesu Nejprve je ale potřeba určit, kolik dílčích transformací bude provedeno resp. jak dlouho bude animace trvat (kolik bude obsahovat kroků). Přibližování kamery má za cíl napodobit manévrování s přepravním prostředkem s ohledem na fyzikální vlastnosti. Na začátku se prostředek pomalu rozjíždí a ke konci zase brzdí. Za celou dobu pohybu by neměl překročit maximální rychlost. Vybírané těleso se ale na začátku nachází pokaždé v jiné vzdálenosti, proto je potřeba určit potřebný čas, tak aby se prostředek pokaždé přibližoval přibližně stejnou rychlostí. Počet kroků se tedy vypočítá ze vzdálenosti od vybraného tělesa, která se vynásobí příslušnou konstantou. Také je definována minimální délka animace, aby nenastala situace, kdy při vybírání blízkých objektů je provedena změna směru pohledu příliš rychle. Přiblížení kamery - změna polohy Od teď se jednotlivé akce liší. U přiblížení kamery (změny polohy) se v prvním kroce animace vypočítá počáteční vzdálenost přepravního prostředku od vybraného objektu. Ta se vypočítá jako velikost vektoru ukazujícího od kamery do středu objektu. Poloha všech objektů ve scéně je dána jejich modelovou maticí a poloha vůči kameře je dána zase maticí pohledu. Čili vynásobením těchto matic dostáváme transformaci objektu vůči pohledu. Z této transformační matice nás zajímá pouze vektor translace (přesunu), což je hledaný vektor od kamery k objektu. Směr vektoru není důležitý, potřeba je akorát jeho velikost. Tím je dána celková transformace prostředku. Nyní se v každém kroce animace vypočítá rychlost pohybu na základě této transformace a aktuálního času (číslo - pořadí kroku). Použije se k tomu následující funkce: f(x) = start max (sin( 2π max x π 2 ) + 1), kde start je počáteční vzdálenost od objektu, max je délka animace (počet kroků) a x je aktuální krok. Průběh funkce je zobrazen na obrázku 4.3. Změna směru pohledu U změny směru pohledu se po zjištění, jak dlouho animace bude trvat, provede následující věc. Bez ohledu na to, kdy dojde k zastavení přibližování (ať už po dokončení celé animace nebo po přerušení přibližování uživatelem), dostane se objekt View do stavu, kdy se kamera bude otáčet kolem vybraného tělesa. K tomu je potřeba přesunout střed otáčení kamery do středu tohoto tělesa. Do teď se otáčela kolem své osy. 33

4. Popis implementace rychlost 0.5 0.4 0.3 0.2 0.1 10 20 30 40 50 60 Obrázek 4.3: Průběh funkce pro výpočet aktuální rychlosti přiblížení při výběru objektu (počet kroků animace je 60 a počáteční vzdálenost od objektu je 15) Poté se opět v každém kroku animace vypočítá dílčí krok otočení pohledu. To se provede na základě dvou vektorů. Jedním je již zmíněný vektor směřující od kamery (přepravního prostředku) k vybranému tělesu a druhým je aktuální směr pohledu. Výsledkem animace bude stav, kdy aktuální směr pohledu směřuje do středu objektu, tedy stav, kdy oba vektory jsou totožné. V každém kroku animace se provede lineární interpolace dvou zmíněných vektorů. Tím vznikne vektor směřující někam mezi ně. A to je vektor, kam se pohled kamery otočí v daném kroku. Důležitým momentem je určení hodnoty interpolace. Snaha byla o to, aby pohyb, stejně jako u změny polohy kamery, byl plynulý a s pomalým rozjezdem a dojezdem. Zde ovšem také nastal problém, že vektor směru pohledu není pevně dán na začátku animace jako počáteční vzdálenost u přiblížení kamery, ale každým krokem se mění. Jako nejlepší se ukázala následující funkce: f(x) = max 20 1 x + max 0.045, 20 + max kde max je délka animace (počet kroků), x je aktuální krok a konstanta 0.045 je korekce, aby funkce začínala přibližně v nule. Průběh funkce je zobrazen na obrázku 4.4. 34

4.3. Přiblížení kamery k vybranému tělesu hodnota interpolace 1.0 0.8 0.6 0.4 0.2 10 20 30 40 50 60 Obrázek 4.4: Průběh funkce pro výpočet aktuální hodnoty interpolace dvou vektorů při změně směru pohledu (počet kroků animace je 60) Přerušení animace přiblížení Jak už bylo zmíněno dříve, animace přiblížení kamery nemusí proběhnout až do konce. Pokud uživatel vybral těleso variantou kliknutí a tažení a tlačítko myši uvolní dříve, proces přibližování je přerušen. Pokud se v tomto okamžiku kamera nachází dál než je maximální možná vzdálenost od vybraného tělesa, animace pokračuje, ale pouze do dosažení této maximální vzdálenosti. To je provedeno tak, že se změní počáteční vzdálenost od objektu. Odečte se od ní maximální možná vzdálenost. Není to úplně přesný výpočet, protože přestává platit předem vypočítaná doba celé animace. Nicméně pro velké vzdálenosti funguje dobře a pohyb kamery se opravdu zastaví na maximální vzdálenosti. V situaci, kdy došlo k přerušení těsně před hranicí maximální vzdálenosti, se kamera zastaví o něco blíže k tělesu. To je ale v pořádku, vzhledem k fyzikálním vlastnostem pohybu. Kamera (neboli přepravní prostředek) nemůže v takové situaci ihned zabrzdit, a proto hranici maximální vzdálenosti přeletí. Zajímavé je, že tento jev nebyl při implementaci zamýšlen, ale vznikl náhodou nepřesností výpočtu. Druhý případ nastává, když se kamera v době přerušení nachází blíže k tělesu, než je hranice maximální vzdálenosti. V takovém případě dochází k úplnému ukončení animace a přepravní prostředek vlivem setrvačnosti pomalu zastaví. 35

4. Popis implementace U změny směru pohledu nezáleží na tom, v jaké vzdálenosti od tělesa došlo k přerušení. Animace vždy proběhne až do konce. Je to způsobeno tím, že kamera zůstává ve stavu, kdy je těleso vybrané i po předčasném ukončení přibližování. V takovém stavu má uživatel možnost otáčet se dopravním prostředkem kolem tělesa a je tedy zapotřebí, aby pohled směřoval do středu tohoto tělesa. 4.4 Ovládání kamery vzhledem k vybranému objektu Následuje popis operací, které uživatel může provádět s přepravním prostředkem po tom, co se přiblížil ke zkoumanému tělesu. Uživatel vybral těleso, kamera (neboli přepravní prostředek) se k tomuto tělesu přiblížila do požadováné vzdálenosti a objekt View se nyní nachází ve stavu, kdy je střed rotace umístěn uprostřed tělesa. Uživatel má k dispozici tyto dvě operace: otáčení kamerou kolem tělesa a změnu vzdálenosti. Obě operace slouží k usnadnění manévrování kolem tělesa, které chce uživatel prozkoumat. Jinak by byl odkázán na ovládání přepravního prostředku jen pomocí klávesnice a zaměření pohledu na požadovaný detail by se stal náročným až nemožným úkolem. Jelikož veškerý pohyb uživatele ve virtuálním světě probíhá prostřednictvím přepravního prostředku, byla snaha o to, aby i tyto operace co nejvěrněji pohyb prostředku napodobovaly. Otáčivý pohyb rakety, která směřuje do středu otáčení, není sice typický a přirozený, nicméně dodržuje zvolené fyzikální vlastnosti. Jedná se například o úhlovou rychlost, která se s různou vzdáleností od tělesa mění tak, aby okamžitá rychlost byla stále stejná. V další části je popsáno, jak byly operace implementovány. Otáčení kamery kolem tělesa Tuto operaci uživatel uskuteční tažením myši se zároveň stisknutým pravým tlačítkem. Vzdálenost myši od místa kliknutí určuje rychlost otáčení a poloha kurzoru směr rotace. Nejprve je potřeba určit maximální vzdálenost od středu rotace (v tomto případě středem rotace není myšlen bod, kolem kterého se kamera ve skutečnosti otáčí, ale místo, kam uživatel klikl při zahájení operace), od které již nedochází ke zrychlování. Tedy hranice maximální rychlosti. Ta se určí na 36

4.4. Ovládání kamery vzhledem k vybranému objektu základě velikosti okna prohlížeče (resp. jeho výšky) hned při spuštění aplikace a vždy po změně velikosti okna. Při samotném kliknutí myši je uložena poloha kurzoru myši na obrazovce. Tato poloha reprezentuje zmíněný střed otáčení. Následně je při každém pohybu myši zaznamenána aktuální poloha kurzoru, na základě které se v hlavní smyčce programu, v metodě update objektu View, vypočítá aktuální rychlost rotace. Rychlost neroste lineárně se vzdáleností od středu, ale pro výpočet je použita následující funkce: f(x) = 1 2 (sin( π max x π 2 ) + 1), kde max je maximální vzdálenost od středu rotace. Funkce způsobuje pomalejší rozjezd kamery a také nelineární dosažení maximální rychlosti. Průběh funkce znázorňuje obrázek 4.5. Rychlost otáčení se počítá zvlášť ve směru osy x a y. rychlost 1.0 0.8 0.6 0.4 0.2 20 40 60 80 100 Obrázek 4.5: Průběh funkce pro výpočet aktuální rychlosti rotace kamery kolem vybraného tělesa (maximální vzdálenost od středu je 100) Ukazatel rotace Aby uživatel měl větší kontrolu nad samotným otáčením, zobrazuje se zároveň přímo ve scéně ukazatel rotace. Skládá se z malé tečky reprezentující střed otáčení (místo kam uživatel kliknul) a kružnice zobrazující maximální 37

4. Popis implementace možnou rychlost (pokud uživatel tuto kružnici myší překročí, rychlost už se nebude zvyšovat). Oba prvky jsou vykresleny poloprůhledně, aby příliš nenarušovaly celou scénu. Zároveň kružnice znázorňuje tmavší méně průhlednou vrstvou aktuální rychlost otáčení. A to způsobem podobným tachometru na palubní desce auta. Nulová délka oblouku znamená nulovou rychlost a plně vykreslená kružnice znamená maximální rychlost (viz obr. 4.6). Obrázek 4.6: Render scény v režimu rotace kolem vybraného tělesa K renderování těchto navigačních prvků bylo zapotřebí zase jiných (již třetích) shaderových programů. K výpočtu polohy není tentokrát vůbec potřeba pohledová matice. Poloha se vůči pohledu nemění, navigace je jakoby přilepená ke kameře. Proto výpočet polohy vrcholů ve vertex shaderu vypadá takto: gl_position = Pmatrix * Mmatrix * vec4(position, 1.0); Kromě matice projekce a modelu a aktuální pozice vrcholu (position) potřebuje shader ještě barvu vrcholu, kterou beze změny předá fragment shaderu. Fragment shader je o poznání jednodušší než při renderování objektů scény. Navigace nepodléhá osvětlení. Bez ohledu na to, odkud světlo svítí, bude mít stále stejnou barvu. Počítat se musí akorát s průhledností, čili fragment shader potřebuje při renderování dostat alfa kanál. Výpočet výsledné barvy fragmentu probíhá následovně: 38

4.5. Stavění budov a GUI gl_fragcolor = vec4(fcolor.rgb, fcolor.a * alpha); Proměnná fcolor obsahuje barvu fragmentu získanou rasterizací z vertex shaderu. Složky RGB jsou ponechány beze změny, mění se jen alfa kanál vynásobením konstantou alpha, která říká, jak moc je fragment průhledný. Hodnota 0 znamená zcela průhledný a 1 neprůhledný. Zajímavé je, jak se vykresluje ukazatel aktuální rychlosti. Kružnice je sestavena s velkého počtu trojúhelníků. Dva trojúhelníky dohromady dávají jeden dílek stupnice rychlosti. V každém kroce hlavní smyčky programu je metodě starající se o renderování tohoto ukazatele předána aktuální rychlost, v podobě hodnoty 0 až 1 (1 znamená maximální rychlost). Touto hodnotou se vynásobí celkový počet vrcholů, ze kterých se prvek skládá, a upraví se, aby byl dělitelný šesti (dva trojúhelníky po třech vrcholech). Tento počet vrcholů se předá vertex shaderu pro vyrenderování ukazatele rychlosti. Obrázek 4.7: Způsob vykreslování ukazatele rychlosti Změna vzdálenosti Druhou operací, kterou má uživatel k dispozici po vybrání objektu, je změna vzdálenosti. Uskuteční jí pomocí kolečka myši. Implementace této operace nebyla moc náročná. Jedná se pouze o změnu aktuální rychlosti objektu View po vyvolání události kolečka myši. 4.5 Stavění budov a GUI Další formou interakce uživatele s aplikací je přidávání nových objektů. V případě této aplikace, kde virtuálním světem je vesmír, se jedná o simulaci stavění budov na povrchu planety nebo asteroidu. 39

4. Popis implementace Pro jednoduchost jsou všechny objekty v této testovací aplikaci zobrazovány jako koule. Proto i nově přidávané objekty jsou také reprezentovány koulemi. Uživatel má možnost pomocí jednoduchého grafického rozhraní měnit různé parametry těchto nových objektů, jako je např. velikost (poloměr koule) nebo barva. Stavění budov je ovládáno prostřednictvím levého tlačítka myši. Do režimu stavění se uživatel přepne kliknutím na příslušné tlačítko GUI, pod kterým se následně zobrazí speciální menu pro změnu parametrů. Po najetí myši (v tomto módu stavění) na planetu se nejprve zobrazí poloprůhledný model budoucí stavby, aby uživatel viděl, kde přesně bude budova umístěna. Následným kliknutím uživatel budovu postaví. Poté zůstává v režimu stavění, aby mohl rovnou přidávat další stavby. Mód stavění se ukončí opět kliknutím na stejné tlačítko GUI. Nové budovy je možné stavět nejen na planety, ale i na již existující budovy. To umožňuje např. postupně postavit most mezi jednotlivými stavbami nebo dokonce mezi planetami. Implementace stavění Jelikož byla implementace samotného stavění budov dost rozsáhlá, jsou zde popsány pouze její nejzajímavější části. V režimu stavění se nejprve po najetí myši zobrazuje poloprůhledný model nového objektu. K tomu je potřeba rozpoznat, na který objekt ve scéně ukazuje v daném okamžiku kurzor myši. To bylo implementováno stejně jako vybírání objektů (picking) pomocí shaderů s tím rozdílem, že renderování do textury neprobíhá po kliknutí myši, ale v každém kroku hlavní smyčky programu. Zde jsou také konečně využity ukládané typy objektů. Na jejich základě je rozhodováno, zda je možné na objektu postavit novou budovu, či nikoli. Více o implementaci vybírání objektů je v kapitole 4.2. Dalším důležitým momentem je rozpoznání polohy budovy vůči povrchu objektu, na který se staví. Z polohy kurzoru myši na obrazovce je potřeba určit, kam přesně se má budova postavit (resp. zobrazit poloprůhledný model), aby ležela správně na povrchu planety. K tomu byly znovu využity shaderové programy a opět metoda renderování do textury. Do textury se renderuje jen objekt (planeta, asteroid nebo již vytvořená budova), na který se bude stavět. Tentokrát se do textury místo skutečného vzhledu objektu renderuje informace o poloze jednotlivých vrcholů vůči středu objektu. 40

4.5. Stavění budov a GUI Vertex shader se jako obvykle stará o výpočet polohy daného vrcholu. Výpočet je stejný, jako při renderování scény v normálním režimu (poloha vrcholu se postupně násobí zleva maticemi modelu, pohledu a projekce). Tentokrát zde navíc probíhá ještě výpočet zmíněné polohy vůči středu, která se předá fragment shaderu. K tomu je potřeba poloha daného vrcholu ve světových souřadnicích. Vypočítá se vynásobením původní polohy bodu modelovou maticí: vec4 worldpos = Mmatrix * vec4(position, 1.0); I když budou dále potřeba jen tři souřadnice x, y a z, výsledkem operace je čtyřrozměrný vektor. Je to z důvodu, že matice modelu je čtyřrozměrná (obsahuje též posunutí - více v kapitole 1.4 Použité technologie ). Následně se vypočítá samotná poloha vůči středu: fposition = (worldpos.xyz - center) / (2.0 * radius) + 0.5; Od polohy vrcholu se odečte poloha středu a vydělí se průměrem koule. Tím se získá hodnota od -0.5 do 0.5. Protože není možné uložit jako RGB hodnotu záporné číslo, přičítá se jedna polovina. Tím vznikne výsledná hodnota 0 až 1. Proměnná center je třírozměrný vektor obsahující souřadnice středu objektu a je předána shaderu spolu s poloměrem (proměnná radius) při renderingu. Fragment shader už jen uloží předanou polohu vůči středu jako výslednou barvu fragmentu. A to zvlášť každou souřadnici do jednotlivých kanálů RGB: gl_fragcolor = vec4(fposition, 1.0); Na obrázku 4.8 je příklad vyrenderované textury s uloženou polohou jednotlivých vrcholů vůči středu. Teď, když je v textuře uložena poloha každého viditelného bodu povrchu planety, je jednoduché určit výslednou polohu nové budovy ve scéně. Grafické uživatelské rozhraní GUI bylo implementováno přímo ve WebGL a nachází se na obrazovce vpravo nahoře. Stejně jako ukazatel rychlosti otáčení je přilepeno v bezprostřední blízkosti ke kameře. V normálním režimu je zobrazeno pouze tlačítko pro zahájení resp. ukončení stavění. V režimu stavění se pod tímto tlačítkem zobrazuje menu pro změnu parametrů stavěné budovy. 41

4. Popis implementace Obrázek 4.8: Render scény do textury při zjišťování polohy nové budovy Toto menu se skládá z nahoře umístěného náhledu nové budovy a posuvníků pro změnu poloměru, barvy a offsetu - míra zanoření budovy do povrchu planety (některé budovy mohou být částečně v zemi, některé zase levitovat nad povrchem). Vyrenderované GUI je zobrazeno na obrázku 4.9. Aby bylo možné zobrazit náhled stavěné budovy přímo v uživatelském rozhraní (tedy přilepený ke kameře a zároveň před ostatními objekty scény), bylo potřeba v první fázi vyrenderovat tento objekt do textury. Tím vznikne 2D obrázek, který poté může být umístěn do příslušné části GUI. K vygenerování tohoto obrázku byly použity stejné shadery, jako při renderování navigačních prvků - ukazatele rotace, s tím rozdílem, že výsledný obraz není zobrazen na obrazovku, ale ukládán do textury. Následně je renderována výsledná část GUI s hotovým náhledem. Jelikož je potřeba načítat data z textury, používají se zase jiné shaderové programy. Výpočet polohy vrcholů ve vertex shaderu vypadá stejně jako u renderování náhledu do textury (poloha je transformována maticí modelu a projekce). Kromě toho zde vertex shader ještě předává beze změny texturovací souřadnice do fragment shaderu. Tyto souřadnice říkají, jak se má aplikovat textura na jednotlivé fragmenty renderovaného objektu. Výsledná barva fragmentu je načítána z textury ve fragment shaderu. Příslušný kód vypadá takto: 42

4.5. Stavění budov a GUI Obrázek 4.9: Grafické uživatelské rozhraní s menu pro stavění budov gl_fragcolor = texture2d(samtex, ftexture.st); Proměnná ftexture obsahuje zmíněné texturovací souřadnice a samtex ukazuje na odpovídající místo v paměti grafické karty, kde je uložená samotná textura. Jelikož se tyto shadery používají i pro renderování jiných prvků GUI, které také využívají textury (např. tlačítko pro zahájení stavění), upravuje fragment shader ještě výsledný alfa kanál, aby bylo celé uživatelské rozhraní mírně průhledné: gl_fragcolor = vec4(gl_fragcolor.rgb, gl_fragcolor.a * alpha); Pro renderování posuvníků jsou využívány stejné shadery jako pro ukazatele rotace nebo renderování náhledu do textury. Zajímavá je ale implementace změny hodnoty posuvníku. Ta se provádí také pomocí shaderů. Místo výsledné podoby posuvníku se do textury ukládá x- ová souřadnice příslušného fragmentu. Souřadnice mají hodnotu od 0 do 1 (zařízeno je to již samotnou stavbou posuvníku, čili není potřeba polohy jednotlivých vrcholů přepočítávat nebo transformovat maticemi) a jsou ukládány do R kanálu barevného modelu. Výsledný render takto zobrazeného posuvníku je na obrázku 4.10. 43

4. Popis implementace Obrázek 4.10: Render posuvníku při určování aktuální hodnoty Aktuální hodnota posuvníku se poté přečte z textury a přepočítá tak, aby patřila do intervalu povolených hodnot příslušným posuvníkem. Jelikož každý posuvník má definovaný minimální krok, o který se hodnota mění, získaná hodnota se ještě zaokrouhluje. 4.6 3D mapa Dalším prvkem grafického uživatelského rozhraní je mapa. Jedná se o 3D mapu prostoru, která zobrazuje polohu objektů scény vůči kameře. Pomáhá tak uživateli lépe se ve virtuálním světě orientovat. Je umístěna v pravém horním rohu obrazovky. Kamera (zde vesmírná loď) je na mapě umístěna zhruba doprostřed, což umožňuje uživateli pozorovat prostor nejen před raketou, ale i kus za ní. Mřížka naznačuje rovinu, ve které se vesmírná loď nachází. Vůči této rovině je pomocí svislých čar zobrazována poloha jednotlivých objektů scény, které se vyskytují v bezprostřední blízkosti rakety. Uživatel má tak možnost sledovat, zda jsou objekty nad nebo pod raketou a jak daleko. Jak mapa vypadá je zobrazeno na obrázku 4.11. Obrázek 4.11: 3D mapa prostoru 44