Základní principy digitální reprezentace obrazových informací: Porovnání verzí

Řádek 7: Řádek 7:
  
 
== Vektorová grafika ==
 
== Vektorová grafika ==
=== Vlastnosti ===
 
[[Soubor:Vektor.PNG|250x250px|náhled|Ukázka zobrazení vektorové grafiky.]] Vektorová grafika je druhým základním způsobem reprezentace obrazových informací v počítačové grafice. Zatímco je rastrová grafika reprezentovaná dvourozměrnou soustavou obrazových bodů uspořádaných do čtvercové sítě, se vektorová grafika profiluje naprosto rozdílně: Vektorová grafika využívá polygonů k reprezentaci obrazů v počítačové grafice. Je založena na matematických výpočtech, grafická informace je uložena ve formě matematického zápisu. Ten definuje tvar bodu, čáry, křivky nebo plochy.<ref>KAUFMAN, Arie. <i>Rendering, visualization, and rasterization hardware.</i> New York: Springer-Verlag, c1993. ISBN 0387567879.</ref> Nakreslená křivka je definována ''vektorem'' počátečního bodu, který definuje směr a zakřivení, křivka je ukončena koncovým bodem. Součástí matematického zápisu je barva křivky/objektu, zakřivení pomocí kotevních bodů, barva a tloušťka hrany (stroke), existence a barva výplně. Kotevní body mají konečnou pozici na ose ''x'' a ose ''y ''a určují směr cesty. Každá cesta může nabývat výše zmíněných rozdílných hodnot (barva, stroke atp.). Výsledný obraz může obsahovat křivky různých tlouštěk, barev a tvarů. Kreslení útvarů se provádí jak skládáním různých jednoduchých tvarů, tak samotným kreslením a editací křivek. S objekty lze později jakkoli manipulovat.
 
 
=== Výhody ===
 
Díky matematickému zápisu, se změna velikosti provádí výpočtem, a tak je objekt plně citovatelný bez ztráty kvality.<ref><i>ASCIIsvg: Easy mathematical vector graphics.</i> Chapman.edu [cit. 1.6.2016]. Dostupné z: http://www1.chapman.edu/~jipsen/asciisvg.html</ref> Rastrová grafika při zvětšení, resp. zmenšení, utrpí ztráty na ostrosti a čitelnosti, vektorový objekt je škálovatelný bez rozostření. Velikost může být teoreticky nekonečná. Vektorová grafika je přesná díky vektoru, který je definován matematicky.
 
Tím, že se jedná o matematický zápis, není potřeba definovat každý pixel, jako je tomu u rastrové grafiky. Např. černé kolo se definuje jako kruh o poloměru ''x'' vyplněný barvou ''#000: Kruh<sub>n</sub>; x; #000.'' U bitmapy je nutné zanést informaci o jednotlivém pixelu, který objekt tvoří: Pixel ''p1[x,y]; #000, p2[x+1,y]; #000, p<sub>n</sub>[x+n,y+n]; #xxxxxx.''
 
Naprosto půvabnou výhodou oproti práci s bitmapou, je možnost pracovat s každým objektem zvlášť, a to kdykoli. Lze provézt zásadní změny (i ex post). S příslušným programem lze vytvářet objekty o různém rozlišení a hustotě pixelů (PPI – pixel per inch).
 
Vektorový objekt vytvořený v jednom vektorovém programu lze přenést napříč platformami, další editace v rozdílných programech jsou vázány na určitý vektorový formát. Podle konkrétního typu formátu je možné použít různé základní geometrické tvary.
 
=== Nevýhody ===
 
U bitmapy je velmi jednoduché pořídit složitý obraz, stačí jej např. naskenovat do počítače nebo vyfotit. Vektorový obraz je tvořen mnoha objekty, které musí být nějakým způsobem zaneseny, vygenerovány. Pokud je objektů velké množství, je obraz náročnější na výpočetní výkon.
 
