Techniki multimedialne
Grafika wektorowa
Dr in\
. Piotr Muryjas
Wy\
sza Szkoła Przedsiębiorczości
i Administracji w Lublinie
Plan wykładu
Zało\
enia i cechy wektorowego zapisu obrazu
Metody transformacji obrazów rastrowych do
wektorowych (wektoryzacja) oraz transformacji
odwrotnej (rastryzacja)
Krzywe Beziera stopnia N
Wygładzanie linii wektorowych przy
wyświetlaniu na urządzeniach rastrowych (anti-
aliasing)
Metoda nadpróbkowania (supersampling)
2
Definicja grafiki wektorowej
Obrazy tworzone sÄ… za pomocÄ… figur
geometrycznych opisanych matematycznie
Grafika tworzona w całości komputerowo
U podstawy grafiki wektorowej le\
y linia
Grafika obiektowa - obraz składa się ze
stosu elementów uło\
onych w
odpowiedniej kolejności
Grafika ilustracyjna - ten rodzaj grafiki
nadaje siÄ™ idealnie do tworzenia ilustracji
3
Obszary zastosowania grafiki
wektorowej
Definiowanie fontów
Tworzenie map
Definiowanie schematów
Tworzenie log
Materiały poligraficzne, reklamowe, opakowania
Systemy CAD
Symulacja i animacji dla potrzeb nauki i rozrywki
Modelowaniu rzeczywistości wirtualnej
w grach
4
Zalety
Prostota opisu obrazu
Zmniejszenie rozmiaru pliku graficznego
W pełni skalowalna
Zachowanie jakości obrazu podczas
zmiany jego rozmiaru
Opis grafiki trójwymiarowej
Mo\
liwość konwersji grafiki wektorowej do
postaci grafiki rastrowej
5
Wady
Brak mo\
liwości realnego odwzorowania
rzeczywistości (ogromna zło\
oność pamięciowa
dla obrazów fotorealistycznych)
Brak mo\
liwości oddania płynnych przejść między
kolorami
Brak standardu wymiany między ró\
nymi
aplikacjami graficznymi
Mała ilość uniwersalnych formatów plików
graficznych
6
Formaty grafik wektorowych
WMF (Windows Metafile Format)
CDR (Corel Draw Format)
EPS (Encapsulated PostScript)
DXF (Data Exchange Format)
DWF (Design Web Format)
SVG (Scalable Vector Graphics)
SWF (Shockwave Flash Format)
7
Pliki DXF
Jeden z bardziej popularnych formatów
wektorowych (dla grafiki 2D jak i 3D)
Specyfikacja formatu opracowana przez Autodesk
(początkowo do wymiany danych między
AutoCAD i 3D Studio)
Plik tekstowy zawierający sekcje, składające sie z
par linii (nieparzysta zawiera "kod" definiujÄ…cy
znaczenie "wartości", występującej w kolejnej linii
parzystej)
8
Pliki DWF
Format pliku stworzony przez Autodesk na
potrzeby przeglÄ…dania, drukowania bÄ…dz

przesyłania plików projektowych typu CAD
Pliki DWF sÄ… skompresowane
Do obsługi pliku DWF nie jest konieczne
posiadanie softwaru typu CAD
9
Pliki SVG (1)
Stworzona w 1999 roku przez W3C
aplikacja XML opisujÄ…ca dwuwymiarowÄ…
(2D) statycznÄ… i animowanÄ… grafikÄ™
wektorowÄ… na stronach WWW.
W roku 2001 SVG uzyskał status
rekomendacji W3C
SVG prawdopodobnie zastÄ…pi format grafiki
wektorowej Macromedia Flash (lepiej
integruje siÄ™ z dokumentami HTML)
10
Pliki SVG (2)
Niezale\
ny od platformy systemowej format
grafiki wektorowej
Mo\
e być integrowany z innymi językami, jak na
przykład XHTML
SVG pozwala na u\
ycie języków skryptowych (np.
JavaScript), szablonów stylów oraz rozszerzanie
funkcjonalności przez dodanie własnych
elementów i właściwości przy pomocy
standardowych technik XML (przestrzenie nazw).
Plik SVG mo\
e być u\
yty wewnÄ…trz innego
dokumentu
11
Programy tworzenia grafiki
wektorowej
CorelDRAW
Adobe Illustrator
Macromedia Freehand
Xara
Inkscape
12
Transformacje grafik
Rasteryzacja
Wektoryzacja
13
Rasteryzacja (1)
Przedstawienie płaskiej figury
geometrycznej na urzÄ…dzeniu rastrowym,
dysponującym skończoną rozdzielczością
Procesowi podlegają odcinki, okręgi, elipsy,
łuki eliptyczne, krzywe sześcienne, krzywe
sklejane (np. Béziera), przekroje sto\
kowe,
jak równie\
powierzchnie wielokątów
14
Rasteryzacja (2)
15
Cechy algorytmu rasteryzacji
" Minimalny błąd aproksymacji
" Mo\
liwość redukcji efektu postrzępienia
krawędzi (aliasing)
" Mo\
liwie najni\
sza zło\
oność czasowa i
obliczeniowa (unikanie zło\
onych
operacji arytmetycznych)
" Mo\
liwość efektywnej implementacji
sprzętowej
16
Wektoryzacja
Przekształceniu grafiki rastrowej na
standardy grafiki wektorowej
Rastry o podobnej charakterystyce zostajÄ…
zgrupowane w obiekty wektorowe
Proces dotyczy jedynie prostych tekstur
oraz rysunków, które mogą być poprawnie
przekształcone
17
Krzywe Béziera (1)
Pierre Bézier - francuski matematyk, pracownik firmy
Renault
W ramach prac projektowych nad nowymi karoseriami
samochodowymi opracował model opisu krzywych
Krzywe Béziera sÄ… parametrycznymi krzywymi trzeciego
stopnia i znajdujÄ… szerokie zastosowanie w modelowaniu
kształtu figur i powierzchni. Przykładem mo\
e tu być
modelowanie kształtu nadwozi samochodów.
Są one podstawą działania wszystkich powa\
niejszych
programów do tworzenia i edycji rysunków wektorowych
18
Krzywe Béziera (2)
KsztaÅ‚t krzywej Béziera
jest określony czterema
punktami: dwoma
punktami krańcowymi
krzywej (tzw. węzłami)
(P1, P4) oraz dwoma
punktami kontrolnymi
(P2, P3)
Krzywa interpoluje dwa
krańcowe punkty
krzywej i aproksymuje
dwa punkty kontrolne
19
Krzywe Béziera - równania
x(t) = (1- t)3 x1 + 3t (1- t)2 x2 + 3t2 (1- t) x3 + t3 x4
y(t) = (1- t)3 y1 + 3t (1- t)2 y2 + 3t2 (1- t) y3 + t3 y4
gdzie: 0 d" t d" 1
20
PrzykÅ‚ady krzywych Béziera
http://www.sunsite.ubc.ca/LivingMathematics/V001N01/UBCExamples/Bezier/bezier.html
21
Przekształcenia geometryczne
2D
Translacja (przesunięcie) obiektu
Skalowanie
Rotacja (obrót)
Pochylenie
22
Idea przekształcenia 2D
P' = M Å" P
M opisujeprzekształcenie P na P'
23
Obrót, skalowanie
24
Przesunięcie
25
Ujednolicenie zapisu
przekształcenia
P' = M × P
X +TX îÅ‚ X
îÅ‚ Å‚Å‚ a b îÅ‚ Å‚Å‚
Å‚Å‚
problem punktu
p p
= ×
ïÅ‚
P [0, 0]T
Yp +TY śł ïÅ‚c ûÅ‚ ïÅ‚ Yp śł
dśł ðÅ‚ ûÅ‚
ðÅ‚
ðÅ‚ ûÅ‚
'
îÅ‚ Å‚Å‚ îÅ‚ Å‚Å‚
X 1 0 TX X
îÅ‚ Å‚Å‚
p p
ïÅ‚ śł ïÅ‚Y śł
' ïÅ‚0 1 TY śł
poprawny opis
Yp = ×
p
ïÅ‚ śł ïÅ‚ śł
ïÅ‚ śł
translacji 2D
ïÅ‚ śł
ïÅ‚
1
ðÅ‚0 0 1 śł ïÅ‚ 1 śł
ûÅ‚
ðÅ‚ ûÅ‚ ðÅ‚ ûÅ‚
26
Współrzędne jednorodne
znormalizowane
27
Przekształcenia w nowych
współrzędnych
28
Symetrie osiowe
29
Symetria środkowa
30
Obrót
31
Przesunięcie
32
Skalowanie
Skalowanie nie zachowuje odległości punktów
(przekształcenie nieizometryczne)
33
Pochylenie
Pochylenie nie zachowuje odległości punktów
i zniekształca figurę z
ródłową
34
Antyaliasing
Aliasing powstaje przy zmniejszeniu
rozdzielczości i w trakcie rasteryzacji
SÄ… to techniki zmierzajÄ…ce do eliminacji
lub zmniejszenia błędu aliasingu
Rodzaje technik:
wygładzanie krzywych
nadpróbkowanie (supersampling)
Wymaga znacznej mocy obliczeniowej
35
Antyaliasing - przykład
36
Wygładzanie krzywych
Wypełnienie poszczególnych pikseli
proporcjonalnie do odległości idealnej linii
przechodzącej przez poszczególne piksele
od środków tych pikseli
W takim rozwiązaniu piksel, przez którego
środek przechodzi linia będzie biały, a
piksel, w którym linia przechodzi w pobli\
u
jednego z wierzchołków - prawie czarny
Rezultat  linia jest gładsza, ale rozmyta
37
Zasady wygładzania
Jasność piksela zale\
y od
odległości odcinka od
środka piksela (im odcinek
jest dalej, tym jego wpływ na
jasność jest mniejszy, jest
proporcjonalna do powierzchni
zakrytej przez odcinek)
Odcinek nie wpływa na
jasność piksela jeśli go nie
przecina
Takie samo pole wnosi
równą jasność
38
Przykład wygładzania
Piksele NE i E le\
Ä…
najbli\
ej idealnej linii
Odcień piksela NE zale\
y
od długości odcinka NE-
Q, odcień piksela E od
Q-E
Suma odcieni pikseli
NE i E jest stała
39
Nadpróbkowanie
Antyaliasing pełnoekranowy (FSAA - ang. Full-
Screen Anti-Aliasing)
Zastosowanie metody czołgowej
Obraz jest renderowany w rozdzielczości
odpowiadającej wielokrotności rozdzielczości
docelowej i uzyskany, du\
o większy obraz jest
zmniejszany do ni\
szej, docelowej rozdzielczości
Przykład zastosowania: wygładzanie krawędzi
czcionek ekranowych
40
Kiedy antialiasing?
Wyświetlanie obrazów na monitorach
o zbyt niskiej rozdzielczości
Drukowanie tekstu o du\
ym rozmiarze
czcionki (zalecane dla większych ni\
14
pt)
Wykonanie operacji typu dithering
(wygładzanie przejść między krawędzią
czcionek a tłem)
41
Skutki stosowania antialiasingu
Jest to kosztowne działanie
Anga\
uje dodatkowe zasoby komputera
Spowolnienie innych operacji
wykonywanych przez komputer (np.
animacji)
Mo\
e zwiększać rozmiar pliku
Dla zbyt małych czcionek powoduje
rozmycie tekstu (nieczytelność)
42