Home > HTML5 > [PL] Kurs WebGl – Podstawowe pojęcia

[PL] Kurs WebGl – Podstawowe pojęcia

WebGL_logoW tej części kursu przedstawię i wyjaśnię parę pojęć związanych z WebGl i zasadami grafiki 3D.

Współrzędne

Każdy obiekt definiowany jest za pomocą współrzędnych w układzie trójwymiarowej przestrzeni euklidesowej, znanej praktycznie każdemu z geometrii. Tworząc obiekt, definiujemy położenie punktu na poszczególnych płaszczyznach X, Y, Z – tym punktem jest tak zwany vertice (wierzchołek). Warto zwrócić uwagę na wartości poszczególnych punktów. Gdy chcemy oddalić jakiś obiekt, wartości punktu na płaszczyźnie Z posiadają coraz mniejszą wartość. Odzwierciedlone to zostało na rysunku

3D

Obiekty

Obiekty w naszej przestrzeni – to tak zwane meshes – i tworzone są przeważnie z trójkątów. Trójkąt to nic innego jak złączenie trzech wierzchołków (vertice) w jedną grupę. Nie ma tutaj żadnej tajemnicy, że aby utworzyć kwadrat potrzebujemy grupę czterech vertices. Aby zdefiniować najprostszy mesh, potrzebujemy co najmniej trzech wierzchołków (oznaczone na żółto). Każdy kolejny wierzchołek (w przykładzie na czerwono) będzie tworzył kolejny trójkąt biorąc pod uwagę dwa ostatnie wierzchołki.

Mesh

Mając już utworzony obiekt, chcielibyśmy zmieniać jego położenie czy rozmiar. Modyfikując każdy wierzchołek byłoby to bardzo nużące i trudne – aby uprościć to zadanie, definiuje się transform matrices (macierze transformacji). Transformacje umożliwiają nam w prosty sposób na zmianę rozmiarów, przesuwanie i obracanie obiektu. Z pewnością warto poświęcić temu osobny post, jednak zachęcam już każdego do zajrzenia na tą stronkę: WebGL Transforms. Znajduje się tam sporo przykładów i wyjaśnień na temat transformacji obiektów.

Nasz świat

Camera

Każdy obiekt zdefiniowany w naszej przestrzeni będzie oglądany przez obserwatora z określonego punktu. Tym punktem jest reprezentant – kamera (camera). Niezależnie od obszaru, jaki jest rejestrowany przez kamerę – definiowana jest perspektywa. Dzięki temu wielkość i kształt obiektów uzależniona jest od położenia kamery.

Kamera rejestruje jedynie fragment świata. Tak jak zostało to pokazane na rysunku, jedynie obszar wewnątrz tak zwanego View frustum jest widoczny dla użytkownika. Wszystko co znajduje się poza tym obszarem nie jest widoczne. View frustum znajduje się pomiędzy dwiema wirtualnymi ścianami – Far flipping pane oraz Near flilpping pane, nazywanego także jakoViewport. Ściany te definiują granicę obszaru jaki ma być widoczny dla kamery.  Można zauważyć, że tworzony obszar jest ostrosłupem ściętym.

Rezultatem działania kamery jest spłaszczenie naszej przestrzeni (View frustum) do obrazu 2D – otrzymujemy viewport, który jest finalnie wyświetlany na Canvasie. Obszar jaki jest wyświetlany na Canvasie zależy od kąta jaki ogarnia kamera – jest to tak zwany Field of view. W większości przykładów będziemy operować na kącie 45 stopni.

Kamera wygląda na prostą rzecz, jednak taka nie jest. Do działania wchodzi już algebra (w końcu znajduje się zastosowanie algebry) – jednak bez obaw powiemy sobie o frameworkach, które pozwolą pozbyć się tego koszmarku.

Shader

Utworzenie mesha, ustawienie kamery nie wystarcza do wyświetlenia obiektów. Aby wyświetlić obiekt na Canvasie, WebGl musi posiadać jeszcze definicje tak zwanych shaderów. Są to fragmenty kodu podobnego do kodu języka C, które sterują oświetleniem, kolorami i innymi efektami. Kod takiego shadera jest przekazywany i kompilowany bezpośrednio na karcie graficznej (GPU) – wynika z tego, że warunkiem koniecznym obsługi WebGl jest obsługa shaderów przez kartę graficzną.

Tags: , ,
  1. Konrad
    August 8, 2014 at 12:21

    niestety cały akapit ‘Nasz świat’ jest źle napsiany logicznie bez zrozumienia opengl-a (webgl to opengl, a webgl to na dobrą spraę opengl es 2.0), proszę popraw go bo on wprowadza ludzi w błąd, pierwsza podstawowa sprawa w opengl/webgl nie ma czagoś takiego jak kamera, istenieje takie pojęcie w niektórych frameworkach opakowujących webgl ale to jest złożenie bardzo wielu operacji

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: