Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00125 004922 14273528 na godz. na dobę w sumie
Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3 - ebook/pdf
Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3 - ebook/pdf
Autor: Liczba stron: 344
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9671-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-40%), audiobook).

Twój przewodnik po grafice 3D w HTML!

Do niedawna wywietlanie zaawansowanej grafiki 3D w przeglądarce internetowej wymagało zainstalowania dodatkowych wtyczek oraz poznawania nowych narzędzi. Dzięki HTML5 i WebGL te czasy powoli odchodzą w niepamięć! Teraz możesz wykorzystać niesamowite możliwoci tego duetu, by zaskoczyć użytkowników atrakcyjnymi efektami 3D!

Ta wyjątkowa książka została w całoci powięcona włanie zagadnieniom związanym z grafiką 3D w przeglądarce internetowej. Sięgnij po nią i przekonaj się, jak wykorzystać API WebGL do renderowania trójwymiarowej grafiki w czasie rzeczywistym. W kolejnych rozdziałach poznasz bibliotekę języka JavaScript Three.js, która w znaczący sposób ułatwia życie programisty. Informacje zawarte w dalszych rozdziałach pozwolą Ci skorzystać z zaawansowanych efektów w CSS3 i tworzyć animacje trójwymiarowe. Zaznajomisz się też z detalami tworzenia aplikacji dla urządzeń mobilnych. Twoją uwagę z pewnocią przykuje przegląd narzędzi do tworzenia trójwymiarowych modeli i animacji zarówno tych klasycznych, jak i tych online. Książka ta jest doskonałą lekturą dla wszystkich deweloperów chcących wzbogacić swój warsztat o elementy grafiki 3D.

Dzięki tej książce:

Poznaj potencjał HTML5 w zakresie grafiki 3D!

 

'Tony Parisi od samego początku wiedzie prym w dziedzinie rewolucyjnych rozwiązań pozwalających zagościć interaktywnym aplikacjom trójwymiarowym w internecie. Jego nowa książka zawiera dogłębne informacje na temat tych technologii oraz tworzenia najnowocześniejszych trójwymiarowych aplikacji naprawdę działających w aktualnie dostępnych przeglądarkach'.

- Neil Trevett
wiceprezes ds. treści mobilnej w firmie NVIDIA i prezes organizacji Khronos Group

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

Darmowy fragment publikacji:

