Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3 - T.Parisi.pdf

(14920 KB) Pobierz
Spis treści
Przedmowa .....................................................................................................................9
Część I. Podstawy . ...........................................................................................15
1. Wprowadzenie ..............................................................................................................17
HTML5 jako nowe medium wizualne
Przeglądarka jako platforma
Przeglądarkowa rzeczywistość
Grafika trójwymiarowa
Co to jest trójwymiarowość?
Trójwymiarowe układy współrzędnych
Siatki, wielokąty i wierzchołki
Materiały, tekstury i oświetlenie
Przekształcenia i macierze
Kamery, perspektywa, obszary widoku oraz projekcje
Programy cieniujące
19
20
21
22
22
23
24
24
25
26
27
2. Renderowanie grafiki trójwymiarowej na bieżąco
przy użyciu biblioteki WebGL . .................................................................................... 31
Podstawy WebGL
API WebGL
Anatomia aplikacji WebGL
Prosty przykład użycia WebGL
Kanwa i kontekst rysunkowy WebGL
Obszar widoku
Bufory, bufory tablicowe i tablice typowane
Macierze
Shader
Rysowanie obiektów podstawowych
32
33
34
34
35
36
36
37
38
40
3
Tworzenie brył
Animacja
Mapy tekstur
Podsumowanie
41
45
46
51
3. Three.js — mechanizm do programowania grafiki trójwymiarowej
w JavaScripcie . ..............................................................................................................53
Najbardziej znane projekty zbudowane przy użyciu Three.js
Wprowadzenie do Three.js
Przygotowanie do pracy z Three.js
Struktura projektu Three.js
Prosty program Three.js
Tworzenie renderera
Tworzenie sceny
Implementacja pętli wykonawczej
Oświetlenie sceny
Podsumowanie
53
56
58
58
59
61
61
62
64
65
4. Grafika i renderowanie w Three.js ..............................................................................67
Geometria i siatki
Gotowe typy geometryczne
Ścieżki,
kształty i ekstruzje
Bazowa klasa geometrii
Geometria buforowana do optymalizacji renderowania siatki
Importowanie siatek z programów do modelowania
Graf sceny i hierarchia przekształceń
Zarządzanie sceną za pomocą grafu sceny
Grafy sceny w Three.js
Reprezentowanie przesunięcia, obrotu i skali
Materiały
Standardowe materiały siatki
Dodawanie realizmu poprzez zastosowanie kilku tekstur
Oświetlenie
Cienie
Shadery
Klasa ShaderMaterial: zrób to sam
Stosowanie kodu GLSL z biblioteką Three.js
Renderowanie
Przetwarzanie końcowe i renderowanie wieloprzebiegowe
Renderowanie opóźnione
Podsumowanie
67
67
68
69
73
73
75
75
75
78
79
79
81
84
87
91
91
93
95
96
97
98
4
Spis treści
5. Animacje trójwymiarowe .............................................................................................99
Sterowanie animacją za pomocą funkcji requestAnimationFrame()
Używanie funkcji requestAnimationFrame() we własnych aplikacjach
Funkcja requestAnimationFrame() a wydajność
Animacje klatkowe a animacje czasowe
Animowanie przy użyciu programowego aktualizowania właściwości
Animowanie przejść przy użyciu międzyklatek
Interpolacja
Biblioteka Tween.js
Funkcja prędkości animacji
Tworzenie skomplikowanych animacji przy użyciu klatek kluczowych
Animacje obiektów połączonych z użyciem klatek kluczowych
Tworzenie wrażenia płynnego ruchu przy użyciu krzywych i
śledzenia ścieżki
Animacja postaci i twarzy przy użyciu morfingu
Animowanie postaci przy użyciu animacji szkieletowej
Animowanie przy użyciu shaderów
Podsumowanie
100
102
103
103
104
106
106
107
109
110
113
115
118
121
124
129
6. Tworzenie zaawansowanych efektów na stronach przy użyciu CSS3 . ...................131
Przekształcenia CSS
Przekształcenia trójwymiarowe w praktyce
Perspektywa
Tworzenie hierarchii przekształceń
Kontrolowanie renderowania tylnej
ściany
obiektów
Zestawienie własności przekształceniowych CSS
Przejścia CSS
Animacje CSS
Zaawansowane funkcje CSS
Renderowanie obiektów trójwymiarowych
Renderowanie
środowisk
trójwymiarowych
Tworzenie zaawansowanych efektów przy użyciu filtrów CSS
Renderowanie trójwymiarowe w CSS przy użyciu Three.js
Podsumowanie
133
134
136
138
140
143
143
147
151
151
152
153
154
155
7. Kanwa dwuwymiarowa . ............................................................................................157
Kanwa — podstawowe wiadomości
Element kanwy i dwuwymiarowy kontekst rysunkowy
Właściwości API Canvas
Renderowanie obiektów trójwymiarowych przy użyciu API Canvas
158
158
160
164
Spis treści
5
Trójwymiarowe biblioteki oparte na kanwie
K3D
Renderer biblioteki Three.js rysujący na kanwie
Podsumowanie
167
168
169
174
Część II. Techniki tworzenia aplikacji . ..........................................................175
8. Proces powstawania treści trójwymiarowej . ............................................................177
Proces tworzenia grafiki trójwymiarowej
Modelowanie
Teksturowanie
Animowanie
Sztuka techniczna
Narzędzia do tworzenia trójwymiarowych modeli i animacji
Klasyczne programy komputerowe
Przeglądarkowe
środowiska
zintegrowane
Repozytoria 3D i darmowe zdjęcia
Trójwymiarowe formaty plików
Formaty modelowe
Formaty animacyjne
Formaty do zapisywania całych scen
Wczytywanie treści do aplikacji WebGL
Format JSON biblioteki Three.js
Format binarny biblioteki Three.js
Wczytywanie sceny w formacie COLLADA przy użyciu biblioteki Three.js
Ładowanie
sceny glTF przy użyciu biblioteki Three.js
Podsumowanie
177
178
178
179
180
181
181
185
188
190
190
192
193
201
202
207
208
211
212
9. Trójwymiarowe silniki i systemy szkieletowe . ........................................................ 213
Koncepcje szkieletów trójwymiarowych
Czym jest system szkieletowy?
Wymagania dotyczące systemów szkieletowych dla WebGL
Przegląd systemów szkieletowych dla WebGL
Silniki gier
Prezentacyjne systemy szkieletowe
Vizi — komponentowy system do tworzenia wizualnych aplikacji sieciowych
Tło i metody projektowania
Architektura systemu Vizi
Podstawy obsługi systemu Vizi
Prosta aplikacja Vizi
Podsumowanie
214
214
215
217
217
220
223
223
224
226
226
232
6
Spis treści

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin