OpenGL

Podstawy

Czym jest OpenGL ?

●

"Programowy interfejs sprzętu graficznego"

●

Biblioteka zawierająca zbiór procedur ułatwiających

rysowanie grafiki dwu

i trójwymiarowej.

●

OpenGL nie jest, ani nie zawiera "enginu" grafiki

trójwymiarowej – służy jedynie do rysowania.

●

Procedury służące do rysowania skomplikowanych

modeli trójwymiarowych, ich animacji i transformacji

powinny być zaimplementowane przez programistę.

●

OpenGL nie zawiera funkcji służących do tworzenia

okien i ich zarządzania (od tego jest np. GLUT), ani do

interakcji z użytkownikiem.

●

Procedury OpenGL służą do rysowania prymitywów

(punktów, odcinków, trójkątów), które mogą być

cieniowane, pokryte teksturami, przeźroczyste itd.

●

Implementacje OpenGL w różnych środowiskach

mogą, ale nie muszą wykorzystywać akceleracji

sprzętowej. Wykorzystanie dostępnych mechanizmów

zależy od implementacji OpenGL i jest przeźroczyste

dla programisty.

Czym jest OpenGL ?

●

Biblioteka OpenGL pracuje na zasadzie maszyny

stanów.

●

W praktyce polega to na tym, że w danym momencie

pracy jest ustawiony zbiór opcji wg. których rysowane

są prymitywy (np. kolor, sposób cieniowania itp.).

●

Sprawia to pewne problemy przy konstrukcji enginu do

np. gry komputerowej, gdyż zawsze, kiedy zaczynamy

rysować jakiś obiekt należy pamiętać, żeby ustawić

ponownie wszystkie parametry rysowania, gdyż

niektóre mogły zostać zmienione podczas rysowania

innych obiektów.

Nazwy procedur w OpenGL (1)

●

W OpenGL praktycznie każda procedura posiada kilka

wersji.

●

Wersje te różnią się przede wszystkim typem

parametrów.

●

Jeżeli procedura może mieć wersje różniące się liczbą

parametrów, to do nazw konkretnych wersji dodawany

jest przyrostek (cyfra) określający liczbę tych

parametrów.

Nazwy procedur w OpenGL (2)

●

W zależności od typu parametrów dodawane są

przyrostki, np:

–

d – double

–

f – float

–

i – int

●

Jeżeli istnieją wersje procedury, z których jedna

przyjmuje jako parametr liczbę, a druga wektor, to

dodawany jest również przyrostek v.

Nazwy procedur w OpenGL (3)

●

Przykłady:

–

glVertex3d – posiada trzy parametry typu double

–

glLightfv – jako jeden z parametrów przyjmuje wektor liczb

typu float

Czyszczenie okna (1)

●

Wyczyszczenie zawartości okna polega na zapisaniu

każdego piksela takim samym kolorem.

●

Kolor czyszczenia można ustawić za pomocą

procedury glClearColor.

●

Składnia: void glClearColor( GLclampf red, GLclampf

green, GLclampf blue,

GLclampf alpha );

●

red, green, blue – to składowe koloru, alpha to stopień

przezroczystości.

Czyszczenie okna (2)

●

Do czyszczenia okna służy procedura glClear.

●

Składnia: void glClear( GLbitfield mask )

●

Parametr mask jest mapą bitową tworzoną przez

superpozycję pewnych stałych. Określa które bufory

powinny być czyszczone. Np.:

–

GL_COLOR_BUFFER_BIT – obraz

–

GL_DEPTH_BUFFER_BIT - z-bufor

Wyświetlanie wyników rysowania

●

Jeżeli pracujemy w oknie z podwójnym buforowaniem

konieczna jest dodatkowa operacja aby wyświetlić

wynik rysowania.

●

W podwójnym buforowaniu rysujemy na niewidocznym

buforze. Aby go pokazać należy wywołać procedurę:

glutSwapBuffers;

●

Składnia: void glutSwapBuffers(void);

Ćwiczenie

●

Do części inicjującej szkieletu dodaj procedurę

określającą kolor czyszczenia na niebieski.

●

Do procedury odświeżającej okno dodaj wywołanie

procedury czyszczącej okno (czyść zarówno bufor

kolorów jak i z-bufor (to drugie przyda się w

następnych ćwiczeniach). Nie zapomnij na końcu

procedury odświeżającej dodać wywołania procedury

glutSwapBuffers.

●

W wyniku ćwiczenia powinieneś otrzymać okno, które

jest wypełnione kolorem niebieskim, zamiast

przypadkowych obrazów.

Układy współrzędnych (1)

Przestrzeń

obiektu

Przestrzeń

świata

Przestrzeń

oka

Przestrzeń

przycięcia

Znormalizowana

przestrzeń urządzenia

Przestrzeń

okna

Przekształcenie modelu

Przekształcenie widoku

Przekształcenie rzutowania

Podział perspektywiczny

Przekształcenie obrazu

i zakresu głębi

Układy współrzędnych (2)

●

Współrzędne homogeniczne punktu
w trójwymiarowej przestrzeni są reprezentowane
przez wektor 4 liczb: <x,y,z,w>.

●

Normalne współrzędne trójwymiarowe można
uzyskać dzieląc współrzędne x, y i z przez w.

●

Kolejne przekształcenia są reprezentowane
przez macierze 4x4.

●

Dzięki dodatkowej współrzędnej transformacje
wymagające dodania stałej do współrzędnej x, y
albo z (np. przesunięcie) mogą być również
przedstawione w postaci macierzy.

Układy współrzędnych (3)

●

Przestrzeń obiektu – układ współrzędnych

charakterystyczny dla pojedynczego rysowanego

obiektu.

●

Przestrzeń świata – układ współrzędnych rysowanej

sceny.

●

Przekształcenie modelu (model) – przekształcenie

przestrzeni obiektu w przestrzeń świata.

●

Przestrzeń oka – układ współrzędnych w którym

obserwator znajduje się w początku układu

współrzędnych, patrzy w kierunku rosnących wartości

współrzędnych z (w OpenGL malejących), a góra to

dodatni kierunek współrzędnej y.

Układy współrzędnych (4)

●

Przekształcenie widoku (view) – przekształcenie

przestrzeni świata w przestrzeń oka.

●

Przestrzeń przycięcia – przestrzeń definiuje widziany

obszar. Wszystko co jest widoczne znajduje się

wewnątrz sześcianu o krawędziach równoległych do

osi układu współrzędnych. Każdy widoczny punkt musi

spełniać warunki: -w≤x≤w, -w≤y≤w, -w≤z≤w.

●

Przekształcenie rzutowania (projection) –

przekształcenie przestrzeni oka w przestrzeń

przycięcia.

Układy współrzędnych (5)

●

Znormalizowana przestrzeń urządzenia –

w przestrzeni urządzenia wszystkie współrzędne

homogeniczne są przekształcone do ich reprezentacji

trójwymiarowej (w=1).

●

Podział perspektywiczny – transformacja przestrzeni

przycięcia do znormalizowanej przestrzeni urządzenia.

●

Przestrzeń okna – przestrzeń w której współrzędne są

wyrażone w pikselach w oknie,

w którym obraz jest ostatecznie rysowany.

Układy współrzędnych (6)

●

W OpenGL macierze przekształceń modelu
i widoku są połączone w macierz model – widok będącą

złożeniem obu tych transformacji. Postąpiono w ten
sposób, gdyż w zasadzie jedna z tych macierzy może

zastąpić drugą.

●

Możemy modyfikować w dowolny sposób macierz model –

widok i macierz rzutowania.

●

Przekształcenie obrazu można modyfikować za pomocą

procedury glViewport, oraz za pomocą procedur biblioteki
GLUT. Tym przekształceniem nie będziemy się zajmować

na zajęciach.

●

Procedurę glViewport wykorzystuje się do zainicjowania
macierzy przekształcenia obrazu (robione automatycznie
przez GLUT) oraz w sytuacjach, gdy okno zmienia

rozmiar.

Układy współrzędnych (7)

●

Aby przełączyć OpenGL w tryb modyfikacji
odpowiedniej macierzy należy wykorzystać
procedurę void glMatrixMode( GLenum mode ),
gdzie mode wyznacza którą z macierzy należy
modyfikować:

–

GL_PROJECTION – macierz rzutowania

–

GL_MODELVIEW – macierz model – widok.

Układy współrzędnych (8)

●

Obie macierze modyfikuje się poprzez:

–

Załadowanie macierzy jednostkowej za pomocą procedury

void glLoadIdentity().

–

Mnożenie aktualnej macierzy przez macierze reprezentujące
różne transformacje.

●

W przypadku macierzy rzutowania, załadowaną

macierz jednostkową mnożymy razy macierz

rzutowania równoległego (procedura glOrtho) lub

macierz rzutu perspektywicznego (procedura

gluPerspective)

Układy współrzędnych (9)

●

W ćwiczeniach będziemy korzystać jedynie

z rzutu perspektywicznego.

●

Procedura gluPerspective ma następującą składnię:

void gluPerspective( GLdouble fovy, GLdouble aspect,

GLdouble zNear,

GLdouble zFar ), gdzie:

–

fovy to kąt widzenia (stopnie)

–

aspect to stosunek szerokości okna do jego wysokości

–

zNear to odległość bliższej płaszczyzny obcinania

–

zFar to odległość dalszej płaszczyzny obcinania

Układy współrzędnych (10)

●

Poniższy przykładowy kod należy umieścić w części

inicjującej szkieletu.

..........

glMatrixMode(GL_PROJECTION);

//Przełączenie w tryb macierzy rzutowania

glLoadIdentity();

//Załadowanie macierzy jednostkowej

gluPerspective(55,1,1,50);

//Pomnożenie jej razy macierz rzutu perspektywicznego

...........

●

Przykład ten konfiguruje OpenGL do wykonywania

rzutowania perspektywicznego, z kątem widzenia 55

stopni, stosunkiem wysokości do szerokości 1, bliskiej

płaszczyźnie obcinania w odległości 1 i dalekiej
płaszczyzny obcinania w odległości 50.

Układy współrzędnych (11)

●

Macierz widok – model zawiera złożenie transformacji

translacji, obrotów i skalowania, które przekształca

współrzędne w przestrzeni modelu we współrzędne w

przestrzeni oka.

●

Procedury służące do obrotu układu współrzędnych,

translacji i skalowania zostaną podane później. Do

następnego ćwiczenia przyda się procedura gluLookAt

Układy współrzędnych (12)

●

Procedura gluLookAt wykonuje taką transformację

układu współrzędnych, aby odpowiadał on widokowi

jaki posiada obserwator o określonym położeniu

patrzący na konkretny punkt – innymi słowy mnoży

aktualnie modyfikowaną macierz razy macierz
przekształcenia widoku.

●

Składnia: void gluLookAt(

GLdouble eyex, GLdouble eyey, GLdouble eyez,
GLdouble centerx, GLdouble centery, GLdouble

centerz,

GLdouble upx, GLdouble upy, GLdouble upz )

Układy współrzędnych (13)

●

Poszczególne parametry tej procedury mają

następujące znaczenie:

–

eyex, eyey, eyez – współrzędne obserwatora

–

centerx, centery, centerz – obserwowany punkt

–

upx, upy, upz – wektor określający "górę" obserwatora

Układ współrzędnych (14)

●

Przykładowy kod wykorzystujący opisane wcześniej

procedury przedstawiono poniżej. Można go umieścić

zarówno w części inicjującej jak i rysującej, ale od tego

zależy sposób wykonywania dalszych ćwiczeń.

Sugeruję umieszczenie go w części rysującej.

.............

glMatrixMode(GL_MODELVIEW);

//Przełączenie w tryb macierzy widoku modelu

glLoadIdentity();

//Załadowanie macierzy jednostkowej

gluLookAt(7,7,7,0,0,0,0,1,0);

//Patrzy z punktu <7,7,7> na <0,0,0>, głowa prosto ;)

.............

Prosty obiekt

●

Istnieje wiele procedur rysujących proste obiekty. Oto

kilka z nich (nazwy są samotłumaczące ;))

–

void glutSolidSphere(GLdouble radius, GLint slices, GLint stacks);

–

void glutWireSphere(GLdouble radius, GLint slices, GLint stacks);

–

void glutSolidCube(GLdouble size);

–

void glutWireCube(GLdouble size);

–

void glutSolidCone(GLdouble base, GLdouble height, GLint slices, GLint

stacks);

–

void glutWireCone(GLdouble base, GLdouble height, GLint slices, GLint

stacks);

–

void glutSolidTorus(GLdouble innerRadius, GLdouble outerRadius, GLint

nsides, GLint rings);

–

void glutWireTorus(GLdouble innerRadius, GLdouble outerRadius, GLint

nsides, GLint rings);

–

void glutSolidTeapot(GLdouble size);

–

void glutWireTeapot(GLdouble size);

Ćwiczenie

●

Ćwiczenie polega na modyfikacji wyniku poprzedniego

ćwiczenia.

●

Zmień kolor tła na czarny.

●

Narysuj szkielet torusa (glutWireTorus)

o promieniu wewnętrznym 1 a zewnętrznym 3. Nie

zapomnij o ustawieniu obserwatora!

●

Wywołanie glutWireTorus powinieneś

umieścić w procedurze rysującej po

ustawieniu obserwatora, ale przed