Tytuł oryginału: Programming 3D Applications with HTML5 and WebGL Tłumaczenie: Łukasz Piwko ISBN: 978-83-246-9668-0 © 2014 Helion S.A. Authorized Polish translation of the English edition of Programming 3D Applications with HTML5 and WebGL, ISBN 9781449362966 © 2014 Tony Parisi. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. 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 bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/apli3d.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/apli3d Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:316)ci Przedmowa ....................................................................................................................9 Cz(cid:253)(cid:316)(cid:235) I. Podstawy ............................................................................................15 HTML5 jako nowe medium wizualne Grafika trójwymiarowa Przegl(cid:241)darka jako platforma Przegl(cid:241)darkowa rzeczywisto(cid:264)(cid:232) 1. Wprowadzenie .............................................................................................................17 19 20 21 22 22 23 24 24 25 26 27 Co to jest trójwymiarowo(cid:264)(cid:232)? Trójwymiarowe uk(cid:228)ady wspó(cid:228)rz(cid:246)dnych Siatki, wielok(cid:241)ty i wierzcho(cid:228)ki Materia(cid:228)y, tekstury i o(cid:264)wietlenie Przekszta(cid:228)cenia i macierze Kamery, perspektywa, obszary widoku oraz projekcje Programy cieniuj(cid:241)ce 2. Renderowanie grafiki trójwymiarowej na bie(cid:348)(cid:233)co przy u(cid:348)yciu biblioteki WebGL ..................................................................................... 31 32 Podstawy WebGL 33 API WebGL 34 Anatomia aplikacji WebGL Prosty przyk(cid:228)ad u(cid:276)ycia WebGL 34 35 36 36 37 38 40 Kanwa i kontekst rysunkowy WebGL Obszar widoku Bufory, bufory tablicowe i tablice typowane Macierze Shader Rysowanie obiektów podstawowych 3 Poleć książkęKup książkę Tworzenie bry(cid:228) Animacja Mapy tekstur Podsumowanie 41 45 46 51 3. Three.js — mechanizm do programowania grafiki trójwymiarowej Przygotowanie do pracy z Three.js Struktura projektu Three.js w JavaScripcie ..............................................................................................................53 53 Najbardziej znane projekty zbudowane przy u(cid:276)yciu Three.js Wprowadzenie do Three.js 56 58 58 59 61 61 62 64 65 Prosty program Three.js Tworzenie renderera Tworzenie sceny Implementacja p(cid:246)tli wykonawczej O(cid:264)wietlenie sceny Podsumowanie Geometria i siatki Graf sceny i hierarchia przekszta(cid:228)ce(cid:254) Zarz(cid:241)dzanie scen(cid:241) za pomoc(cid:241) grafu sceny Grafy sceny w Three.js Reprezentowanie przesuni(cid:246)cia, obrotu i skali Gotowe typy geometryczne (cid:263)cie(cid:276)ki, kszta(cid:228)ty i ekstruzje Bazowa klasa geometrii Geometria buforowana do optymalizacji renderowania siatki Importowanie siatek z programów do modelowania 4. Grafika i renderowanie w Three.js .............................................................................67 67 67 68 69 73 73 75 75 75 78 79 79 81 84 87 91 91 93 95 96 97 98 Przetwarzanie ko(cid:254)cowe i renderowanie wieloprzebiegowe Renderowanie opó(cid:274)nione Standardowe materia(cid:228)y siatki Dodawanie realizmu poprzez zastosowanie kilku tekstur Klasa ShaderMaterial: zrób to sam Stosowanie kodu GLSL z bibliotek(cid:241) Three.js Materia(cid:228)y O(cid:264)wietlenie Cienie Shadery Renderowanie Podsumowanie 4 (cid:95) Spis tre(cid:316)ci Poleć książkęKup książkę Sterowanie animacj(cid:241) za pomoc(cid:241) funkcji requestAnimationFrame() Animowanie przy u(cid:276)yciu programowego aktualizowania w(cid:228)a(cid:264)ciwo(cid:264)ci Animowanie przej(cid:264)(cid:232) przy u(cid:276)yciu mi(cid:246)dzyklatek U(cid:276)ywanie funkcji requestAnimationFrame() we w(cid:228)asnych aplikacjach Funkcja requestAnimationFrame() a wydajno(cid:264)(cid:232) Animacje klatkowe a animacje czasowe 5. Animacje trójwymiarowe ............................................................................................99 100 102 103 103 104 106 106 107 109 110 113 115 118 121 124 129 Tworzenie wra(cid:276)enia p(cid:228)ynnego ruchu przy u(cid:276)yciu krzywych i (cid:264)ledzenia (cid:264)cie(cid:276)ki Animacja postaci i twarzy przy u(cid:276)yciu morfingu Animowanie postaci przy u(cid:276)yciu animacji szkieletowej Animowanie przy u(cid:276)yciu shaderów Podsumowanie Interpolacja Biblioteka Tween.js Funkcja pr(cid:246)dko(cid:264)ci animacji Tworzenie skomplikowanych animacji przy u(cid:276)yciu klatek kluczowych Animacje obiektów po(cid:228)(cid:241)czonych z u(cid:276)yciem klatek kluczowych Przekszta(cid:228)cenia CSS Przekszta(cid:228)cenia trójwymiarowe w praktyce Perspektywa Tworzenie hierarchii przekszta(cid:228)ce(cid:254) Kontrolowanie renderowania tylnej (cid:264)ciany obiektów Zestawienie w(cid:228)asno(cid:264)ci przekszta(cid:228)ceniowych CSS 6. Tworzenie zaawansowanych efektów na stronach przy u(cid:348)yciu CSS3 ....................131 133 134 136 138 140 143 143 147 151 151 152 153 154 155 Renderowanie obiektów trójwymiarowych Renderowanie (cid:264)rodowisk trójwymiarowych Tworzenie zaawansowanych efektów przy u(cid:276)yciu filtrów CSS Renderowanie trójwymiarowe w CSS przy u(cid:276)yciu Three.js Przej(cid:264)cia CSS Animacje CSS Zaawansowane funkcje CSS Podsumowanie Kanwa — podstawowe wiadomo(cid:264)ci 7. Kanwa dwuwymiarowa .............................................................................................157 158 158 160 164 Element kanwy i dwuwymiarowy kontekst rysunkowy W(cid:228)a(cid:264)ciwo(cid:264)ci API Canvas Renderowanie obiektów trójwymiarowych przy u(cid:276)yciu API Canvas Spis tre(cid:316)ci (cid:95) 5 Poleć książkęKup książkę Trójwymiarowe biblioteki oparte na kanwie K3D Renderer biblioteki Three.js rysuj(cid:241)cy na kanwie Podsumowanie 167 168 169 174 Cz(cid:253)(cid:316)(cid:235) II. Techniki tworzenia aplikacji ...........................................................175 Proces tworzenia grafiki trójwymiarowej Narz(cid:246)dzia do tworzenia trójwymiarowych modeli i animacji Modelowanie Teksturowanie Animowanie Sztuka techniczna Klasyczne programy komputerowe Przegl(cid:241)darkowe (cid:264)rodowiska zintegrowane Repozytoria 3D i darmowe zdj(cid:246)cia 8. Proces powstawania tre(cid:316)ci trójwymiarowej .............................................................177 177 178 178 179 180 181 181 185 188 190 190 192 193 201 202 207 208 211 212 Format JSON biblioteki Three.js Format binarny biblioteki Three.js Wczytywanie sceny w formacie COLLADA przy u(cid:276)yciu biblioteki Three.js (cid:227)adowanie sceny glTF przy u(cid:276)yciu biblioteki Three.js Formaty modelowe Formaty animacyjne Formaty do zapisywania ca(cid:228)ych scen Wczytywanie tre(cid:264)ci do aplikacji WebGL Trójwymiarowe formaty plików Podsumowanie Koncepcje szkieletów trójwymiarowych Przegl(cid:241)d systemów szkieletowych dla WebGL Silniki gier Prezentacyjne systemy szkieletowe Czym jest system szkieletowy? Wymagania dotycz(cid:241)ce systemów szkieletowych dla WebGL 9. Trójwymiarowe silniki i systemy szkieletowe ......................................................... 213 214 214 215 217 217 220 223 223 224 226 226 232 T(cid:228)o i metody projektowania Architektura systemu Vizi Podstawy obs(cid:228)ugi systemu Vizi Prosta aplikacja Vizi Vizi — komponentowy system do tworzenia wizualnych aplikacji sieciowych Podsumowanie 6 (cid:95) Spis tre(cid:316)ci Poleć książkęKup książkę Podgl(cid:241)danie i testowanie tre(cid:264)ci trójwymiarowej Projektowanie aplikacji Tworzenie trójwymiarowej tre(cid:264)ci Eksportowanie sceny Maya do formatu COLLADA Konwertowanie pliku COLLADA na glTF Narz(cid:246)dzie do podgl(cid:241)du na bazie systemu Vizi Klasa Vizi.Viewer Klasa wczytuj(cid:241)ca Vizi 10. Budowa prostej aplikacji trójwymiarowej ...............................................................233 234 235 236 237 238 239 240 241 244 247 247 249 251 251 252 254 255 Metody API grafu sceny Vizi: findNode() i map() Animowanie przezroczysto(cid:264)ci za pomoc(cid:241) klasy Vizi.FadeBehavior Automatyczne obracanie modelu za pomoc(cid:241) klasy Vizi.RotateBehavior Wy(cid:264)wietlanie informacji o cz(cid:246)(cid:264)ciach za pomoc(cid:241) klasy Vizi.Picker Sterowanie animacjami w interfejsie u(cid:276)ytkownika Zmienianie kolorów przy u(cid:276)yciu wybieraka Integrowanie tre(cid:264)ci trójwymiarowej z aplikacj(cid:241) Trójwymiarowe zachowania i interakcje Podsumowanie Tworzenie warstwy wizualnej Podgl(cid:241)danie i testowanie (cid:264)rodowiska Podgl(cid:241)danie sceny w trybie pierwszoosobowym Przegl(cid:241)danie grafu sceny Przegl(cid:241)danie w(cid:228)a(cid:264)ciwo(cid:264)ci obiektów Wy(cid:264)wietlanie ramek obiektów Ogl(cid:241)danie wielu obiektów Wyszukiwanie za pomoc(cid:241) przegl(cid:241)darki innych problemów ze scen(cid:241) 11. Tworzenie trójwymiarowego (cid:316)rodowiska ...............................................................257 259 260 261 261 265 266 269 270 272 272 272 275 275 277 279 281 281 283 283 284 286 Kontrolery kamery Kontroler pierwszoosobowy — obliczenia Wybieranie kierunku patrzenia za pomoc(cid:241) myszy Proste wykrywanie kolizji (cid:227)adowanie i inicjowanie (cid:264)rodowiska (cid:227)adowanie i inicjowanie modelu samochodu Implementowanie nawigacji pierwszoosobowej Pos(cid:228)ugiwanie si(cid:246) wieloma kamerami Tworzenie animowanych i czasowych przej(cid:264)(cid:232) Trójwymiarowe pud(cid:228)o nieba Obiekt Skybox systemu Vizi Tworzenie trójwymiarowego t(cid:228)a przy u(cid:276)yciu pud(cid:228)a nieba Dodawanie do aplikacji trójwymiarowej tre(cid:264)ci Spis tre(cid:316)ci (cid:95) 7 Poleć książkęKup książkę Implementacja zachowa(cid:254) obiektów Implementowanie w(cid:228)asnych sk(cid:228)adników na bazie klasy Vizi.Script Kontroler samochodu Dodawanie d(cid:274)wi(cid:246)ków do (cid:264)rodowiska Renderowanie dynamicznych tekstur Podsumowanie 288 288 288 294 296 300 12. Tworzenie aplikacji dla urz(cid:233)dze(cid:295) przeno(cid:316)nych ....................................................... 301 302 303 304 Przeno(cid:264)ne platformy trójwymiarowe Tworzenie aplikacji dla mobilnych wersji przegl(cid:241)darek internetowych Dodawanie obs(cid:228)ugi interfejsu dotykowego Debugowanie mobilnej funkcjonalno(cid:264)ci w stacjonarnej wersji przegl(cid:241)darki Chrome Tworzenie aplikacji sieciowych Tworzenie aplikacji sieciowych i narz(cid:246)dzia do ich testowania Pakowanie aplikacji sieciowych do dystrybucji Tworzenie aplikacji hybrydowych CocoonJS jako technologia tworzenia gier i aplikacji HTML dla urz(cid:241)dze(cid:254) mobilnych Sk(cid:228)adanie aplikacji przy u(cid:276)yciu biblioteki CocoonJS Tworzenie hybrydowych aplikacji WebGL — konkluzja Wydajno(cid:264)(cid:232) mobilnych aplikacji trójwymiarowych Podsumowanie 309 311 311 312 313 314 316 322 322 324 A. (cid:345)ród(cid:293)a informacji .......................................................................................................327 Skorowidz ..................................................................................................................339 8 (cid:95) Spis tre(cid:316)ci Poleć książkęKup książkę ROZDZIA(cid:292) 4. Grafika i renderowanie w Three.js W tym rozdziale dowiesz si(cid:246), jakie narz(cid:246)dzia do rysowania grafiki i renderowania scen dost(cid:246)pne s(cid:241) w bibliotece Three.js. Je(cid:264)li jeste(cid:264) pocz(cid:241)tkuj(cid:241)cym programist(cid:241) grafiki trójwymiarowej, nie staraj si(cid:246) jednocze(cid:264)nie zrozumie(cid:232) wszystkich poruszanych tematów. Lepiej wybieraj po jednym i analizuj przyk(cid:228)ady. W ten sposób szybko nauczysz si(cid:246) tworzy(cid:232) wspania(cid:228)e strony z trójwymiarowymi efektami. Biblioteka Three.js ma bogaty system graficzny, inspirowany wieloma wcze(cid:264)niejszymi bi- bliotekami trójwymiarowymi, który powsta(cid:228) z wykorzystaniem do(cid:264)wiadczenia ich twórców. Ma wszystko, co powinna mie(cid:232) biblioteka do tworzenia grafiki trójwymiarowej, a wi(cid:246)c dwu- i trój- wymiarow(cid:241) geometri(cid:246) budowan(cid:241) z siatek wielok(cid:241)tów, grafy scen z hierarchicznymi obiektami i przekszta(cid:228)ceniami, materia(cid:228)y, tekstury i (cid:264)wiat(cid:228)a, generowane na bie(cid:276)(cid:241)co cienie, programo- walne shadery oraz elastyczny system renderingu umo(cid:276)liwiaj(cid:241)cy stosowanie technik wielo- powtórzeniowych i opó(cid:274)nie(cid:254) w celu uzyskania zaawansowanych efektów specjalnych. Geometria i siatki Jedn(cid:241) z najwi(cid:246)kszych zalet pos(cid:228)ugiwania si(cid:246) bibliotek(cid:241) Three.js w porównaniu z u(cid:276)ywaniem wprost API WebGL jest oszcz(cid:246)dno(cid:264)(cid:232) pracy potrzebnej do tego, by utworzy(cid:232) i narysowa(cid:232) figury geometryczne. Przypomnij sobie ca(cid:228)e strony kodu z rozdzia(cid:228)u 2., napisane w celu utworzenia danych kszta(cid:228)tów i tekstur dla prostej kostki oraz przeniesienia tego wszystkiego do pami(cid:246)ci WebGL, aby ostatecznie narysowa(cid:232) to na ekranie. Biblioteka Three.js oszcz(cid:246)dza wielu k(cid:228)o- potów, udost(cid:246)pniaj(cid:241)c kilka gotowych obiektów geometrycznych, w(cid:264)ród których znajduj(cid:241) si(cid:246) kostki i cylindry, kszta(cid:228)ty (cid:264)cie(cid:276)kowe, wyt(cid:228)aczana geometria dwuwymiarowa oraz klasa ba- zowa do rozszerzania, aby u(cid:276)ytkownik móg(cid:228) tworzy(cid:232) w(cid:228)asne kszta(cid:228)ty. Przyjrzyjmy si(cid:246) tym udogodnieniom. Gotowe typy geometryczne Biblioteka Three.js zawiera wiele gotowych typów geometrycznych reprezentuj(cid:241)cych najcz(cid:246)(cid:264)ciej u(cid:276)ywane kszta(cid:228)ty. Znajduj(cid:241) si(cid:246) w(cid:264)ród nich proste jednolite figury, takie jak kostki, sfery i cy- lindry, oraz bardziej skomplikowane kszta(cid:228)ty parametryczne, jak ekstruzje i kszta(cid:228)ty (cid:264)cie(cid:276)- kowe, torusy czy w(cid:246)z(cid:228)y, p(cid:228)askie dwuwymiarowe kszta(cid:228)ty renderowane w przestrzeni trójwymia- rowej, takie jak ko(cid:228)a, kwadraty i pier(cid:264)cienie, a nawet trójwymiarowy wyciskany (ang. extruded) 67 Poleć książkęKup książkę tekst generowany z (cid:228)a(cid:254)cuchów tekstowych. Ponadto biblioteka Three.js u(cid:228)atwia rysowanie punktów i linii trójwymiarowych. Wi(cid:246)kszo(cid:264)(cid:232) z tych obiektów mo(cid:276)na z (cid:228)atwo(cid:264)ci(cid:241) utworzy(cid:232) przy u(cid:276)yciu jednowierszowego konstruktora, ale niektóre wymagaj(cid:241) podania z(cid:228)o(cid:276)onych parametrów i napisania nieco wi(cid:246)kszej ilo(cid:264)ci kodu. Aby zobaczy(cid:232) na (cid:276)ywo, jak wygl(cid:241)daj(cid:241) gotowe obiekty geometryczne biblioteki Three.js, otwórz przyk(cid:228)adowy plik projektu Three.js znajduj(cid:241)cy si(cid:246) w folderze examples/webgl_geometries.html (rysunek 4.1). Ka(cid:276)dy obiekt siatki zawiera inny typ geometrii, a tekstura ukazuje sposób genero- wania wspó(cid:228)rz(cid:246)dnych teksturowych. Tekstury zosta(cid:228)y udost(cid:246)pnione przez PixelCG Tips and Tricks, fantastyczny portal z poradami na temat grafiki komputerowej (http://www.pixelcg.com/blog/). Sce- na jest o(cid:264)wietlona (cid:264)wiat(cid:228)em kierunkowym, aby ukaza(cid:232) cieniowanie ka(cid:276)dego z obiektów. Rysunek 4.1. Przyk(cid:228)ady obiektów geometrycznych biblioteki Three.js. Od lewej i od przodu: sfera, dwudziesto(cid:264)cian, o(cid:264)mio(cid:264)cian, czworo(cid:264)cian; p(cid:228)aszczyzna, kostka, ko(cid:228)o, pier(cid:264)cie(cid:254), cylinder; „tokarka”, torus i w(cid:246)ze(cid:228) z torusa; osie x, y i z (cid:315)cie(cid:348)ki, kszta(cid:293)ty i ekstruzje Klasy Path, Shape i ExtrudeGeometry umo(cid:276)liwiaj(cid:241) tworzenie obiektów geometrycznych na wiele sposobów, np. wyciskanie obiektów z krzywych. Na rysunku 4.2 przedstawiona jest ekstruzja wygenerowana przy u(cid:276)yciu krzywej sk(cid:228)adanej (ang. spline curve). Aby zobaczy(cid:232) j(cid:241) w swoim komputerze, otwórz plik examples/webgl_geometry_extrude_shapes.html, natomiast w pliku examples/webgl_geometry_extrude_splines.html mo(cid:276)na wybiera(cid:232) algorytmy generowania krzywej sk(cid:228)adanej, a nawet porusza(cid:232) si(cid:246) po niej za pomoc(cid:241) animowanej kamery. Po(cid:228)(cid:241)czenie krzywej sk(cid:228)adanej z ekstruzj(cid:241) to doskona(cid:228)y sposób na generowanie naturalnie wygl(cid:241)daj(cid:241)cych kszta(cid:228)tów. Szczegó(cid:228)owy opis krzywych sk(cid:228)adanych znajduje si(cid:246) w rozdziale 5. 68 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę Rysunek 4.2. Ekstruzje utworzone przy u(cid:276)yciu krzywej sk(cid:228)adanej z biblioteki Three.js Klasy typu Shape mo(cid:276)na te(cid:276) stosowa(cid:232) do tworzenia p(cid:228)askich figur dwuwymiarowych oraz ich trójwymiarowych ekstruzji. Powiedzmy, (cid:276)e mamy bibliotek(cid:246) danych dwuwymiarowych wielok(cid:241)tów (np. granic geopolitycznych albo grafiki wektorowej). Dane te mo(cid:276)na w miar(cid:246) (cid:228)atwo zaimportowa(cid:232) do Three.js za pomoc(cid:241) klasy Path zawieraj(cid:241)cej metody do generowania (cid:264)cie(cid:276)ek, takie jak moveTo() i lineTo(), które powinny by(cid:232) znane ka(cid:276)demu, kto zajmuje si(cid:246) ry- sowaniem grafiki dwuwymiarowej. (W istocie jest to dwuwymiarowe API rysunkowe osadzone w bibliotece grafiki trójwymiarowej). Po co to robi(cid:232)? Dwuwymiarowy kszta(cid:228)t mo(cid:276)na wyko- rzysta(cid:232) do utworzenia p(cid:228)askiej siatki istniej(cid:241)cej w przestrzeni trójwymiarowej, któr(cid:241) mo(cid:276)na przekszta(cid:228)ca(cid:232), tak jak ka(cid:276)dy inny obiekt trójwymiarowy (przesuwa(cid:232), obraca(cid:232) i skalowa(cid:232)). Mo(cid:276)- na j(cid:241) pokrywa(cid:232) materia(cid:228)ami, o(cid:264)wietla(cid:232) oraz cieniowa(cid:232) wraz z pozosta(cid:228)ymi przedmiotami na scenie albo ekstrudowa(cid:232) w celu utworzenia prawdziwych trójwymiarowych kszta(cid:228)tów z dwu- wymiarowego zarysu. Doskona(cid:228)(cid:241) ilustracj(cid:246) tych mo(cid:276)liwo(cid:264)ci przedstawiono na rysunku 4.3, b(cid:246)d(cid:241)cym zrzutem ekranu z pliku examples/webgl_geometry_shapes.html. Wida(cid:232) na nim zarys Kalifornii, kilka prostych wie- lok(cid:241)tów oraz serca i u(cid:264)miechni(cid:246)te bu(cid:274)ki, wyrenderowane w ró(cid:276)nych formach, takich jak dwu- wymiarowe p(cid:228)askie siatki, ekstrudowane i (cid:264)ci(cid:246)te trójwymiarowe siatki oraz linie, a wszystko wygenerowane z danych (cid:264)cie(cid:276)kowych. Bazowa klasa geometrii Wszystkie gotowe typy geometryczne biblioteki Three.js pochodz(cid:241) od klasy bazowej THREE.Geometry (src/core/Geometry.js), której mo(cid:276)na te(cid:276) u(cid:276)ywa(cid:232) do tworzenia w(cid:228)asnych kszta(cid:228)tów geometrycz- nych. Aby dowiedzie(cid:232) si(cid:246), jak to robi(cid:232), zajrzyj do kodu (cid:274)ród(cid:228)owego gotowych typów, który Geometria i siatki (cid:95) 69 Poleć książkęKup książkę Rysunek 4.3. Ekstrudowane kszta(cid:228)ty utworzone na bazie (cid:264)cie(cid:276)ek przy u(cid:276)yciu biblioteki Three.js znajduje si(cid:246) w folderze src/extras/geometries projektu biblioteki. Na listingu 4.1 znajduje si(cid:246) kod jednego z najprostszych obiektów o nazwie THREE.CircleGeometry. Jak wida(cid:232), nie jest zbyt ob- szerny, bo zmie(cid:264)ci(cid:228) si(cid:246) na jednej stronie. Listing 4.1. Kod geometrii ko(cid:228)a z biblioteki Three.js /** * @author hughes */ THREE.CircleGeometry = function ( radius, segments, thetaStart, thetaLength ) { THREE.Geometry.call( this ); radius = radius || 50; thetaStart = thetaStart !== undefined ? thetaStart : 0; thetaLength = thetaLength !== undefined ? thetaLength : Math.PI * 2; segments = segments !== undefined ? Math.max( 3, segments ) : 8; var i, uvs = [], center = new THREE.Vector3(), centerUV = new THREE.Vector2( 0.5, 0.5 ); this.vertices.push(center); uvs.push( centerUV ); 70 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę for ( i = 0; i = segments; i ++ ) { var vertex = new THREE.Vector3(); var segment = thetaStart + i / segments * thetaLength; vertex.x = radius * Math.cos( segment ); vertex.y = radius * Math.sin( segment ); this.vertices.push( vertex ); uvs.push( new THREE.Vector2( ( vertex.x / radius + 1 ) / 2, ( vertex.y / radius + 1 ) / 2 ) ); } var n = new THREE.Vector3( 0, 0, 1 ); for ( i = 1; i = segments; i ++ ) { var v1 = i; var v2 = i + 1 ; var v3 = 0; this.faces.push( new THREE.Face3( v1, v2, v3, [ n, n, n ] ) ); this.faceVertexUvs[ 0 ].push( [ uvs[ i ], uvs[ i + 1 ], centerUV ] ); } this.computeCentroids(); this.computeFaceNormals(); this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius ); }; THREE.CircleGeometry.prototype = Object.create( THREE.Geometry.prototype ); Konstruktor klasy THREE.CircleGeometry generuje p(cid:228)aski okr(cid:241)g(cid:228)y kszta(cid:228)t na p(cid:228)aszczy(cid:274)nie XY, tzn. z wszystkimi warto(cid:264)ciami z ustawionymi na zero. Sercem tego algorytmu jest kod generuj(cid:241)cy dane wierzcho(cid:228)ków kszta(cid:228)tu znajduj(cid:241)cy si(cid:246) w pierwszej p(cid:246)tli for. vertex.x = radius * Math.cos( segment ); vertex.y = radius * Math.sin( segment ); W rzeczywisto(cid:264)ci trójwymiarowe ko(cid:228)o jest rozet(cid:241) trójk(cid:241)tów stykaj(cid:241)cych si(cid:246) wierzcho(cid:228)kami w jej (cid:264)rodku. Przy u(cid:276)yciu odpowiedniej liczby takich trójk(cid:241)tów mo(cid:276)na uzyska(cid:232) g(cid:228)adk(cid:241) kra- w(cid:246)d(cid:274) obwodu, co pokazano na rysunku 4.4. Pierwsza p(cid:246)tla oblicza tylko wspó(cid:228)rz(cid:246)dne x i y wierzcho(cid:228)ków na obwodzie ko(cid:228)a. Trzeba jesz- cze utworzy(cid:232) bok (wielok(cid:241)t) reprezentuj(cid:241)cy ka(cid:276)dy z tych trójk(cid:241)tów zbudowanych przez trzy wierzcho(cid:228)ki: (cid:264)rodek i dwa znajduj(cid:241)ce si(cid:246) na obwodzie. Robi to druga p(cid:246)tla for, która two- rzy dane i wstawia je do tablicy this.faces. Ka(cid:276)dy bok zawiera indeksy trzech wierzcho(cid:228)ków z tablicy this.vertices oznaczonych jako v1, v2 i v3. Wierzcho(cid:228)ek v3 ma zawsze warto(cid:264)(cid:232) zero, poniewa(cid:276) odpowiada (cid:264)rodkowi. (Mo(cid:276)e pami(cid:246)tasz z rozdzia(cid:228)u 2., (cid:276)e w WebGL u(cid:276)ywa si(cid:246) funkcji gl.drawElements() do renderowania trójk(cid:241)tów przy u(cid:276)yciu tablicy indeksowanej. To samo dzieje si(cid:246) tutaj, tylko wewn(cid:241)trz mechanizmów biblioteki Three.js). Geometria i siatki (cid:95) 71 Poleć książkęKup książkę Rysunek 4.4. Trójk(cid:241)ty sk(cid:228)adaj(cid:241)ce si(cid:246) na obiekt THREE.CircleGeometry W ka(cid:276)dej z p(cid:246)tli pomin(cid:246)li(cid:264)my jeden szczegó(cid:228): generowanie wspó(cid:228)rz(cid:246)dnych teksturowych. Biblio- teka WebGL „nie wie”, jak mapowa(cid:232) piksele tekstury na rysowane trójk(cid:241)ty, wi(cid:246)c trzeba jej to podpowiedzie(cid:232). P(cid:246)tle for generuj(cid:241) wspó(cid:228)rz(cid:246)dne teksturowe, zwane równie(cid:276) wspó(cid:228)rz(cid:246)dnymi UV, i zapisuj(cid:241) je w tablicy this.faceVertexUVs w podobny sposób, jak generowa(cid:228)y warto(cid:264)ci wierz- cho(cid:228)ków. Przypomn(cid:246), (cid:276)e wspó(cid:228)rz(cid:246)dne teksturowe to zdefiniowane dla ka(cid:276)dego wierzcho(cid:228)ka pary liczb zmiennoprzecinkowych o warto(cid:264)ciach najcz(cid:246)(cid:264)ciej mieszcz(cid:241)cych si(cid:246) w przedziale od 0 do 1. Reprezentuj(cid:241) one miejsca w danych mapy bitowej, a shader u(cid:276)ywa ich do pobierania z tej mapy informacji o pikselach. Wspó(cid:228)rz(cid:246)dne teksturowe dla pierwszych dwóch wierzcho(cid:228)ków w ka(cid:276)dym trójk(cid:241)cie obliczamy, podobnie jak dane tych wierzcho(cid:228)ków, tzn. przy u(cid:276)yciu cosi- nusa k(cid:241)ta dla warto(cid:264)ci x i sinusa dla y, a warto(cid:264)ci mieszcz(cid:241)ce si(cid:246) w przedziale [0..1] uzysku- jemy przez podzielenie warto(cid:264)ci wierzcho(cid:228)ków przez promie(cid:254) ko(cid:228)a. Wspó(cid:228)rz(cid:246)dna teksturowa trzeciego wierzcho(cid:228)ka ka(cid:276)dego trójk(cid:241)ta, odpowiadaj(cid:241)ca (cid:264)rodkowi, to po prostu dwuwymiarowy (cid:264)rodek obrazu (0.5,0.5). Co oznaczaj(cid:241) litery UV? S(cid:241) to oznaczenia poziomej i pionowej osi dwuwymiarowej tekstury, u(cid:276)ywane, aby odró(cid:276)nia(cid:228)y si(cid:246) od wspó(cid:228)rz(cid:246)dnych X, Y i Z oznaczaj(cid:241)cych osie trójwymiarowe obiektu. Dok(cid:228)adniejszy opis tych wspó(cid:228)rz(cid:246)dnych znajduje si(cid:246) w Wiki- pedii (http://pl.wikipedia.org/wiki/UV_mapping). Po wygenerowaniu danych wierzcho(cid:228)ków i UV biblioteka Three.js ma wszystko, co jest potrzebne do renderowania geometrii. Ostatnie wiersze kodu konstruktora THREE.Circle zawieraj(cid:241) ju(cid:276) tylko wywo(cid:228)ania funkcji pomocniczych z bazowej klasy geometrii. Funkcja computeCentroids() okre(cid:264)la geometryczny (cid:264)rodek obiektu poprzez przejrzenie za pomoc(cid:241) p(cid:246)tli wszystkich jego wierz- cho(cid:228)ków i u(cid:264)rednienie pozycji. 72 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę Bardzo wa(cid:276)na jest funkcja computeFaceNormals(), poniewa(cid:276) wektory normalne obiektu, albo w skrócie normalne, decyduj(cid:241) o sposobie jego cieniowania. W przypadku p(cid:228)askiego ko(cid:228)a normal- ne ka(cid:276)dego boku s(cid:241) prostopad(cid:228)e do jego powierzchni. Funkcja computeFaceNormals()okre(cid:264)la je, obliczaj(cid:241)c wektor prostopad(cid:228)y do p(cid:228)aszczyzny zdefiniowanej przez trzy wierzcho(cid:228)ki wyzna- czaj(cid:241)ce ka(cid:276)dy trójk(cid:241)t ko(cid:228)a. Na rysunku 4.5 przedstawiona jest normalna p(cid:228)askiego cieniowa- nego trójk(cid:241)ta. Rysunek 4.5. Normalna p(cid:228)askiego cieniowanego trójk(cid:241)ta Na koniec konstruktor inicjuje bry(cid:228)(cid:246) brzegow(cid:241) (ang. bounding volume) dla obiektu, w tym przy- padku sfer(cid:246), która jest przydatna do wybierania, usuwania niewidocznych powierzchni i wpro- wadzania ró(cid:276)nych optymalizacji. Geometria buforowana do optymalizacji renderowania siatki W bibliotece Three.js jaki(cid:264) czas temu wprowadzono zoptymalizowan(cid:241) wersj(cid:246) geometrii o nazwie THREE.BufferGeometry. S(cid:228)u(cid:276)y ona do przechowywania danych w tablicach typowanych, co pozwala unikn(cid:241)(cid:232) narzutu zwi(cid:241)zanego z u(cid:276)ywaniem tablic liczb JavaScript. Ponadto klasa ta jest przydatna do przechowywania statycznej geometrii, np. te(cid:228) i przedmiotów scen, gdy wiadomo, (cid:276)e warto(cid:264)ci wierzcho(cid:228)ków si(cid:246) nie zmieni(cid:241), a obiekty nie s(cid:241) animowane, wi(cid:246)c nie zmieni(cid:241) po(cid:228)o(cid:276)enia na scenie. Je(cid:264)li ma si(cid:246) takie informacje, mo(cid:276)na utworzy(cid:232) obiekt klasy THREE.BufferGeometry, a bi- blioteka Three.js wprowadzi szereg optymalizacji znacznie przyspieszaj(cid:241)cych renderowanie tych obiektów. Importowanie siatek z programów do modelowania Do tej pory uczy(cid:228)e(cid:264) si(cid:246) technik tworzenia geometrii za pomoc(cid:241) kodu (cid:274)ród(cid:228)owego, ale w wi(cid:246)kszo- (cid:264)ci aplikacji stosuje si(cid:246) inne rozwi(cid:241)zanie, które polega na wczytywaniu trójwymiarowych modeli utworzonych w profesjonalnych programach do modelowania, takich jak 3ds Max, Maya czy Blender. Geometria i siatki (cid:95) 73 Poleć książkęKup książkę Biblioteka Three.js oferuje kilka narz(cid:246)dzi do konwersji i wczytywania plików modelowych. Prze(cid:264)ledzimy przyk(cid:228)ad (cid:228)adowania siatki — zarówno geometrii, jak i materia(cid:228)ów. Otwórz plik examples/webgl_loader_obj_mtl.html z projektu Three.js, aby zobaczy(cid:232) model widoczny na ry- sunku 4.6. Rysunek 4.6. Siatka za(cid:228)adowana z pliku w formacie Wavefront OBJ Widoczny na tym rysunku m(cid:246)(cid:276)czyzna zosta(cid:228) zaimportowany z pliku w formacie Wavefront OBJ (o rozszerzeniu .obj). Jest to popularny format tekstowy u(cid:276)ywany przez wiele programów do modelowania. Pliki te s(cid:241) proste, ale mog(cid:241) zawiera(cid:232) wy(cid:228)(cid:241)cznie dane geometryczne: wierzcho(cid:228)ki, normalne i wspó(cid:228)rz(cid:246)dne teksturowe. Dlatego firma Wavefront opracowa(cid:228)a dodatkowy for- mat plików dla materia(cid:228)ów, MTL, którego mo(cid:276)na u(cid:276)ywa(cid:232) do wi(cid:241)zania materia(cid:228)ów z obiektami w plikach OBJ. Kod (cid:274)ród(cid:228)owy mechanizmu Three.js wczytuj(cid:241)cego pliki w formacie OBJ (z materia(cid:228)ami) znajduje si(cid:246) w pliku examples/js/loaders/OBJMTLLoader.js. Je(cid:264)li przeanalizujesz sposób jego dzia(cid:228)ania, zauwa(cid:276)ysz, (cid:276)e tworzy on obiekty THREE.Geometry, podobnie jak gotowe klasy geometrii i kszta(cid:228)- tów. Parser MTL t(cid:228)umaczy opcje tekstowe znajduj(cid:241)ce si(cid:246) w pliku MTL na materia(cid:228)y zrozumia(cid:228)e dla Three.js. Nast(cid:246)pnie tworzony jest jeden obiekt THREE.Mesh, który mo(cid:276)na doda(cid:232) do sceny. Biblioteka Three.js zawiera przyk(cid:228)adowe mechanizmy wczytuj(cid:241)ce dla wielu formatów plików. Wi(cid:246)kszo(cid:264)(cid:232) formatów umo(cid:276)liwia definiowanie obiektów przy u(cid:276)yciu geometrii i materia(cid:228)ów, ale niektóre daj(cid:241) wi(cid:246)ksze mo(cid:276)liwo(cid:264)ci i umo(cid:276)liwiaj(cid:241) np. reprezentowanie ca(cid:228)ych scen, kamer, (cid:264)wiate(cid:228) oraz animacji. Szczegó(cid:228)owy opis tych formatów (i narz(cid:246)dzi do tworzenia plików) znaj- duje si(cid:246) w rozdziale 8., po(cid:264)wi(cid:246)conym procesowi tworzenia tre(cid:264)ci. 74 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę Wi(cid:246)kszo(cid:264)(cid:232) kodu dotycz(cid:241)cego wczytywania plików znajduje si(cid:246) poza rdzeniem bi- blioteki Three.js, w przyk(cid:228)adach. Dlatego ka(cid:276)dy mechanizm wczytuj(cid:241)cy nale(cid:276)y do(cid:228)(cid:241)- czy(cid:232) do projektu osobno, kiedy jest potrzebny. Je(cid:264)li nie napisano inaczej, narz(cid:246)dzia wczytuj(cid:241)ce podlegaj(cid:241) takiej samej licencji, co biblioteka, wi(cid:246)c mo(cid:276)na ich u(cid:276)ywa(cid:232) bez ogranicze(cid:254) we w(cid:228)asnych programach. Graf sceny i hierarchia przekszta(cid:293)ce(cid:295) W WebGL nie ma standardowej notacji do okre(cid:264)lania struktury sceny trójwymiarowej. Biblioteka ta to po prostu API do rysowania na kanwie i nic wi(cid:246)cej, a struktura sceny jest spraw(cid:241) kon- kretnej aplikacji. W Three.js istnieje model do tworzenia struktury sceny oparty na ugrunto- wanej koncepcji grafu sceny (ang. scene graph). Graf sceny to zbiór trójwymiarowych obiek- tów przechowywanych w hierarchii obiekt nadrz(cid:246)dny-obiekt podrz(cid:246)dny, której podstaw(cid:246) stanowi korze(cid:254). Aplikacja renderuje graf sceny poprzez wyrenderowanie korzenia, a nast(cid:246)pnie rekurencyjnie dodaje jego obiekty podrz(cid:246)dne. Zarz(cid:233)dzanie scen(cid:233) za pomoc(cid:233) grafu sceny Grafy sceny s(cid:241) najbardziej przydatne do reprezentowania z(cid:228)o(cid:276)onych obiektów w hierar- chiach. Wyobra(cid:274) sobie np. robota, pojazd albo uk(cid:228)ad s(cid:228)oneczny. Ka(cid:276)dy z tych obiektów sk(cid:228)a- da si(cid:246) z pewnej liczby cz(cid:246)(cid:264)ci — ko(cid:254)czyn, nóg, satelitów — z których ka(cid:276)da zachowuje si(cid:246) we w(cid:228)a(cid:264)ciwy sobie sposób. Graf sceny umo(cid:276)liwia, w zale(cid:276)no(cid:264)ci od potrzeb, traktowanie tych wszystkich obiektów jak indywidualnych cz(cid:246)(cid:264)ci albo jak stanowi(cid:241)cych ca(cid:228)o(cid:264)(cid:232) grup. Nie jest to jedynie udogodnienie organizacyjne, lecz tak(cid:276)e technika umo(cid:276)liwiaj(cid:241)ca skorzystanie z tzw. hierarchii przekszta(cid:228)ce(cid:254) (ang. transform hierarchy), w której obiekt podrz(cid:246)dny dziedziczy in- formacje dotycz(cid:241)ce przekszta(cid:228)ce(cid:254) trójwymiarowych (np. przesuni(cid:246)cia, obrotu, skalowania) po obiekcie nadrz(cid:246)dnym. Powiedzmy przyk(cid:228)adowo, (cid:276)e tworzymy animacj(cid:246) samochodu poru- szaj(cid:241)cego si(cid:246) po okre(cid:264)lonej (cid:264)cie(cid:276)ce. Bry(cid:228)a samochodu przesuwa si(cid:246) w wyznaczonym kierun- ku, ale jego ko(cid:228)a kr(cid:246)c(cid:241) si(cid:246) w sposób niezale(cid:276)ny od niej. Kiedy zdefiniujemy ko(cid:228)a jako obiekty podrz(cid:246)dne wzgl(cid:246)dem bry(cid:228)y samochodu, sprawimy, (cid:276)e b(cid:246)d(cid:241) one porusza(cid:232) si(cid:246) przez trójwy- miarow(cid:241) przestrze(cid:254) wraz z ca(cid:228)ym samochodem. W ten sposób unikniemy konieczno(cid:264)ci ani- mowania ruchu kó(cid:228) i wystarczy, (cid:276)e zdefiniujemy ich rotacj(cid:246). Okre(cid:264)lenie graf sceny w Three.js nie jest najlepsze. W technikach renderowania grafiki trójwymiarowej graf to poj(cid:246)cie odnosz(cid:241)ce si(cid:246) do skierowanego grafu acyklicznego (DAG — ang. directed acyclic graph), matematycznego bytu oznaczaj(cid:241)cego zbiór w(cid:246)z(cid:228)ów w relacji rodzic-dziecko, w której ka(cid:276)de dziecko mo(cid:276)e mie(cid:232) wielu rodziców. W grafie sceny biblioteki Three.js obiekty mog(cid:241) mie(cid:232) tylko jednego rodzica (obiekt nadrz(cid:246)d- ny). Podczas gdy zasadniczo nie jest b(cid:228)(cid:246)dem nazywanie tej hierarchii grafem, lepsze by(cid:228)oby okre(cid:264)lenie jej jako drzewo. Wi(cid:246)cej informacji na temat grafów w matematyce znajduje si(cid:246) w Wikipedii (http://en.wikipedia.org/wiki/Directed_acyclic_graph). Grafy sceny w Three.js Podstawowy obiekt grafu sceny w bibliotece Three.js jest typu THREE.Object3D (plik src/core/ Object3D.js w (cid:274)ród(cid:228)ach projektu Three.js). Klasa ta stanowi baz(cid:246) dla typów wizualnych, takich jak siatki, linie i systemy cz(cid:241)steczek, równie(cid:276) jest u(cid:276)ywana do grupowania innych obiektów w hierarchi(cid:246) grafu sceny. Graf sceny i hierarchia przekszta(cid:293)ce(cid:295) (cid:95) 75 Poleć książkęKup książkę Ka(cid:276)dy obiekt klasy Object3D we w(cid:228)asno(cid:264)ciach position (przesuni(cid:246)cie), rotation oraz scale za- wiera informacje dotycz(cid:241)ce przekszta(cid:228)ce(cid:254). Ustawiaj(cid:241)c ich warto(cid:264)ci, mo(cid:276)na dany obiekt prze- sun(cid:241)(cid:232), obróci(cid:232) i przeskalowa(cid:232). Je(cid:276)eli obiekt ma potomków (dzieci i ich dzieci), dziedzicz(cid:241) one jego ustawienia przekszta(cid:228)ce(cid:254). Je(cid:264)li w(cid:228)asno(cid:264)ci przekszta(cid:228)ce(cid:254) obiektów podrz(cid:246)dnych zostan(cid:241) zmienione, po(cid:228)(cid:241)cz(cid:241) si(cid:246) z ustawieniami obiektu nadrz(cid:246)dnego i ma to zastosowanie do samego do(cid:228)u hierarchii. Oto przyk(cid:228)ad. Na rysunku 4.7 wida(cid:232) bardzo prost(cid:241) hierarchi(cid:246) przekszta(cid:228)ce(cid:254). Kostka (cube) jest bezpo(cid:264)rednim potomkiem grupy kostek (cubeGroup). Grupa sfer (sphereGroup) równie(cid:276) jest bezpo(cid:264)rednim potomkiem grupy kostek (a wi(cid:246)c obiektem równorz(cid:246)dnym z kostk(cid:241)). Natomiast sfera (sphere) i sto(cid:276)ek (cone) to potomkowie grupy sfer. Rysunek 4.7. Graf sceny i hierarchia przekszta(cid:228)ce(cid:254) Three.js Przyk(cid:228)ad przedstawiony na powy(cid:276)szym rysunku znajduje si(cid:246) w pliku r4/threejsscene.html. Wy- (cid:264)wietla on w oknie przegl(cid:241)darki kostk(cid:246), sfer(cid:246) i sto(cid:276)ek; ka(cid:276)dy z tych obiektów obraca si(cid:246) w miej- scu. Scen(cid:241) mo(cid:276)na porusza(cid:232), klikaj(cid:241)c na niej i przeci(cid:241)gaj(cid:241)c j(cid:241) mysz(cid:241), oraz mo(cid:276)na zmienia(cid:232) jej skal(cid:246) za pomoc(cid:241) znajduj(cid:241)cego si(cid:246) na dole suwaka. Na listingu 4.2 przedstawiony jest kod (cid:274)ród(cid:228)owy dotycz(cid:241)cy tworzenia oraz obs(cid:228)ugi tego gra- fu sceny i jego hierarchii przekszta(cid:228)ce(cid:254). Najwa(cid:276)niejsze fragmenty zosta(cid:228)y pogrubione. Aby zbudowa(cid:232) scen(cid:246), utworzono obiekt klasy Object3D o nazwie cubeGroup, który s(cid:228)u(cid:276)y jako ko- rze(cid:254) ca(cid:228)ego grafu. Nast(cid:246)pnie bezpo(cid:264)rednio do niego dodano siatk(cid:246) kostki oraz kolejny obiekt klasy Object3D, o nazwie sphereGroup. Do tego nowego obiektu dodano sto(cid:276)ek i sfer(cid:246). Ponadto przesuni(cid:246)to nieco sto(cid:276)ek do góry i oddalono go od sfery za pomoc(cid:241) odpowiedniego ustawienia w(cid:228)asno(cid:264)ci position. Listing 4.2. Scena z hierarchi(cid:241) przekszta(cid:228)ce(cid:254) function animate() { var now = Date.now(); var deltat = now - currentTime; 76 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę currentTime = now; var fract = deltat / duration; var angle = Math.PI * 2 * fract; // Obraca kostk(cid:266) wokó(cid:225) osi Y. cube.rotation.y += angle; // Obraca grup(cid:266) sfery wokó(cid:225) osi Y. sphereGroup.rotation.y -= angle / 2; // Obraca sto(cid:298)ek wokó(cid:225) osi X (do przodu). cone.rotation.x += angle; } function createScene(canvas) { // Tworzy renderer Three.js i wi(cid:261)(cid:298)e go z kanw(cid:261). renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } ); // Ustawia rozmiar obszaru widoku. renderer.setSize(canvas.width, canvas.height); // Tworzy now(cid:261) scen(cid:266) Three.js. scene = new THREE.Scene(); // Dodaje kamer(cid:266), aby mo(cid:298)na by(cid:225)o ogl(cid:261)da(cid:252) scen(cid:266). camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 ); camera.position.z = 10; scene.add(camera); // Tworzy grup(cid:218) do przechowywania wszystkich obiektów. cubeGroup = new THREE.Object3D; // Dodaje (cid:286)wiat(cid:225)o kierunkowe, aby pokaza(cid:252) obiekty. var light = new THREE.DirectionalLight( 0xffffff, 1.5); // Pozycjonuje (cid:286)wiat(cid:225)o od sceny, aby wskazywa(cid:225)o na jej pocz(cid:261)tek. light.position.set(.5, .2, 1); cubeGroup.add(light); // Tworzy teksturowany materia(cid:225) typu Phong dla kostki. // Najpierw tworzy tekstur(cid:266). var mapUrl = ../images/ash_uvgrid01.jpg ; var map = THREE.ImageUtils.loadTexture(mapUrl); var material = new THREE.MeshPhongMaterial({ map: map }); // Tworzy geometri(cid:266) kostki. var geometry = new THREE.CubeGeometry(2, 2, 2); // Wstawia geometri(cid:266) kostki i materia(cid:225) do siatki. cube = new THREE.Mesh(geometry, material); // Pochyla siatk(cid:266) w kierunku u(cid:298)ytkownika. cube.rotation.x = Math.PI / 5; cube.rotation.y = Math.PI / 5; // Dodaje siatk(cid:218) kostki do grupy. cubeGroup.add( cube ); // Tworzy grup(cid:266) dla sfery. sphereGroup = new THREE.Object3D; cubeGroup.add(sphereGroup); Graf sceny i hierarchia przekszta(cid:293)ce(cid:295) (cid:95) 77 Poleć książkęKup książkę // Przesuwa grup(cid:266) sfery do góry i ty(cid:225)u wzgl(cid:266)dem kostki. sphereGroup.position.set(0, 3, (cid:344)4); // Tworzy geometri(cid:266) sfery. geometry = new THREE.SphereGeometry(1, 20, 20); // Wstawia geometri(cid:266) sfery i materia(cid:225) do siatki. sphere = new THREE.Mesh(geometry, material); // Dodaje siatk(cid:266) sfery do grupy. sphereGroup.add( sphere ); // Tworzy geometri(cid:266) sto(cid:298)ka. geometry = new THREE.CylinderGeometry(0, .333, .444, 20, 5); // Wstawia geometri(cid:266) sto(cid:298)ka i materia(cid:225) do siatki. cone = new THREE.Mesh(geometry, material); // Przesuwa sto(cid:298)ek do góry i oddala go nieco od sfery. cone.position.set(1, 1, -.667); // Dodaje siatk(cid:266) sto(cid:298)ka do grupy. sphereGroup.add( cone ); // Dodaje grup(cid:266) do sceny. scene.add( cubeGroup ); } function rotateScene(deltax) { cubeGroup.rotation.y += deltax / 100; $( #rotation ).html( obrót: 0, + cubeGroup.rotation.y.toFixed(2) + ,0 ); } function scaleScene(scale) { cubeGroup.scale.set(scale, scale, scale); $( #scale ).html( skala: + scale); } Kolej na animacje. W funkcji animate() wida(cid:232), (cid:276)e gdy obraca si(cid:246) obiekt sphereGroup, obraca si(cid:246) sfera oraz sto(cid:276)ek kr(cid:241)(cid:276)y w przestrzeni wokó(cid:228) niej. Zwró(cid:232) uwag(cid:246), (cid:276)e nie ma kodu obracaj(cid:241)cego siatk(cid:241) sfery ani poruszaj(cid:241)cego sto(cid:276)kiem. Obiekty te automatycznie odziedziczy(cid:228)y swoje prze- kszta(cid:228)cenia po sphereGroup. Tak(cid:276)e implementacja interakcji ze scen(cid:241) w celu jej obrócenia i skalo- wania jest banalnie prosta. Po prostu ustawili(cid:264)my w(cid:228)asno(cid:264)ci rotation i scale obiektu cubeGroup, a zmiany te zosta(cid:228)y przez bibliotek(cid:246) automatycznie przekazane do obiektów podrz(cid:246)dnych. Reprezentowanie przesuni(cid:253)cia, obrotu i skali W bibliotece Three.js przekszta(cid:228)cenia wykonuje si(cid:246) przy u(cid:276)yciu oblicze(cid:254) arytmetycznych na trójwymiarowych macierzach, wi(cid:246)c nic dziwnego, (cid:276)e sk(cid:228)adnikami przekszta(cid:228)ce(cid:254) obiektów klasy Object3D s(cid:241) trójwymiarowe wektory: position, rotation oraz scale. Znaczenie warto(cid:264)ci wektora position jest oczywiste: s(cid:241) to sk(cid:228)adniki x, y i z okre(cid:264)laj(cid:241)ce jego przesuni(cid:246)cie wzgl(cid:246)dem pocz(cid:241)tku obiektu. Wektor scale te(cid:276) jest prosty: warto(cid:264)ci x, y i z wykorzystuje si(cid:246) do pomno- (cid:276)enia skali macierzy przekszta(cid:228)cenia w ka(cid:276)dym z trzech wymiarów. Natomiast sk(cid:228)adniki wektora rotation wymagaj(cid:241) nieco szerszego obja(cid:264)nienia. Ka(cid:276)da z warto- (cid:264)ci x, y i z definiuje obrót wokó(cid:228) odpowiedniej osi. Przyk(cid:228)adowo warto(cid:264)(cid:232) (0, Math.PI/2, 0) oznacza obrót o 90 stopni wokó(cid:228) osi y (zwró(cid:232) uwag(cid:246), (cid:276)e stopnie s(cid:241) wyra(cid:276)one w radianach, a wi(cid:246)c 78 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę 2*pi wynosi 360 stopni). Ten rodzaj obrotu — z(cid:228)o(cid:276)enie obrotów wokó(cid:228) osi x, y i z — nazywa si(cid:246) k(cid:241)tem Eulera. Podejrzewam, (cid:276)e Mr.doob wybra(cid:228) w(cid:228)a(cid:264)nie t(cid:246) technik(cid:246) jako podstawow(cid:241) reprezentacj(cid:246), poniewa(cid:276) jest intuicyjna i (cid:228)atwa w zastosowaniu. Jednak wi(cid:241)(cid:276)(cid:241) si(cid:246) z ni(cid:241) pewne matematyczne problemy. Dlatego w bibliotece Three.js do okre(cid:264)lania k(cid:241)tów mo(cid:276)na równie(cid:276) u(cid:276)ywa(cid:232) kwaternionów, które s(cid:241) pozbawione problemów k(cid:241)tów Eulera, ale za to wymagaj(cid:241) wi(cid:246)cej pracy programistycznej. Kwaterniony s(cid:241) precyzyjne, ale trudniejsze w u(cid:276)yciu. Wewn(cid:246)trznie biblioteka Three.js tworzy macierz z w(cid:228)asno(cid:264)ci przekszta(cid:228)ce(cid:254) ka(cid:276)dego obiektu klasy Object3D. Macierze obiektów maj(cid:241)cych wielu przodków s(cid:241) pomno(cid:276)one przez macierze tych przodków w sposób rekurencyjny, tzn. Three.js przechodzi w dó(cid:228) do ka(cid:276)dego li(cid:264)cia drzewa grafu sceny i oblicza macierz przekszta(cid:228)cenia dla ka(cid:276)dego obiektu na scenie w ka(cid:276)dym przebiegu renderowania. W przypadku g(cid:228)(cid:246)bokich i skomplikowanych grafów oblicze(cid:254) do wykonania mo(cid:276)e by(cid:232) bardzo du(cid:276)o i dlatego dla obiektów klasy Object3D zdefiniowano w(cid:228)asno(cid:264)(cid:232) matrixAutoUpdate, któr(cid:241) mo(cid:276)na ustawi(cid:232) na false, aby unikn(cid:241)(cid:232) narzutu. Niestety, korzystanie z tego udogodnienia mo(cid:276)e powodowa(cid:232) subtelne b(cid:228)(cid:246)dy („Dlaczego moja animacja si(cid:246) nie aktualizuje?”), wi(cid:246)c nale(cid:276)y z niego korzysta(cid:232) bardzo ostro(cid:276)nie. Materia(cid:293)y Kszta(cid:228)ty, które ogl(cid:241)damy w aplikacjach WebGL, maj(cid:241) pewne w(cid:228)a(cid:264)ciwo(cid:264)ci powierzchni, takie jak kolor, cieniowanie i tekstura (mapa bitowa). Tworzenie tych w(cid:228)a(cid:264)ciwo(cid:264)ci przy u(cid:276)yciu nisko- poziomowych wywo(cid:228)a(cid:254) API WebGL wymaga pisania shaderów w j(cid:246)zyku GLSL oraz posiadania zaawansowanych umiej(cid:246)tno(cid:264)ci programistycznych nawet wtedy, kiedy tylko chce si(cid:246) zrobi(cid:232) co(cid:264) prostego. Na szcz(cid:246)(cid:264)cie, biblioteka Three.js zawiera gotowy do u(cid:276)ytku kod GLSL w obiektach zwanych materia(cid:228)ami (ang. materials). Standardowe materia(cid:293)y siatki Przypomn(cid:246), (cid:276)e pos(cid:228)uguj(cid:241)cy si(cid:246) bibliotek(cid:241) WebGL programista, który chce narysowa(cid:232) jakikolwiek obiekt, musi dostarczy(cid:232) shader. Z pewno(cid:264)ci(cid:241) zauwa(cid:276)y(cid:228)e(cid:264) te(cid:276), (cid:276)e do tej pory w tym rozdziale nie pokaza(cid:228)em jeszcze ani jednego wiersza kodu shadera. To nie jest niedopatrzenie. Biblioteka Three.js tworzy shadery automatycznie, poniewa(cid:276) zawiera zbiór gotowych fragmentów kodu GLSL przeznaczonych do ró(cid:276)nych zastosowa(cid:254). Tradycyjne biblioteki oparte na grafach scen i popularne programy do modelowania repre- zentuj(cid:241) shadery przy u(cid:276)yciu tzw. materia(cid:228)ów. Materia(cid:228) to obiekt definiuj(cid:241)cy w(cid:228)a(cid:264)ciwo(cid:264)ci po- wierzchni trójwymiarowej siatki, punktu lub linii, takie jak kolor, przezroczysto(cid:264)(cid:232) oraz po(cid:228)yskli- wo(cid:264)(cid:232). Materia(cid:228)y mog(cid:241) te(cid:276) zawiera(cid:232) tekstury, czyli mapy bitowe nawini(cid:246)te na powierzchni(cid:246) obiektów. W(cid:228)a(cid:264)ciwo(cid:264)ci materia(cid:228)ów (cid:228)(cid:241)cz(cid:241) si(cid:246) z danymi wierzcho(cid:228)ków siatki, informacjami dotycz(cid:241)cymi o(cid:264)wietlenia na scenie oraz pozycj(cid:241) kamery i innymi globalnymi w(cid:228)a(cid:264)ciwo(cid:264)ciami, w efekcie czego powstaje ostateczna posta(cid:232) ka(cid:276)dego obiektu. Biblioteka Three.js obs(cid:228)uguje najcz(cid:246)(cid:264)ciej u(cid:276)ywane typy materia(cid:228)ów w klasach MeshBasicMaterial, MeshPhongMaterial oraz MeshLambertMaterial. (Przedrostek Mesh oznacza, (cid:276)e obiekty tych typów powinny by(cid:232) u(cid:276)ywane w po(cid:228)(cid:241)czeniu z obiektami siatki, a wi(cid:246)c nie z liniami czy cz(cid:241)steczkami; istniej(cid:241) te(cid:276) specjalne typy materia(cid:228)ów przeznaczone do u(cid:276)ytku z innymi typami obiektów. Kompletny i najbardziej aktualny zestaw obiektów znajduje si(cid:246) w kodzie (cid:274)ród(cid:228)owym w folderze src/materials). Te trzy typy materia(cid:228)ów implementuj(cid:241) odpowiednio trzy poni(cid:276)sze, dobrze znane techniki materia(cid:228)owe. Materia(cid:293)y (cid:95) 79 Poleć książkęKup książkę Brak o(cid:264)wietlenia (lub o(cid:264)wietlenie gotowe) W tym typie materia(cid:228)u do renderowania powierzchni obiektu u(cid:276)ywane s(cid:241) tylko tekstury, kolory oraz poziom przezroczysto(cid:264)ci. Nie jest brane pod uwag(cid:246) o(cid:264)wietlenie sceny. Jest to doskona(cid:228)y rodzaj materia(cid:228)u do renderowania p(cid:228)askich obiektów i rysowania prostych obiektów geometrycznych bez cieniowania. Ponadto mo(cid:276)na go u(cid:276)ywa(cid:232), gdy o(cid:264)wietlenie obiektów jest wliczane w tekstury przed uruchomieniem programu (np. przez narz(cid:246)dzie do modelowania trójwymiarowego), a wi(cid:246)c nie musi by(cid:232) obliczane przez renderer. Cieniowanie Phonga Ten typ materia(cid:228)u implementuje prosty, ale do(cid:264)(cid:232) realistyczny model cieniowania i jest bardzo wydajny. Jest najcz(cid:246)(cid:264)ciej wybierany, gdy trzeba szybko i bez nadmiaru pracy uzyska(cid:232) klasyczny cieniowany wygl(cid:241)d. Wykorzystuje si(cid:246) go w wielu grach i aplikacjach. Obiekty cieniowane t(cid:241) technik(cid:241) maj(cid:241) jasno o(cid:264)wietlone obszary (refleksy) w miejscach, na które bezpo(cid:264)rednio pada (cid:264)wiat(cid:228)o, s(cid:241) dobrze o(cid:264)wietlone na kraw(cid:246)dziach zwróconych w kierun- ku (cid:264)wiat(cid:228)a oraz maj(cid:241) ciemne cienie na kraw(cid:246)dziach, które s(cid:241) odwrócone od (cid:264)wiat(cid:228)a. Cieniowanie Lamberta W cieniowaniu Lamberta jasno(cid:264)(cid:232) powierzchni dla obserwatora jest taka sama, niezale(cid:276)nie od k(cid:241)ta patrzenia. Bardzo dobrze sprawdza si(cid:246) w przypadku chmur, które rozpraszaj(cid:241) dochodz(cid:241)ce do nich (cid:264)wiat(cid:228)o, oraz satelitów, takich jak ksi(cid:246)(cid:276)yce, które maj(cid:241) wysokie albe- do (odbijaj(cid:241) du(cid:276)o (cid:264)wiat(cid:228)a od powierzchni). Aby zobaczy(cid:232), jak wygl(cid:241)daj(cid:241) ró(cid:276)ne rodzaje materia(cid:228)ów, otwórz plik r4/threejsmaterials.html. Na rysunku 4.8 pokazano jasno o(cid:264)wietlon(cid:241) sfer(cid:246) z na(cid:228)o(cid:276)on(cid:241) tekstur(cid:241) imituj(cid:241)c(cid:241) powierzchni(cid:246) ksi(cid:246)(cid:276)yca. Ksi(cid:246)(cid:276)yc jest bardzo dobrym obiektem do przedstawienia ró(cid:276)nic mi(cid:246)dzy ró(cid:276)nymi typami materia(cid:228)ów. Za pomoc(cid:241) prze(cid:228)(cid:241)czników mo(cid:276)na wybiera(cid:232) rodzaj materia(cid:228)u (np. Phong albo Lambert), aby sprawdzi(cid:232), który jest w tym przypadku lepszy. Wybieraj(cid:241)c ustawienie Podstawowy, mo(cid:276)na zobaczy(cid:232) sam(cid:241) tekstur(cid:246), bez o(cid:264)wietlenia. Rysunek 4.8. Standardowe materia(cid:228)y siatki biblioteki Three.js: Podstawowy (brak o(cid:264)wietlenia), Phong i Lambert 80 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę Zmie(cid:254) kolory rozproszenia i odbicia, aby zobaczy(cid:232), co si(cid:246) stanie. Kolor rozproszenia mate- ria(cid:228)u okre(cid:264)la, jak bardzo obiekt odbija (cid:274)ród(cid:228)a (cid:264)wiat(cid:228)a rzucaj(cid:241)ce promienie w okre(cid:264)lonym kierunku — tzn. kierunkowe, punktowe i reflektorowe (opis rodzajów o(cid:264)wietlenia znajduje si(cid:246) dalej w tym rozdziale). Kolor odbicia (cid:228)(cid:241)czy si(cid:246) ze (cid:264)wiat(cid:228)ami sceny w celu utworzenia refleksów odbitych od wierzcho(cid:228)ków obiektu skierowanych ku (cid:274)ród(cid:228)om (cid:264)wiat(cid:228)a. (Refleksy s(cid:241) widoczne tylko na ma- teria(cid:228)ach typu Phong, w innych typach materia(cid:228)ów nie s(cid:241) obs(cid:228)ugiwane). Ponadto wy(cid:228)(cid:241)cz tekstu- r(cid:246), usuwaj(cid:241)c zaznaczenie pola wyboru Tekstura, aby zobaczy(cid:232), jaki wp(cid:228)yw maj(cid:241) materia(cid:228)y na sam(cid:241) geometri(cid:246) bry(cid:228)y. Na koniec zobacz te(cid:276), jaki wp(cid:228)yw maj(cid:241) ró(cid:276)ne ustawienia na sam(cid:241) siatk(cid:246). Dodawanie realizmu poprzez zastosowanie kilku tekstur W poprzednim przyk(cid:228)adzie pokaza(cid:228)em, jak zdefiniowa(cid:232) wygl(cid:241)d powierzchni obiektu za po- moc(cid:241) tekstury. Wi(cid:246)kszo(cid:264)(cid:232) typów materia(cid:228)ów w bibliotece Three.js umo(cid:276)liwia stosowanie wielu tekstur, co pozwala osi(cid:241)gn(cid:241)(cid:232) bardziej realistyczny efekt. W technice tej, zwanej multitekstu- rowaniem, chodzi o zwi(cid:246)kszenie realizmu bez wykonywania nadmiernej ilo(cid:264)ci dodatkowych oblicze(cid:254). Alternatyw(cid:241) jest u(cid:276)ycie wi(cid:246)kszej liczby wielok(cid:241)tów lub wyrenderowanie obiektu w kilku przebiegach. Oto kilka przyk(cid:228)adów ilustruj(cid:241)cych najcz(cid:246)(cid:264)ciej stosowane techniki mul- titeksturowania obs(cid:228)ugiwane przez Three.js. Mapy nierówno(cid:264)ci to mapy bitowe s(cid:228)u(cid:276)(cid:241)ce do przemieszczania wektorów normalnych po- wierzchni siatki w celu, jak sama nazwa wskazuje, utworzenia imitacji nierównej nawierzchni. Warto(cid:264)ci pikseli mapy bitowej s(cid:241) traktowane nie jako warto(cid:264)ci kolorów, lecz jako wysoko(cid:264)ci. Przyk(cid:228)adowo warto(cid:264)(cid:232) zero oznacza brak przemieszczenia wzgl(cid:246)dem powierzchni, a warto(cid:264)ci ró(cid:276)ne od zera mog(cid:241) oznacza(cid:232) odsuni(cid:246)cie od powierzchni. Najcz(cid:246)(cid:264)ciej ze wzgl(cid:246)du na wydaj- no(cid:264)(cid:232) u(cid:276)ywa si(cid:246) jednokana(cid:228)owych czarnych i bia(cid:228)ych map bitowych, chocia(cid:276) mo(cid:276)na te(cid:276) wyko- rzysta(cid:232) mapy RGB, aby dostarczy(cid:232) wi(cid:246)cej szczegó(cid:228)ów w wi(cid:246)kszej liczbie warto(cid:264)ci. U(cid:276)ywa si(cid:246) map bitowych zamiast trójwymiarowych wektorów, poniewa(cid:276) s(cid:241) bardziej kompaktowe i po- zwalaj(cid:241) na szybkie obliczanie przemieszczenia normalnych w kodzie shadera. Je(cid:264)li chcesz zoba- czy(cid:232) efekt dzia(cid:228)ania mapy nierówno(cid:264)ci, otwórz plik r4/threejsbumpmap.html (rysunek 4.9). W(cid:228)(cid:241)cz i wy(cid:228)(cid:241)cz g(cid:228)ówn(cid:241) tekstur(cid:246) ksi(cid:246)(cid:276)yca oraz pozmieniaj warto(cid:264)ci kolorów rozproszenia i odbicia. Zauwa(cid:276)ysz, (cid:276)e efekty wprawdzie s(cid:241) ciekawe, ale mog(cid:241) powstawa(cid:232) nieprzyjemne artefakty. Mimo to, mapy nierówno(cid:264)ci s(cid:241) dobrym sposobem na zwi(cid:246)kszenie realizmu obrazu. U(cid:276)ywanie map nierówno(cid:264)ci w bibliotece Three.js jest bardzo (cid:228)atwe. Wystarczy przekaza(cid:232) tek- stur(cid:246) we w(cid:228)asno(cid:264)ci bumpMap obiektu parametrów przekazywanego do konstruktora klasy THREE. MeshPhongMaterial. material= new THREE.MeshPhongMaterial({map: map, bumpMap: bumpMap}); Mapy normalnych to technika umo(cid:276)liwiaj(cid:241)ca przekazanie jeszcze wi(cid:246)kszej ilo(cid:264)ci szczegó(cid:228)ów dotycz(cid:241)cych powierzchni ni(cid:276) mapy nierówno(cid:264)ci i równie(cid:276) nie wymaga dodawania wielok(cid:241)tów. Mapy normalnych s(cid:241) zazwyczaj wi(cid:246)ksze i wymagaj(cid:241) wi(cid:246)kszej mocy przetwarzania ni(cid:276) mapy nierówno(cid:264)ci, ale dodatkowe uzyskiwane dzi(cid:246)ki nim szczegó(cid:228)y mog(cid:241) by(cid:232) tego warte. W mapach takich koduje si(cid:246) warto(cid:264)ci wektorów normalnych w mapach bitowych jako dane RGB, zazwyczaj stosuj(cid:241)c znacznie wi(cid:246)ksz(cid:241) rozdzielczo(cid:264)(cid:232) ni(cid:276) w danych wierzcho(cid:228)ków siatki. Shader wprowa- dza te informacje normalnych do swoich oblicze(cid:254) o(cid:264)wietlenia (wraz z bie(cid:276)(cid:241)cymi warto(cid:264)ciami kamery i (cid:274)ród(cid:228)a (cid:264)wiat(cid:228)a) w celu otrzymania szczegó(cid:228)owej powierzchni. Efekt dzia(cid:228)ania mapy normalnych mo(cid:276)na obejrze(cid:232), otwieraj(cid:241)c plik r4/threejsnormalmap.html. U(cid:276)yta mapa normalnych Materia(cid:293)y (cid:95) 81 Poleć książkęKup książkę Rysunek 4.9. Mapowanie nierówno(cid:264)ci jest widoczna na dole po prawej (rysunek 4.10). Zwró(cid:232) uwag(cid:246) na zarysy wzniesie(cid:254) Ziemi. W(cid:228)(cid:241)cz i wy(cid:228)(cid:241)cz map(cid:246) normalnych, aby zobaczy(cid:232), jak wiele szczegó(cid:228)ów dzi(cid:246)ki niej zostaje dodanych do obrazu. To zadziwiaj(cid:241)ce, jak bardzo mapa bitowa mo(cid:276)e zmieni(cid:232) taki prosty obiekt jak sfera. Rysunek 4.10. Ziemia z map(cid:241) normalnych 82 (cid:95) Rozdzia(cid:293) 4. Grafika i renderowanie w Three.js Poleć książkęKup książkę W bibliotece Three.js mapy normalnych s(cid:241) (cid:228)atwe w u(cid:276)yciu. Wystarczy przekaza(cid:232) tekstur(cid:246) we w(cid:228)asno(cid:264)ci normalMap obiektu parametrów przekazywanego do konstruktora klasy THREE.Mesh (cid:180)PhongMaterial. Material = new THREE.MeshPhongMaterial({ map: map, normalMap: normalMap}); Mapowanie (cid:264)rodowiskowe to kolejna technika umo(cid:276)liwiaj(cid:241)ca zastosowanie dodatkowych tekstur w celu zwi(cid:246)kszenia realizmu obrazu. W odró(cid:276)nieniu od map nierówno(cid:264)ci i normalnych, w których dodaje si(cid:246) szczegó(cid:228)y powierzchni przez pozorne zmiany w geometrii, w mapach (cid:264)rodowiskowych symuluje si(cid:246) refleksy od obiektów w otaczaj(cid:241)cym (cid:264)rodowisku. Przyk(cid:228)ad zastosowania mapowania (cid:264)rodowiskowego mo(cid:276)na obejrze(cid:232), otwieraj(cid:241)c plik r4/three- jsenvmap.html. Przeci(cid:241)gnij mysz(cid:241) w obszarze tre(cid:264)ci, aby obróci(cid:232) scen(cid:246), oraz pokr(cid:246)(cid:232) kó(cid:228)kiem myszy, aby j(cid:241) zmniejszy(cid:232) lub powi(cid:246)kszy(cid:232). Zwró(cid:232) uwag(cid:246), jak obraz znajduj(cid:241)cy si(cid:246) na po- wierzchni sfery sprawia wra(cid:276)enie, jakby odbija(cid:228) otaczaj(cid:241)ce niebo (rysunek 4.11). W istocie nic takiego nie ma miejsca. Po prostu na sferze wyrenderowano piksele z tej samej tekstury, któ- ra jest na(cid:228)o(cid:276)ona wewn(cid:241)trz kostki u(cid:276)ytej jako t(cid:228)o sceny. Sztuczka polega na tym, (cid:276)e na mate- riale sfery u(cid:276)yto tekstury sze(cid:264)ciennej, czyli utworzonej z sze(cid:264)ciu odr(cid:246)bnych map bitowych po(cid:228)(cid:241)czonych w jeden obraz wewn(cid:241)trz sze(cid:264)cianu. W tym przyk(cid:228)adzie utworzono w ten spo- sób t(cid:228)o ilustruj(cid:241)ce niebo. Poszczególne pliki sk(cid:228)adaj(cid:241)ce si(cid:246) na ten produkt znajduj(cid:241) sie w fol- derze images/cubemap/skybox. Ten rodzaj mapowania (cid:264)rodowiskowego nazywa si(cid:246) sze(cid:264)cien- nym mapowaniem (cid:264)rodowiskowym, poniewa(cid:276) u(cid:276)ywa si(cid:246) w nim tekstur sze(cid:264)ciennych. Rysunek 4.11. Sze(cid:264)cienne mapy (cid:264)rodowiskowe umo(cid:276)liwiaj(cid:241) uzyskanie realistycznych te(cid:228) scen i efektów odbicia U(cid:276)ywanie tekstur sze(cid:264)ciennych w Three.js nie jest tak (cid:228)atwe jak map nierówno(cid:264)ci i normalnych. Najpierw nale(cid:276)y utworzy(cid:232) tekstur(cid:246) sze(cid:264)cienn(cid:241) przy u(cid:276)yciu funkcji ImageUtils.loadTextureCube(), której przekazuje si(cid:246) adresy URL sze(cid:264)ciu obrazów. Nast(cid:246)pnie ustawia si(cid:246) j(cid:241) jako warto(cid:264)(cid:232) para- metru envMap obiektu MeshPhongMaterial przy wywo(cid:228)ywaniu konstruktora. Ponadto okre(cid:264)la si(cid:246) warto(cid:264)(cid:232) reflectivity definiuj(cid:241)c(cid:241), jaka ilo(cid:264)(cid:232) tekstury sze(cid:264)ciennej ma zosta(cid:232) „odbita” na materiale. Materia(cid:293)y (cid:95) 83 Poleć książkęKup książkę W tym przypadku podana zosta(cid:228)a nieco wi(cid:246)ksza warto(cid:264)(cid:232) ni(cid:276) domy(cid:264)lna 1, aby mapa by(cid:228)a do- brze widoczna. var path = ../images/cubemap/skybox/ ; var urls = [ path + px.jpg , path + nx.jpg , path + py.jpg , path + ny.jpg , path + pz.jpg , path + nz.jpg ]; envMap = THREE.ImageUtils.loadTextureCube( urls ); materials[ phong-envmapped ] = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap : envMap, reflectivity:1.3} ); Jest jeszcze jedna rzecz do zrobienia. Aby efekt by(cid:228) realistyczny, odbijana mapa bitowa mu- si zgadza(cid:232) si(cid:246) z otaczaj(cid:241)cym j(cid:241) (cid:264)rodowiskiem. (cid:275)eby tak by(cid:228)o, tworzymy pud(cid:228)o nieba (ang. skybox), czyli du(cid:276)y sze(cid:264)cian wy(cid:228)o(cid:276)ony od (cid:264)rodka tekstur(cid:241) z tych samych obrazów reprezentuj(cid:241)- cych panoram(cid:246) nieba. Zrobienie tego normalnie wymaga(cid:228)oby bardzo du(cid:276)o pracy, ale — na szcz(cid:246)(cid:264)cie — biblioteka Three.js zawiera wbudowan(cid:241) funkcj(cid:246) pomocnicz(cid:241), która nas wyr(cid:246)- czy. Oprócz standardowych materia(cid:228)ów Basic, Phong i Lambert, biblioteka Three.js zawiera w THREE.ShaderLib zbiór shaderów pomocniczych. Wystarczy utworzy(cid:232) siatk(cid:246) z geometrii sze- (cid:264)cianu i jako materia(cid:228)u u(cid:276)y(cid:232) shadera cube. Shader ten automatycznie zajmie si(cid:246) renderowa- niem wewn(cid:241)trz kostki przy u(cid:276)yciu tej samej tekstury, któr(cid:241) wykorzystali(cid:264)my do utworzenia mapy (cid:264)rodowiskowej. // Tworzy pud(cid:239)o nieba. var shader = THREE.ShaderLib[ cube ]; shader.uniforms[ tCube ].value = envMap; var material = new THREE.ShaderMaterial( { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms, side: THREE.BackSide } ), mesh = new THREE.Mesh(new THREE.CubeGeometry( 500, 500, 500 ), material); scene.add( mesh ); O(cid:316)wietlenie (cid:263)wiat(cid:228)a o(cid:264)wietlaj(cid:241) przedmioty znajduj(cid:241)ce si(cid:246) na trójwymiarowej scenie. W bibliotece Three.js znajduj(cid:241) si(cid:246) definicje kilku klas o(cid:264)wietleniowych, podobnych do tych, które mo(cid:276)na znale(cid:274)(cid:232) w typowych narz(cid:246)dziach do modelowania i bibliotekach grafów scen. Do najcz(cid:246)(cid:264)ciej u(cid:276)ywa- nych rodzajów o(cid:264)wietlenia nale(cid:276)(cid:241): (cid:264)wiat(cid:228)o kierunkowe, (cid:264)wiat(cid:228)o punktowe, (cid:264)wiat(cid:228)o reflekto- rowe oraz (cid:264)wiat(cid:228)o otaczaj(cid:241)ce. (cid:263)wiat(cid:228)o kierunkowe (cid:263)wiat(cid:228)o kierunkowe rzuca równoleg(cid:228)e promienie w okre(cid:264)lonym, jednym kierunku. Nie ma pozycji, a jedynie kierunek, kolor i intensywno(cid:264)(cid:232). (W istocie w bibliotece Three.js (cid:264)wiat(cid:228)a kierunkowe maj(cid:241) pozycj(cid:246), ale jest ona u(cid:27
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3
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ą: