Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00141 002454 20852732 na godz. na dobę w sumie
Profesjonalne tworzenie gier internetowych dla systemu Android w językach HTML5, CSS3 i JavaScript - książka
Profesjonalne tworzenie gier internetowych dla systemu Android w językach HTML5, CSS3 i JavaScript - książka
Autor: , Liczba stron: 512
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-7401-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> programowanie mobilne >> android
Porównaj ceny (książka, ebook (-20%), audiobook).

Odnieś sukces na rynku gier!

Potencjał HTML5, CSS3 i JavaScriptu pozwala na tworzenie niesamowitych gier i aplikacji. Dzięki tym technologiom powstało oprogramowanie działające w mobilnej przeglądarce internetowej. Jeżeli dodamy do tego moc współczesnych telefonów i tabletów działających w oparciu o system Android, może się okazać, że to trio stanowi niezastąpiony zestaw narzędzi.

Dzięki tej książce rozwiniesz swoje umiejętności programistyczne! W trakcie lektury dowiesz się, jak najszybciej rozpocząć przygodę z grami dla platformy Android. W kolejnych rozdziałach nauczysz się korzystać z grafiki i animacji w przeglądarce, obsługiwać zdarzenia i operacje wykonywane przez użytkownika oraz stosować różne sposoby renderowania świata gry. Zbudujesz też swój własny silnik izometryczny oraz wykorzystasz WebGL do stworzenia zaawansowanej grafiki 3D. Dodatkowo zdobędziesz wiedzę na temat programowania sztucznej inteligencji oraz zapewniania komunikacji aplikacji z serwerem. W tej chwili tylko krok dzieli Cię od tworzenia gier w trybie multiplayer! Książka ta jest doskonałym i kompletnym źródłem informacji dla wszystkich osób chcących wykorzystać platformę Android i przeglądarkę internetową do pisania zaawansowanych i atrakcyjnych gier.

Stwórz grę:

