Grafické systémy – 4. ročník

Témata

  • Opakovací úlohy z 3. ročníku – Image Processing (PHP), Generování grafiky – HTML Canvas (Javascript)
  • 3D grafika – scéna, objekty, modelování, texturování, osvětlení, promítání, pohledy, renderovací metody
  • CAD – prostředí, tvary, transformace, skupiny, logické operace, kótování, tvorba výkresu, práce v měřítku, export
  • Prostorová data – vývojové diagramy, datové modelování, algoritmy nad rastry/vektory/grafy
  • Geoinformatika – GIS, souřadné systémy, mapové služby, geotagování, vizualizace a modelování prostorových dat
  • Maturitní příprava (pozor: Tipy k matuře nejsou AI Slop! Opravdu mé myšlenky!)
    • (14) Teorie počítačové grafiky – Tip k matuře: Mělo by dominovat pochopení základních grafických primitiv (od slova primitivum). Rastr je vlastně v paměti tvořený jen sérií čísel s definicí bitové hloubky (aby se vědělo po kolika bitech je jeden pixel). Křivky (vektory) jsou v počítačové paměti rovněž jen série čísel, ale v obou případech se daný typ grafiky rozliší jen tím, zda číslo znamená barevnou hodnotu nebo hodnotu znaku (písmena). Pak už tedy záleží jen na interpretaci kódu (SVG, HTML, XML, VRML apod.). Zvláštní typy grafiky jsou často kombinace nebo komplexní struktury: U CADu (počítač si vektory nebo 3D nakreslí v měřítku podle parametrů výkresu). 3D grafika je založena na podobných konceptech jako u CADu a vektorové grafiky. Komplexnost CAD systémů je využit v geoinformatice, kde vždy je na prvním místě přesnost polohy a měřítko. Např. program QCAD či Leaflet umožňují pracovat s datovými vrstvami odděleně a mají mnohem více analytických nástrojů pro generování finálních rastrů a vektorů. Zvláštní situace je v případě multimediálních souborů – video (princip datových proudů a kontejnerů).
    • (15) Grafické souborové formáty a kompresní algoritmy – Tip k matuře: Abyste mohli pochopit smysl zavedení souborového formátu a často se bavíme o standardizovaných formátech, je třeba znát technické vlastnosti, jak se pracuje s grafickou informací. Látku jsme zjednodušili na několika charakteristických kompresních algoritmech a jednom komplexním algoritmu (JPEG). Bohužel je třeba poznamenat, že postupná standardizace byla prostě ovlivněna aktuálními hardwarovými možnostmi a až v druhé fázi teprve potřebami uživatelů. Vezměme si takový FAX z 80. let 20. století versus emailové služby (rozvoj 90. léta). A ty zase versus dnešní možnosti sdílení v sociálních sítích (2010 až do dnes). Součástí tématu je ale také koncepce, jak se v dnešní době institucionálně archivují dokumenty, díla apod.
    • (16) Práce s rastrovým a vektorovým editorem – Tip k matuře: Je třeba si vzpomenout na úlohy z předmětu Počítačová grafika (2. a 3. ročník). Zde se spokojíme se základními dovednostmi a orientací v základních nástrojích, které jsou nejvíce využívány. Samozřejmě v dnešní době AI máte smíšené pocity proč to? Abstrakce, která číhá v poslední maturitní otázce, je závislá na tom, jak chápete procesy, které se při úpravách dějí. Pochopil jsem, že v dnešní době “desktop práce” běžným uživatelům nesedí (nutnost instalace). V této zrychlené době často saháte po nejdostupnějších online nástrojích. Však to je patrné při ukázkách CAD v Onshape. Jenže řada firem stále komplexní úlohy ponechává grafikům, který nemohou využívat veřejné služby. Datové uniky takových pofidérních aplikací umístěných v cloudu žádný zaměstnanec nechce riskovat. Mějme na paměti, že vnitřní sítě firem musí být stále zabezpečeny, a tak se občas setkáte se situacemi, kdy se pracuje s předpotopními aplikacemi např. Corel DRAW verze 12! v roce 2026. Přesvědčil jsem se v jednom obchodě. Takže, pokud jste schopni požadované grafické operace provádět pomocí online nástrojů, je to na vaší odpovědnosti.
    • (17) 2D animace a její interaktivita – Tip k matuře: Dalo by se říci, že téma lze hrnout v rámci historického kontextu – Od bratrů Lumièrů až po dnešní objektově orientované systémy. Interaktivita proměnila obyčejné video v něco, s čím uživatel komunikuje – pomocí intuitivního ovládání. Tím se však ale musel změnit způsob uvažování v tvorbě animací. Z pohledu grafické tvorby vzešla řada výzev na snímací zařízení (mocap), 3D skenery a množství přenášených dat versus moderní percepční kompresní metody. Občas nám k tvorbě velkého množství dat také pomáhají nástroje pro klíčování. Samozřejmě úplně nový svět se otevřel pomocí herního průmyslu. Webovou animaci jsem do tématu zařadil proto, že na ní lze nejjednodušeji demonstrovat tvorba a chování objektů při různých instancích. Přechody = morphing. Animace = klíčování s tweeningem a proces interpolace rozfázování vlastností instance. Pokud jste však více zaměřeni na produkty Adobe, tak se připravte na relativně vysoké licenční poplatky. Ovšem dnešní doba AI naučila tvůrce si za pohodlí připlatit a je docela možné, že řada aplikací časem zlevní, pokud se nebude evolučně posouvat. A nyní chápete, že třeba i tyto maturitní otázky budou muset být časem doplněny o téma strojového učení pro generování grafiky a animací. A nakonec, ne nespletl jsem se a patří to sem, je pochopení, jak funguje video (kontejner, kodeky, datové proudy).
    • (18) 3D grafika – Tip k matuře: Rozhodl jsem se vás nesměrovat k praktické demonstraci, ale pokud byste chtěli, můžete si zasednout k počítači a předvést nějaké CSG metody (tvarování podobně jako logické operace u vektorové tvorby). Ale jaký SW byste rádi? Online nástroje jsou často závislé na přihlášení uživatele (aspoň Google). Zde by mohl být problém a chtělo by to v přípravě se přihlásit. Tak raději pojďme cestou teoretického popisu a principů. K tomu máte koneckonců nejblíže, když se snažíte zorientovat na trhu s grafickými kartami. Znáte technologie pixelshaderů a různých realtime frameworků a enginů. Je třeba však znát elementární pojmy jako vertex, polygon, wireframe apod. Jejich chování lze popsat pojmy jako projekce, transformace, vlastnostmi prvků scény a simulace fyzikálních prostředí. Každopádně toto všechno vzešlo z poznatků matematiků na amerických univerzitách – vznikly důležité algoritmy: Bresenhamův (rasterizace), Midpoint (průběh kružnic), Flood fill (výplně uzavřených objektů), Phongovo stínování … nicméně podívejte se na video v otázce 20, jak na 3D transformaci pomocí 2D nástroje. Co tedy musí shader všechno udělat, aby koule vypadala hladce :-). A pamatujte si, že grafická karta vždy nakonec musí jakýkoliv render rozrastrovat pro výstupní zařízení.
    • (19) Práce s prostorovými daty a geoinformatika – Tip k matuře: Aplikace pracující s geografickými daty jsou na vzestupu. Díky CAD přístupům vznikají komplexní datové systémy určené k tvorbě statistik nebo vizualizace. Tak například některé analytické operace pro realitní makléře umožní určit relativně přesně výměru ze samotné katastrální mapy. Všimněte si té podobnosti při klasickém CAD a CAM aplikaci. Soustruh vyrobí výrobek podle přesného výkresu. No nicméně složitost tématu je úměrná složitosti matematických znalostí v praktických úlohách (SŠ ale i více i na VŠ). Vhodné by tedy bylo mít alespoň základní znalosti z analytické geometrie. Například přímá úměra (podobnost trojúhelníků) při interpolaci hodnot. Samozřejmě u zkoušky vás nikdo moc nechce trápit matematikou, ale pochopením principů si uvědomíte, jak problematické je znázornit sférický prostor (3D) do 2D roviny mapy. Důležité pojmy jako zobrazení a projekce po vás taky nikdo nechce, ale má to tedy důsledky v charakteru výsledku vaší práce. Pokud pracujete s daty nad mapou velkého měřítka (plány – malá území) je všechno v pořádku a nejvhodnější systémy souřadnic jsou xy ty pravoúhlé. Naopak mapy malých měřítek (mapa kontinentu) už zahrnuje matematické transformace (zobrazení a projekce) a to kvůli tvaru Země (geoid, ale pro mapy používáme zjednodušující rotační elipsoid) a raději volte WGS-84 (souřadnice GPS). V geoinformatice kvůli těmto obtížím jsou zavedeny prostorové klíče závislé ještě na souřadném systému (SRID). Databázový engine, který to umožňuje provádí složité matematické výpočty přesných pozic pomocí abstrakce. Abych vám na závěr uklidnil, všechna zkreslení a problémy hravě eliminuje použitý GIS software (např. QCAD či Leaflet a SŘBD podporující prostorové klíče a operace). Na konec si pohlídejte to, zda mluvíte o prostorových datech a nebo neprostorových (atribuční vrstvě – např. bod geotagován jako roh chodníku, lampa, roh pozemku, hodnota znečištění, osa kanalizace atd.).
    • (20) Algoritmizace v grafice – generování a image processing – Tip k matuře: Zde asi bude platit vaše zkušenost, když jste pracovali na jednotlivých úlohách. Vždy vám bylo jasné, co se očekává a co to obnáší. Toto téma jsem zvolil kvůli univerzalitě vašich znalostí (HTML, JS, PHP, …) a na jednoduchých konceptech grafické tvorby a manipulace s grafickými soubory lze demonstrovat praktické využití – interaktivní hra, vizualizace registračního systému na koncertu či LAN Párty, operace s multimédii v redakčních systémech (např. WordPress) a nástrojů online editorů, které si vlastně můžete sami naprogramovat (např. vlastní dávkový editor vodotisků pro fotky). Celá řada nápadů jen čeká. Na co si dát pozor: překreslování plátna u canvasu, funkce header nebo uložení obrazu do souboru v PHP. U ústní zkoušky vás nebudeme zkoušet na počítači a nemusíte být schopni napsat celý kód. Jde jen o koncepty práce, které vysvětlíte.

