Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3 - ebook

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:

• zapoznasz się z podstawami teorii dla grafiki 3D
• poznasz API WebGL
• wykorzystasz bibliotekę Three.js w codziennej pracy
• odkryjesz narzędzia przydatne w codziennej pracy
• jeszcze bardziej uatrakcyjnisz Twoją stronę

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

Przedmowa (9)

CZĘŚĆ I. PODSTAWY (15)

1. Wprowadzenie (17)

• HTML5 jako nowe medium wizualne (19)
  • Przeglądarka jako platforma (20)
  • Przeglądarkowa rzeczywistość (21)
• Grafika trójwymiarowa (22)
  • Co to jest trójwymiarowość? (22)
  • Trójwymiarowe układy współrzędnych (23)
  • Siatki, wielokąty i wierzchołki (24)
  • Materiały, tekstury i oświetlenie (24)
  • Przekształcenia i macierze (25)
  • Kamery, perspektywa, obszary widoku oraz projekcje (26)
  • Programy cieniujące (27)

2. Renderowanie grafiki trójwymiarowej na bieżąco przy użyciu biblioteki WebGL (31)

• Podstawy WebGL (32)
• API WebGL (33)
• Anatomia aplikacji WebGL (34)
• Prosty przykład użycia WebGL (34)
  • Kanwa i kontekst rysunkowy WebGL (35)
  • Obszar widoku (36)
  • Bufory, bufory tablicowe i tablice typowane (36)
  • Macierze (37)
  • Shader (38)
  • Rysowanie obiektów podstawowych (40)
• Tworzenie brył (41)
• Animacja (45)
• Mapy tekstur (46)
• Podsumowanie (51)

3. Three.js - mechanizm do programowania grafiki trójwymiarowej w JavaScripcie (53)

• Najbardziej znane projekty zbudowane przy użyciu Three.js (53)
• Wprowadzenie do Three.js (56)
  • Przygotowanie do pracy z Three.js (58)
  • Struktura projektu Three.js (58)
• Prosty program Three.js (59)
  • Tworzenie renderera (61)
  • Tworzenie sceny (61)
  • Implementacja pętli wykonawczej (62)
  • Oświetlenie sceny (64)
• Podsumowanie (65)

4. Grafika i renderowanie w Three.js (67)

• Geometria i siatki (67)
  • Gotowe typy geometryczne (67)
  • Ścieżki, kształty i ekstruzje (68)
  • Bazowa klasa geometrii (69)
  • Geometria buforowana do optymalizacji renderowania siatki (73)
  • Importowanie siatek z programów do modelowania (73)
• Graf sceny i hierarchia przekształceń (75)
  • Zarządzanie sceną za pomocą grafu sceny (75)
  • Grafy sceny w Three.js (75)
  • Reprezentowanie przesunięcia, obrotu i skali (78)
• Materiały (79)
  • Standardowe materiały siatki (79)
  • Dodawanie realizmu poprzez zastosowanie kilku tekstur (81)
• Oświetlenie (84)
• Cienie (87)
• Shadery (91)
  • Klasa ShaderMaterial: zrób to sam (91)
  • Stosowanie kodu GLSL z biblioteką Three.js (93)
• Renderowanie (95)
  • Przetwarzanie końcowe i renderowanie wieloprzebiegowe (96)
  • Renderowanie opóźnione (97)
• Podsumowanie (98)

5. Animacje trójwymiarowe (99)

• Sterowanie animacją za pomocą funkcji requestAnimationFrame() (100)
  • Używanie funkcji requestAnimationFrame() we własnych aplikacjach (102)
  • Funkcja requestAnimationFrame() a wydajność (103)
  • Animacje klatkowe a animacje czasowe (103)
• Animowanie przy użyciu programowego aktualizowania właściwości (104)
• Animowanie przejść przy użyciu międzyklatek (106)
  • Interpolacja (106)
  • Biblioteka Tween.js (107)
  • Funkcja prędkości animacji (109)
• Tworzenie skomplikowanych animacji przy użyciu klatek kluczowych (110)
  • Animacje obiektów połączonych z użyciem klatek kluczowych (113)
• Tworzenie wrażenia płynnego ruchu przy użyciu krzywych i śledzenia ścieżki (115)
• Animacja postaci i twarzy przy użyciu morfingu (118)
• Animowanie postaci przy użyciu animacji szkieletowej (121)
• Animowanie przy użyciu shaderów (124)
• Podsumowanie (129)

6. Tworzenie zaawansowanych efektów na stronach przy użyciu CSS3 (131)

• Przekształcenia CSS (133)
  • Przekształcenia trójwymiarowe w praktyce (134)
  • Perspektywa (136)
  • Tworzenie hierarchii przekształceń (138)
  • Kontrolowanie renderowania tylnej ściany obiektów (140)
  • Zestawienie własności przekształceniowych CSS (143)
• Przejścia CSS (143)
• Animacje CSS (147)
• Zaawansowane funkcje CSS (151)
  • Renderowanie obiektów trójwymiarowych (151)
  • Renderowanie środowisk trójwymiarowych (152)
  • Tworzenie zaawansowanych efektów przy użyciu filtrów CSS (153)
  • Renderowanie trójwymiarowe w CSS przy użyciu Three.js (154)
• Podsumowanie (155)

7. Kanwa dwuwymiarowa (157)

• Kanwa - podstawowe wiadomości (158)
  • Element kanwy i dwuwymiarowy kontekst rysunkowy (158)
  • Właściwości API Canvas (160)
• Renderowanie obiektów trójwymiarowych przy użyciu API Canvas (164)
• Trójwymiarowe biblioteki oparte na kanwie (167)
  • K3D (168)
  • Renderer biblioteki Three.js rysujący na kanwie (169)