Výsledné soubory jdou otevřít ve speciálních programech. To se u bitmapy stává zřídkakdy.
 
=== Využití ===
 
Vektorová grafika se používá v reklamních studiích, agenturách, pro sazbu, tvorbu ilustrací a logotypů, diagramů. 2D animace vytvořené pomocí vektorů se využívají v reklamách a spotech. Výsledné video je pouze rastrovanou vektorovou grafikou.
 
V průmyslu se hojně používá pro konstrukční a profesionální návrhářské systémy, např. architektonické a jiné CAD systémy, grafické a kartografické systémy.
 
Podpora vektorové grafiky byla implementována do všech moderních webových prohlížečů, a to ve formátu SVG (Scalable Vector Graphics). Nesporná výhoda tkví v použití jediného souboru, který je škálovatelný, aniž by se do souboru zasahovalo nebo aby se alternoval s jiným, větším souborem. HTML5 dokonce umožňuje vložit kód souboru ve formátu SVG přímo do kódu html stránky. Je velmi oblíbené využívat SVG soubory v kombinaci s CSS3 k animování objektů, které nejsou náročné na výkon klienta.
 
=== Nástroje ===
 
Světově nejznámějším vektorovým editorem je Illustrator a sazebním editorem InDesign. Za vektorové editory se dají považovat i programy Microsoft Office, které s vektory pracují obdobně, jen jejich ovládání odpovídá účelu, kterým není práce s vektory. Dalšími velmi známými vektorovými programy je CorelDRAW a Zoner Callisto. Za zmínku stojí i programy FireWorks a Flash, které kombinují práci s vektory a bitmapami. Toto jsou nástroje pro designérskou činnost.
 
V průmyslu se hojně využívá CAD systémů pro zobrazení stavebních, elektronických a jiných prvků. Např. program Fritzing slouží pro designování elektronických obvodů za použití Arduino elektroniky. Velmi jednoduše pracuje s prototypováním, výsledným schématem zapojení a schématem pro osazení součástek na tištěný spoj. Export probíhá do SVG. Architekti využívají program, který jim umožňuje navrhnout dispozice stavby dle nárysu, bokorysu a půdorysu s tím, že mohou navržené objekty obohatit o texturu, světlo a kameru a vyrenderovat si navrženou scénu ve 3D. Obdobně pracují i jiné 3D programy (Cinema 4D, 3ds Max, Blender). Všechny moderní 3D renderovací programy využívají rozšíření o 2D vektorové grafické techniky.
 
Vektory pro svou zobrazovací jednoduchost dobře slouží i v nemocničních (MRI) a specializovaných systémech.
 
Jak jsem zmínil výše, i webový prohlížeč může zobrazovat a manipulovat s vektorovou grafikou.
 
=== Základní funkce vektorových nástrojů ===
 
[[Soubor:Pathfinder.PNG|200x200px|náhled|Ukázka nástroje pithfinder v Illustratoru.]]Základní funkcí je tvorba jednoduchých geometrických objektů (čára, kružnice elipsa, obdélník, mnohoúhelník, kosočtverec, ''Bézierovy křivky''), kterým lze přiřadit barva, výplň, hrana. Pro jednoduchou manipulaci s objekty se využívá nástroj ''pathfinder'' (cestář), který umožňuje upravovat jeden objekt objektem druhým (sloučit, vyříznout).
 
Obdobně jako u bitmapových editorů, i vektorové pracují s vrstvami, ale zde nativně. Pomocí vrstev lze manipulovat se vzájemnou polohou objektů. Každý objekt je vlastní vrstvou. Lze přidávat i efekty a automaticky generovat objekty, přidávat perspektivu. Práce s textem je v Illustratoru velmi pohodlná, ovšem na sazbu je to program nevhodný. Za zmínku z výše vyjmenovaných objektů, které se dají ve vektorovém programu vytvořit, stojí Bézierova křivka.[[Soubor:Beziercurve.PNG|200x200px|náhled|Bézierova křivka, která lze pomocí bodů modifikovat.]] Tato křivka je jedna z mnoha parametrických křivek, která umožňuje interaktivně vytvářet křivku a modifikovat její tvar. Křivka je popsána pomocí dvou kotevních bodů a dvou bodů, které definují zakřivení.<ref><i>Bézier curve.</i> Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/Bézier_curve</ref> Ukázka práce s vrstvami v Illustratoru:
 
 
:[[File:Vrstvyai.PNG|225×168|]]
 
  
 
== Shrnutí ==
 
== Shrnutí ==

Verze z 21. 6. 2016, 21:26

Použití počítače jako nástroje renderování k tvorbě a manipulaci s obrazy se nazývá počítačová grafika.[1] Zobrazovací zařízení, obrazovka počítače se skládá z 2D pole „lokací“ nazývaných pixely. Pixely jsou rozmístěny po ose x a ose y: p[x,y]. Pixel prezentovaný obrazovkou počítače se skládá ze subpixelů. Jednotlivý subpixel nese konkrétní, základní barvu, nutnou pro zobrazení pixelu v konkrétním barevném prostoru (např. prostor RGB: Pixel p1 nese červenou barvu, p2 zelenou, p3 modrou, např. čistě červená v celých číslech je definována takto: (255, 0, 0)).[2] Aditivním mícháním těchto základních barev se jednotlivé barevné složky sčítají a vytvářejí světlo.[3] Lidské oko pak blízko sobě položené subpixely o rozdílných barvách vnímá jako jeden pixel o jedné barvě a intenzitě.

Existují dva základní principy digitální reprezentace obrazových informací, dva základní způsoby, jak počítač ukládá a zpracovává obrazové informace: Bitmapová grafika a vektorová grafika.

Bitmapová (rastrová) grafika

Vektorová grafika

Shrnutí

Bitmapa

  • Tvořena pixely
  • Rastrové programy jsou nejvhodnější pro editování fotografií
  • Nelze měnit velikost, aniž by se nesnížila kvalita
  • Detailní obrazy s velkým rozlišením jsou náročné na velikost souboru
  • Rastrové obrazy jsou nejčastějším obrazovým formátem
  • Photoshop, GIMP, Corel Photo-Paint
  • jpg, gif, png, tif, bmp, psd

Vektor

  • Matematické výpočty, které tvoří křivku
  • Vektorové programy jsou nejvhodnější pro tvorbu log, ilustrací, technických výkresů
  • Lze libovolně měnit velikost beze ztráty kvality
  • Nezávislý na rozlišení: Může být vytištěný v libovolné velikosti/rozlišení
  • Grafika s velkými rozměry může být nenáročná na velikost souboru
  • Lze jednoduše rastrovat
  • Illustrator, CorelDraw, Inkscape
  • ai, cdr, svg, eps

Formáty

Komprese

Paměťová náročnost rastrových obrazů roste kvadraticky s jejich rozlišením.[4] Komprese je tedy vhodným nástrojem ke snížení výsledné velikosti (v B) při zachování informace.[5] Ze souboru se odstraňují nadbytečná data, která člověk nevnímá.[6] Komprese se dělí na dvě základní kategorie: Ztrátová komprese a bezztrátová komprese. Umělec Pete Ashton na Instagramu pod jménem I Am Sitting In Stagram[7][8] re-postuje stejnou fotografii stále dokola. Tímto demonstruje, jak Instagram pokaždé zpracovává a komprimuje fotografie. Celé to můžeme nazvat generation loss.[9] Pokaždé, kdy si nahrajeme fotografii na Facebook, pak ji stáhneme, pak ji nahrajeme na Twitter, poté ji stáhneme a nahrajeme na Instagram, fotografie ztratí svou původní kvalitu.

Ztrátová komprese

Tato komprese se využívá k markantnímu snížení velikosti souboru, avšak na úkor kvality. Níže je ukázka kvality v závislosti na snížení velikosti souboru. Soubor vlevo je velký 40 kB a má nastavenou kvalitu na 10 %, pravý soubor pak na 100 % a výsledná velikost činí 141 kB.

Komprese10.jpgKomprese100.jpg

Bezztrátová komprese

Komprimováním bezztrátově se velikost souboru nesníží do takové míry, jako je tomu u ztrátové komprese. Oproti ztrátové kompresi lze komprimovaný soubor navrátit do původní podoby. U ztrátové komprese dochází k neodvratné ztrátě dat.

Formáty

Bitmapové formáty

  • BMP – V tomto formátu jsou pixely zaznamenány tak, jak jdou za sebou. 24 bitová barevná hloubka, 32 bitová při využití alfa kanálu. Alfa kanál udává průhlednost pixelu. BMP nevyužívá žádnou kompresi.[10]
  • GIF – Dříve velmi používaný formát pro zobrazení obrazové informace na internetu, velmi populární je využívat formát GIF k ukládání animací. 8 bitová barevná hloubka, je tedy ideální pro jednoduché barevné objekty. GIF využívá bezztrátovou kompresi.[11]
  • JPEG – Velmi populární obrazový formát napříč platformami. Tento 24 bitový formát využívá ztrátovou kompresi, díky níž lze dosahovat vysoké kvality při markantnímu snížení datové velikosti. Kvalita se snižuje s velikostí souboru. Tento formát je vhodný pro digitální fotografie, pro které byl navržený algoritmus komprese. Nevýhodou je komprimace při každém ukládání. Pro vyšší kvalitu při stejném kompresním poměru lze využít formát JPG2000.[12]
  • PNG – Oficiální formát pro obrazové informace na internetu. 24 bitová barevná hloubka. Podporuje alfa kanál. Je tedy vhodný na různé ikony. Využívá bezztrátovou kompresi. Pro ukládání animace se užívá formát APNG.[13]
  • TIFF – Využití zejména v tisku. Až 24 bitová barevná hloubka. Formát využívající bezztrátovou kompresi a umožňuje uložení více bitmapových vrstev.[14]
  • RAW – Třída souborových formátů, které využívají zařízení určené pro fotografii a video. RAW obsahuje pouze minimálně zpracovaná „surová“ data ze senzoru, zapsána 12 nebo 14 bity na bod. Pro optimální grafickou hodnotu je nutné RAW „vyvolat“, nastavit vyvážení bílé, expozici, kontrast apod. Díky této variabilitě je tento formát vhodný pro profesionální práci. Tato „surová“ data jsou velmi objemná a náročná na kapacitu paměťového média a také náročná na rychlost paměťového média, proto se v mobilních telefonech využívá JPEG formát a v profesionální branži RAW.[15]
  • PSD – Jedná se o formát, který ukládá Photoshop. 48 bit, alfa kanál, vrstvy, masky, bitmapy, vektory, texty apod., nekomprimovaný. Profesionální formát, jehož velikost závisí na komplexitě obsahu (1 GB není výjimkou).[16]

Vektorové formáty

  • PostScript: EPS, PS – PostScript je programovací jazyk, kterým se analyticky popisují všechny objekty, jako množina geometrických tvarů. K otevření je zapotřebí specifický program, pro zobrazení se využívá rastrových formátů, nejčastěji TIFF.[17]
  • PDF – Využívá PostScript jazyka, umožňuje tedy interpretovat PostScript soubory. Dále umožňuje embedování fontů a ukládání bitmapy. Je to populární formát pro zobrazování komplexních souborů na různých platformách.[18]
  • AI, CDR, DXF – Formát programů specializujících se na práci s vektorovou grafikou, zde Illustrator, ai; CorelDraw, cdr; CAD programy, dxf. Dále 3D programy, jako 3dsMax, 3ds; 3D soubory pod aplikacemi CAD, stl; ale i RAW, který uchovává „surová“ data o prostorových objektech.
  • SVG – Vektorový formát založený na XML, který se používá pro zobrazení vektorové grafiky a animací v internetovém prohlížeči. Nespornou výhodou využití objektů ve formátu SVG je responzivita. Zmenšením či zvětšením toho samého souboru nedojde ke ztrátě kvality. Stejný soubor lze i měnit v reálném čase: Měnit barvu, animovat, posouvat, tvarovat apod.[19]
  • VRML – Jazyk určený pro popis prostorových těles virtuální reality.[20]

Shrnutí

Komprese

  • Snížení velikosti redundancí dat
  • Ztrátová: Nevratné odebrání informací, viditelné snížení kvality
  • Bezztrátová

Formáty bitmapa

  • JPEG: Fotografie, ztrátová komprese, velmi populární, internet
  • PNG: Bezztrátová komprese, alfa kanál, internet
  • BMP: Žádná komprese, alfa kanál, velikost dle rozlišení

Formáty vektor

  • EPS, PS: PostScript
  • PDF: PostScript, pracuje i s bitmapami, fonty atp.
  • SVG: Internet, responzivita

Rozlišení

Rozlišení je počet pixelů, které mohou být zobrazeny na zařízení. Běžně se uvádí počet pixelů na ose x a ose y: např. 1920×1080 px, dalo by se uvézt i 2,1 Mpx, ovšem 2,1 Mpx může značit i rozlišení 1080×1920 px, nebo jiné.

Rozlišení DPI a PPI

  • DPI – Dots per inch, DPI je hustota obrazových bodů na jeden palec. DPI se uvádí zejména při tisku a skenování. Každý pixel se tiskne jako jinak barevná tečka.[21]
  • PPI – Pixels per inch, PPI je hustota obrazových pixelů, na zobrazovacím zařízení (monitor počítače).

Čím je hodnota DPI, resp. PPI, vyšší, tím je obraz jemnější. Na disku ale zabere vyšší místo, na papíře menší (pokud se obraz nepřevzorkuje). Pro tisk se používá minimální rozlišení 300 DPI, obrazovce monitoru zcela postačí 72 PPI. Retina displej iPhonu 6 disponuje rozlišením 326 PPI.[22] Ze standardní pozorovací vzdálenosti nejsou jednotlivé pixely viditelné, obrazovka působí ostřeji. Stejného efektu se dá dosáhnout i u nižší hustoty pixelů na stejné velikosti displeje.

Barevná (bitová) hloubka

Barevná hloubka v bitech určuje počet bitů, které jsou použity k popisu určité barvy každého pixelu, a to u rastrové grafiky. Čím vyšší je barevná hloubka, tím větší je barevná škála a také paměťová náročnost. Nejpoužívanější je barevná hloubka o hodnotě 24 bitů, tedy 224 (16,8 mil. barev).[23] Máme-li obrázek o velikosti 600×600px při 16 bitové hloubce, pak 2 bajty na každý pixel (8 bitů je 1 bajt). Dostaneme se tedy po výpočtu 600×600×2 k výsledné velikosti souboru 720 kB. Při 24 bitové hloubce pak 1,08 MB. Ukázka 3, 4, 6 a 8 bitové barevné hloubky:

Cd3bit.pngCd4bit.pngCd6bit.pngCd8bit.png

Odkazy

Reference

  1. What is Computer Graphics? Cornell University Program of Computer Graphics. 1998, [cit. 1.6.2016]. Dostupné z: http://www.graphics.cornell.edu/online/tutorial/
  2. Subpixel in Science. Dictionary.com, [cit. 1.6.2016]. Dostupné z: http://www.dictionary.com/browse/pixel
  3. POYNTON, Charles. Digital video and HDTV algorithms and interaces. Amsterdam: Morgan Kaufmann Publishers, c2003. Morgan Kaufmann series in computer graphics and geometric modeling. ISBN 1-55860-792-7.
  4. ŽÁRA, Jiří. Moderní počítačová grafika. 2., přeprac. a rozš. vyd. Praha: Computer Press, 2004. ISBN 80-251-0454-0.
  5. MAHDI, O.A.; MOHAMMED, M.A.; MOHAMED, A.J. Implementing a Novel Approach an Convert Audio Compression to Text Coding via Hybrid Technique. (PDF). International Journal of Computer Science Issues 9 (6, No. 3): 53–59. 2012, [cit. 1.6.2016]. http://ijcsi.org/papers/IJCSI-9-6-3-53-59.pdf
  6. PUJAR, J.H.; KADLASKAR, L.M. A New Lossless Method of Image Compression and Decompression Using Huffman Coding Techniques. (PDF). Journal of Theoretical and Applied Information Technology 15 (1): 18–23. 2010, [cit. 1.6.2016]. Dostupné z: http://www.jatit.org/volumes/research-papers/Vol15No1/3Vol15No1.pdf
  7. I Am Sitting In Stagram. Dostupné z: https://www.instagram.com/sitting_in_stagram/
  8. I Am Still Sitting In Stagram. Dostupné z: https://www.instagram.com/sitting_in_stagram2/
  9. Generation loss. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/Generation_loss
  10. BMP file format. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/BMP_file_format
  11. GIF. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/GIF
  12. JPEG. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/JPEG
  13. History of PNG. Libpng.org. 29.5.2010, [cit. 1.6.2016]. Dostupné z: http://www.libpng.org/pub/png/#history
  14. JAMES D. MURRAY AND WILIAM VANRYPER. Encyclopedia of graphics file formats. 2. ed. Bonn [u.a.]: O'Reilly, 1996. ISBN 1565921615.
  15. Camera Raw Formats. Digital Preservation. Library of Congress. 4.10.2006, [cit. 1.6.2016]. Dostupné z: http://www.digitalpreservation.gov/formats/fdd/fdd000241.shtml
  16. KNOLL, T. Adobe Photoshop, File Formats, Specification. Adobe Systems Incorporated. 2013, [cit. 1.6.2016]. Dostupné z: https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/
  17. PostScript Turnes 20. (PDF). Adobe Systems Incorporated, [cit. 1.6.2016]. Dostupné z: https://www.adobe.com/products/postscript/pdfs/postscript_is_20.pdf
  18. PDF Reference. (PDF). 6th ed., version 1.7. Adobe Systems Incorporated. 2006, [cit. 1.6.2016]. Dostupné z: https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_reference_1-7.pdf
  19. Scalable Vector Graphics (SVG) 1.2. W3C Working Draft. World Wide Web Consortium. 2002, [cit. 1.6.2016]. Dostupné z: https://www.w3.org/TR/2002/WD-SVG12-20021115/
  20. RAGGETT, D. Extending WWW to support Platform Independent Virtual Reality. Hewlett Packard Laboratories. World Wide Web Consortium. 1994, [cit. 1.6.2016]. Dostupné z: https://www.w3.org/People/Raggett/vrml/vrml.html
  21. Print Resolution: Understanding 4-bit depth. (PDF). Xerox Corporation. 2012, [cit. 1.6.2016]. Dostupné z: http://www.office.xerox.com/latest/XOGFS-17
  22. Retina Display. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/Retina_Display
  23. Color depth and high dynamic range color, After Effects Help/Color basics. Adobe Systems Incorporated, [cit. 1.6.2016]. Dostupné z: https://helpx.adobe.com/after-effects/using/color-basics.html

Související články

Bitmapová grafika Vektorová grafika Komprese obrazových informací Formáty obrazových informací Rozlišení obrazových informací

Archivovaná verze stránky je dostupná na tomto odkazu.