POWRÓT

SEMESTR VI

Grafika trójwymiarowa dla Internetu - ćwiczenie


Spis treści rozdziału - tutaj kliknij

Biblioteka WebGL
Prosty przykład zastosowania WebGL
Ćwiczenia - sześcian

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


 

Biblioteka WebGL

     
   

Definicja WebGL
    WebGL umożliwia wyświetlanie w czasie rzeczywistym grafiki 3D w przeglądarce. Inaczej 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


 

Prosty przykład użycia WebGL - anatomia 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.

Utworzenie elementu kanwy

    Przykładem jest program rysujący na kanwie biały prostokąt, zgodnie z tym co jest widoczne na rysunku obok. Aby umieścić treść WebGL na stronie internetowej należy utworzyć element canvas, uzyskać dostęp do reprezentującego go obiektu DOM (np. za pomocą funkcji dokument.getElementById()), a następnie uzyskać dostęp do jego kontekstu WebGL.

function initWebGL(canvas) {
    var gl = null;
    var msg = "Twoja przegladarka nie obsluguje WebGL " +
    "albo obsluga WebGL jest w niej wylaczona.";
    try
    {
    gl = canvas.getContext("experimental-webgl");
    }
    catch (e)
    {
    msg = "Blad tworzenia kontekstu WebGL!: " + e.toString();
    }
    if (!gl)
    {
    alert(msg);
    throw new Error(msg);
    }
    return gl;
  }


Tutaj do pobrania cały kod rysujący na kanwie biały prostokąt, wraz z objaśnieniami »»» 
Tutaj do pobrania biblioteka glMatrix »»» 
Tutaj do pobrania biblioteka jquery-1.9.1 »»» 

Inicjacja obszaru widoku
    Po uzyskaniu poprawnego kontekstu rysunkowego WebGL z kanwy należy określić prostokątny obszar, w którym odbywać się będzie rysowanie. W WebGL obszar taki nazywa się obszarem widoku. W tym celu należy wywołać metodę viewport() kontekstu. Plik - start2.html


Utworzenie bufora i typowych tablic
    W WebGL, do rysowania używa się obiektów podstawowych, różnych typów obiektów, które można narysować. Zaliczają się do nich trójkąty, punkty i linie. Obiekty podstawowe korzystają z tablic danych zwanych buforami, które określają położenie wierzchołków do narysowania. Wynik jest zwracany w obiekcie JavaScript zawierającym dane bufora wierzchołków, rozmiar struktury wierzchołków, liczbę wierzchołków do narysowania oraz typ obiektów podstawowych, które zostaną użyte do narysowania prostokąta. Plik - start3.html


Utworzenie macierzy
    Aby narysować prostokąt, należy utworzyć dwie macierze. Pierwsza będzie określać położenie figury w trójwymiarowym układzie współrzędnych względem kamery. Nazywa się ona macierz model-widok.
Druga macierz to macierz rzutowania, potrzebna shaderowi do przekształcenia trójwymiarowych współrzędnych modelu w przestrzeni kamery na współrzędne dwuwymiarowe rysowane w przestrzeni obszaru widoku. Plik - start4.html.


Shader
    Shader jest niewielkim programem w języku GLSL, definiujący sposób rysowania na ekranie pikseli składających się na trójwymiarowe obiekty.
    Shader - definiuje sposób rysowania na ekranie pikseli składających się na trójwymiarowe obiekty. Typowy shader składa się z dwóch części; shadera wierzchołków i shadera fragmentów. Shader wierzchołków służy do przekształcenia współrzędnych obiektu na przestrzeń dwuwymiarową. Natomiast shader fragmentów jest używany do generowania ostatecznego koloru każdego piksela dla przekształconych wierzchołków, wykorzystując dane wejściowe jak kolor, tekstura, oświetlenie i materiał. W naszym przykładzie shader wierzchołków wykorzystuje wartości vertexPos, modelViewMatrix oraz projectionMatrix, a shader fragmentów zwraca tylko ustawiony na sztywno kolor biały.
    Tworzenie shadera składa się z kilku etapów i obejmuje; kompilację poszczególnych fragmentów kodu źródłowego GLSL, a następnie ich połączenie.


Rysowanie obiektów podstawowych
    Po utworzeniu kontekstu, ustawieniu obszaru widoku, utworzeniu i zainicjowaniu bufora wierzchołków, macierzy i shadera, możemy narysować prostokąt. Wynik działania to biały prostokąt na czarnym tle widoczny na rysunku.

Do góry


 

Ćwiczenie - tworzenie obracającego się sześcianu

     
   

    W ćwiczeniu nalezy narysować trójwymiarowy obiekt, którym jest kolorowy animowany sześcian. Animacja umożliwia oglądanie sześcianu z każdej strony. Aby utworzyć i wyrenderować trójwymiarową kostkę, wcześniej napisany kod musimy zmienić w taki sposób, by zamiast geometrii prostokąta tworzył geometrię sześcianu.
Aby utworzyć obracający się sześcian należy;

  • dołączyć bibliotekę glMatrix i klasę WebGL
  • zdefiniować funkcję, która będzie inicjować bufory położenia, koloru i indeksów,
  • zdefiniować funkcję, która będzie okreslać macierz perspektywy,
  • zastosować program shadera i uruchomić animację.

Tutaj do pobrania cały kod rysujący na kanwie animowany sześcian »»» 
Tutaj do pobrania biblioteka glMatrix »»» 
Tutaj do pobrania biblioteka WebGL »»» 

Do góry


 

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