Bartosz Bazyluk WPROWADZENIEbazyluk.net/dydaktyka/GKiW_Bio_2014/01_Wprowadzenie.pdf · Wyświetlanie obrazu Przetwarzanie obrazu Techniki wyświetlania Obraz stereoskopowy Druk, poligrafia

Bartosz Bazyluk

WPROWADZENIEWstęp do dwuwymiarowej grafiki komputerowej

Grafika komputerowa i wizualizacja, Bioinformatyka S1, II Rok

http://bazyluk.net/dydaktyka

12 marca 2015 Bartosz Bazyluk 2

O MNIE ● mgr inż. Bartosz Bazyluk● Pokój 322/WI2● [email protected]● http://bazyluk.net/dydaktyka

● wykłady, zadania, materiały, informacje

● Czym się zajmuję:● Programowanie grafiki czasu rzeczywistego

● Eye tracking jako narzędzie badań i interakcji

● Fotografia HDR i przetwarzanie obrazów HDR

● Percepcja głębi w obrazach syntezowanych komputerowo

mailto:[email protected]

http://bazyluk.net/dydaktyka


ZALICZENIE ● Zajęcia laboratoryjne● Zadania do wykonania na zajęciach

– Trzeba zaliczyć wszystkie z nich, aby otrzymać ocenę 3.0

● Bloki zagadnień● Mini-projekty z każdego bloku

– Wykonanie jednego w ciągu semestru = ocena 3.5

– Wykonanie dwóch w ciągu semestru = ocena 4.0

– Wykonanie trzech w ciągu semestru = ocena 4.5

– Wykonanie czterech w ciągu semestru = ocena 5.0

● Zaliczenie ustne● Wiedza pozyskana na wykładach

● Na ostatnich zajęciach w ciągu semestru

● Ocena 5.0 z laboratoriów zwalnia z obowiązku zaliczenia


GRAFIKA KOMPUTEROWA

Źródło obrazu:http://www.wikipedia.org

Akwizycja obrazu Interfejsy użytkownika Widzenie maszynowe

Analiza obrazu

Rozpoznawanie i reagowanie

GUI

Metody interakcji

Fotografia

Wizualizacja danych

Synteza obrazu

Geometria

Wyświetlanie obrazu Przetwarzanie obrazu

Techniki wyświetlania

Obraz stereoskopowy

Druk, poligrafia

Operacje matematyczneGrafika 2D

Grafika 3D(realistyczna, czasu rzeczywistego)

Kompresja

GRAFIKA KOMPUTEROWA


ZAGADNIENIA ● Czego będzie dotyczył przedmiot?● Bloki zagadnień

– Dwuwymiarowa grafika rastrowa● Kompresja obrazu – porównanie metod

– Trójwymiarowa grafika czasu rzeczywistego● Wyświetlanie sceny 3D z użyciem OpenGL

– Trójwymiarowa grafika realistyczna● Modelowanie sceny 3D z użyciem Blendera

– Fotografia i obrazy HDR● Fotografowanie sekwencji zdjęć, kompresja tonów

– Badania eyetrackingowe● Analiza uwagi wzrokowej podczas oglądania obrazów


SPOSOBY REPREZENTACJI

OBRAZU

● Grafika rastrowa● Obraz jako macierz

wartości pikseli

● Grafika wektorowa● Obraz jako zbiór

kształtów opisanych matematycznie



GRAFIKA RASTROWA

● Obraz to macierz pikseli – tzw. mapa bitowa, popularnie bitmapa (od ang. bitmap)

● Bitmapy są najczęściej prostokątne● Piksel jest najmniejszym fizycznym elementem

obrazu, który możemy kontrolować i adresować

Źródło obrazu:http://www.vector-conversions.com


GRAFIKA RASTROWA

● Bitmapę charakteryzują:● szerokość, wysokość [px]

– np. 1680×1050px

● liczba kanałów

– np. RGB (Red/Green/Blue), czyli 3 kanały

– np. RGBA (RGB+Alpha, czyli przezroczystość)

● rozmiar piksela [bpp]

– np. 24bpp w przypadku RGB = 8 bitów na kanał● oznacza to, że każdy z kanałów może przyjąć 2^8 różnych wartości

Źródło obrazu:http://www.foothill.edu


GRAFIKA RASTROWA

● Bitmapa może posiadać kolory indeksowane● czyli np. zamiast konkretnych wartości RGB pikseli, zapisane

są identyfikatory kolorów (oszczędność pamięci)

● powiązanie identyfikatorów z konkretnymi kolorami (paleta) może być dołączone do bitmapy jako słownik

● identyfikatory mogą też dotyczyć np. domyślnej palety systemowej

Źródło obrazu:http://www.hdfgroup.org


GRAFIKA RASTROWA

● Ilość pamięci potrzebna do zapisania mapy bitowej:● szerokość × wysokość × rozmiar piksela

● Przykład:

512px

512p

x

24bpp

(512 × 512 × 24) / 8 = 786.432B = 768kB

ponieważ 1B = 8b


GRAFIKA RASTROWA

● Zapisując bitmapy w pamięci masowej w celu przechowania, często stosuje się kompresję

● Algorytmy kompresji można podzielić na dwie podstawowe grupy:

● Kompresja bezstratna

– Możliwe jest całkowite odtworzenie pierwowzoru

● Kompresja stratna

– W wyniku kompresji dochodzi do utraty jakości,np. szczegółów lub koloru

– Powstają zniekształcenia, tzw. artefakty

Źródło obrazu:http://cscie12.dce.harvard.edu


GRAFIKA RASTROWA

● Popularne formaty zapisu bitmap:● BMP

– duża dowolność formatu danych

– może wykorzystywać kompresję bezstratną RLE

● JPEG

– kompresja stratna

– brak obsługi przezroczystości

– 24bpp

● PNG

– kompresja bezstratna

● GIF

– kompresja bezstratna

– zazwyczaj max. 8bpp

– możliwość zapisu sekwencji obrazów jako animacja

● TIFF

– duża dowolność formatu danych i sposobów kompresji


GRAFIKA RASTROWA

● Kompresja JPEG● Standard JPEG opisuje działanie kodeka, a nie format pliku

– Kodek jest algorytmem zamiany obrazu w strumień bajtów oraz zamiany strumienia bajtów w obraz

● Najpopularniejsze formaty:

– JPEG/Exif

– JPEG/JFIF


GRAFIKA RASTROWA

● Kompresja JPEG – krok 1/4● Przejście z przestrzeni RGB do Y'C

BC

R

– Y' – luma● Poziom jasności (nieliniowy!)

– CB, C

R – chroma

● CB – różnica koloru niebieskiego i Y'

● CR

– różnica koloru czerwonego i Y'

● Dzięki temu możliwe jest odrębne traktowanie lumy, a co za tym idzie kontrastu, od informacji o kolorze

– Ludzki aparat widzenia jest bardziej czuły na zmiany w kontraście, niż w kolorze

Źródło obrazu:http://wikipedia.org


GRAFIKA RASTROWA

● Kompresja JPEG – krok 2/4● Redukcja rozdzielczości informacji o kolorze

(ang. chroma subsampling)

– Skoro człowiek trudniej zauważa różnicę w zmianach koloru niż kontrastu, to po co marnować pamięć na przechowywanie informacji o kolorze w pełnej rozdzielczości?

– 4:4:4 – bez redukcji

– 4:2:2 – 2-krotna redukcja w poziomie

– 4:2:0 – 2-krotna redukcja w pionie i poziomie

– Wyjaśnienie zapisu:http://en.wikipedia.org/wiki/Chroma_subsampling#Sampling_systems_and_ratios

● Krok opcjonalny

Źródło obrazu:http://wikipedia.org

http://en.wikipedia.org/wiki/Chroma_subsampling#Sampling_systems_and_ratios


GRAFIKA RASTROWA

● Kompresja JPEG – krok 3/4● Obraz dzielony jest na bloki 8x8 pikseli

– Stąd bierze się często widoczny "blokowy" artefakt w obrazach JPEG

● Każdy z kanałów Y'CBC

R w każdym z bloków jest osobno

poddawany działaniu dyskretnej transformacji kosinusowej (ang. discrete cosine transform, DCT)

– Przejście do dziedziny częstotliwości

– Przed zastosowaniem DCT wartości [0;255] przesuwane są do zakresu [-128;127]

– Tymczasowo każdy komponent zajmuje więcej niż 8 bitów

● Wartości po DCT poddawane są kwantyzacji

– Jedyny (poza subsamplingiem) stratny element kodeka, tego etapu dotyczy ustawienie stopnia kompresji

– Pozwala pominąć zmiany wysokiej częstotliwości

● Kompresja JPEG – krok 4/4● Dodatkowa, bezstratna kompresja Huffmana

● Może być poprzedzona bezstratnym kodowaniem entropii


GRAFIKA RASTROWA

● Różne metody kompresji nadają się do różnego rodzaju obrazów

● Należy zawsze wziąć pod uwagę charakter kompresowanego obrazu by uzyskać optymalny stosunek jakości do rozmiaru pliku

● Większość metod kompresji pozwala dobrać jej parametry

● Przykłady:

Brak kompresji: 1386kBPNG: 96kB, jakość idealna

JPG: 99kB, jakość b.złaJPG: 285kB, jakość db.

Brak kompresji: 1875kBPNG: 1268kB, jakość idealna

JPG: 480kB, jakość b.db.JPG: 246kB, jakość akceptowalna


GRAFIKA RASTROWA

● Gdy bitmapa ma zostać wyświetlona w rozmiarze większym niż oryginalny, musi zostać przeprowadzony upsampling

64×64px 96×96px

Metodanajbliższego sąsiada(nearest neighbour)

Metodafiltracji dwuliniowej

(bilinear filtering)


GRAFIKA RASTROWA

● Gdy bitmapa ma zostać wyświetlona w rozmiarze mniejszym niż oryginalny, musi zostać przeprowadzony downsampling

96×96px 64×64px

Metodanajbliższego sąsiada(nearest neighbour)

Metodafiltracji dwuliniowej

(bilinear filtering)


GRAFIKA RASTROWA

● Skalowanie jest trudne i prowadzi do pogorszenia jakości obrazu

● Wymaga dużej ilości pamięci● Pozwala na manipulację kolorystyką i zawartością

obrazu stosunkowo małym kosztem● Dobra do obrazów, które przedstawiają

nieprzewidywalnie zmienne obiekty


GRAFIKA WEKTOROWA

● Obraz opisany jest nie za pomocą kolorów równomiernie rozłożonych pikseli, ale za pomocą informacji o kształtach które go tworzą

● Przy zapisywaniu obrazu wektorowego, wystarczy że zapamiętamy jakie kształty tworzą obraz – ich wizerunek zostanie odtworzony na odczytującym komputerze

● Rozmiar pliku, jak i szybkość jego wyświetlenia zależą od liczby obiektów tworzących obraz

● Wyświetlanie skomplikowanych obrazów wektorowych jest bardzo kosztowne – przykład: szczegółowe plany miast w formacie Adobe PDF

Źródła obrazów:PEPSI, Iconfinder, TFL, Hed Kandi


GRAFIKA WEKTOROWA

● Obraz opisywany jest za pomocą prostych, parametrycznych figur geometrycznych,tzw. prymitywów:

● Linie

● Krzywe

● Wielokąty

● Okręgi

● Tekst

● Figury te mogą być później dowolnie i niezależnie modyfikowane

Źródło obrazu:http://cpregier.wikispaces.com


GRAFIKA WEKTOROWA

● Przed wyświetleniem musi zostać poddana rasteryzacji

● Musi zostać utworzona bitmapa w oczekiwanym rozmiarze, uwzględniając skalowanie

● Kosztowny proces dla obrazów złożonych z dużej liczby obiektów

● Pożądane jest użycie technik zmniejszających problem aliasingu (ostrych krawędzi), tzw. anti-aliasing

Źródło obrazów:http://www.wikipedia.org


GRAFIKA WEKTOROWA

● Transformacje bez utraty szczegółowości● Kosztowna w wyświetlaniu dla bardzo

skomplikowanych obrazów● Zazwyczaj zajmuje dużo mniej pamięci niż rastrowy

odpowiednik● Umożliwia edycję obiektów zachowując topologię● Nie jest odpowiednia do reprezentacji obrazów

realistycznych, jak np. zdjęć (ogromna liczba obiektów, konieczność wcześniejszej wektoryzacji bez wiedzy o topologii sceny)

● Idealna do rysunków, ilustracji, diagramów


WYŚWIETLANIE OBRAZU

● Współczesne wyświetlacze komputerowe traktują obraz jako raster

● Wyświetlacze działają ze stałą częstotliwością odświeżania

● Najczęściej spotykaną częstotliwością odchylania pionowego jest obecnie 60Hz

● Dla obrazu stereoskopowego, będzie to dwa razy więcej


1/60s

Progresywne wyświetlanie klatki:



● W celu wyświetlenia kolorowego obrazu, "zapalane"/"gaszone" są odpowiednie subpiksele

● Najczęściej subpiksele odpowiadają kolorom RGB




● Subpiksele mogą być wykorzystane dla poprawienia jakości wyświetlanego tekstu

● Np. technologia Microsoft ClearType, Quartz dla MacOS, FreeType

● Sztuczne zwiększenie rozdzielczości obrazu poprzez takie użycie kolorowych subpikseli, by osiągnąć postrzegalne poziomy luminancji odpowiadające poziomom szarości




● Przykład działania technologii Quartz




● Karta graficzna odpowiada za stworzenie zawartości obrazu monitora, przechowywanie jej i wysłanie do monitora gdy ten będzie gotowy narysować kolejną klatkę

● Obraz do wyświetlenia przechowywany jest w buforze klatki (ang. framebuffer) w pamięci graficznej (współcześnie np. GDDR)

● Bufor klatki posiada takie same cechy, jak zwyczajny obraz: wymiary, liczbę kanałów i rozmiar piksela

Obraz

ObrazProgram

(bufor klatki)



● Aby uniknąć migotania obrazu podczas jego przerysowywania gdy występuje konieczność jego akutalizacji, stosuje się technikę podwójnego buforowania (ang. double buffering)

● Mamy wówczas dwa bufory klatki:● Bufor "przedni" (ang. front buffer)

– Jest wyświetlany

● Bufor "tylny" (ang. back buffer)

– Jest aktualizowany

● Gdy zakończy się aktualizacja back buffera, zamieniane są one miejscami (ang. buffer swap)

Front

Back

Front



● Aby uniknąć migotania obrazu podczas jego przerysowywania gdy występuje konieczność jego akutalizacji, stosuje się technikę podwójnego buforowania (ang. double buffering)

● Mamy wówczas dwa bufory klatki:● Bufor "przedni" (ang. front buffer)

– Jest wyświetlany

● Bufor "tylny" (ang. back buffer)

– Jest aktualizowany

● Gdy zakończy się aktualizacja back buffera, zamieniane są one miejscami (ang. buffer swap)

Back

Front

Front



● Dla zachowania wrażenia płynności wyświetlanego ruchomego obrazu, należy upewnić się że kolejne klatki animacji będą docierać do monitora, gdy ten będzie gotowy je wyświetlić

● W tym celu stosuje się tzw. synchronizację pionową (ang. vertical synchronisation / VSync)

● Sterownik karty graficznej czeka z zamianą buforów, aż monitor będzie gotowy wyświetlić kolejną klatkę

● W innym wypadku pomimo sprzętowej możliwości wygenerowania nawet większej liczby klatek na sekundę niż wyświetla monitor, obraz nie będzie płynny


1/60s 1/60s

(sleep) (sleep)VSync On

VSync Off

= czas renderowania jednej klatki

= wyświetlenie zawartości front buffera

czas



Brak synchronizacji pionoweji podwójnego buforowania


Synchronizacja pionowai podwójne buforowanie

Bartosz Bazyluk

WPROWADZENIEWstęp do dwuwymiarowej grafiki komputerowej

Grafika komputerowa i wizualizacja, Bioinformatyka S1, II Rok

Documents

Bartosz Bazyluk WPROWADZENIEbazyluk.net/dydaktyka/GKiW_Bio_2014/01_Wprowadzenie.pdf · Wyświetlanie obrazu Przetwarzanie obrazu Techniki wyświetlania Obraz stereoskopowy Druk, poligrafia