The wiki page is under active construction, expect bugs.

This is an old revision of the document!


Vnímání barev a barevné modely. Rastrová grafika, základní rastrové formáty souborů. Vektorová grafika, reprezentace 2D a 3D objektů, základní formáty souborů pro 2D a 3D data. Principy 3D modelování a mapování textur.

B4B39VGO Webové stránky předmětu

  • Vnímání barev – tvorba barevného vjemu v lidském oku, kolorimetrický experiment, srovnávací funkce (CIE RGB), barevné prostory CIE XYZ a CIE xyY, chromatický diagram.
  • Barevné modely – aditivní a subtraktivní skládání barev. Barevné modely založené na primárních barvách RGB a CMY(K). Abstraktní barevné modely HSV a HSL.
  • Rastrová grafika – obraz jako signál, vzorkování, alias a antialisaing. Kvantizace barev, polotónování a dithering. Přímá reprezentace barev (direct color) a indexovaná reprezentace barev. Transformace rastrového obrazu. Komprese rastrového obrazu. Základní formáty GIF, PNG a JPEG a jejich vlastnosti.
  • Vektorová grafika a reprezentace 2D objektů – reprezentace 2D objektů pomocí parametrických polynomiálních křivek - Bézierovy křivky a B-spline křivky, formát SVG.
  • Reprezentace 3D objektů a principy 3D modelování – polygonální reprezentace 3D objektů a datové struktury pro jejich reprezentaci, formát OBJ. Bézierovy a B-Spline plochy. Základní modelovací operace s použitím polygonální a polynomiální reprezentace 3D objektů: blokování, bridge, extrude, loft, rotační plochy, volné modelování. Dělené plochy (subdivision surfaces), jejich reprezentace a výhody při modelování oproti B-spline plochám. Implicitní plochy a jejich reprezentace a využití při modelování. Sochání (sculpting).
  • Principy mapování textur – zobrazení textury na 3D objektu s použitím UV mapování. Různé způsoby vytvoření UV mapování a k čemu jsou vhodné.

1. Vnímání barev

Lidské oko vnímá světlo jako elektromagnetické vlnění v rozsahu přibližně 380 až 720 nm. Každá vlnová délka odpovídá určité vnímané barvě – např. modrá (krátké vlny), zelená (střední), červená (dlouhé). Vjem barvy vzniká v mozku kombinací signálů ze tří typů světločivných buněk – čípků.

1. Tvorba barevného vjemu v lidském oku

Struktura oka a sítnice

  • Sítnice (retina) pokrývá ~2/3 vnitřního povrchu oka a obsahuje dva typy fotoreceptorů:
    • Tyčinky (~120 milionů) – velmi citlivé na jas (světlo/tma), ale nerozlišují barvy.
    • Čípky (~8 milionů) – rozlišují barvy, existují ve třech typech:
      • Citlivé na červenou (~560 nm),
      • zelenou (~530 nm),
      • a modrou (~420 nm).
  • Největší koncentrace čípků je v oblasti zvané žlutá skvrna (makula) – zajišťuje nejostřejší vidění.
  • Slepá skvrna – místo, kde z oka vystupuje optický nerv; bez fotoreceptorů, mozek chybějící obraz doplní.
  • Rozlišení oka odpovídá přibližně 1 megapixelu.
  • Každá vnímaná barva je výsledkem kombinace signálů ze tří typů čípků ⇒ barevný vjem lze popsat jako 3D vektor (např. RGB).

Světlo a barva

  • Monochromatické světlo – má jednu konkrétní vlnovou délku (např. laser).
  • Polychromatické světlo – směs více vlnových délek (běžné světlo).
  • Barva – není fyzikální vlastností objektu, ale vjem vznikající v mozku jako reakce na složení dopadajícího světla.
  • Oko je nejcitlivější na zelené světlo, pak červené, nejméně na modré.

Metamerismus

  • Metamery – dvě různá spektra světla, která vyvolají stejný barevný vjem, protože produkují stejnou odpověď čípků.
  • To je důvod, proč je možné barvy reprezentovat v trojrozměrném barevném prostoru (např. RGB), i když spektrum světla je spojité.

2. Kolorimetrický experiment

  • Provádí se s:
    • Referenčním polem – monochromatické světlo s danou vlnovou délkou \( \lambda \),
    • Testovacím polem – kombinace tří monochromatických světel (červená, zelená, modrá).
  • Účastník upravuje intenzity světel v testovacím poli, aby se výsledek opticky shodoval s referenční barvou.
  • Ne každá barva je dosažitelná kombinací RGB – některé vyžadují záporné intenzity, které nelze fyzicky realizovat.

3. Barevné prostory podle CIE

CIE RGB

  • Vznikl z kolorimetrického experimentu.
  • Definuje tři srovnávací funkce \( \bar{r}(\lambda), \bar{g}(\lambda), \bar{b}(\lambda) \), které popisují vnímání jednotlivých RGB složek pro danou vlnovou délku \( \lambda \).
  • Některé barvy mohou vyžadovat záporné hodnoty, což je nepraktické pro fyzickou reprezentaci.

CIE XYZ

  • Transformace z CIE RGB za účelem odstranění záporných hodnot.
  • Vlastnosti:
    • Všechny srovnávací funkce jsou kladné.
    • Funkce Y odpovídá vnímání jasu (svítivosti) – tzv. fotopická citlivost \( V(\lambda) \).
    • Slouží k výpočtu barevného vjemu i pro spektra, která nejsou fyzikálně realizovatelná.

CIE xyY

  • Normalizovaná verze XYZ – pro eliminaci vlivu jasu.
  • Definováno takto:

\[ x = \frac{X}{X + Y + Z},\quad y = \frac{Y}{X + Y + Z},\quad z = \frac{Z}{X + Y + Z} \]

  • .

\[ x + y + z = 1 \]

  • Pro daný jas \( Y \) lze z \( x \) a \( y \) zrekonstruovat celou barvu.
  • Umožňuje znázornění barev v 2D diagramu – chromatickém diagramu.

4. Chromatický diagram (CIE 1931)

  • Zobrazuje všechny barvy, které může lidské oko vnímat.
  • Okraj křivky reprezentuje monochromatická světla (čisté vlnové délky).
  • Přímka mezi dvěma body A a B značí všechny barvy, které lze získat směsí těchto světel.
  • Trojúhelník ABC – barvy dosažitelné kombinací tří světel.
  • Bod bílého světla (white point) – neutrální barva vnímána jako bílá.
  • Diagram se často používá pro analýzu a porovnání barevných gamutů zobrazovacích zařízení.

2. Barevné modely

Barevné modely slouží k reprezentaci barev v digitálních zařízeních (displeje, tiskárny) i při práci s barvami v softwaru. Liší se tím, jakým způsobem skládají barvy (aditivně/subtraktivně) a jak jsou pro uživatele intuitivní.

1. Aditivní a subtraktivní skládání

  • Aditivní skládání (RGB) – barvy vznikají sčítáním světla. Používá se např. u displejů, projektorů. Kombinací všech tří barev (R, G, B) v maximální intenzitě vzniká bílá.
  • Subtraktivní skládání (CMY(K)) – barvy vznikají odčítáním (absorpce světla pigmenty). Používá se v tisku. Kombinací všech tří složek CMY vzniká tmavě šedá, proto se přidává černá složka K (black).

2. Modely založené na primárních barvách

RGB model
  • Tvořen třemi složkami: Red, Green, Blue.
  • Reprezentován jako jednotková krychle – každý kanál má rozsah 0–1 nebo 0–255 (8bitová reprezentace).
  • Běžné varianty: sRGB, Adobe RGB, které se liší rozsahem (gamutem) zobrazitelných barev.
  • Gamut RGB lze znázornit jako trojúhelník v chromatickém diagramu (pro danou svítivost).
CMY(K) model
  • Barvy: Cyan, Magenta, Yellow, doplněné o Black (K).
  • Používá se v tisku, kde barvy vznikají absorpčním mícháním pigmentů.
  • Přidání černé (K) zlepšuje kvalitu tisku a snižuje spotřebu barev.
  • Gamut CMY(K) je menší než RGB, nelze s ním tisknout jasné odstíny, protože pigmenty omezují svítivost.

3. Problémy modelů RGB a CMY(K) pro uživatele

  • Složité nastavování neprimárních barev – změna jedné složky ovlivní i odstín.
  • Nelze snadno měnit pouze sytost nebo jas bez ovlivnění odstínu.
  • Neodpovídají lidskému vnímání – změna v hodnotách nemusí odpovídat očekávanému vizuálnímu výsledku.

4. Abstraktní modely: HSV a HSL

Modely HSV a HSL byly navrženy pro intuitivnější práci s barvami – například při výběru barvy v grafických editorech.

HSV (Hue, Saturation, Value)
  • Hue (odstín) – úhel v barevném kruhu (0–360°)
  • Saturation (sytost) – čistota barvy (0 = šedá, 1 = čistá barva)
  • Value (jas) – celkový jas barvy
  • Model má tvar kužele.
  • Přidání černé snižuje Value, ale přidání bílé zároveň mění i Saturation ⇒ nekonzistentní chování.
HSL (Hue, Saturation, Lightness)
  • Hue (odstín) – stejné jako u HSV
  • Saturation (sytost) – rozsah čistoty barvy
  • Lightness (světlost) – 0 = černá, 1 = bílá, 0.5 = plná barva
  • Model má tvar dvojitého kužele (bikónu).
  • Přidání černé/bílé mění pouze Lightness ⇒ konzistentní chování při úpravách.

5. Kvantizace barev

  • Při digitálním zpracování jsou barvy diskretizovány (kvantizovány) na konečný počet hodnot.
  • Například:
    • 8bit RGB – 256 hodnot na kanál ⇒ \( 256^3 = 16.7 \) milionů barev
    • 16bit RGB – 65536 hodnot na kanál
    • 32bit RGBA – navíc průhlednost (alpha channel)
  • Kvantizace může být:
    • Uniformní – rovnoměrné rozdělení rozsahu
    • Neuniformní – přizpůsobené lidskému vnímání (např. s větším důrazem na zelené odstíny)

3. Rastrová grafika

Rastrová grafika reprezentuje obraz jako mřížku pixelů, kde každý pixel nese informaci o barvě. Vzniká digitalizací spojité obrazové funkce pomocí vzorkování a kvantizace.

1. Digitalizace obrazu

Obraz jako signál

  • Spojitá obrazová funkce: \( z = f(x, y) \)
  • Digitalizace znamená:
    • Vzorkování – rozdělení na pixely (diskretizace definičního oboru).
    • Kvantizace – převod hodnot do omezené množiny (diskretizace oboru hodnot).

PPI a DPI

  • PPI (pixels per inch) – udává hustotu pixelů pro zobrazovací zařízení (vliv na velikost obrazu).
  • DPI (dots per inch) – počet tiskových bodů na palec (vliv na kvalitu tisku).

2. Vzorkování, aliasing a anti-aliasing

Vzorkování

  • Vzorkování s frekvencí \( f_s \) musí být alespoň 2× vyšší než maximální frekvence signálu – tzv. Shannonův teorém.
  • Nedostatečné vzorkování ⇒ aliasing – falešné vzory, zubaté hrany, moaré efekt.

Antialiasing

  • Supersampling – každý pixel se vypočítá jako průměr více vzorků.
  • Low-pass filtr – odstranění vysokofrekvenčních složek před vzorkováním.

3. Kvantizace, polotónování a dithering

Kvantizace barev

  • Rozdělení barevného prostoru na diskrétní intervaly.
  • Příklady:
    • 8bit RGB: \( 2^8 = 256 \) barev
    • 24bit RGB: \( 2^{24} = 16{,}7 \) milionu barev

Polotónování

  • Nahrazení pixelu mřížkou bodů různé hustoty tak, aby se z dálky jevily jako jiná barva.
  • Používá se např. v tisku novin.

Dithering

  • Simuluje více odstínů pomocí rozložení chyb kvantizace na okolní pixely.
  • Typy:
    • Náhodný dithering – náhodné šumové body.
    • S maticí (dithering matrix) – pravidelný vzor.
    • Floyd–Steinberg – distribuce chyby na okolní pixely.

