Teselacja i uzupełnienia do graﬁki

(1)

Teselacja i uzupełnienia do grafiki

Marcin Orchel

1 Wstęp

1.1 Antyaliasing

Techniki wygładzania krawędzi, usunięcie zjawiska “schodków”, postrzępionych krawę- dzi, aliasingu.

Różne techniki. Wielopróbkowanie (multisampling, MSAA), nadpróbkowanie (over- sampling, SSAA super-sampling anti-aliasing), filtracja morfologiczna (MLAA, morpho- logical anti-aliasing), FXAA (fast approximate anti-aliasing).

1.1.1 Wielopróbkowanie

Wielokrotne próbkowanie. Próbkowanie wszystkich prymitywów wiele razy na każdy piksel. Każdy piksel może być zwizualizowany jako kwadrat. Generujemy wiele próbek w tym kwadracie, a następnie uśredniamy próbki w jeden piksel. Przez kwadrat może przechodzić częściowo renderowany obiekt. Wtedy gdy mamy np. 4 próbki i dwie z nich znajdują sie w renderowanym obiekcie, a pozostałe nie, to piksel będzie miał wartość uśrednioną po tych próbkach. Gdybyśmy natomiast nie mieli wielopróbkowania, to by- łaby wzięta wartość piksela jako kolor obiektu lub tła, w zależności od wartości binarnej przechodzenia obiektu przez współrzędne środka piksela.

A więc przy wielopróbkowaniu, zapisywany jest kolor dla każdego piksela, który przechodzi choćby częściowo przez renderowany obiekt. Następnie w każdym kwadracie sprawdzane jest czy próbki przechodzą przez renderowany obiekt, te które przechodzą dostają kolor piksela, pozostałe kolor tła. Następnie kolory próbek są uśredniane. Gdy nie używamy wielopróbkowania, wystarczy sprawdzenie czy współrzędne środka piksela przechodzą przez renderowany obiekt.

1.1.2 Nadpróbkowanie

Wygenerowanie sceny z teksturami o rozdzielczości dwukrotnie większej niż wielkość okna programu, i uśrednienie wygenerowanych pikseli za pomocą skalowania. Dodatkowo przy skalowaniu można użyć filtrów splotowych, np. filtrów Gaussa, Laplace’a.

1.2 Przekształcanie geometrii

Przetwarzanie prymitywów. W webGL nie są dostępne shadery geometrii. Shader geo-

metrii jest uruchamiany raz dla każdego prymitywu.

(2)

1.2.1 Teselacja

Dzielenie wielokątów na mniejsze wielokąty. Shadery kontroli teselacji, ewaluacji teselacji, generator prymitywów (teselator). Teselacja używa nowych prymitywów - płatów wierzchołków (patch). Każdy płat składa się z punktów sterujących.

W openGL dostępne są podziały

• triangles - podział trójkątów na mniejsze trójkąty

• quads - podział czworokątów na trójkąty

• isolines - podział czworokątów na zbiór linii konturowych - izolinii

Podział czworokąta odbywa się w ten sposób, że czworokąt jest dzielony na regularną siatkę czworokątów. Generowane trójkąty muszą pokrywać cały czworokąt i żaden z nich nie może współdzielić pola z innym trójkątem.

Przykładowo: mamy kwadrat dzielimy go na siatkę czworokątów np. w ten spo- sób, że będziemy mieć 3 kolumny i 4 wiersze, a więc parametr gl_TessLevelInner = [3, 4]. Następnie dzielimy na trójkąty zewnętrzne komórki. Specyfikujemy podział boków odpowiednio lewego, dolnego, prawego i górnego np. jako gl_TessLevelOuter=[1,2,3,4].

Jedynka oznacza, że nie dzielimy boku, dwójka oznacza, że będzie jeden punkt podziału, itd. Wierzchołki zewnętrzne łączymy z wierzchołkami wewnętrznymi tak aby powstały trójkąty. Z jednego wierzchołka zewnętrznego może wychodzić kilka krawędzi.

Możemy przewidzieć wartości w dowolnym punkcie za pomocą interpolacji liniowej dla 4 wierzchołków czworokąta

V = (1 − u) (1 − v) V 0 + u (1 − v) V ₁ + uvV ₂ + (1 − u) vV ₃ (1) V i to są wartości, a u i v współrzędne. Mamy wierzchołki V ₀ = (0, 0), V ₁ = (1, 0), V ₂ = (1, 1), V ₃ = (0, 1). Mnożymy odległości w kierunku x i y od przeciwnych wierzchołków do punktu (u, v). Jest to ta sama zasada obliczania średniej ważonej jak dla dwóch punktów dla przypadku punktów jednowymiarowych. Gdy te 4 punkty nie będą leżały na jednej płaszczyźnie, to wtedy nie będzie to interpolacja. Alternatywnie moglibyśmy wykonać interpolację dwuliniową.

Teselacja trójkątów. Trójkąt dzielimy na zbiór trójkątów. W tym celu rysujemy ze-

wnętrzny trójkąt i rysujemy trójkąt wewnątrz składający się z odpowiedniej liczby punk-

tów tak aby aby proste będące bokami wewnętrznego trójkąta dzieliły na gl_TessLevelInner

części. Zauważmy, że gdy ten parametr jest równy 1, trójkąt nie będzie zawierał żadnych

wierzchołków wewnątrz. Gdy ten parametr jest równy 2 będzie jeden wierzchołek we-

wnątrz (trójkąt wewnętrzny zdegenerowany do jednego punktu), dla 3 będą 3 wierzchołki

wewnątrz, itd. Jak wyznaczyć punkty wewnętrznego trójkąta? Tak naprawdę dzielimy

zewnętrzny trójkąt zgodnie z innerLevel, następnie rysujemy proste prostopadłe w tych

punktach podziału, przecięcia dwóch prostych prostopadłych dla wierzchołków sąsiądują-

cych z 3 wierzchołkami zewnętrznego trójkąta definiują 3 wierzchołki wewnętrznego trój-

kąta. Następnie przecięcia pozostałych prostych prostopadłych z bokami wewnętrznego

(3)

trojkąta definiują punkty na wewnętrznym trójkącie. Proces powtarzamy dla wewnętrz- nego trójkąta. Tak naprawdę wyznaczamy wszystkie trójkąty wewnętrzne. Dla inner = 4 mamy jeden wewnętrzny trójkąt i dodatkowo punkt w wewnętrznym trójkącie. Liczba wewnętrznych trójkątów jest równa liczbie inner podzielonej przez 2 i zaokrąglonej w dół. Jeśli to jest liczba parzysta, to najbardziej wewnętrzny trójkąt będzie pojedynczym wierzchołkiem.

Następnie pozostawiamy wierzchołki oprócz najbardziej zewnętrznego trójkąta i usuwamy wszystkie linie, oprócz linii definiujących trójkąty. Drugi parametr gl_TessLevelOuter dla każdej ze ścian trójkąta zewnętrznego określa liczbę podziałów tej ściany, dla 2 oznacza, że będzie podział na 2 części. Następnie łączymy powstałe wierzchołki na tej kra- wędzi z wierzchołkami wewnętrznymi. Podczas łączenia musi być spełniona zasada, że te wierzchołki, które były bezpośrednio połączone w pierwszym etapie algorytmu będą połączone również teraz (wierzchołków zewnętrznych już nie ma, chyba, że inner jest równe outer, każdy wierzchołek trójkąta wewnętrznego miał dwa korespondujące wierz- chołki zewnętrznego trójkąta, a pozostałe po jednym). Pozostałe krawędzie zależą od implementacji.

Przykładowo mamy trójkąt o wierzchołkach (0, 0, 1), (1, 0, 0), (0, 1, 0). W shaderze ewaluacji teselacji możemy zastosować interpolację liniową dla nowo powstałych wierz- chołków. Gdy mamy dane współrzędne barycentryczne punktu wewnątrz trójkąta (u, v, w), gdzie w = 1 − u − v, to wykonujemy interpolację liniową dla jakiegoś atrybutu zdefiniowanego dla każdego wierzchołka (V ₀ , V ₁ , V ₂ ) za pomocą wzoru

V = uV 0 + vV ₁ + wV ₂ (2)

Teselacja czworokątów na odcinki, podobnie jak teselacja trójkątów. Dzielimy boki zewnętrzne wg parametru gl_TessLevelInner[0] dzieli linie horyzontalne, a gl_TessLevelInner[1]

dzieli linie wertykalne. Powstają nam punkty na zewnętrznym czworkącie. Następnie dla każdego wierzchołka tego czworokąta, prowadzimy prostopadłe w wierzchołkach sąsiadujących, ich przecięcie utworzy wierzchołek wewnętrznego czworokąta. Łączymy wierzchołki wewnętrznego czworokąta. Następnie prowadzimy prostopadłe z pozosta- łych wierzchołków. Ich przecięcie z bokami wewnętrznego trójkąta definiuje pozostałe wierzchołki leżące na wewnętrznym czworokącie. Procedurę powtarzamy dla wewnętrz- nego czworkąta. Najbardziej zewnętrzny czworokąt będzie albo czworokątem albo czwor- kątem zdegenerowanym do linii lub punktu. Następnie usuwamy wszystkie punkty na czworokącie zewnętrznym i go ponownie dzielimy wg parametru gl_TessLevelOuter[].

Następnie dzielimy obszar na trójkąty, podobnie jak dla trójkąta.

Podział na izolinie kwadratu. Tworzymy horyzontalne odcinki, liczba odcinków to gl_TessLevelOuter[0]. Każdy odcinek składa się z segmentów o tej samej długości, liczba segmentów określona jest przez parametr gl_TessLevelOuter[1]. Górna krawędź kwadratu jest pomijana.

Domyślny podział krawędzi na równe części w teselacji to equal_spacing. Proble-

mem jest skokowa zmiana teselacji, bo mamy podział na całkowitą liczbę części. W

fractional_even_spacing i fractional_odd_spacing segmenty mogą nie mieć tych sa-

mych długości. Zaokrąglenie współczynnika teselacji do mniejszej liczby parzystej lub

(4)

nieparzystej odpowiednio.

Algorytm PN Triangles (curved point-normal triangles). Umożliwia wprowadzanie wypukłości do podziału na trójkąty. Trójkąty po podziale nie będą leżały na płaszczyź- nie oryginalnego trójkąta. Wykorzystanie trójkątnych płatów powierzchni Beziera do interpolacji współrzędnych wierzchołków i współrzędnych wektorów normalnych. Mamy dane 3 wierzchołki trójkąta i dla każdego wierzchołka wektor normalny.

Interpolacja sześcienna do współrzędnych wierzchołków, interpolacja kwadratowa do współrzędnych wektorów normalnych, dla pozostałych atrybutów interpolacja liniowa przy użyciu współrzędnych barycentrycznych trójkąta.

Interpolacja sześcienna współrzędnych wierzchołków za pomocą trójkąta Beziera f (u, v, w) = ^X

i+j+k=3

b _ijk 3!

i!j!k! u ⁱ v ^j w ^k (3)

gdzie b _ijk to współrzędne punktów kontrolnych, b ₃₀₀ , b ₀₃₀ , b ₀₀₃ to współrzędne wierz- chołków dzielonego trójkąta, b ₂₁₀ , b ₁₂₀ , b ₀₂₁ , b ₀₂₁ , b ₁₀₂ , b ₂₀₁ to współrzędne punktów po podziale każdej krawędzi na 3 części, a b ₁₁₁ to współrzędne punktu centralnego trójkąta, (u, v, w) to współrzędne barycentryczne dowolnego punktu, zwracane są współrzędne trójwymiarowe punktu powierzchni Beziera.

Dla współrzędnych barycentrycznych

f (u, v, w) = b 300 w ³ + b ₀₃₀ u ³ + b ₀₀₃ v ³ + 3b ₂₁₀ w ² u + 3b 120 wu ² + 3b ₂₀₁ w ² v + 3b 021 u ² v (4) + 3b ₁₀₂ wv ² u + 3b ₀₁₂ uv ² + 6b ₁₁₁ wuv (5) Współrzędne punktów kontrolnych to

b 300 = V ₀ (6)

b ₀₃₀ = V ₁ (7)

b 003 = V ₂ (8)

b ₂₁₀ = 2V ₀ + V ₁ − w ₀₁ N ~ ₀

3 (9)

b ₁₂₀ = 2V ₁ + V ₀ − w ₁₀ N ~ ₁

3 (10)

b 021 = 2V ₁ + V ₂ − w ₁₂ N ~ 1

3 (11)

b 012 = 2V ₂ + V ₁ − w ₂₁ N ~ 2

3 (12)

b ₁₀₂ = 2V ₂ + V ₀ − w ₂₀ N ~ ₂

3 (13)

b ₂₀₁ = 2V ₀ + V ₂ − w ₀₂ N ~ ₀

3 (14)

(5)

b 111 = b 210 + b ₁₂₀ + b ₀₂₁ + b ₀₁₂ + b ₁₀₂ + b ₂₀₁

4 − ^V

⁰

^+V ₆

¹

^+V

²

(15)

gdzie w _ij = (V _j − V _i ) · ~ N i , ~ N i to współrzędne wektora normalnego dla i-tego wierzchołka.

Wzory polegają na tym, że każda krawędź dzielona jest na 3 równe części za po- mocą dwóch punktów pośrednich. Każdy punkt pośredni jest rzutowany na płaszczyznę styczną w najbliższym wierzchołku. Ostatni punkt kontrolny to średnia wszystkich po- przednich punktów po rzutowaniu.

Rzutowanie na płaszczyznę styczną punktu Q to punkt Q’ taki, że

Q ⁰ = Q − w ~ N (16)

gdzie w = (Q − P ) · ~ N . A więc rzutowanie np. punktu Q = (2V 1 + V ₀ )/3 będzie wynosiło 2V ₁ + V ₀

3 −

2V ₁ + V ₀ 3 − V ₁

· ~ N ₁ = 2V ₁ + V ₀

3 − (V ₀ − V ₁ ) · ~ N ₁ N ~ ₁

3 = b ₁₂₀ (17) Interpolacja współrzędnych wektorów normalnych

n (u, v, w) = ^X

i+j+k=3

n ijk u ⁱ v ^j w ^k (18)

gdzie n _ijk to wartości w punktach kontrolnych (wierzchołki i środki krawędzi). Dla współ- rzędnych barycentrycznych

n (u, v, w) = n ₂₀₀ w ² + n ₀₂₀ u ² + n ₀₀₂ v ² + n ₁₁₀ wu + n ₀₀₁ uv + n ₁₀₁ wv (19) gdzie wartości wynoszą

n 200 = N ₀ (20)

n 020 = N ₁ (21)

n ₀₀₂ = N ₂ (22)

n 110 = N 0 + N ₁ − v ₀₁ (V ₁ − V ₀ )

|N ₀ + N ₁ − v ₀₁ (V ₁ − V ₀ )| (23) n ₀₀₁ = N ₁ + N ₂ − v ₁₂ (V ₂ − V ₁ )

|N ₁ + N ₂ − v ₁₂ (V ₂ − V ₁ )| (24) n 101 = N 2 + N ₁ − v ₂₀ (V ₀ − V ₂ )

|N ₂ + N ₁ − v ₂₀ (V ₀ − V ₂ )| (25) Teselacja Phonga. Mamy wierzchołki trójkąta i wektory normalne w każdym z wierz- chołków. Rzutujemy bazowy trójkąt na płaszczyzny styczne w wierzchołkach trójkąta określone przez wektory normalne. Otrzymujemy 3 trójkąty. Rzutujemy dany punkt na każdą z tych płaszczyzn. Dla dowolnego punktu danego we współrzędnych barycentrycznych mnożymy go przez macierz współrzędnych punktów po zrzutowaniu.

Rzuty punktu P na płaszczyzny styczne

π _i (P ) = P − (P − V _i ) · ~ N _i N ~ _i (26)

(6)

π j (P ) = P − (P − V _j ) · ~ N j

N ~ j (27)

π _k (P ) = P − (P − V _k ) · ~ N _k N ~ _k (28) Współrzędne punktu P po teselacji to

P ⁰ (u, v, w) = [u, v, w]





 π i (P ) π _j (P ) π k (P )





 (29)

Postać wielomianowa

P ⁰ (u, v, w) = u ² P i + v ² P j + w ² P k + uv (π _i (P _j ) + π _j (P _j )) + vw (π _j (P _k ) + π _k (P _j )) (30) + wu (π _k (P _i ) + π _i (P _k )) (31) Dodatkowo wprowadza się liniową interpolację między teselacją liniową a teselacją Phon- ga

P _α ⁰ (u, v, w) = (1 − α) [u, v, w]





 P _i P j

P _k





 + α [u, v, w]





 π _i (P ) π j (P ) π _k (P )





 (32)

Współrzędne wektorów normalnych obliczane są przy pomocy teselacji liniowej.

1.3 Krzywe i powierzchnie parametryczne 1.3.1 Krzywa Beziera

Krzywe parametryczne, gdzie parametr t przyjmuje wartości [0, 1]. Kształt krzywej okre- ślony jest przez punkty kontrolne. Krzywa przechodzi przez pierwszy i ostatni punkt kontrolny.

Przykładowo mamy krzywą Beziera z 3 punktami sterującymi, krzywa przechodzi przez punkt A i C. Aby wyznaczyć krzywą Beziera łączymy punkt A z B i punkt C z B. Stosujemy dwukrotnie interpolację liniową w postaci parametrycznej o parametrze t ∈ [0, 1]

P = (1 − t) A + tB (33)

Dla odcinka AB otrzymamy punkt D

D = A + t (B − A) (34)

Dla odcinka BC otrzymamy punkt E

E = B + t (C − B) (35)

Następnie jest robiona interpolacja z tym samym parametrem t dla punktów D i E

P = D + t (E − D) (36)

(7)

Po podstawieniu otrzymujemy

P = A + t (B − A) + t (B + t (C − B) − A − t (B − A)) (37) P = A + t (B − A) + tB + t ² (C − B) − tA − t ² (B − A) (38) P = A + t (B − A + B − A) + t ² (C − B − B + A) (39) P = A + 2t (B − A) + t ² (C − 2B + A) (40) Otrzymaliśmy równanie kwadratowe ze względu na t. Jest to krzywa Beziera drugiego stopnia. Sposób wyznaczania punktu P to algorytm de Casteljau. Gdy podstawiamy różne wartości t otrzymujemy różne punkty krzywej Beziera.

Krzywe Beziera trzeciego stopnia z 4 punktami kontrolnymi. Dodajemy jeden punkt.

A więc krzywa przechodzi przez punkty A i D. Schemat postępowania jest podobny.

Tworzymy linie AB, BC i CD. Po interpolacji liniowej otrzymujemy punkty E, F, G odpowiednio. Tworzymy linie EF i FG. Interpolujemy wzdłuż tych linii i otrzymujemy punkty H i I i na samym końcu wykonujemy interpolację między H i I i otrzymujemy P

E = A + t (B − A) (41)

F = B + t (C − B) (42)

G = C + t (D − C) (43)

H = E + t (F − E) (44)

I = F + t (G − F ) (45)

P = H + t (I − H) (46)

Zauważmy, że interpolacja punktu P jest obliczana za pomocą krzywej Beziera drugiego stopnia (punkty E, F, G). Po podstawieniu otrzymalibyśmy równanie sześcienne dla t.

Jest to krzywa Beziera trzeciego stopnia.

Równanie parametryczne z algorytmu de Casteljau to

P (t) = P 0 (1 − t) ³ + 3P ₁ t (1 − t) ² + 3P ₂ t ² (1 − t) + P ₃ t ³ (47) W postaci macierzowej

P (t) = ^h t ³ t ² t 1 ⁱ







−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0











 P ₀ P 1

P ₂ P ₃







(48)

Możemy również tworzyć splajny z krzywych Beziera. Np. możemy połączyć 3 krzy-

we Beziera 3 stopnia (krzywa przechodzi przez 4 punkty). Krzywe takie mają nazwę

krzywe B-sklejane (cubic B-spline). Wtedy t ma wartości z przedziału [0, 3]. Możemy

zdefiniować warunki z pochodnymi tak aby otrzymać funkcję różniczkowalną. Jest to

krzywa Hermite’a.

(8)

1.3.2 Powierzchnie Beziera

Mamy dwa parametry u, v z przedziału [0, 1]. Odpowiednik trójwymiarowy krzywych Beziera. Dla płatów powierzchni trzeciego stopnia mamy 16 punktów kontrolnych/ste- rujących. W szczególnym przypadku punkty sterujące mogą być położone na jednej płaszczyźnie na siatce równo ułożone. Powierzchnia przechodzi przez 4 punkty granicz- ne (wierzchołki siatki). Traktujemy każde 4 punkty w wierszu siatki jako punkty steru- jące krzywej Beziera trzeciego stopnia. Dla siatki 4x4 mamy 4 krzywe. Po interpolacji wzdłuż każdej krzywej z parametrem t ₀ otrzymamy 4 nowe punkty. Dla utworzonych 4 nowych punktów tworzymy znowu krzywą Beziera. Interpolacja wzdłuż drugiej krzywej za pomocą nowej wartości t ₁ daje kolejny punkt płata.

Równanie dla powierzchni Beziera to P (u, v) =

m

X

i=0 n

X

j=0

B m,i (u) B _n,j (v) p _ij (49) gdzie p _ij to punkty siatki. Możemy to zapisać jako

P (u, v) =

m

X

i=0

B m,i (u)





n

X

j=0

B n,j (v) p _ij



 (50)

Zdefiniujmy

q _i (v) =

n

X

j=0

B _n,j (v) p _ij (51)

po podstawieniu

P (u, v) =

m

X

i=0

B _m,i (u) q _i (v) (52)

P (u, v) jest punktem na krzywej Beziera zdefiniowanej przez m+1 punktów kontrolnych q ₀ (v), q ₁ (v), . . . , q _m (v). Każde q _i (v) jest punktem na krzywej Beziera zdefiniowanej za pomocą i-tego wiersza punktów kontrolnych: p _i0 , p i1 , . . . , p in .

Krawędzie płatu tworzą krzywą Beziera opisaną przez brzegowe punkty kontrolne.

Współrzędne powierzchni Beziera

P (u, v) =





 u ³ u ² u 1







T 





−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0













P 0,0 P 0,1 P 0,2 P 0,3

P 1,0 P 1,1 P 1,2 P 1,3

P _2,0 P _2,1 P _2,2 P _2,3 P 3,0 P 3,1 P 3,2 P 3,3













−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0







T 



 v ³ v ² v 1





 (53) Równania macierzowe pozwalają na wyznaczenie wektorów normalnych za pomocą iloczynu wektorowego wektora stycznego i wektora binormalnego

T = ~ ∂P (u, v)

∂v =





 u ³ u ² u 1







T 





−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0













P _0,0 P _0,1 P _0,2 P _0,3 P 1,0 P 1,1 P 1,2 P 1,3

P _2,0 P _2,1 P _2,2 P _2,3 P _3,0 P _3,1 P _3,2 P _3,3













−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0







T 



 3v ²

2v 1 0







(54)

(9)

B = ~ ∂P (u, v)

∂u =





 3u ²

2u 1 0







T 





−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0













P 0,0 P 0,1 P 0,2 P 0,3

P _1,0 P _1,1 P _1,2 P _1,3 P _2,0 P _2,1 P _2,2 P _2,3 P 3,0 P 3,1 P 3,2 P 3,3













−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0







T 



 v ³ v ² v 1





 (55)

1.3.3 Kwadryki

Powierzchnie drugiego stopnia o równaniu

a 11 x ² + a ₂₂ y ² + a ₃₃ z ² + 2a ₁₂ xy + 2a 23 yz + 2a 13 zx + 2a 14 x + 2a 24 y + 2a 23 z + a 44 = 0 (56) Elipsoida, sfera, paraboloida, hiperboloida.

Elipsoida. Równanie kanoniczne x ² a ² + y ²

b ² + z ²

c ² = 1 (57)

gdzie a, b, c to długości półosi elipsoidy. Równanie parametryczne

x = a sin φ cos θ (58)

y = b sin φ sin θ (59)

z = c sin φ (60)

gdzie φ ∈ [0, 2π], θ ∈ [0, π]. Wektory normalne tworzymy za pomocą iloczynu wektorowego wektora stycznego i binormalnego

T = ~







a cos φ cos θ b cos φ sin θ

c cos φ





 (61)

B = ~







−a sin φ sin θ b sin φ cos θ

0 



 (62)

Alternatywnie dla równania kanonicznego

N = ~







x a y b z c





 (63)

(10)

1.3.4 Krzywa Kocha

Wyjściowym prymitywem jest trójkąt równoboczny. Każdy bok trójkąta dzielimy na 3 równe odcinki, a środkową część zastępują dwa odcinki o takiej samej długości, nachylone względem boku tak, aby wraz z wyciętym fragmentem tworzyły trójkąt równoboczny.

Obraz Mandelbrota. Iteracje

Z _n = Z _n−1 ² + C (64)

Działanie wykonuje się do momentu gdy Z przekroczy zdefiniowany próg lub osiągnie się określoną liczbę iteracji. Gdy liczba iteracji osiągnie poziom max_iterations to oznacza, że punkt znajduje się wewnątrz zbioru i jest kolorowany na czarno. W przeciwnym razie punkt znajdzie się poza zbiorem z liczbą iteracji mniejszą od max_iterations. Mamy więc numer iteracji ostatniej, możemy więc zdefiniować kolor jako kolor teksela dla danej tekstury jednowymiarowej o współrzędnej

iterations

max_iterations (65)

Na początku Z = (0 + 0i), C to współrzędne punktu na którym są prowadzone iteracje.

Zbiór Julii. Podobny wzór jak w zbiorze Mandelbrota, ale to Z otrzymuje współ- rzędne punktu, na którym przeprowadzamy obliczenia, C to stała zależna od aplikacji.

Mamy nieskończenie wiele zbiorów Julii po jednym dla każdej wartości C.

Wzór na kwadrat liczby zespolonej

z ² = (x ² − y ² ) + i(2xy) (66)

Próg jest liczony jako iloczyn skalarny wektora z z samym sobą, więc mamy podnie- sioną do kwadratu część rzeczywistą i urojoną i dodane do siebie.

Jesli liczba iteracji osiągnęła poziom max_iterations kolor będzie czarny, w przeciwny razie

2 Zadania

2.1 Zadania na zajęcia

• przetestować antialiasing msaa, ssaa. Zaobserwować gładsze linie, redukcję postrzę- pienia

Wskazówki do Three.js

– w edytorze threejs https://threejs.org/editor/ dodać obiekt do sceny, w zakładce Project, przetestować dwie opcje z włączonym antialiasingiem lub wyłączonym, zaobserwować różnice

– parametr antialias https://threejs.org/docs/#api/renderers/WebGLRenderer – https://threejs.org/examples/webgl_postprocessing_ssaa_unbiased.

html

(11)

– https://threejs.org/examples/webgl_postprocessing_ssaa.html – https://threejs.org/examples/webgl_postprocessing_taa.html

Wskazówki do WebGL

– parametr antialias https://developer.mozilla.org/en-US/docs/Web/API/

HTMLCanvasElement/getContext

– ustawienie w about:config webgl.msaa-force na true

– https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/

renderbufferStorageMultisample

– http://webglsamples.org/WebGL2Samples/#fbo_multisample

Wskazówki do OpenGL

– https://www.khronos.org/opengl/wiki/Multisampling

– https://learnopengl.com/#!Advanced-OpenGL/Anti-Aliasing

• przetestować teselację, przerobić program tak aby pokazywał teselację dla poje- dynczego kwadratu, trójkąta na trójkąty

Wskazówki do Three.js

– https://threejs.org/examples/webgl_modifier_tessellation.html

– http://www.realtimerendering.com/erich/udacity/exercises/unit3_tessellation_

demo.html

– https://threejs.org/examples/#webgl_geometry_teapot

Wskazówki do webGL

– zaznaczyć showPoints http://www.madpaw.com/CE01/

– http://stackoverflow.com/questions/12901283/webgl-and-tessellation- library

Wskazówki do OpenGL – WskazówkidoOpenGL

Wskazówki

– https://www.youtube.com/watch?v=kCt5fwUOtZ8

• przetestować teselację PN Triangles Wskazówki do C++

– zobaczyć jak wygląda siatka http://codeflow.org/entries/2010/nov/07/

opengl-4-tessellation/

(12)

– https://github.com/jdupuy/tessComp01/zipball/master

• przetestować teselację Phonga Wskazówki

– http://onrendering.blogspot.com/2011/12/tessellation-on-gpu-curved- pn-triangles.html

– http://perso.telecom-paristech.fr/~boubek/papers/PhongTessellation/

– https://www.youtube.com/watch?v=PMV9V9MdnUc

• przetestowac krzywe Beziera Wskazówki do Three.js

– https://threejs.org/docs/#api/extras/curves/CubicBezierCurve3

Wskazówki do WebGL

– http://kibotu.net/webgl/cg2/cg2-a01.2-1.3/index.html

• przetestować powierzchnie Beziera, zdefiniować podstawowe obiekty za pomocą ścieżek Beziera, przetestować trójkąty Beziera

Wskazówki do three.js

– https://github.com/dsitum/bezier-surface

Wskazówki do webGL

– http://vladamakaric.github.io/InteractiveBezierSurface/

• Przetestować kwadryki, elipsoidę Wskazówki do three.js

– http://jsfiddle.net/SalixAlba/n1hjm35n/

– http://jsfiddle.net/k73pxyL2/

– http://www.smartjava.org/ltjs/chapter-05/08-basic-3d-geometries- torus-knot.html

– http://www.smartjava.org/ltjs/chapter-05/06-basic-3d-geometries- cylinder.html

– http://www.smartjava.org/ltjs/chapter-05/09-basic-3d-geometries- polyhedron.html

– http://www.smartjava.org/ltjs/chapter-05/07-basic-3d-geometries- torus.html

– http://www.smartjava.org/ltjs/chapter-05/05-basic-3d-geometries-

sphere.html

(13)

– http://www.smartjava.org/ltjs/chapter-05/04-basic-3d-geometries- cube.html

– http://www.myjscode.com/demo/threejs/chapter-05/01-basic-2d-geometries- plane.html

– http://www.myjscode.com/demo/threejs/chapter-05/03-basic-3d-geometries- ring.html

– http://www.myjscode.com/demo/threejs/chapter-05/

– https://wowmoron.wordpress.com/2013/10/21/webgl-and-javascript-drawing- simple-3d-shapes-using-three-js/

• Przetestować krzywą Kocha, fraktal Julii, fraktal Mandelbrota. Dla fraktali Julii zmieniać parametr C i maksymalną liczbę iteracji

Wskazówki do three.js

– https://www.shadertoy.com/view/XslGzl

Wskazówki do webGL

– animowany fraktal Julii http://www.ibiblio.org/e-notes/webgl/makin.

html

– https://www.shadertoy.com/view/ldcSRX

– https://jsfiddle.net/mcjohnalds45/3jghL52d/

– https://www.shadertoy.com/view/Mlf3RX – http://hirnsohle.de/test/fractalLab/

Teselacja i uzupełnienia do graﬁki

Teselacja i uzupełnienia do grafiki

Marcin Orchel

1 Wstęp

1.1 Antyaliasing

Techniki wygładzania krawędzi, usunięcie zjawiska “schodków”, postrzępionych krawę- dzi, aliasingu.

Różne techniki. Wielopróbkowanie (multisampling, MSAA), nadpróbkowanie (over- sampling, SSAA super-sampling anti-aliasing), filtracja morfologiczna (MLAA, morpho- logical anti-aliasing), FXAA (fast approximate anti-aliasing).

1.1.1 Wielopróbkowanie

1.1.2 Nadpróbkowanie

Wygenerowanie sceny z teksturami o rozdzielczości dwukrotnie większej niż wielkość okna programu, i uśrednienie wygenerowanych pikseli za pomocą skalowania. Dodatkowo przy skalowaniu można użyć filtrów splotowych, np. filtrów Gaussa, Laplace’a.

1.2 Przekształcanie geometrii

Przetwarzanie prymitywów. W webGL nie są dostępne shadery geometrii. Shader geo-

metrii jest uruchamiany raz dla każdego prymitywu.

1.2.1 Teselacja

Dzielenie wielokątów na mniejsze wielokąty. Shadery kontroli teselacji, ewaluacji tese- lacji, generator prymitywów (teselator). Teselacja używa nowych prymitywów - płatów wierzchołków (patch). Każdy płat składa się z punktów sterujących.

W openGL dostępne są podziały

• triangles - podział trójkątów na mniejsze trójkąty

• quads - podział czworokątów na trójkąty

• isolines - podział czworokątów na zbiór linii konturowych - izolinii

Podział czworokąta odbywa się w ten sposób, że czworokąt jest dzielony na regularną siatkę czworokątów. Generowane trójkąty muszą pokrywać cały czworokąt i żaden z nich nie może współdzielić pola z innym trójkątem.

Jedynka oznacza, że nie dzielimy boku, dwójka oznacza, że będzie jeden punkt podziału, itd. Wierzchołki zewnętrzne łączymy z wierzchołkami wewnętrznymi tak aby powstały trójkąty. Z jednego wierzchołka zewnętrznego może wychodzić kilka krawędzi.

Możemy przewidzieć wartości w dowolnym punkcie za pomocą interpolacji liniowej dla 4 wierzchołków czworokąta

Teselacja trójkątów. Trójkąt dzielimy na zbiór trójkątów. W tym celu rysujemy ze-

wnętrzny trójkąt i rysujemy trójkąt wewnątrz składający się z odpowiedniej liczby punk-

tów tak aby aby proste będące bokami wewnętrznego trójkąta dzieliły na gl_TessLevelInner

części. Zauważmy, że gdy ten parametr jest równy 1, trójkąt nie będzie zawierał żadnych

wierzchołków wewnątrz. Gdy ten parametr jest równy 2 będzie jeden wierzchołek we-

wnątrz (trójkąt wewnętrzny zdegenerowany do jednego punktu), dla 3 będą 3 wierzchołki

wewnątrz, itd. Jak wyznaczyć punkty wewnętrznego trójkąta? Tak naprawdę dzielimy

zewnętrzny trójkąt zgodnie z innerLevel, następnie rysujemy proste prostopadłe w tych

punktach podziału, przecięcia dwóch prostych prostopadłych dla wierzchołków sąsiądują-

cych z 3 wierzchołkami zewnętrznego trójkąta definiują 3 wierzchołki wewnętrznego trój-

kąta. Następnie przecięcia pozostałych prostych prostopadłych z bokami wewnętrznego

V = uV 0 + vV 1 + wV 2 (2)

Teselacja czworokątów na odcinki, podobnie jak teselacja trójkątów. Dzielimy boki zewnętrzne wg parametru gl_TessLevelInner[0] dzieli linie horyzontalne, a gl_TessLevelInner[1]

Następnie dzielimy obszar na trójkąty, podobnie jak dla trójkąta.

Podział na izolinie kwadratu. Tworzymy horyzontalne odcinki, liczba odcinków to gl_TessLevelOuter[0]. Każdy odcinek składa się z segmentów o tej samej długości, liczba segmentów określona jest przez parametr gl_TessLevelOuter[1]. Górna krawędź kwadra- tu jest pomijana.

Domyślny podział krawędzi na równe części w teselacji to equal_spacing. Proble-

mem jest skokowa zmiana teselacji, bo mamy podział na całkowitą liczbę części. W

fractional_even_spacing i fractional_odd_spacing segmenty mogą nie mieć tych sa-

mych długości. Zaokrąglenie współczynnika teselacji do mniejszej liczby parzystej lub

nieparzystej odpowiednio.

Interpolacja sześcienna do współrzędnych wierzchołków, interpolacja kwadratowa do współrzędnych wektorów normalnych, dla pozostałych atrybutów interpolacja liniowa przy użyciu współrzędnych barycentrycznych trójkąta.

Interpolacja sześcienna współrzędnych wierzchołków za pomocą trójkąta Beziera f (u, v, w) = X

i+j+k=3

b ijk 3!

i!j!k! u i v j w k (3)

Dla współrzędnych barycentrycznych

f (u, v, w) = b 300 w 3 + b 030 u 3 + b 003 v 3 + 3b 210 w 2 u + 3b 120 wu 2 + 3b 201 w 2 v + 3b 021 u 2 v (4) + 3b 102 wv 2 u + 3b 012 uv 2 + 6b 111 wuv (5) Współrzędne punktów kontrolnych to

b 300 = V 0 (6)

b 030 = V 1 (7)

b 003 = V 2 (8)

b 210 = 2V 0 + V 1 − w 01 N ~ 0

3 (9)

b 120 = 2V 1 + V 0 − w 10 N ~ 1

3 (10)

b 021 = 2V 1 + V 2 − w 12 N ~ 1

3 (11)

b 012 = 2V 2 + V 1 − w 21 N ~ 2

3 (12)

b 102 = 2V 2 + V 0 − w 20 N ~ 2

3 (13)

b 201 = 2V 0 + V 2 − w 02 N ~ 0

3 (14)

b 111 = b 210 + b 120 + b 021 + b 012 + b 102 + b 201

4 − V

+V 6

+V

(15)

gdzie w ij = (V j − V i ) · ~ N i , ~ N i to współrzędne wektora normalnego dla i-tego wierzchołka.

Wzory polegają na tym, że każda krawędź dzielona jest na 3 równe części za po- mocą dwóch punktów pośrednich. Każdy punkt pośredni jest rzutowany na płaszczyznę styczną w najbliższym wierzchołku. Ostatni punkt kontrolny to średnia wszystkich po- przednich punktów po rzutowaniu.

Rzutowanie na płaszczyznę styczną punktu Q to punkt Q’ taki, że

Q 0 = Q − w ~ N (16)

gdzie w = (Q − P ) · ~ N . A więc rzutowanie np. punktu Q = (2V 1 + V 0 )/3 będzie wynosiło 2V 1 + V 0

3 −

 2V 1 + V 0 3 − V 1



· ~ N 1 = 2V 1 + V 0

3 −  (V 0 − V 1 ) · ~ N 1  N ~ 1

3 = b 120 (17) Interpolacja współrzędnych wektorów normalnych

V = uV 0 + vV ₁ + wV ₂ (2)

Interpolacja sześcienna współrzędnych wierzchołków za pomocą trójkąta Beziera f (u, v, w) = ^X

b _ijk 3!

i!j!k! u ⁱ v ^j w ^k (3)

f (u, v, w) = b 300 w ³ + b ₀₃₀ u ³ + b ₀₀₃ v ³ + 3b ₂₁₀ w ² u + 3b 120 wu ² + 3b ₂₀₁ w ² v + 3b 021 u ² v (4) + 3b ₁₀₂ wv ² u + 3b ₀₁₂ uv ² + 6b ₁₁₁ wuv (5) Współrzędne punktów kontrolnych to

b 300 = V ₀ (6)

b ₀₃₀ = V ₁ (7)

b 003 = V ₂ (8)

b ₂₁₀ = 2V ₀ + V ₁ − w ₀₁ N ~ ₀

b ₁₂₀ = 2V ₁ + V ₀ − w ₁₀ N ~ ₁

b 021 = 2V ₁ + V ₂ − w ₁₂ N ~ 1

b 012 = 2V ₂ + V ₁ − w ₂₁ N ~ 2

b ₁₀₂ = 2V ₂ + V ₀ − w ₂₀ N ~ ₂

b ₂₀₁ = 2V ₀ + V ₂ − w ₀₂ N ~ ₀

b 111 = b 210 + b ₁₂₀ + b ₀₂₁ + b ₀₁₂ + b ₁₀₂ + b ₂₀₁

4 − ^V

^+V ₆

^+V

gdzie w _ij = (V _j − V _i ) · ~ N i , ~ N i to współrzędne wektora normalnego dla i-tego wierzchołka.

Q ⁰ = Q − w ~ N (16)

gdzie w = (Q − P ) · ~ N . A więc rzutowanie np. punktu Q = (2V 1 + V ₀ )/3 będzie wynosiło 2V ₁ + V ₀

2V ₁ + V ₀ 3 − V ₁

· ~ N ₁ = 2V ₁ + V ₀

3 − (V ₀ − V ₁ ) · ~ N ₁ N ~ ₁

3 = b ₁₂₀ (17) Interpolacja współrzędnych wektorów normalnych

n (u, v, w) = ^X

n ijk u ⁱ v ^j w ^k (18)

gdzie n _ijk to wartości w punktach kontrolnych (wierzchołki i środki krawędzi). Dla współ- rzędnych barycentrycznych

n (u, v, w) = n ₂₀₀ w ² + n ₀₂₀ u ² + n ₀₀₂ v ² + n ₁₁₀ wu + n ₀₀₁ uv + n ₁₀₁ wv (19) gdzie wartości wynoszą

n 200 = N ₀ (20)

n 020 = N ₁ (21)

n ₀₀₂ = N ₂ (22)

n 110 = N 0 + N ₁ − v ₀₁ (V ₁ − V ₀ )

|N ₀ + N ₁ − v ₀₁ (V ₁ − V ₀ )| (23) n ₀₀₁ = N ₁ + N ₂ − v ₁₂ (V ₂ − V ₁ )

|N ₁ + N ₂ − v ₁₂ (V ₂ − V ₁ )| (24) n 101 = N 2 + N ₁ − v ₂₀ (V ₀ − V ₂ )

π _i (P ) = P − (P − V _i ) · ~ N _i N ~ _i (26)

π j (P ) = P − (P − V _j ) · ~ N j

N ~ j (27)

π _k (P ) = P − (P − V _k ) · ~ N _k N ~ _k (28) Współrzędne punktu P po teselacji to

P ⁰ (u, v, w) = [u, v, w]

 π i (P ) π _j (P ) π k (P )

P ⁰ (u, v, w) = u ² P i + v ² P j + w ² P k + uv (π _i (P _j ) + π _j (P _j )) + vw (π _j (P _k ) + π _k (P _j )) (30) + wu (π _k (P _i ) + π _i (P _k )) (31) Dodatkowo wprowadza się liniową interpolację między teselacją liniową a teselacją Phon- ga

P _α ⁰ (u, v, w) = (1 − α) [u, v, w]

 P _i P j

P _k

 π _i (P ) π j (P ) π _k (P )