• Podsumowanie (174)

CZĘŚĆ II. TECHNIKI TWORZENIA APLIKACJI (175)

8. Proces powstawania treści trójwymiarowej (177)

• Proces tworzenia grafiki trójwymiarowej (177)
  • Modelowanie (178)
  • Teksturowanie (178)
  • Animowanie (179)
  • Sztuka techniczna (180)
• Narzędzia do tworzenia trójwymiarowych modeli i animacji (181)
  • Klasyczne programy komputerowe (181)
  • Przeglądarkowe środowiska zintegrowane (185)
  • Repozytoria 3D i darmowe zdjęcia (188)
• Trójwymiarowe formaty plików (190)
  • Formaty modelowe (190)
  • Formaty animacyjne (192)
  • Formaty do zapisywania całych scen (193)
• Wczytywanie treści do aplikacji WebGL (201)
  • Format JSON biblioteki Three.js (202)
  • Format binarny biblioteki Three.js (207)
  • Wczytywanie sceny w formacie COLLADA przy użyciu biblioteki Three.js (208)
  • Ładowanie sceny glTF przy użyciu biblioteki Three.js (211)
• Podsumowanie (212)

9. Trójwymiarowe silniki i systemy szkieletowe (213)

• Koncepcje szkieletów trójwymiarowych (214)
  • Czym jest system szkieletowy? (214)
  • Wymagania dotyczące systemów szkieletowych dla WebGL (215)
• Przegląd systemów szkieletowych dla WebGL (217)
  • Silniki gier (217)
  • Prezentacyjne systemy szkieletowe (220)
• Vizi - komponentowy system do tworzenia wizualnych aplikacji sieciowych (223)
  • Tło i metody projektowania (223)
  • Architektura systemu Vizi (224)
  • Podstawy obsługi systemu Vizi (226)
  • Prosta aplikacja Vizi (226)
• Podsumowanie (232)

10. Budowa prostej aplikacji trójwymiarowej (233)

• Projektowanie aplikacji (234)
• Tworzenie trójwymiarowej treści (235)
  • Eksportowanie sceny Maya do formatu COLLADA (236)
  • Konwertowanie pliku COLLADA na glTF (237)
• Podglądanie i testowanie treści trójwymiarowej (238)
  • Narzędzie do podglądu na bazie systemu Vizi (239)
  • Klasa Vizi.Viewer (240)
  • Klasa wczytująca Vizi (241)
• Integrowanie treści trójwymiarowej z aplikacją (244)
• Trójwymiarowe zachowania i interakcje (247)
  • Metody API grafu sceny Vizi: findNode() i map() (247)
  • Animowanie przezroczystości za pomocą klasy Vizi.FadeBehavior (249)
  • Automatyczne obracanie modelu za pomocą klasy Vizi.RotateBehavior (251)
  • Wyświetlanie informacji o częściach za pomocą klasy Vizi.Picker (251)
  • Sterowanie animacjami w interfejsie użytkownika (252)
  • Zmienianie kolorów przy użyciu wybieraka (254)
• Podsumowanie (255)

11. Tworzenie trójwymiarowego środowiska (257)

• Tworzenie warstwy wizualnej (259)
• Podglądanie i testowanie środowiska (260)
  • Podglądanie sceny w trybie pierwszoosobowym (261)
  • Przeglądanie grafu sceny (261)
  • Przeglądanie właściwości obiektów (265)
  • Wyświetlanie ramek obiektów (266)
  • Oglądanie wielu obiektów (269)
  • Wyszukiwanie za pomocą przeglądarki innych problemów ze sceną (270)
• Tworzenie trójwymiarowego tła przy użyciu pudła nieba (272)
  • Trójwymiarowe pudło nieba (272)
  • Obiekt Skybox systemu Vizi (272)
• Dodawanie do aplikacji trójwymiarowej treści (275)
  • Ładowanie i inicjowanie środowiska (275)
  • Ładowanie i inicjowanie modelu samochodu (277)
• Implementowanie nawigacji pierwszoosobowej (279)
  • Kontrolery kamery (281)
  • Kontroler pierwszoosobowy - obliczenia (281)
  • Wybieranie kierunku patrzenia za pomocą myszy (283)
  • Proste wykrywanie kolizji (283)
• Posługiwanie się wieloma kamerami (284)
• Tworzenie animowanych i czasowych przejść (286)
• Implementacja zachowań obiektów (288)
  • Implementowanie własnych składników na bazie klasy Vizi.Script (288)
  • Kontroler samochodu (288)
• Dodawanie dźwięków do środowiska (294)
• Renderowanie dynamicznych tekstur (296)
• Podsumowanie (300)

12. Tworzenie aplikacji dla urządzeń przenośnych (301)

• Przenośne platformy trójwymiarowe (302)
• Tworzenie aplikacji dla mobilnych wersji przeglądarek internetowych (303)
  • Dodawanie obsługi interfejsu dotykowego (304)
  • Debugowanie mobilnej funkcjonalności w stacjonarnej wersji przeglądarki Chrome (309)
• Tworzenie aplikacji sieciowych (311)
  • Tworzenie aplikacji sieciowych i narzędzia do ich testowania (311)
  • Pakowanie aplikacji sieciowych do dystrybucji (312)
• Tworzenie aplikacji hybrydowych (313)
  • CocoonJS jako technologia tworzenia gier i aplikacji HTML dla urządzeń mobilnych (314)
  • Składanie aplikacji przy użyciu biblioteki CocoonJS (316)
  • Tworzenie hybrydowych aplikacji WebGL - konkluzja (322)
• Wydajność mobilnych aplikacji trójwymiarowych (322)
• Podsumowanie (324)

A. Źródła informacji (327)

Skorowidz (339)