Aplikacje_3D_Przewodnik_po_HTML5_WebGL_i_CSS3_apli3d.pdf

(2550 KB) Pobierz
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 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
Kup książkę
Poleć książkę
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
Kup książkę
Poleć książkę
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
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin