POWRÓT

SEMESTR VI

Nowoczesne technologie do tworzenia wysokiej jakości trójwymiarowych aplikacji na strony internetowe - wykład


Spis treści rozdziału - tutaj kliknij

HTML5 jako nowe medium wizualne
Zaawansowane technologie graficzne
Technologia WebGL
Trójwymiarowe przekształcenia, przejścia i filtry CSS3
API Canvas 2D

Źródła - Aplikacje 3D - przewodnik po HTML5, WebGL i CSS3, autor O'Reilly


 

HTML5 jako nowe medium wizualne

     
   

    Język HTML znacznie ewoluował od czasów, gdy w internecie istniały tylko statyczne strony internetowe oraz przycisk zatwierdzania. Na początku 2000 r. w przeglądarkach pojawiły się pierwsze zwiastuny nadchodzącej interaktywnej ery w postaci technologii Ajax umożliwiajacej dynamiczne odświeżanie tylko wybranych części stron. Jednak zastosowanie technologii Ajax było ograniczone przez niewielkie możliwości graficzne technologii HTML i CSS. Jeżeli ktoś potrzebował bardziej zaawansowanych efektów, musiał korzystać z multimedialnych wtyczek, takich jak Flash i QuickTime.
    Dopiero standard HTML5 pozwoliła wnieść wiele nowości i zmian, takich jak;

  • dopracowana składnia,
  • nowe funkcje i interfejsy API dla JavaScriptu,
  • funkcje do obsługi urządzeń przenośnych,
  • narzędzia dla multimediów,
  • zastosowanie zaawansowanych technologii graficznych.

    Technologia HTML5 umożliwiła wykorzystanie bogatych grafik w internecie, co zawdzięczamy wprowadzonym udoskonaleniom w przeglądarkach internetowych. Oto lista technik, które utowowały drogę do tworzenia bogatych interaktywnych aplikacji przy użyciu HTML5.

  • Wydajność maszyny wirtualnej JavaScript
    • WebGl i Canvas 2D to API JavaScript, więc wydajność animacji i elementów interaktywnych jest zależna od szybkości kodu JavaScript, na którym bazują.
  • Przyspieszone składanie
    • Przeglądarka bardzo szybko składa różne elementy strony w jedną całość i nie powoduje przy tym powstawania żadnych artefaktów. Od czasu gdy zaczęto tworzyć bardziej dynamiczną treść, możliwości przeglądarek w zakresie składania stron, włącznie z renderowaniem znacznie wzrosły.
  • Wspomaganie animacji
    • Wprowadzono funkcję requestAnimationFrame(), której należy używać do sterowania animacjami zamiast funkcji setInterval() i setTimeout(). Ta nowa metoda pozwala znacznie zwiększyć wydajność oraz eliminuje powstawanie artefaktów, ponieważ treść elementów na kanwie może być rysowana w tym samym przebiegu, co rysowanie elementów strony.

Do góry


 

Zaawansowane technologie graficzne

     
   

    Nowe technologie graficzne to;

  • WebGL - wspierana sprzętowo technologia renderowania grafiki trójwymiarowej przy użyciu JavaScriptu. Standard ten oparty jest na znanym i cenionym API OpenGL i jest obsługiwany przez wszystkie najważniejsze przeglądarki na komputery stacjonarne oraz coraz to większą liczbę przeglądarek na urządzeniach przenosnych.
  • Trójwymiarowe przekształcenia, przejścia i filtry CSS3 - pozwalają na stosowanie na stronach internetowych zaawansowanych efektów wizualnych. Język CSS przeszedł szereg zmian w ciągu kilku ostatnich lat, dzieki czemu obecnie umożliwia korzystanie ze wspomaganych sprzętowo funkcji renderingu trójwymiarowego i tworzenia animacji.
  • Element kanwy - i jego API do dwuwymiarowego kontekstu rysunkowego są obsługiwane przez wszystkie przeglądarki. Przy użyciu tego interfejsu JavaScript można rysować dowolne grafiki na powierzchni elementu DOM. Mimo że kanwa jest powierzchnią dwuwymiarową, można na niej renderować także obrazy trójwymiarowe, jeśli użyje się odpowiednich bibliotek jezyka JavaScript. Stanowi ona zatem alternatywę dla WebGL i trójwymiarowych składników CSS3.

Do góry


 

Technologia WebGL

     
   

    WebGL to standardowe API grafiki trójwymiarowej dla internetu. Definicja - jest to darmowe wielkoplatformowe API umożliwiające wykorzystanie OpenGL ES 2.0 na stronach internetowych jako kontekstu rysunkowego dla grafiki trójwymiarowej w kodzie HTML, dostępne w postaci niskopoziomowych interfejsów DOM. Wykorzystuje język cieniowania OpenGL GLSL ES i może być używane w połączeniu z innymi rodzajami treści internetowej, którą można umieścić na warstwie grafiki trójwymiarowej lub pod tą warstwą. Najlepiej nadaje się do tworzenia dynamicznych aplikacji trójwymiarowych w języku programowania JavaScript oraz zostanie w pełni zintegrowanie z najważniejszymi przegladarkami internetowymi.

Wyjaśnienia do definicji

  • WebGL to API - dostęp do WebGL można uzyskać wyłącznie za pomocą zestawu interfejsów programistycznych języka JavaScript. Nie używa się żadnych dodatkowych znaczników HTML. Renderowanie grafiki trójwymiarowej z wykorzystaniem WebGL, obywa się poprzez wywołania API JavaScript.
  • WebGL bazuje na OpenGL ES 2.0 - OpenGL ES to stabilny standard renderowania grafiki trójwymiarowej. Przyrostek ES oznacza, że biblioteka przeznaczona jest do użytku w niewielkich urządzeniach komputerowych, głównie w telefonach i tabletach.
  • WebGL można łączyć z innymi rodzajami treści internetowej - WebGL działa na pozostałej treści strony internetowej lub pod nią. Kanwa trójwymiarowa może zająć tylko fragment strony albo cały dokument.
  • API WebGL - WebGL bazuje na stabilnym API do programowania grafiki o nazwie OpenGL.

Anatomia aplikacji WebGL

Aby wyrenderować treść WebGL na stronie www, napisana przez nas aplikacja musi wykonać podstawowe czynności, do których zaliczamy:

  • utworzenie elementu kanwy,
  • uzyskanie dostępu do kontekstu rysunkowego dla kanwy,
  • inicjacja obszaru widoku,
  • utworzenie przynajmniej jednego bufora na dane do wyrenderowania,
  • utworzenia przynajmniej jednej macierzy definiującej rzutowanie zawartości buforów wierzchołków na przestrzeń ekranową,
  • utworzenia przynajmniej jednego shadera implementującego algorytm rysujący,
  • inicjacja shaderów z parametrami,
  • rysowanie.

Renderowanie treści WebGL zawsze odbywa się w określonym kontekście, obiekcie DOM przeglądarki dostarczającym kompletne API WebGL. Proste przykłady użycia WebGL są dostępne w Aplikacje 3D - przewodnik po HTML5, WebGL i CSS3, autor O'Reilly.

Słowniczek wybranych pojęć

  • DOM - (ang. Document Object Model [a href="http://www.w3schools.com/js/js_htmldom.asp"]DOM[/a] ) Obiektowy model dokumentu, sposób reprezentacji złożonych dokumentów XML i HTML w postaci modelu obiektowego. Model ten jest niezależny od platformy i języka programowania.
  • Kanwa - to prostokątny obszar na stronie, w którym można rysować dowolne obrazy za pomocą kodu JavaScriptu
  • Shader wierzchołków - transformuje współrzędne punktów w przestrzeni trójwymiarowej odpowiednio do obrotu obiektu i pozycji oraz dwuwymiarowego rzutu na płaszczyznę
  • Shader fragmentów - oblicza wartości barw użytych do wypełnienia trójkątów tworzących figury na ekranie.

Do góry


 

Trójwymiarowe przekształcenia, przejścia i filtry CSS3

     
   

    Podstawą technik tworzenia trójwymiarowych efektów w CSS jest przetwarzanie elementów stron internetowych za pomocą przekształceń CSS. Dzięki CSS3 można ożywiać za pomoca animacji, filtrów oraz dwu- i trójwymiarowych przekształceń wybrane elementy albo całe strony internetowe. Techniki te umożliwiaja tworzenie rozmaitych efektów wizualnych, które można wykorzystać w prostych grach, do opracowania przykuwajacych uwagę reklam oraz intuicyjnych w obsłudze interfejsów użytkownika.
    W odróżnieniu od biblioteki WebGl, do obsługi której potrzebna jest przynajmniej znajomość podstawowych zagadnień dotyczących programowania grafiki trójwymiarowej i jakiejś dodatkowej biblioteki, np. Three.js, do używania CSS3 wystarczy znajomość języków HTML, CSS oraz podstaw JavaScriptu. Dodatkowo pomocna jest umiejętność posługiwania się bibliotekami pomocniczymi, takimi jak np. jQuery. To sprawia, że praca z CSS3 jest znacznie łatwiejsza niż z WebGL.
    CSS można też używać w połączeniu z WebGL, przy czym CSS wykorzystuje się do integrowania elementów HTML, interfejs użytkownika, a WebGL do obsługi renderowania obiektów trójwymiarowych.

    Przekształcenia trójwymiarowe w CSS definiuje się w normalny sposób, przy użyciu własności, którymi są;

  • transform - stosuje przekształcenie przy użyciu przynajmniej jednej z metod przekształceniowych, np translate(X) - przesunięcie wzdłuż x, rotateX(angle) - obrót wokół osi x, scaleY(y) - skalowanie wzdłuż osi y, itd.
  • transform-origin - definiuje początek wszystkich przekształceń (domyślne ustawienie 50%, 50%,0),
  • perspektive - określa głębię perspektywy w jednostkach odległości CSS (domyślne ustawienie: 0 oznaczajace brak perspektywy)
  • perspektive-origin - określa punkt zbiegu perspektywy we współrzednych xy,
  • transform-style - określa, czy elementy potomne elementu trójwymiarowego są renderowane płasko, czy trójwymiarowo,
  • transform - visibility - określa, czy elementy odwrócone tyłem do ekranu mają być renderowanie.

    Przejścia CSS - umożliwiają stopniowe zmienianie własności w czasie. Efekty przejść są wbudowane w przeglądarki internetowe, dzięki czemu nie trzeba używać JavaScriptu. Podstawowa składnia przejścia CSS jest następująca;

transition: nazwa własności czas trwania funkcja czasowa opóźnienie

  • nazwa własności - może być nazwą konkretnej własnoći, słowem kluczowym all oznczajacym, że przejście dotyczy wszystkich zmiennych własności albo słowem none oznaczajacym, że przejście nie dotyczy żadnej własności,
  • czas-trwania - liczba sekund lub mili sekund trwania przejścia,
  • funkcja-czasowa - nazwa funkcji czasowej, która ma być uzyta do animacji przejścia. Dostepne są następujace funkcje; linear, ease, ease-in, ease-out, ease-in-out oraz cubic-bezier,
  • opóźnienie - liczba sekund lub milisekund, jaką nalezy odczekać przed rozpoczęciem przejścia.

Do góry


 

API Canvas 2D

     
   

    Api Canvas 2D używane jest do renderowania grafiki trójwymiarowej i ma zastosowanie wtedy gdy korzystanie z biblioteki WebGL nie jest zalecane. Dotyczy to;

  • dla przypadku gdy biblioteka WebGL nie jest obsługiwana przez niektóre platformy mobilne (np. Mogile SAfari dla systemu iOS),
  • ograniczenia wynikające z zasobów energii akumulatorów (np. procesory GPU niektórych smartfonów bardzo szybko wyczerpują akumulator),
  • przypadku gdy potrzebne są proste efekty. Wtedy użycie biblioteki WebGL jest przesadą, a CSS3 ma za małe możliwości.

Podstawowe wiadomości

    Kanwa - definiuje obszar na stronie, w którym można rysować grafikę. W tym celu w HTML5 zdefiniowano na stronie obszar o określonej szerokości i wysokości, na którym można

    rysować grafikę. Jest on podobny do elementu obrazu, tzn. można go otworzyć za pomocą specjalnego znacznika albo przy użyciu API DOM, np. z wykorzystaniem funkcji dokument.createElement(). Utworzony element kanwy można formatować za pomocą CSS, np. zdefiniować mu obramowania i marginesy, ustawić go w odpowiednim miejscu, a nawet animować za pomocą przejść. Niżej przykład rysowania na kanwie (źródło Aplikacje 3D).

Niżej prostokąt narysowany przy użyciu API Canvas

Właściwości API Canvs

Kontekst Canvas 2D udostępnia API rastrowe, czyli takie, na którym rysowanie odbywa się w pikselach (w odróżnieniu od wektorów używanych np. w SVG). Funkcje API kanwy można podzielić na następujące kategorie;

  • Funkcja do rysowania kształtów - można rysować prostokaty, wielokąty i krzywe wypełnione kolorem i puste,
  • Funkcje do rysowania linii i ścieżkowe - można rysować odcinki, łuki i krzywe Beziera,
  • Funkcje do rysowania obrazów - można rysować dane bitmapowe z innych źródeł, np. elementów obrazów lub innych kanw,
  • Funkcje do rysowania tekstu - można rysować tekst wypełniony lub tylko obrysy liter oraz definiować właściwości tekstu za pomocą atrybutów,
  • Style wypełnienia i obrysu - można używać stylów i gradientów CSS do definiowania wypełnień i obrysów,
  • Przekształcenia - można stosować przekształcenia dwuwymiarowe,
  • Składanie - można kontrolować sposób zmieszania nowych kształtów z istniejącą treścią kanwy.

Renderowanie obiektów trójwymiarowych przy użyciu API Canvas

Do góry


 

 (C) 2011 - 2017 Wydział Przyrodniczo - Techniczny KPSW. All Rights Reserved