E-book details

Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3

Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3

Tony Parisi

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 Trevettwiceprezes 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)

  • Title: Aplikacje 3D. Przewodnik po HTML5, WebGL i CSS3
  • Author: Tony Parisi
  • Original title: Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages
  • Translation: Łukasz Piwko
  • ISBN: 978-83-246-9669-7, 9788324696697
  • Date of issue: 2014-11-14
  • Format: Ebook
  • Item ID: apli3d
  • Publisher: Helion