Niezastąpiony podręcznik dla każdego programisty tworzącego gry!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Pro Android Web Game Apps: Using HTML5, CSS3 and JavaScript Tłumaczenie: Krzysztof Rychlicki-Kicior ISBN: 978-83-246-7401-5 Original edition copyright © 2012 by Juriy Bura and Paul Coates. All rights reserved. Polish edition copyright © 2013 by HELION SA. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/prtwgi Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/prtwgi.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĂci O autorach ..................................................................................................13 PodziÚkowania ...........................................................................................15 Wprowadzenie ...........................................................................................17 CzÚĂÊ I ¥wiaty dwuwymiarowe Rozdziaï 1. Zaczynamy ..................................................................................................23 Narzędzia ................................................................................................................................ 24 Co jest nam potrzebne? .................................................................................................. 24 Java Development Kit .................................................................................................... 27 Zintegrowane środowisko programistyczne ............................................................... 27 Serwer stron internetowych (WWW) ......................................................................... 33 SDK systemu Android i emulator ................................................................................ 34 Techniki .................................................................................................................................. 38 Kod .................................................................................................................................... 38 Programowanie zorientowane obiektowo .................................................................. 43 Słowo o przeglądarkach mobilnych ............................................................................. 51 Podsumowanie ....................................................................................................................... 51 Rozdziaï 2. Grafika w przeglÈdarce — pïótno ..............................................................53 Gry od podszewki .................................................................................................................. 53 Rysowanie wewnątrz przeglądarki ...................................................................................... 55 Podstawowe ustawienia strony HTML ............................................................................... 55 Czym jest płótno? .................................................................................................................. 56 Kontekst ........................................................................................................................... 57 Układ współrzędnych ..................................................................................................... 58 Kup książkęPoleć książkę SPIS TRE¥CI Rozdziaï 3. Rysowanie kształtów ............................................................................................................. 61 Prostokąty ........................................................................................................................ 62 Ścieżki ............................................................................................................................... 63 Podścieżki ........................................................................................................................ 71 Kontury i wypełnienia ........................................................................................................... 72 Kolory jednolite ............................................................................................................... 73 Gradienty ......................................................................................................................... 73 Wzorce .............................................................................................................................. 77 Stan kontekstu a przekształcenia ......................................................................................... 79 Przesunięcie ..................................................................................................................... 80 Skalowanie ....................................................................................................................... 81 Obrót ................................................................................................................................. 82 Grupowanie transformacji ............................................................................................ 82 Stan kontekstu ................................................................................................................. 84 Przekształcenia kontekstu w praktyce ......................................................................... 85 Widok przykładowego projektu — efekt końcowy .......................................................... 86 Podsumowanie ....................................................................................................................... 89 Tworzymy pierwszÈ grÚ! ............................................................................91 Szkielet gry HTML5 .............................................................................................................. 92 Podstawowy szkielet ....................................................................................................... 92 Wymuszanie orientacji .................................................................................................. 96 Architektura gry ..................................................................................................................... 98 Tworzymy grę ......................................................................................................................... 99 Renderowanie planszy ................................................................................................. 100 Stan i logika gry ............................................................................................................. 105 Scalanie komponentów — klasa Game ..................................................................... 110 Dodanie gry do szkieletu HTML ................................................................................ 113 Podsumowanie ..................................................................................................................... 115 Rozdziaï 4. Animacje i sprite’y ....................................................................................117 Sprite’y ................................................................................................................................... 118 Wczytywanie obrazków ............................................................................................... 119 Rysowanie obrazka ....................................................................................................... 129 Arkusze sprite’ów ......................................................................................................... 133 Podstawy animacji ............................................................................................................... 136 Najprostsza animacja ................................................................................................... 136 Wątki a JavaScript ......................................................................................................... 137 Timery ............................................................................................................................ 138 Poprawianie jakości animacji ...................................................................................... 141 Podsumowanie ..................................................................................................................... 153 Rozdziaï 5. Obsïuga zdarzeñ i zachowañ uĝytkownika ...............................................155 Zdarzenia w przeglądarce ................................................................................................... 156 Przeglądarka stacjonarna a wejście przeglądarki systemu Android ...................... 156 Stosowanie zdarzeń do przechwytywania wejścia użytkownika ............................ 157 6 Kup książkęPoleć książkę SPIS TRE¥CI Co jeszcze kryje się za zdarzeniami? .......................................................................... 160 Sposób obsługi różnic pomiędzy interfejsami dotykowymi a myszą .......................... 162 Własne zdarzenia ................................................................................................................. 165 Generatory i funkcje nasłuchujące własnych zdarzeń .................................................... 166 EventEmitter — klasa bazowa .................................................................................... 166 Zdarzenia a wywołania zwrotne ................................................................................. 169 Własne zdarzenia ................................................................................................................. 170 Implementacja klasy InputHandlerBase ................................................................... 173 Tworzymy klasę MouseInputHandler ....................................................................... 176 Tworzymy klasę TouchInputHandler ....................................................................... 178 Zaawansowane operacje wejściowe ................................................................................... 179 Przeciągnij i upuść ........................................................................................................ 179 Doskonałe wybieranie a maski obrazków ................................................................. 181 Złożone operacje ........................................................................................................... 182 Symulowanie dżojstika ........................................................................................................ 185 Podsumowanie ..................................................................................................................... 188 Rozdziaï 6. Renderowanie wirtualnych Ăwiatów ........................................................189 Mapy z kafelków .................................................................................................................. 189 Zasada działania map kafelkowych ............................................................................ 190 Implementacja mapy kafelków ................................................................................... 191 Mierzymy FPS ............................................................................................................... 196 Optymalizacja wydajności renderowania ........................................................................ 198 Rysuj tylko to, co potrzebne ........................................................................................ 198 Bufor pozaekranowy .................................................................................................... 200 Przechowywanie okolic obszaru widoku w pamięci ............................................... 203 Obiekty świata gry ............................................................................................................... 206 Układy współrzędnych ................................................................................................. 206 Implementacja klasy WorldObjectRenderer ............................................................ 208 Porządek sortowania .................................................................................................... 211 Optymalizacje ................................................................................................................ 213 Widok izometryczny ........................................................................................................... 214 Podsumowanie ..................................................................................................................... 217 Rozdziaï 7. Tworzymy silnik izometryczny ..................................................................219 Konfiguracja ......................................................................................................................... 220 Plan ................................................................................................................................. 221 Przygotowanie przestrzeni roboczej .......................................................................... 222 Podstawowy kod ........................................................................................................... 222 Przydatne mechanizmy ................................................................................................ 225 Teren izometryczny ............................................................................................................. 231 Układy współrzędnych ................................................................................................. 231 Renderowanie kafelków ............................................................................................... 232 Implementowanie klasy IsometricTileLayer ............................................................ 237 7 Kup książkęPoleć książkę SPIS TRE¥CI Renderowanie obiektów ..................................................................................................... 244 Implementacja klastrów obiektów ............................................................................. 248 Pamięć podręczna obiektów ........................................................................................ 250 Obsługa ruchu ............................................................................................................... 253 Obiekty złożone ............................................................................................................ 255 Warstwa obiektów — kolejne czynności ................................................................... 257 Brudne prostokąty ............................................................................................................... 257 Jak to działa? .................................................................................................................. 258 Implementacja ............................................................................................................... 259 Integracja z warstwami ................................................................................................ 263 Oznaczanie brudnych prostokątów ........................................................................... 266 Interfejs użytkownika a menedżer warstw ....................................................................... 268 Menedżer warstw .......................................................................................................... 268 Interfejs użytkownika ................................................................................................... 271 Interakcja .............................................................................................................................. 274 Propagowanie i obsługa zdarzeń ................................................................................ 275 Zatrzymywanie propagowania zdarzeń ..................................................................... 278 Podsumowanie ..................................................................................................................... 279 CzÚĂÊ II ¥wiaty trójwymiarowe Rozdziaï 8. 3D w przeglÈdarce ...................................................................................281 Renderowanie 3D — wprowadzenie ................................................................................. 282 Jak działa renderowanie 3D? .............................................................................................. 283 Przekształcenia matematyczne ................................................................................... 283 Przykład w trójwymiarze ............................................................................................. 283 Uproszczony silnik 3D ........................................................................................................ 285 Model i scena ................................................................................................................. 286 Renderowanie ................................................................................................................ 287 Podsumowanie ..................................................................................................................... 299 Rozdziaï 9. WebGL ......................................................................................................301 Podstawy WebGL ................................................................................................................ 302 Inicjalizacja WebGL ..................................................................................................... 302 Geometrie ...................................................................................................................... 304 Potok renderowania OpenGL ES 2.0 ......................................................................... 305 Stosowanie buforów ..................................................................................................... 307 Shadery i GLSL .............................................................................................................. 308 Prosty przykład — renderujemy sześcian ........................................................................ 313 Zastosowanie shaderów na stronie internetowej ..................................................... 313 Renderowanie aplikacji typu Witaj, świecie! ............................................................ 315 Eksplorowanie świata WebGL ........................................................................................... 319 Kolor ............................................................................................................................... 319 Tekstury ......................................................................................................................... 324 Ładowanie modeli ......................................................................................................... 327 Podsumowanie ..................................................................................................................... 330 8 Kup książkęPoleć książkę SPIS TRE¥CI CzÚĂÊ III ’Èczenie Ăwiatów Rozdziaï 10. Pora na serwer .........................................................................................331 Podstawy Node.js ................................................................................................................. 332 Wprowadzamy bibliotekę Node.js ............................................................................. 332 Jak programować w Node.js? ...................................................................................... 333 Instalacja Node.js .......................................................................................................... 335 Debugowanie skryptów Node.js ................................................................................. 336 Pisanie skryptów w Node.js ................................................................................................ 337 Wyjątki a stos wywołań ................................................................................................ 338 Globalna przestrzeń nazw a moduły Node ............................................................... 338 Tworzymy pierwszy moduł ......................................................................................... 341 Wykrywanie modułów ................................................................................................. 344 Stosowanie NPM ........................................................................................................... 345 Node.js w praktyce — tworzymy serwer dla gry ............................................................. 347 Frameworki do tworzenia aplikacji webowych w Node ......................................... 347 Najpierw podstawy ....................................................................................................... 348 Renderowanie stron internetowych ........................................................................... 351 Parsowanie wejścia użytkownika ................................................................................ 355 Stosowanie sesji ............................................................................................................. 357 Warstwa pośrednia .............................................................................................................. 358 Zachowanie porządku ......................................................................................................... 360 Zgłaszanie błędów ......................................................................................................... 360 Obsługa dziennika zdarzeń ......................................................................................... 364 Konfiguracje serwera .................................................................................................... 366 Podsumowanie ..................................................................................................................... 368 Rozdziaï 11. Rozmawiamy z serwerem .........................................................................369 Ewolucja komunikacji sieciowej w przeglądarkach ........................................................ 369 Konfiguracja serwera ........................................................................................................... 371 XMLHttpRequest API do obsługi żądań HTTP ............................................................. 372 Obsługa żądania HTTP przy użyciu XHR ................................................................ 373 Obsługa błędów w XHR ............................................................................................... 374 XMLHttpRequest Level 2 ............................................................................................ 375 Obsługa danych binarnych .......................................................................................... 376 Odwrotny Ajax ..................................................................................................................... 378 Problem .......................................................................................................................... 378 Rozwiązania ................................................................................................................... 378 Najlepsze rozwiązania .................................................................................................. 379 Dopuszczalne rozwiązania .......................................................................................... 380 Przestarzałe rozwiązania .............................................................................................. 385 Testujemy transporty .......................................................................................................... 386 DDMS ............................................................................................................................. 386 Symulowanie złych warunków sieci przy użyciu zewnętrznego oprogramowania ........................................................ 387 Podsumowanie ...................................................................................................................... 388 9 Kup książkęPoleć książkę SPIS TRE¥CI Rozdziaï 12. Tworzymy grÚ sieciowÈ ............................................................................389 Architektura gry sieciowej .................................................................................................. 389 Architektura gry — od jednego do wielu graczy ...................................................... 391 Struktura projektu ........................................................................................................ 393 Lobby w grze przy użyciu Socket.IO ................................................................................. 394 Komunikacja klient-serwer ......................................................................................... 395 Dodawanie ekranu lobby do gry ................................................................................. 397 Dodawanie obsługi rozgrywki ........................................................................................... 402 Współdzielenie logiki pomiędzy klientem a serwerem ........................................... 403 Warstwa serwerowa ...................................................................................................... 404 Warstwa kliencka .......................................................................................................... 408 Podsumowanie ..................................................................................................................... 414 CzÚĂÊ IV Usprawnianie Ăwiatów Rozdziaï 13. Sztuczna inteligencja w grach ..................................................................415 Czy potrzebuję AI w mojej grze? ....................................................................................... 416 Wyszukiwanie ścieżek ......................................................................................................... 416 Grafy ...................................................................................................................................... 418 Czym jest graf? .............................................................................................................. 418 Implementacja grafów w języku JavaScript .............................................................. 420 Algorytmy wyszukiwania ścieżek ...................................................................................... 424 Algorytm A* .................................................................................................................. 424 Metody tworzenia grafu wyszukiwania ścieżek ........................................................ 430 Podejmowanie decyzji ......................................................................................................... 432 Podsumowanie ..................................................................................................................... 435 Rozdziaï 14. Silniki gier w jÚzyku JavaScript .................................................................437 API graficzne, biblioteki i silniki gier ............................................................................... 438 API graficzne ................................................................................................................. 438 Biblioteki graficzne ....................................................................................................... 439 Silniki gier ...................................................................................................................... 440 Crafty ..................................................................................................................................... 441 System komponentów encji ........................................................................................ 441 Witaj, świecie! w Crafty ............................................................................................... 444 Tworzymy grę w Crafty ............................................................................................... 447 Ostateczna wersja .......................................................................................................... 453 Podsumowanie ..................................................................................................................... 455 Rozdziaï 15. Tworzenie natywnych aplikacji .................................................................457 Aplikacje natywne ................................................................................................................ 458 Konfiguracja Apache Cordova (PhoneGap) .................................................................... 459 Konfiguracja narzędzia Cordova ................................................................................ 460 Konfiguracja Apache Ant ............................................................................................ 460 10 Kup książkęPoleć książkę SPIS TRE¥CI Budowanie aplikacji natywnej ........................................................................................... 461 Tworzenie pustego projektu dla systemu Android .................................................. 461 Testowanie szkieletu aplikacji Android ..................................................................... 462 Podstawowy projekt Cordova ..................................................................................... 463 Obsługa sieci .................................................................................................................. 467 Ostatnie modyfikacje: nazwa, ikona i tryb pełnoekranowy .................................... 468 Stosowanie natywnych API ......................................................................................... 471 Przygotowanie do publikacji .............................................................................................. 473 Podpisywanie aplikacji ................................................................................................. 474 Publikowanie w serwisie Google Play ........................................................................ 476 Aktualizacja aplikacji .................................................................................................... 479 Podsumowanie ..................................................................................................................... 481 Rozdziaï 16. Obsïuga děwiÚków ...................................................................................483 Dźwięki na stronach internetowych ................................................................................. 484 Znacznik audio .............................................................................................................. 484 Web Audio API ............................................................................................................. 485 Dźwięk w domyślnej przeglądarce systemu Android ............................................. 486 Stosowanie biblioteki SoundManager2 ............................................................................ 487 Wstępna konfiguracja .................................................................................................. 487 Odtwarzanie w pętli ...................................................................................................... 489 Obsługa dźwięku w grze .............................................................................................. 490 Odtwarzanie dźwięków w aplikacjach Cordova .............................................................. 493 Doświadczenie użytkownika .............................................................................................. 493 Podsumowanie ..................................................................................................................... 494 Co dalej? ................................................................................................................................ 494 Dodatek A. Debugowanie aplikacji klienckich w JavaScripcie .....................................495 Przykład do zdebugowania ................................................................................................. 495 Debugowanie w przeglądarce stacjonarnej ...................................................................... 496 Debugowanie urządzeń mobilnych ................................................................................... 499 Rejestrowanie informacji (niemal) bez zmian w kodzie ................................................ 500 weinre .................................................................................................................................... 502 Podsumowanie ..................................................................................................................... 503 Skorowidz .................................................................................................505 11 Kup książkęPoleć książkę SPIS TRE¥CI 12 Kup książkęPoleć książkę R O Z D Z I A ’ 8 „ „ „ 3D w przeglÈdarce W pierwszej części książki nauczyliśmy się tworzyć gry dwuwymiarowe. Przez wiele lat tego rodzaju gry definiowały maksimum możliwości, jakie można było osiągnąć. Dopiero później pojawienie się coraz bardziej realistycznych gier trójwymiarowych zaczęło zmieniać ten stan rzeczy. Jedynym powodem, dla którego nie możesz uruchomić Skyrima na swoim telefonie, są możliwości Twojego urządzenia. Silniki trójwymiarowe wymagają znacznie więcej mocy obliczeniowej w porównaniu z dwuwymiarowymi. W przypadku silników dwuwymiarowych renderowanie jest całkiem proste — wystarczy wyświetlić na płótnie piksele pobrane z obrazka i ewentualnie uwzględnić jego przezroczystość. Silnik trójwymiarowy wymaga znacznie więcej mocy — związane z nim przekształcenia matematyczne są znacznie bardziej skomplikowane. Jest to też jeden z istotnych powodów, dla których przeglądarki (zarówno stacjonarne, jak i mobilne) do niedawna nie były w stanie natywnie obsługiwać możliwości 3D. W tym rozdziale skupimy się wyłącznie na tworzeniu trójwymiarowych aplikacji przy użyciu przeglądarki. Obsługa trzech wymiarów w przeglądarce jest możliwa dzięki „standardowej” implementacji, nazywanej WebGL. W świecie mobilnym WebGL stawia dopiero pierwsze kroki. W momencie pisania tej książki jedyną przeglądarką (dostępną dla urządzeń z systemem Android), która obsługuje ten standard, jest Firefox Mobile1. Sony Xperia PLAY obsługuje WebGL w domyślnej przeglądarce. Ze względu na dynamiczny rozwój tej technologii w przeglądarkach stacjonarnych możemy się spodziewać, że niebawem będzie ona powszechnie dostępna również na urządzeniach mobilnych. Im więcej urządzeń będzie obsługiwało grafikę trójwymiarową, tym więcej gier w tej technologii będzie dostępnych w naszych przeglądarkach. Z tego względu programista powinien wiedzieć, jak działają mechanizmy renderowania 3D i co trzeba samodzielnie zaimplementować, aby wszystko działało jak należy. Ten rozdział jest w całości poświęcony podstawom grafiki trójwymiarowej. Jednocześnie stanowi on niejako wprowadzenie do rozdziału 9., w którym poznamy podstawy WebGL. W tym rozdziale poznasz następujące zagadnienia: x podstawy renderowania 3D: jak przedstawiać bryły na płaskim ekranie, x podstawy algebry macierzy: podstawowe przekształcenia matematyczne kryjące się za grafiką trójwymiarową, x perspektywa i rzuty: jak sprawić, by scena była bardziej naturalna. Celem tego rozdziału jest utworzenie prostego dema, w którym wyrenderujemy podstawowy model 3D. Rozpoczniemy od najprostszego kształtu — sześcianu. 1 W momencie tłumaczenia częściowe wsparcie oferuje też Opera Mobile — przyp. tłum. Kup książkęPoleć książkę ROZDZIA’ 8. „ 3D W PRZEGLkDARCE Renderowanie 3D — wprowadzenie Czym właściwie jest grafika 3D? Pod jakim względem różni się ona od grafiki dwuwymiarowej, którą stosowaliśmy w poprzednich rozdziałach? Grafika 3D jest rzecz jasna iluzją — podobnie jak animacje. Renderując animację, tak naprawdę zmieniamy ramki na tyle szybko, aby użytkownik odniósł wrażenie, że obiekt się porusza. W rzeczywistości nie ma mowy o jakimkolwiek prawdziwym ruchu. Piksele pozostają na swoim miejscu — zmienia się jedynie ich kolor, co nie zmienia faktu, że na ekranie osiągamy efekt ruchu. Renderowanie sceny trójwymiarowej przebiega podobnie. Wyświetlacz jest płaski, ale scena jest renderowana w taki sposób, aby użytkownik miał wrażenie, że patrzy na trójwymiarowy świat przez okno. Teraz musimy zadać sobie pytanie: czy skoro grafika 3D stanowi tak naprawdę specjalny przypadek grafiki 2D (którą dobrze znamy), to możemy zastosować kontekst płótna 2D do rysowania sceny trójwymiarowej? Jest to w istocie bardzo dobre pytanie. W praktyce utworzenie bardzo prostego silnika 3D jedynie przy użyciu płótna jest możliwe, jednak będziemy musieli sobie poradzić z dwoma podstawowymi problemami. Przede wszystkim będziemy musieli zmagać się ze znacznie większą liczbą obliczeń i przekształceń matematycznych. Ilość pracy, jaką trzeba włożyć od strony matematycznej (także biorąc pod uwagę wszelkiego rodzaju optymalizacje), w przypadku grafiki 3D i 2D różni rząd wielkości. Nawet jeśli poświęciłbyś kilka lat na nauczenie się wszystkiego, co konieczne do stworzenia własnego silnika 3D, szybko napotkałbyś inny problem: brak mocy urządzenia potrzebnej do obsługi zaimplementowanego własnoręcznie renderera 3D. Gdy gracze, programiści tworzący gry i producenci sprzętu zrozumieli, że grafika trójwymiarowa stanowi niezbędny element gier komputerowych, zauważyli też, że procesor (ang. Central Processing Unit, CPU — centralna jednostka przetwarzania) nie jest najlepszym narzędziem do renderowania tego rodzaju grafiki. Podjęli więc decyzję o dodaniu specjalnych kart graficznych, które są odpowiedzialne wyłącznie za tego rodzaju obliczenia. Często karty te są droższe od samych procesorów! W języku JavaScript w przeglądarkach nie możesz bezpośrednio uzyskać dostępu do GPU (ang. Graphics Processing Unit — jednostka przetwarzania grafiki) w celu bezpośredniego wykonania renderowania właśnie w niej. Jesteś ograniczony tylko do silnika języka JavaScript, który wszystkie instrukcje wykonuje w ramach zwykłego procesora (CPU). Procesory nie są przystosowane do wykonywania tego rodzaju operacji, dlatego renderowanie zajmie znacznie więcej czasu niż w przypadku GPU. Zanim w świecie aplikacji internetowych pojawiło się WebGL, utworzenie własnego renderera 3D stanowiło jedyną metodę obsługi grafiki trójwymiarowej w przeglądarce bez użycia Flasha lub Javy. Programiści tworzyli własne silniki; niektóre z nich były naprawdę interesujące. Niestety, koniec końców zawsze czegoś brakowało, ponieważ nie da się stworzyć gry trójwymiarowej o przyzwoitej jakości w ramach kontekstu 2D. WebGL działa inaczej — dzięki niemu jesteś w stanie przekazać najgorszą część obliczeń do GPU. Większość telefonów dostępnych na rynku nie dysponuje jeszcze odrębną jednostką GPU, niemniej jest to tylko kwestia czasu. Co zatem stanie się, jeśli uruchomisz WebGL na takim urządzeniu? Czy to API w ogóle zadziała? Tak, oczywiście. Problem w tym, że do renderowania sceny zostanie użyty CPU, przez co nie uzyskasz zbyt wielu klatek na sekundę. Gdy scena jest renderowana przez GPU, mamy do czynienia z renderowaniem sprzętowym (ang. hardware rendering) — oznacza to, że obliczenia są wykonywane w ramach GPU, który jest przystosowany do tego typu pracy. Z drugiej strony renderowanie może być też przeprowadzone programowo (ang. software rendering). Ma ono miejsce, gdy renderujesz scenę przy użyciu CPU, np. z poziomu języka JavaScript bez użycia WebGL lub na urządzeniu, które w ogóle nie zawiera osobnej jednostki GPU. „ Uwaga Problemy z dziaïaniem WebGL moĝesz mieÊ nawet na swoim komputerze stacjonarnym. Istnieje specjalna „czarna lista” kombinacji urzÈdzenie – sterownik – system operacyjny, które powodujÈ problemy z dziaïaniem tego API. JeĂli konfiguracja Twojego komputera zakwalifikuje siÚ na tÚ czarnÈ listÚ, kontekst WebGL nie bÚdzie akcelerowany (przyspieszany), a nawet moĝe w ogóle nie dziaïaÊ. JeĂli chcesz zaryzykowaÊ, moĝesz ustawiÊ specjalny parametr, który spowoduje zignorowanie czarnej listy w trakcie dziaïania przeglÈdarki. W przypadku Chrome musisz uruchomiÊ przeglÈdarkÚ z parametrem ignore-gpu-blacklist. W Firefoksie musisz przejĂÊ na stronÚ about:config i ustawiÊ zmiennÈ webgl.force-enabled na true. 282 Kup książkęPoleć książkę JAK DZIA’A RENDEROWANIE 3D? Jak dziaïa renderowanie 3D? Ten podrozdział stanowił dla mnie jedno z największych wyzwań podczas pisania tej książki. Renderowanie 3D to temat niezwykle skomplikowany — nietrudno byłoby wypełnić treścią jedną, a nawet dwie książki poświęcone tylko temu zagadnieniu. Spróbuję wyjaśnić tylko najistotniejsze zagadnienia, abyś był w stanie zrozumieć bardziej zaawansowane algorytmy kryjące się za całym procesem. Postaram się również ograniczyć matematyczne opisy do minimum, jednak nie da się ich zupełnie uniknąć. Przekształcenia matematyczne Zacznijmy od dobrej informacji — wszystkie operacje wykonywane w przestrzeni dwuwymiarowej będą działać prawidłowo również w trójwymiarze. Wszystko, co robimy w świecie 3D, działa podobnie jak w przypadku dwuwymiarowym, jednak musimy uwzględnić jeszcze jeden wymiar, nazywany zwyczajowo „z”. W świecie 2D środek odcinka oblicza się zgodnie z wzorami: x = (x1 + x2)/2, y = (y1 + y2)/2 Jeśli dodamy jeszcze jeden wymiar, otrzymamy wzory na środek odcinka trójwymiarowego: x = (x1 + x2)/2, y = (y1 + y2)/2, z=(z1 + z2)/2 To samo stwierdzenie jest prawdziwe przy obliczaniu długości odcinka pomiędzy dwoma punktami. W przypadku dwuwymiarowym wzór jest następujący: d = sqrt((x1 - x2)^2 + (y1 - y2)^2) Po dodaniu trzeciego wymiaru otrzymujemy wzór: d = sqrt((x1 - x2)^2 + (y1 - y2)^2 + (z1 - z2)^2) Czemu jest to takie istotne? Niektóre zagadnienia łatwiej zrozumieć w przypadku dwuwymiarowym — wzory i ilustracje są znacznie prostsze. Po zrozumieniu tych zagadnień w 2D zastosowanie ich w świecie trójwymiarowym staje się proste. Jeśli jakakolwiek omawiana kwestia jest dla Ciebie trudna do zrozumienia, spróbuj przeanalizować ją w przypadku dwuwymiarowym. Przeniesienie jej potem na grunt trójwymiarowy nie będzie stanowić dla Ciebie problemu. Oczywiście od każdej reguły są pewne wyjątki. W przypadku świata 2D linie albo się przecinają, albo są do siebie równoległe. W trójwymiarze linie mogą nie być równoległe ani się nie przecinać. Przykład w trójwymiarze Zacznijmy od przykładu wziętego prosto z życia. Jaki jest najprostszy przykład renderowania świata trójwymiarowego na powierzchni dwuwymiarowej? Oczywiście jest to zdjęcie lub film wideo. Aparat robi zdjęcie sceny trójwymiarowej i umieszcza je na powierzchni 2D. Dawniej powierzchnią był film (taśma) — obecnie jest to cyfrowa matryca. Rysunek 8.1 przedstawia zasadę działania aparatu. Światło odbijane przez obiekty jest przechwytywane przez soczewki i przekazywane do matrycy. Obraz jest odwrócony, co wynika ze sposobu działania soczewki. Aparaty cyfrowe udostępniają funkcję przybliżenia (ang. zoom). Wciśnięcie przycisku powoduje powiększenie widocznego obiektu. Tak naprawdę wewnątrz aparatu następuje zmiana odległości ogniskowej, co przekłada się na zwiększenie lub zmniejszenie widocznego obszaru (rysunek 8.2). Większy widoczny obszar oznacza możliwość ujęcia na zdjęciu większej liczby obiektów przy jednoczesnym zmniejszeniu ich rozmiarów — innymi słowy, jest to operacja oddalenia (ang. zoom out). Odwrotna operacja powoduje zmniejszenie obszaru widoku i powiększenie obiektów, czyli jest to operacja powiększenia (ang. zoom in). 283 Kup książkęPoleć książkę ROZDZIA’ 8. „ 3D W PRZEGLkDARCE Rysunek 8.1. Zdjęcie z aparatu stanowi dobry przykład dwuwymiarowej projekcji używanej do przedstawienia fragmentu sceny trójwymiarowej Rysunek 8.2. Zmiana ogniskowej powoduje przybliżanie lub oddalanie: im większy staje się obszar widoku, tym mniejszy jest obiekt na ekranie Renderowanie sceny 3D przebiega niemal identycznie, przy czym nie korzystamy rzecz jasna z żadnych soczewek. Nie musimy więc umieszczać „docelowej” powierzchni dwuwymiarowej za ogniskiem. Musimy zachowywać się tak, jakbyśmy stali przed kamerą (rysunek 8.3). Rysunek 8.3. W grafice komputerowej nie ma soczewek. Z tego względu płaszczyzna „przechwytująca” scenę musi się znaleźć przed ogniskiem. Mimo różnic zasady przybliżania i oddalania pozostają niezmienione Przeanalizujmy teraz różnice pomiędzy renderowaniem sceny 3D a robieniem zdjęcia. W przeciwieństwie do świata rzeczywistego scena 3D jest tworzona z trójkąta (jest to do tej pory 284 Kup książkęPoleć książkę UPROSZCZONY SILNIK 3D najlepszy sposób przedstawiania trójwymiarowych modeli). Trójkąty nie mają żadnych fizycznych właściwości, w przeciwieństwie do obiektów, z którymi stykasz się każdego dnia. Nie mają wagi, koloru, nie są stworzone z konkretnego materiału itd. Wszystkie właściwości musimy zasymulować, korzystając ze skomplikowanych modeli matematycznych. Klikając przycisk aparatu w celu zrobienia zdjęcia, masz szczęście, gdyż proste zjawiska fizyczne umożliwiają osiągnięcie pożądanego efektu: światło odbija się w określony sposób od powierzchni, będąc mniej lub bardziej zaburzone w wyniku mgły, wysokiej temperatury lub innych warunków atmosferycznych. Koniec końców dociera ono do aparatu lub siatkówki Twojego oka, tworząc obraz. W świecie trójwymiarowym musimy samodzielnie zaimplementować prawa fizyki i przeprowadzać skomplikowane obliczenia, aby uzyskać pożądany efekt, który będzie widoczny dla użytkownika. To właśnie dlatego silniki trójwymiarowe są takie skomplikowane. Na szczęście mam dla Ciebie dobrą wiadomość — nie musisz przeprowadzać superrealistycznych symulacji wszystkich praw optyki, aby stworzyć silnik 3D. Jeśli pominiemy symulację oświetlenia i materiałów, silnik staje się w istocie dość prosty — jego zadaniem jest jedynie wyświetlanie wielokątów na ekranie. Programem typu Witaj, świecie! dla grafiki trójwymiarowej jest obracający się sześcian. Dojdziemy do tego — i to bez ani jednej instrukcji z WebGL. Dlaczego? Bo w ten sposób znacznie lepiej zrozumiesz zasady działania grafiki trójwymiarowej. Uproszczony silnik 3D W tym podrozdziale utworzymy najprostszy możliwy silnik trójwymiarowy, korzystając jedynie ze znanego nam API płótna. Rozpoczniemy od reprezentacji obiektów 3D w języku JavaScript. Następnie przejdziemy do macierzy — matematycznych obiektów pomagających renderować modele na ekranie. Dzięki macierzom i przekształceniom będziemy w stanie obrócić sześcian na ekranie. Na koniec zajmiemy się perspektywami i rzutami (projekcjami), które sprawią, że nasz model będzie bardziej naturalny. Naszym celem jest wyświetlenie obracającego się sześcianu (rysunek 8.4). Rysunek 8.4. Ostateczna wersja aplikacji wykonywanej w tym rozdziale — renderujemy sześcian 285 Kup książkęPoleć książkę ROZDZIA’ 8. „ 3D W PRZEGLkDARCE Model i scena Najpierw musimy określić dane niezbędne do wyrenderowania sceny. Przede wszystkim konieczne jest posiadanie listy wierzchołków tworzących sześcian lub dowolny inny model, który chcemy wyświetlić. Następnie musimy zdefiniować połączenia między punktami, czyli krawędzie. Pierwszym krokiem tworzenia tej aplikacji będzie zdefiniowanie sześcianu w języku JavaScript. Model W przestrzeni trójwymiarowej model jest reprezentowany przy użyciu wierzchołków (ang. vertexes), krawędzi (ang. edges) i ścian (płaszczyzn — ang. faces). Wierzchołek to punkt w przestrzeni, krawędź to odcinek łączący dwa wierzchołki, a ściana to powierzchnia ograniczona krawędziami. Sześcian ma osiem wierzchołków, dwanaście krawędzi i sześć ścian: każda krawędź łączy parę wierzchołków, a każda ściana jest ograniczona czterema krawędziami. Każdy punkt w przestrzeni 3D jest reprezentowany przy użyciu trzech współrzędnych: x, y i z. Zerknijmy na rysunek 8.5, który przedstawia sześcian, kierunki układu współrzędnych i współrzędne wierzchołków sześcianu. Rysunek 8.5. Sześcian w przestrzeni 3D „ Uwaga W przestrzeni 3D nie uĝywa siÚ kierunków: góra, dóï, lewo i prawo. Mamy do czynienia z trzema osiami, z których kaĝda wskazuje inny kierunek. O tym, która oĂ wskazuje „górÚ”, decydujesz Ty — zazwyczaj przyjmuje siÚ jednak, ĝe wysokoĂÊ jest okreĂlana na osi Z. Początek układu współrzędnych znajduje się w środku sześcianu — jest to punkt (0, 0, 0). Dla uproszczenia przyjmujemy, że krawędzi sześcianu mają długość 2, a zatem wszystkie współrzędne wszystkich wierzchołków mają wartość –1 lub 1. Teraz musimy zapisać informacje o wierzchołkach w tablicy. Osiem jej elementów przechowuje wszystkie osiem wierzchołków w tablicy (listing 8.1). Listing 8.1. Wierzchołki sześcianu var vertices = [ [-1, -1, -1], [-1, -1, 1], [-1, 1, -1], [-1, 1, 1], [1, -1, -1], [1, -1, 1], [1, 1, -1], [1, 1, 1] ]; 286 Kup książkęPoleć książkę UPROSZCZONY SILNIK 3D Drugą część modelu stanowią krawędzie. Krawędź to odcinek, który łączy dwa wierzchołki. Nie musimy przechowywać współrzędnych wierzchołków krawędzi, ponieważ są one zdefiniowane w tablicy wierzchołków. Wystarczy więc odwoływać się do numerów wierzchołków, posługując się indeksami z pierwszej tablicy. Pierwsza krawędź na listingu 8.2 jest zapisana przy użyciu współrzędnych [0, 1]. Oznacza to, że wierzchołek o indeksie 0 łączy się z wierzchołkiem o indeksie 1. Zerknij do tablicy wierzchołków, a przekonasz się, że współrzędne tych punktów to (–1, –1, –1) i (–1, –1, 1). Kod tablicy krawędzi został pokazany na listingu 8.2. Listing 8.2. Krawędzie sześcianu — każdy element zawiera indeksy z tablicy wierzchołków var edges = [ [0, 1], [0, 2], [0, 4], [1, 3], [1, 5], [2, 3], [2, 6], [3, 7], [4, 5], [4, 6], [5, 7], [6, 7] ]; Scena Mamy już sześcian, dlatego teraz skupimy się na możliwości oglądania go pod różnymi kątami. W rzeczywistości nie możemy przemieszczać świata, dlatego zmieniamy położenie aparatu (kamery). W grafice trójwymiarowej zetkniemy się z odwrotną sytuacją — kamera jest nieruchoma, kierunek również nie ulega zmianie. W technologii WebGL kamera jest skierowana w dół, wzdłuż osi Z, przez co obiekt o mniejszej wartości współrzędnej z wydaje się bardziej oddalony. Aby pokazać użytkownikowi żądany fragment sceny, musimy dopasować kąt i położenie kamery lub zmienić kąt i położenie świata. Zasada działania jest identyczna jak w poprzednim rozdziale: aby użytkownik odniósł wrażenie przemieszczania się po mapie, obszar widoku pozostanie nieruchomy, a będziemy poruszać właśnie mapą (światem). Obrót to tylko jeden z przykładów przekształceń, które możesz zastosować do swojego modelu. Można także przemieszczać obiekt po scenie lub skalować go względem wybranych osi. Zaimplementowanie tych operacji samodzielnie nie jest trudne. Problemy zaczynają się, gdy zechcesz je grupować. Rozważmy przykład, w którym przesuwasz obiekt o pięć jednostek w lewo, obracasz go o π radianów wokół osi Z i skalujesz go trzy razy względem osi X. Zaimplementowanie takiego cyklu operacji stanowi dobre ćwiczenie matematyczne, jednak najpierw zajmiemy się innym mechanizmem o sprawdzonej skuteczności. Renderowanie Po zdefiniowaniu współrzędnych modelu i zapisaniu ich w tablicy możemy wyrenderować sześcian na ekranie. Jak przekształcić te punkty w szkielet? W tym rozdziale nauczymy się wykonywać bardzo proste renderowanie 3D. Wyrenderowanie bryły trójwymiarowej wymaga obliczenia rzutu wierzchołków na ekranie. Po ich znalezieniu możemy narysować odcinki pomiędzy wszystkimi punktami, które są połączone krawędziami — i gotowe! W ten sposób otrzymujemy szkielet. Zagadnieniem z zakresu matematyki, które pozwoli nam na znalezienie rzutów (projekcji) i wykonanie renderowania, jest teoria macierzy. Rozpoczniemy od najprostszego pojęcia w jej ramach, czyli samej macierzy. Po omówieniu zasad użycia macierzy będziemy mogli zastosować zdobytą wiedzę w praktyce. Wyrenderujemy sześcian, po czym zaczniemy go obracać i stosować odpowiednią perspektywę, dzięki której sześcian wyda się bardziej naturalny. Macierze Czym jest macierz (ang. matrix)? Nie, nie chodzi nam o równoległą rzeczywistość, w której Neo walczy z agentem Smithem. Macierz to przede wszystkim elementarna struktura danych, niezbędna w każdej aplikacji trójwymiarowej. Rysunek 8.6 przedstawia przykładową macierz. 287 Kup książkęPoleć książkę ROZDZIA’ 8. „ 3D W PRZEGLkDARCE Rysunek 8.6. Przykład macierzy Macierz jest siatką liczb zbudowaną z wierszy i kolumn. Macierze mogą rzecz jasna przyjmować różne rozmiary. Rysunek 8.6 przedstawia macierz o rozmiarze 4 na 4. Naturalnym sposobem reprezentacji macierzy w języku JavaScript jest stosowanie tablic dwuwymiarowych. To, co jest naprawdę ważne w przypadku macierzy o tym rozmiarze, to fakt, że taka macierz może przechować dowolną liczbę przekształceń w dowolnej kolejności, jaką zastosujesz wobec swojej sceny. Jak? Otóż każda macierz reprezentuje pewne przekształcenie: obrót, skalowanie, przesunięcie (translację) lub połączenie wszystkich trzech. Rysunek 8.7 przedstawia kilka przykładów. Rysunek 8.7. Macierze reprezentują różne przekształcenia. Od lewej do prawej: zmniejszenie o 50 wzdłuż osi X, przesunięcie o pięć jednostek wzdłuż osi X i o dwie wzdłuż osi Y, obrót wokół osi Z o około 45 stopni Jeśli nigdy nie korzystałeś z macierzy, rysunek 8.7 przedstawia dla Ciebie trzy siatki nieistotnych liczb. Całość stanie się bardziej czytelna, jeśli wiesz, jak mnoży się macierze. Zasady nie są intuicyjne — znacznie łatwiej jest opisać je na macierzach o rozmiarze 2 na 2. Załóżmy, że chcesz pomnożyć macierz A przez B. Ogólna zasada mnożenia macierzy jest następująca: aby uzyskać wartość komórki, która znajduje się w m-tym wierszu i n-tej kolumnie wynikowej macierzy, musisz wziąć wartości z m-tego wiersza lewej macierzy i n-tej kolumny prawej macierzy, przemnożyć kolejne elementy przez siebie i je zsumować. Aby uzyskać wartość pierwszej komórki (wiersz 1., kolumna 1.), musisz wziąć wartości z pierwszego wiersza lewej macierzy i pierwszej kolumny prawej macierzy, pomnożyć ich kolejne elementy i dodać wszystkie cząstkowe iloczyny. Operacja jest przedstawiona na rysunku 8.8. Rysunek 8.8. Obliczenie pierwszego elementu wynikowej macierzy 288 Kup książkęPoleć książkę W przypadku elementu znajdującego się w pierwszym wierszu i drugiej kolumnie musisz skorzystać z pierwszego wiersza lewej macierzy i drugiej kolumny prawej macierzy, a następnie wykonać to samo: pomnożyć kolejne elementy przez siebie i dodać cząstkowe iloczyny. Rysunek 8.9 przedstawia przebieg tej operacji. UPROSZCZONY SILNIK 3D Rysunek 8.9. Następny krok mnożenia — drugi element w pierwszym wierszu Rysunek 8.10 przedstawia obliczenia niezbędne od uzyskania dwóch pozostałych komórek wynikowej macierzy. Rysunek 8.10. Ostateczny wynik mnożenia macierzy Wreszcie dochodzimy do długo wyczekiwanej funkcjonalności. Aby zastosować przekształcenie opisane przez macierz, musisz pomnożyć współrzędne punktu przez macierz. Uzyskasz w ten sposób nowe współrzędne punktu — po transformacji. Jeśli tę samą transformację zastosujesz wobec wszystkich wierzchołków sześcianu, przekształcisz cały sześcian; w ten sposób możesz obracać, skalować lub przesuwać całe bryły. Teraz możemy omówić sam mechanizm nieco dokładniej. Przede wszystkim musisz zapisać współrzędne punktu w formie macierzy: [x, y, z, 1]. Trzeba dodać współrzędną 1, aby było możliwe przeprowadzenie mnożenia macierzy. Zobaczmy, co się stanie, gdy weźmiemy pierwszy wierzchołek sześcianu i zastosujemy do niego drugą z przykładowych macierzy przekształceń. Rysunek 8.11 przedstawia efekt mnożenia. Rysunek 8.11. Stosowanie przekształceń do współrzędnych wierzchołków 289 Kup książkęPoleć książkę ROZDZIA’ 8. „ 3D W PRZEGLkDARCE Punkt został przesunięty o pięć jednostek na osi X i o dwie na osi Y. Dokładnie to chcieliśmy osiągnąć! Jeśli powtórzymy tę operację dla wszystkich wierzchołków sześcianu, zostaną one przesunięte w odpowiednie miejsca. Rysunek 8.12 przedstawia zasadę działania mechanizmu. Wykropkowane krawędzie oznaczają położenie sześcianu w momencie stosowania przekształcenia do każdego wierzchołka. Podświetlony punkt oznacza punkt, który został przekształcony. Rysunek 8.12. Przesunięcie sześcianu. Po przesunięciu wszystkich wierzchołków osiągamy przesunięcie całego sześcianu No cóż, nie jest to może porywający efekt, ponieważ moglibyśmy po prostu dodać wartości 5 i 2 do odpowiednich współrzędnych bez zajmowania się macierzami. Prawdziwe możliwości macierzy ujawniają się jednak, gdy musimy wykonać szereg przekształceń na zbiorze punktów. Jeśli musisz wykonać np. dziesięć różnych przekształceń (jedno na drugim), a Twój model ma wiele wierzchołków, musisz albo zastosować przekształcenia dla modelu jedno po drugim, albo utworzyć pojedynczą macierz, która implementuje wszystkie przekształcenia, i zastosować tylko ją. Zgadnij, które podejście jest lepsze. „ Uwaga Ta skromna jedynka, którÈ dodaliĂmy jako czwarty element wspóïrzÚdnych Ăwiata, nie znajduje siÚ tam tylko dla formalnoĂci (aby mnoĝenie byïo w ogóle moĝliwe). Silniki 3D reprezentujÈ punkty w nieco innym ukïadzie wspóïrzÚdnych, zwanym ukïadem wspóïrzÚdnych jednorodnych (ang. homogeneous coordinates system). Czemu sÈ one uĝywane w grafice komputerowej? Poniewaĝ stosowanie tego rodzaju wspóïrzÚdnych znacznie uïatwia wykonywanie rzutów. Bardziej szczegóïowe informacje na ten temat znajdziesz z ïatwoĂciÈ w internecie lub literaturze matematycznej, jednak z pewnoĂciÈ nie bÚdziesz potrzebowaï niczego wiÚcej poza omówionymi w tej ksiÈĝce mechanizmami. Mimo to zachÚcam do poszerzenia wiedzy na ten temat, gdy tylko dobrze zrozumiesz koncepty przedstawione do tej pory. Utworzenie macierzy, która łączy wiele przekształceń w jedno, jest niezwykle proste — wystarczy pomnożyć macierze, które określają pojedyncze transformacje. Jeśli pomnożysz macierz, która przesuwa wierzchołek w prawo o jedną jednostkę, przez macierz, która przesuwa wierzchołek o jedną jednostkę w górę, a następnie przez macierz, która obraca wierzchołek wokół osi X, uzyskasz macierz wykonującą wszystkie trzy operacje: przesuwającą obiekt w górę i w prawo, a także obracającą model. Operując na macierzach, musimy pamiętać o dwóch kwestiach. Po pierwsze, kolejność wykonywanych działań mnożenia ma znaczenie. Jeśli przeprowadzasz operacje na pojedynczych liczbach, nie ma znaczenia, czy wykonasz operację 5×3, czy 3×5 — w przypadku macierzy tak jednak nie jest. Wpływ kolejności przekształceń na efekt końcowy został przedstawiony na rysunku 8.13. 290 Kup książkęPoleć książkę UPROSZCZONY SILNIK 3D Rysunek 8.13. Zmiana kolejności przekształceń ma wpływ na efekt końcowy Trzeba również pamiętać o tym, że przekształcenia są stosowane w odwrotnej kolejności, tj. ostatnie wprowadzone przekształcenie zostanie zastosowane wobec modelu jako pierwsze. Na początku jest to nieco mylące, jednak na pewno się do tego przyzwyczaisz. Drugą kwestią, o której trzeba pamiętać, jest element neutralny. Podobnie jak pomnożenie liczby przez jeden nie zmienia wyniku mnożenia, tak pomnożenie macierzy przez macierz jednostkową nie zmieni danej macierzy — niezależnie od tego, czy macierz znajdzie się po lewej, czy po prawej stronie mnożenia. Macierz jednostkowa przedstawia brak jakichkolwiek przekształceń (rysunek 8.14). Rysunek 8.14. Macierz jednostkowa opisująca stan bez przekształceń Na zakończenie na rysunku 8.15 przedstawiamy krótką listę najczęściej używanych macierzy przekształceń. Nie bój się sinusów i cosinusów pojawiających się w macierzach obrotu — nie musisz zagłębiać się w szczegóły przekształceń punktów. 291 Kup książkęPoleć książkę ROZDZIA’ 8. „ 3D W PRZEGLkDARCE Rysunek 8.15. Różne rodzaje przekształceń przedstawione w formie macierzy Implementacja przeksztaïceñ Jesteśmy wreszcie gotowi do utworzenia pierwszej wersji naszego „sześciennego” silnika. Na początek dobre informacje. Wszystkie operacje na macierzach wykona za nas biblioteka gl-matrix (https://github.com/toji/gl-matrix). Dzięki Brandonowi Jonesowi możemy skorzystać z doskonałego i bardzo szybkiego narzędzia. Pobierz plik gl-matrix.js lub gl-matrix-min.js i dodaj go do projektu. Zgodnie z nazwą biblioteka jest zazwyczaj używana razem z biblioteką WebGL, jednak możemy ją bez problemów wykorzystać także w innych celach. Przekształcenie szkieletu sześcianu wymaga wykonania dwóch kroków: 1. Przekształcenia wszystkich wierzchołków (chcemy je obracać). 2. Narysowania linii pomiędzy wszystkimi wierzchołkami, pomiędzy którymi zostały zdefiniowane krawędzie. Kolejne kroki są przedstawione na rysunku 8.16. Rysunek 8.16. Kolejne kroki niezbędne do wyrenderowania szkieletu 292 Kup książkęPoleć książkę Zaczniemy od pierwszej operacji. Nasz sześcian musimy dwukrotnie przekształcić — obrócić wokół osi X i wokół osi Y (możesz zastosować także inne przekształcenia). Biblioteka gl-matrix.js udostępnia wiele metod, które ukrywają szczegóły implementacji w ramach biblioteki. Kod przekształceń został pokazany na listingu 8.3. UPROSZCZONY SILNIK 3D Listing 8.3. Tworzenie macierzy przekształceń var modelView = mat4.create(); mat4.identity(modelView); mat4.rotateX(modelView, xRot); mat4.rotateY(modelView, yRot); Na początku tworzymy pustą macierz. Jest ona wypełniona zerami, dlatego musimy ją zainicjalizować — w tym celu korzystamy z macierzy jednostkowej; w przeciwnym razie wszystkie przekszta
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Profesjonalne tworzenie gier internetowych dla systemu Android w językach HTML5, CSS3 i JavaScript
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: