Datové formáty grafiky, jejich specifika a možnosti využití Luboš Tomešek – UMT Manažerská informatika 2015/16
Plán prezentace N A
C O
S E
M Ů Ž E T E
T Ě Š I T
Úvodní představení Jaké jsou typy 2D grafiky? Základní rozdíly, výhody/nevýhody.
Vektorová grafika Vysvětlení pojmu, druhy kreslících prvků, typy křivek, formáty grafiky
Shrnutí tématu Shrnutí prezentovaných informací do uceleného celku, závěr
P r e z e n t u j e :
L u b o š
? ? ?
01 03
05
T o m e š e k
02 04 06
Rastrová grafika Vysvětlení pojmů pixel, barevná hloubka, rozlišení, formáty grafiky
3D grafika Vysvětlení pojmu, příklady použití, rendering, software na tvorbu
Volná diskuze k tématu Prostor pro diskuzi k prezentovanému tématu
2
Typy 2D grafiky – hlavní rozdíly R o z d í l
j e
j a s n ý
n a
p r v n í
p o h l e d . . .
Rastrová grafika
Vektorová grafika Geometrické objekty (křivky, kružnice, čáry)
Matice pixelů
Pro každý pixel udaná barva
Změna velikosti pomocí výpočtu
Vzniká ve fotoaparátu, skeneru
Kreslení a modelování v PC * Bitmap 285x200px ** 5x zoom
P r e z e n t u j e :
L u b o š
T o m e š e k
* Vektor 100% ** 500% 3
Rastrová grafika N e j p o u ž í v a n ě j š í
t y p
g r a f i k y . . .
Pixel
Nejmenší jednotka rastrové grafiky, skládáno do dvourozměrné matice, každý pixel nese informace o jasu, barvě, průhlednosti, svém umístění
Barevná hloubka
Počet bitů použitých k popisu barvy pixelu. (čím více bitů, tím více barev a kvalitnější zobrazení (datově náročnější)
*2bit
Rozlišení
Velikost matice pixelů - monitor 2,1Mpx, fotoaparát 20Mpx, lidské okolo údajně 576 Mpx. DPI – počet pixelů na palec (tisk 300, monitor 72)
Barevná definice pixelů
RGB – red, green, blue (vrstvení barev) CMYK – cyan, magenta, yellow, key (odečet od černé)
P r e z e n t u j e :
L u b o š
T o m e š e k
**4bit
*** 24bit (True color) Fotoaparát - 6Mpx Rozlišení - 3:2
Počet pixelů 3000x2000 Tiskové rozměry 25,4*16,93 cm (300dpi) 4
Rastrová grafika N i c
n e m ů ž e
b ý t
ú p l n ě
d o k o n a l é
. . .
Výhody
• Snadné vytvoření (fotoaparát, skener) • Jednoduchý převod (JPEG => PNG)
P r e z e n t u j e :
Nevýhody
• Velký objem dat • Ztráta kvalita při změně rozměrů
• Realistické vyobrazení
• Změna velikosti (zoom) způsobuje ztrátu kvality
• Jednoduché zobrazení a tisk
• Nelze navrátit ztracenou kvalitu
L u b o š
T o m e š e k
5
Formáty rastrové grafiky P e č l i v ě
v y b í r e j t e
d l e
o b r á z k u
. . .
Nekomprimované
Komprimované
Nejvyšší kvalita
Úspora velikosti
RAW BMP
P r e z e n t u j e :
v y u ž i t í
L u b o š
T o m e š e k
Bezztrátová komprese
Ztrátová komprese
GIF, PNG, TIFF
JPEG
6
Nekomprimovaný RAW, BMP S u r o v á
d a t a
z
f o t o a p a r á t u
. . .
Neupravená (surová) data Plnohodnotná data získaní z přístroje (fotoaparát, skener) vhodná pro další úpravu
Formát není standardizovaný Každý výrobce má svoje koncovky souboru, který obsahuje RAW data (Canon = .cr2, Nikon = .nef, Adobe - .dng)
Využívaný profesionály
Obrázky bez komprese Nevhodné pro používání na internetu
Jednoduchý formát + volné užití
Profesionální fotografové tento formát používají pro záznam „suroviny“
Díky jednoduchosti, dobré dokumentaci a volné licenci k použití jej dokáže přečíst většina editorů napříč systémy
Meta dat ze senzorů přístroje
Ukládání po jednotlivých px
Záznam zajímavých dat o fotografii.
Dle počtu bitů na každý pixel lze rozlišit počet použitých barev (barevná hloubka)
Začátky ve MS Windows 3.0 Největší boom při uvedení daného systému
P r e z e n t u j e :
L u b o š
T o m e š e k
7
Komprimovaný GIF, PNG, TIFF, JPEG F o r m á t y
p r o
w e b
a
g r a f i c k é
p r á c e . . .
Počet barev omezen na 256 Omezení díky maximálně 8bitové bar. hloubce
Jednoduché animace Obrázky jsou zobrazovány jeden po druhém dle nastavené rychlosti (opakování)
Využití pro webovou grafiku Vhodné pro uložení loga či drobné grafiky s malou náročností na barvy – ostré okraje, malá velikost = rychlé načítání
24bitová barevná hloubka Odstraňuje omezení GIFu a není omezen pouze 256 barvami + lepší komprese
Průhlednost Obsahuje 8bitový alfa kanál = v různých částech může být různě průhledný (RGBA)
Nedostupnost animace Oproti GIFu naopak nemá k dispozici možnost animace (alternativa APNG se neprosadila)
Využití pro webové stránky Oproti JPEG mají obrázky cca. 3-5x větší velikost, ale zobrazuje lépe obrázky s textem, čárovou grafikou či barevnými plochami P r e z e n t u j e :
L u b o š
T o m e š e k
8
Komprimovaný GIF, PNG, TIFF, JPEG F o r m á t y
p r o
w e b
a
g r a f i c k é
p r á c e . . .
Archivace dat a tisk Neoficiální standard pro ukládání obrázků k tisku => 32bit CMYK / 24bit RGB
Vícestránkové soubory Umožňuje ukládat do souboru jednotlivé vrstvy (text, obrázky, grafika), které lze následně editovat
Vysoká náročnost na paměť Díky bezztrátovému ukládání mají soubory často podobnou velikost jako samotná surovina ve formátu .RAW
Nejpoužívanější formát Nejčastěji využívaný formát jak na přenos a zobrazení obrázků na webu, tak pro záznam z klasických fotoaparátů a mobilů
Ztrátová komprese Po uložení se vždy zhorší kvalita. Návrat zpět již není možný. Uloženo jako True Color (24bit)
Více přípon formátu Daný formát je ukládán s příponami .jpeg, .jpg, .jfif, .jpe => možné i velkými písmeny
Razantní snížení velikosti Možné razantní snížení velikosti oproti „surové“ fotografii bez viditelné ztráty kvality P r e z e n t u j e :
L u b o š
T o m e š e k
9
Detail fotografie o velikost 2,5MB a 32MB. (uloženo v kvalitě obrazu 1/12)
Vektorová grafika O b r a z
s l o ž e n ý
z
t v a r ů . . .
Vektor
Veličina popsaná velikostí a směrem (tím se odlišuje od čísla) – vykresluje všechny geometrické objekty
Geometrické objekty
Obraz je vykreslován pomocí křivek, kružnic, přímek nebo lomených čar => složitější útvary vykreslovány pomocí použití jednoduchých (obdélník = 4 přímky)
* Interpolace dat
(křivka prochází body)
**aproximace dat
(nemusí procházet všemi body)
Bezztrátová změna rozměrů
Při změně rozměrů či rotaci dojde k přepočtu matice a nedojde tak k žádné obrazové ztrátě
Křivky
Prezentovány jako soustava parametrů rovnice. Skládají se z počátečního a koncového bodu nebo vektorů. Explicitní => y = f(x) Implicitní => f(x,y) = 0 Parametrické => P(t) = [x(t), y(t), z(t)] P r e z e n t u j e :
L u b o š
T o m e š e k
11
Rastrová grafika N i c
n e m ů ž e
b ý t
ú p l n ě
d o k o n a l é
. . .
Výhody
• Velké obrazce mají malý objem dat • Přesné definování rozměrů, objektů
• Jednoduchá editace prvků obrazu • Snadná konverze do rastrové grafiky P r e z e n t u j e :
L u b o š
T o m e š e k
Nevýhody
• Nevhodné pro složitější obrazce (tvorba, hardware) • Pro zobrazení a tisk nutná konverze do rastrové grafiky • Složitější vytvoření obrázku 12
Nejpoužívanější křivky N a k r e s l i t
l z e
c o k o l i v . . .
Bézierova křivka Nejpopulárnější aproximační Aproximační křivka používaná často pro návrh počítačových písem (fontů)
Fergusonova křivka Nejpopulárnější interpolační
Spline křivka
Dána dvěma body P0, P1 a dvěma tečnými směrovými vektory p0, p1 v daných bodech
Jemná spojitost Definovaná po intervalech spojitou množinou souřadnic bodů jimiž má procházet P r e z e n t u j e :
L u b o š
T o m e š e k
13
Základní formáty vektorové grafiky P D F
j e
s t e j n ě
n e j l e p š í
Corel Draw (.cdr)
…
Scalable v.g. (.svg)
PostScript (.eps, .ps)
PDF (.pdf)
•
Vytvořen společně s programem Corel Draw
•
Programovací jazyk určený k popisu grafiky
•
Jazyk popisující grafiku pomocí XML
•
Otevřený standard pro výměnu dokumentů
•
Může obsahovat rastrový obrázek
•
Nezávislý na zařízení, kde probíhá tisk dat
•
•
•
Pro rastrové, vektorové i kombinace
Stává se základním vektorovým formátem pro grafiku na internetu
Může obsahovat odkazy, tlačítka, video, zvuk, formuláře
•
Objekty seskupeny, formátovány a polohovány pomocí CSS
•
Zachování originální podoby včetně druhů písem s možností podpisu
• •
Výrazná komprimace Průběžný vývoj s každou verzí programu
P r e z e n t u j e :
L u b o š
•
T o m e š e k
Nahrazen pomocí PDF
14
3D grafika T r a n s f o r m a c e
3 D
s v ě t a
n a
m o n i t o r . . .
Grafika pracující s 3D objekty Nejen vytváření animací, filmů nebo počítačových her, ale také využití ve vědě, průmyslu či stavebnictví
Historie 3D grafiky Výzkum od 60. let 20.stolení (Utah) 1. 3D celovečerní film: Toy Story (1995) 1. 3D hra: Wolfenstein 3D (1993)
Využití 3D grafiky Reklama – dokonalé vyobrazení výrobků Architektura – vizualizace staveb z výkresů Průmysl – počítačové modely pro kontrolu Instruktážní filmy – vysvětlení funkce složitých zařízení do kterých lze těžko „nahlédnout“ (funkce tlumičů za jízdy, funkce turbíny) P r e z e n t u j e :
L u b o š
T o m e š e k
15
Reprezentace 3D těles N e j č a s t ě j i
h r a n i č n í
m o d e l y . . .
Hraniční prezentace Těleso popsáno jako mnohostěn zcela určený svými hranicemi (hrany, stěny, vrcholy)
Projektování s CAD CAD je počítačem podporované projektování pomocí pokročilých grafických programů.
AutoCAD
Allplan
Google Sketch up
Sweet home 3D
P r e z e n t u j e :
L u b o š
T o m e š e k
Konstrukce těles Využití metody CSG, kdy je konstruováno z primitivních těles (koule, kvádr, válec,…) s pomocí operací jako sjednocení, průnik či rozdíl.
Objemová prezentace Zobrazení pomocí metody paprsků či algoritmy na zviditelnění povrchu či objemu
16
3D grafika - rendering V y k r e s l o v á n í
o b r a z u
n a
m o d e l u
doplnění realistického vzhledu povrchu
Stínování
kolísání barvy a jasu povrchu v závislosti na osvětlení P r e z e n t u j e :
z á k l a d ě
L u b o š
s c é n y . . .
šíření světla skrze objekty se zkreslením Mlha
tlumení světla při průchodu atmosférou Texturování T o m e š e k
Průhlednost 17
Detaily využití 3D grafiky N e k o n e č n é
P r e z e n t u j e :
m o ž n o s t i
L u b o š
v y u ž i t í
T o m e š e k
. . .
18
Děkuji za pozornost M á t e
p ř í l e ž i t o s t
n a
d o t a z y . . .