Doporučené zdroje

  1. PÁSZTO, Vít a Zdeňka KRIŠOVÁ. Počítačová grafika. 1. vyd. Olomouc: Moravská vysoká škola Olomouc, 2018. ISBN 978-80-7455-089-8. Dostupné z: https://edulam.cz/wp-content/uploads/2020/10/Po%C4%8D%C3%ADta%C4%8Dov%C3%A1-grafika.pdf
  2. WIKISOFIA. Grafický formát [online]. [cit. 2026-05-16]. Dostupné z: https://wikisofia.cz/wiki/Grafick%C3%BD_form%C3%A1t
  3. HORÁK, Jan. Prostorové databáze [online]. Ostrava: Vysoká škola báňská – Technická univerzita Ostrava, 2020 [cit. 2026-05-16]. Dostupné z: https://homel.vsb.cz/~hor10/Vyuka/Spatial%20Databases/SDS72020text.pdf
  4. W3SCHOOLS. HTML Canvas Graphics. In: W3Schools [online]. [cit. 2026-05-16]. Dostupné z: https://www.w3schools.com/html/html5_canvas.asp
  5. PHP DOCUMENTATION GROUP. GD and Image Functions. In: PHP Manual [online]. [cit. 2026-05-16]. Dostupné z: https://www.php.net/manual/en/book.image.php
  6. PELIKÁN, Josef. 3D počítačová grafika na PC [online]. Praha: Matematicko-fyzikální fakulta Univerzity Karlovy, Katedra softwaru a výuky informatiky, 2003 [cit. 2026-05-16]. Dostupné z: https://cgg.mff.cuni.cz/~pepca/lectures/pdf/Grafika2003.pdf
  7. KAČMAŘÍK, Michal. Algoritmy nad rastrovými daty [online]. Ostrava: Vysoká škola báňská – Technická univerzita Ostrava, 2022 [cit. 2026-05-16]. Dostupné z: https://geoinformatika-1.vsb.cz/programovani_gis1/prednasky/09_algoritmy_rastr.pdf
  8. SZTURCOVÁ, Daniela. Algoritmizace prostorových úloh [online]. Ostrava: Vysoká škola báňská – Technická univerzita Ostrava [cit. 2026-05-16]. Dostupné z: https://gisak.vsb.cz/wikivyuka/images/c/c0/Vectory.pdf
  9. MASARYKOVA UNIVERZITA, Fakulta informatiky. Grafy [online]. Brno, 2010 [cit. 2026-05-16]. Dostupné z: https://is.muni.cz/el/fi/podzim2010/IB111/um/grafy.pdf

Doporučený software

Přílohy