glSwapBuffers;

Transformacje układu współrzędnych (1)

●

Obrót obiektu można wykonać poprzez pomnożenie

macierzy model – widok przez macierz obrotu.

●

Procedura void glRotated( GLdouble angle, GLdouble

x, GLdouble y, GLdouble z ) mnoży aktualnie

modyfikowaną macierz przez macierz obrotu o kąt

angle wokół osi wyznaczonej przez wektor <x,y,z>.

Transformacje układu współrzędnych (2)

●

Procedura void glScaled( GLdouble x, GLdouble y,

GLdouble z ) mnoży aktualnie modyfikowaną macierz

razy macierz skalującą. Kolejne parametry procedury

to współczynniki skalowania na poszczególnych

osiach układu współrzędnych.

●

Procedura void glTranslated( GLdouble x, GLdouble y,

GLdouble z ) mnoży aktualnie modyfikowaną macierz

razy macierz translacji. Kolejne parametry procedury
to współrzędne wektora, o który następuje

przesunięcie.

Ćwiczenie

●

Umieść przed instrukcją rysującą torus (ale za

instrukcjami definiującymi obserwatora) instrukcję

obracającą układ współrzędnych dookoła osi Y

(wektor <0,1,0>) o 60 stopni.

Animacja (1)

●

Animację można zrealizować za pomocą specjalnej

procedury callback wywoływanej najczęściej jak się

da.

●

Do ustawienia tej procedury służy procedura:

void glutIdleFunc(void (*func)(void));

●

Jako parametr powinno się przekazać nazwę

procedury, która nie posiada parametrów. Procedura

ta będzie wywoływana przez glut.

Animacja (2)

●

Procedura callback powinna modyfikować wartości

jakichś zmiennych na podstawie których rysowany jest

obraz w procedurze rysującej i wywołać ponowne

narysowanie obrazu.

●

Aby wywołać ponowne narysowanie obrazu należy

wywołać procedurę:

void glutPostRedisplay(void);

Animacja (3)

●

Przykład fragmentów kodu definiujących animację:

float

speed=360;

//360 stopni/s

int

lastTime=0;

float

angle;

void

displayFrame(

void

) {

............

glRotated(angle,1,0,0);

glutWireTorus(1,3,10,10);

glutSwapBuffers();

}

void

nextFrame(void) {

int

actTime=glutGet(GLUT_ELAPSED_TIME);

int

interval=actTime-lastTime;

lastTime=actTime;

angle+=speed*interval/1000.0;

(angle>360) angle-=360;

glutPostRedisplay();

}

int

main (....) {

.......

glutIdleFunc(nextFrame);

.......

glutMainLoop();

}

Ćwiczenie

●

Zmodyfikuj poprzedni program tak, aby torus obracał się wokół
dwóch osi (X i Y). Wokół osi X z prędkością 120 stopni/s a

wokół osi Y z prędkością 240 stopni/s.

Kolory

●

Kolor obiektu który ma być narysowany ustawia się za

pomocą procedury: void glColor3d( GLdouble red,

GLdouble green, GLdouble blue )

●

Poszczególne parametry oznaczają udział składowych

w wynikowym kolorze i przyjmują wartości z przedziału

od 0 do 1.

Ćwiczenie

●

Zmodyfikuj poprzedni program tak, aby animowany

torus był niebieski.

●

Spróbuj zastąpić procedurę rysującą siatkę torusa

procedurą rysującą pełen torus (glutSolidTorus). Czy

efekt jest zadowalający ?

Cieniowanie (1)

●

Aby włączyć cieniowanie należy wykonać nastepującą

instrukcję:

glEnable(GL_LIGHTING);

●

glEnable służy do włączania wielu różnych opcji,
które będą stopniowo wprowadzane.

●

Po włączeniu cieniowania należy włączyć źródło
światła:

glEnable(GL_LIGHT0);

●

Domyślnie źródło światła o numerze 0 ma kolor
biały i znajduje się w nieskończoności, za
obserwatorem.

Cieniowanie (2)

●

Kolejnym krokiem jest włączenie typu cieniowania.

●

Zaimplementowane są dwa algorytmy: płaskie

i gładkie (Gourauda).

●

Typ cieniowania wybieramy za pomocą procedury void

glShadeModel( GLenum mode ), która przyjmuje

parametry:

–

GL_FLAT – cieniowanie płaskie

–

GL_SMOOTH – cieniowanie gładkie

Cieniowanie (3)

●

Przykładowy kod należy umieścić w części
inicjującej:

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glShadeModel(GL_SMOOTH);

●

Powyższy kod włącza cieniowanie, zerowe źródło
światła i ustawia cieniowanie gładkie

Z-Bufor

●

Z-Bufor służy do usuwania niewidocznych

powierzchni.

●

Bufor ten przechowuje informację w jakiej odległości

od obserwatora znajduje się aktualnie narysowany

piksel.

●

Jeżeli kolejny rysowany w tym miejscu piksel jest

dalej, to jest on pomijany, gdyż obecny przesłania go.

●

Aby włączyć Z-Bufor należy wykonać instrukcję:

glEnable(GL_DEPTH_TEST);

//W części inicjującej

Wstęp do materiałów

●

Każdy obiekt jest zbudowany z "materiału"

●

Materiałem nazywamy zbiór parametrów

określających sposób cieniowania obiektu, oraz np.

jego teksturę.

●

Aby obiekt złożony z wielokątów (a nie jego szkielet)

miał kolor taki jak aktywny należy włączyć śledzenie

przez materiał kolorów za pomocą instrukcji:

glEnable(GL_COLOR_MATERIAL);

//W części inicjującej

Ćwiczenie

●

Zastąp instrukcję rysującą szkielet torusa instrukcją

rysującą pełen torus (auxSolidTorus) jeśli tego nie

zrobiłeś w poprzednim ćwiczeniu.

●

Włącz cieniowanie, zerowe światło, typ cieniowania

płaski.

●

Włącz Z-Bufor i śledzenie kolorów przez materiał.

●

Zmień model cieniowania na gładki. Zaobserwuj
różnice.

Interakcja z użytkownikiem (1)

●

Biblioteka GLUT pozwala na zdefiniowanie procedury

callback wywoływanej w momencie naciśnięcia

klawisza.

●

Procedura ta powinna posiadać następującą

sygnaturę: void keyEvent(unsigned char c, int x, int y).

Oczywiście nazwa jest dowolna.

●

Procedurę callback rejestruje się za pomocą

procedury void glutKeyboardFunc(

void (*func)(unsigned char key,int x, int y));

Interakcja z użytkownikiem (2)

●

Podobnie jak w przypadku animacji wywołana

procedura powinna modyfikować parametry

wyświetlania klatki przez procedurę rysującą.

●

Przykład:

void

keyEvent(

unsigned

char

int

y) {

(c=='a') angle=(angle+5)%360;

(c=='z') angle=(angle-5)%360;

glutPostRedisplay();

}

int

main (....) {

.......
glutKeyboardFunc(keyEvent);

.......
glutMainLoop();

}

Ćwiczenie

●

Zakomentuj zawartość procedury nextFrame.

●

Zastąp procedurę rysującą torus inną procedurą,

rysującą jakiś obiekt trójwymiarowy.

●

Utwórz procedurę callback pozwalającą na obracanie

tym obiektem wokół wszystkich trzech osi układu

współrzędnych.

Stos macierzy (1)

●

W trakcie rysowania jednej klatki można wielokrotnie

modyfikować macierz widoku modelu w celu

rysowania różnych obiektów.

●

Można sobie ułatwić te transformacje zapamiętując

aktualny stan macierzy. Do zapamiętania aktualnej

macierzy można wykorzystać stos macierzy.

●

Stos macierzy jest obsługiwany za pomocą

bezparametrowych procedur glPushMatrix()

i glPopMatrix().

Stos macierzy (2)

●

Procedura glPushMatrix powoduje skopiowanie

i umieszczenie na stosie aktualnej macierzy.

●

Procedura glPopMatrix powoduje odczytanie ze stosu

macierzy i zastąpienie nią aktualnej macierzy.

●

Na następnym slajdzie zostanie przedstawiony

przykład wykorzystujący procedurę glutSolidCube.

Procedura ta rysuje sześcian. Jej jedynym

parametrem jest długość krawędzi.

Stos macierzy (3)

●

Poniższy przykład rysuje obiekt złożony z wielu
sześcianów:

glColor3d(1,0,0);
glutSolidCube(1);
glColor3d(0,1,0);
glPushMatrix();

glTranslatef(0.5,0,0);

glutSolidCube(0.25);