4. Reprezentace barev

Přímá reprezentace (Direct color)

  • Každý pixel obsahuje své RGB (příp. RGBA) hodnoty.
  • Bitová hloubka:
    • 24bit RGB – 8 bitů na kanál
    • 32bit RGBA – přidán kanál průhlednosti (alpha)

Indexovaná reprezentace

  • Pixel nese pouze index do palety barev.
  • Paleta obsahuje např. 256 barev (8bit index).
  • Typy palet:
    • Master palette – 3R-3G-2B
    • Adaptive palette – optimalizace podle obrazu

5. Transformace rastrového obrazu

Problém transformací

  • Při transformacích (např. rotace, změna velikosti, zkosení) dochází ke změně souřadnic pixelů, které nemusí odpovídat celým číslům.
  • To může způsobit:
    • Díry – některé pixely ve výsledku nejsou vyplněny.
    • Překryvy – více původních pixelů se promítne do stejné cílové pozice.

Metody transformace

  • Forward mapping – každý pixel původního obrázku je promítnut do nových souřadnic pomocí transformační matice.
    • Nevýhoda: výsledný obrázek může mít díry nebo přepisy.
  • Inverse mapping – pro každý pixel výsledného obrázku hledáme odpovídající pozici v původním obrázku.
    • Vhodnější metoda, ale vyžaduje interpolaci kvůli necelým souřadnicím.

Interpolace při transformaci

  • Nearest neighbor – použije nejbližší pixel, rychlé, ale hrubé.
  • Lineární interpolace (LERP) – využívá dvě hodnoty, lineárně je spojí.
  • Bilineární interpolace – vážený průměr ze čtyř okolních pixelů.
  • Kubická interpolace – plynulejší přechody, využívá více sousedů.

6. Komprese rastrových obrázků

Typy komprese

  • Bezeztrátová (lossless) – zachována všechna původní data, obraz lze přesně rekonstruovat.
  • Ztrátová (lossy) – část dat se ztrácí, využívá se limitace lidského vnímání.

Bezeztrátové metody

  • RLE (Run-Length Encoding) – opakující se hodnoty zapsány jako počet + hodnota. Vhodné pro jednoduché obrázky s opakujícími se barvami.
  • Huffmanovo kódování – podle četnosti symbolů se vytvoří binární strom; časté symboly mají kratší kód.
  • LZW (Lempel-Ziv-Welch) – dynamické slovníkové kódování; využívá se např. v GIF a PNG.

Ztrátová metoda – JPEG

  • Optimalizovaná pro fotografie – účinně snižuje velikost souboru tím, že odstraňuje pro oko méně podstatné informace. Nevhodná pro technické nebo vektorové obrázky, kompresní poměr je nastavitelný.
Postup JPEG komprese
  1. Převod RGB → YCbCr
    • Jasová složka (Y) se oddělí od barevných složek (Cb, Cr), protože oko je citlivější na jas než na barvu.
  2. Downsampling (podvzorkování)
    • Barevné složky Cb a Cr se zmenší (např. 4:2:0), čímž se ušetří místo – detailní barvy nejsou pro vnímání zásadní.
  3. Rozdělení obrazu na bloky 8×8 pixelů
    • Obraz je segmentován na malé čtverce, což umožňuje lokální frekvenční analýzu.
  4. Diskrétní kosinová transformace (DCT)
    • Každý blok je převeden do frekvenční domény – oddělí se nízkofrekvenční složky (struktura) od vysokofrekvenčních (detaily, šum).
  5. Kvantizace DCT koeficientů
    • Koeficienty se zaokrouhlují podle kvantizační matice – tím se odstraní jemné detaily, které nejsou výrazné pro lidské oko.
  6. Entropické kódování
    • Zbylá data se lineárně uspořádají a dále komprimují kombinací RLE a Huffmanova kódování, čímž se ještě sníží velikost.

7. Formáty rastrových obrázků

GIF (Graphics Interchange Format)

  • Indexované barvy – max. 256 barev v paletě (8bitová hloubka).
  • Barvy mohou být 24bitové (RGB), průhlednost pouze zcela průhledná / zcela neprůhledná.
  • Komprese: bezeztrátová LZW.
  • Podporuje:
    • Jednoduché animace
    • Interlacing (postupné vykreslování)
  • Vhodné pro loga, diagramy, skici – nevhodné pro fotografie.

PNG (Portable Network Graphics)

  • Podporuje:
    • Indexované i přímé RGB/RGBA barvy.
    • Průhlednost i poloprůhlednost (alfa kanál).
    • Stupně šedi.
  • Komprese: bezeztrátová (dvoustupňová: příprava + LZW).
  • Vhodné pro loga, technické výkresy, skici i obrázky s průhledností.
  • Nevýhoda: větší soubory než JPEG u fotek.

JPEG (Joint Photographic Experts Group)

  • Používá ztrátovou kompresi (viz výše).
  • Barvy: přímé 24bitové RGB (bez alfa kanálu).
  • Nepodporuje průhlednost.
  • Vhodné pro fotografie – nevhodné pro obrázky s ostrými hranami (loga, texty), průhledností nebo nízkým počtem barev.

4. Vektorová grafika a reprezentace 2D objektů

Vektorová grafika popisuje obraz pomocí geometrických útvarů (např. úsečky, křivky, elipsy), nikoliv maticí pixelů. Vektorové objekty lze libovolně zvětšovat bez ztráty kvality, protože se vykreslují dynamicky při každé změně velikosti nebo přiblížení.

Používá se v nástrojích jako Adobe Illustrator, Corel Draw, Flash nebo při práci s formátem SVG (Scalable Vector Graphics).

1. Reprezentace 2D objektů

  • Objekty jsou tvořeny segmenty křivek (např. šipky ve Wordu) a definovány kontrolními body.
  • Každý objekt má svou modelovou transformační matici, kterou lze kombinovat s dalšími.
  • Objekty lze seskupovat do scénických grafů – skupiny mají vlastní transformace, které se aplikují na všechny podobjekty.
  • Kromě tvaru lze u objektů nastavit:
    • Výplň (fill) – např. barva, gradienty; pravidla výplně: Non-zero a Even-odd.
    • Styl hran (stroke) – tloušťka, barva, typ čáry (plná, čárkovaná…).

2. Parametrické polynomiální křivky

Parametrické křivky popisují 2D (či 3D) tvar pomocí funkce bodu \( P(t) \) závislé na parametru \( t \in [0,1] \). Jsou základním nástrojem pro přesnou definici tvaru, animace a transformace.

Rozlišujeme dva typy:

  • Interpolační – křivka prochází všemi kontrolními body (např. Lagrangeova interpolace).
  • Aproximační – křivka kontrolní body jen “následuje”, ale neprochází jimi přesně (např. Bézier, B-spline).

Spojitosti mezi segmenty:

  • C₀ – konec jednoho segmentu navazuje na začátek dalšího.
  • C₁ – plynulé navázání tečny (1. derivace).
  • C₂ – plynulé navázání zakřivení (2. derivace).
  • Gₙ – geometrická spojitost (směr derivace je zachován, ale její velikost být nemusí).

Bézierovy křivky

  • Definovány kontrolními body \( P_0, \dots, P_n \) a Bernsteinovými polynomy.
  • Neprochází všemi body, ale vždy začíná v \( P_0 \) a končí v \( P_n \).
  • Křivka je vždy uvnitř konvexního obalu svých bodů.
  • Nejčastěji používané stupně:
    • Kvadratické (n=2) a kubické (n=3) – standard ve vektorové grafice a fontech.
  • Výpočet pomocí de Casteljauova algoritmu – opakovaná lineární interpolace.
  • Lze spojovat s garantovanou C₀, C₁ a C₂ spojitostí (viz podmínky na body).

B-spline křivky

  • Piecewise aproximační křivky – složené z více segmentů.
  • Definovány:
    • Kontrolními body a
    • uzlovým vektorem (knot vector) – určuje, jak silně a kde jednotlivé body ovlivňují křivku.
  • Výhody:
    • Lepší kontrola tvaru – změna bodu ovlivní jen lokální segmenty.
    • Umožňují vysokou hladkost (C₂) a flexibilní tvarování.
    • Levnější výpočetně než Bézier pro složité křivky.
  • Uniformní vs. neuniformní:
    • Uniformní – rovnoměrné rozložení uzlů.
    • Non-uniformní – uzly mohou být různě rozmístěné nebo opakované.
  • Multiplicita uzlu/bodu ovlivňuje spojitost:
    • Spojitost = \( C_{n-r} \), kde \( r \) je násobnost a \( n \) stupeň křivky.
  • Reparametrizace a převod B-spline na Bézier
    • Aby bylo možné efektivně vykreslit B-spline křivku pomocí de Casteljauova algoritmu, je třeba provést reparametrizaci – úpravu parametrického rozsahu tak, aby odpovídal jednotlivým segmentům.
    • Následně se zvýší násobnost vnitřních uzlů (uzlového vektoru) na hodnotu rovnou stupni křivky. Tím se zajistí, že každý segment lze zapsat jako samostatná Bézierova křivka.
  • Převod zpět z Bézier na B-spline
    • Spojením sousedních Bézierových segmentů a snížením násobnosti uzlů vznikne zpět hladká B-spline křivka.
    • Výsledná křivka může dosáhnout vyšší spojitosti (např. C1, C2) podle snížené multiplicity a stupně křivky.
  • Použití: technické výkresy, CAD systémy.

NURBS (Non-Uniform Rational B-Spline)

  • Nejobecnější forma B-spline.
  • Umožňuje přidělit váhy bodům – reprezentuje se pomocí homogenních souřadnic \((xw, yw, w)\).
  • Zachovává tvar při:
    • Afinních transformacích,
    • Perspektivní projekci – racionální forma.
  • Spojitost a tvar lze řídit pomocí multiplicity uzlů a vah.
  • Přesně modeluje kružnice, kuželosečky, válce, koule.
  • Rendering: převede se na Bézier segmenty zvýšením násobnosti uzlů.
  • Využití: 3D modelování, průmyslový design (CAD).

3. Rendering parametrických křivek

  • Rendering probíhá opakovaným dělením pomocí de Casteljauova (nebo de Boorova) algoritmu, dokud není segment dostatečně malý.
  • de Casteljauův algoritmus (pro Bézierovy křivky)
    • V každém kroku lineárně interpoluje mezi sousedními body a tím vytváří nové body, dokud nezíská jeden bod pro danou hodnotu parametru \( t \).
    • Používá se rekurzivně – zároveň umožňuje křivku dělit na dvě části v libovolném bodě \( t \).
  • de Boorův algoritmus (pro B-spline a NURBS křivky)
    • Obecnější varianta, která pracuje s uzlovým vektorem. V každém kroku počítá vážené průměry kontrolních bodů podle hodnoty parametru a pozice v uzlovém vektoru.
    • Algoritmus probíhá v několika úrovních, postupně přibližuje výsledný bod na křivce z lokální podmnožiny kontrolních bodů.
  • Pro velké segmenty: pracuje se v homogenních souřadnicích, jinak v běžné kartézské soustavě.
  • U racionálních křivek (NURBS) může docházet ke ztrátě spojitosti při nesprávném výpočtu – musí se zachovat v homogenních souřadnicích.

4. SVG – Scalable Vector Graphics

  • XML formát popisující vektorovou grafiku.
  • Používá předdefinované značky: `<rect>`, `<circle>`, `<path>`, `<ellipse>`, `<polygon>` atd.
  • Scalable – velikost lze libovolně měnit bez ztráty kvality.
  • Podporuje:
    • Interaktivitu (např. přes JavaScript),
    • Animace,
    • Přechody a filtry.
  • Využívá se pro webovou grafiku, ikony, diagramy.
  • Vykreslování probíhá podle pořadí definic (tzv. malířův algoritmus).
    • Problém nastává např. u tří objektů, které se všechny částečně překrývají (malířův problém).
Navigation

Playground

QR Code
QR Code statnice:bakalar:be4b39vgo (generated for current page)