Grafika a Vykreslování v Mobilním Vývoji: Co to Je, Jak Proces Funguje a Jak to Pracuje

Grafika a Vykreslování: Základy CPU a GPU

Vykreslování je proces převodu dat (vrcholy, textury, shadery) na obraz na obrazovce. Na mobilních zařízeních může být vykreslování prováděno na CPU (centrální procesor) nebo GPU (grafický procesor). Volba závisí na typu grafiky a požadovaném výkonu.

CPU vs GPU Rendering

CPU Rendering — sekvenční zpracování. Každá instrukce je prováděna jedna po druhé. CPU je optimalizován pro logiku a větvení. Canvas (Android), Core Graphics (iOS) pracují na CPU. Výhoda: přesnost, podpora komplexních algoritmů. Nevýhoda: pomalé při velkém počtu grafických prvků. GPU Rendering — paralelní zpracování. Tisíce jader GPU zpracovávají současně vrcholy a pixely. Metal (iOS), Vulkan (Android), OpenGL ES (obě platformy) používají GPU. GPU Rendering je povinný pro 3D, animace 60 FPS a komplexní efekty. Moderní UI frameworky (SwiftUI, Jetpack Compose, Flutter) používají GPU standardně.

Shadery (Vertex, Fragment)

Shadery jsou programy prováděné na GPU. Určují, jak každý objekt vypadá na obrazovce. Grafická pipeline se skládá z několika fází, ale dva hlavní shadery — Vertex Shader a Fragment Shader — se používají v 99% případů. Shadery se píší v GLSL (OpenGL), MSL (Metal) nebo HLSL (DirectX).

Vertex Shader — zpracovává vrcholy 3D modelu. Vstup: pozice vrcholu, normála, UV souřadnice. Výstup: transformovaná pozice (model → pohled → projekce). Vertex Shader nemůže vytvářet nebo mazat vrcholy — pouze je transformovat. Fragment Shader — vypočítává barvu každého pixelu (fragmentu) v rasterizovaném trojúhelníku. Vstup: interpolovaná data z Vertex Shader (UV, normály). Výstup: barva RGBA. Fragment Shader je zodpovědný za texturování, osvětlení (Phong, PBR) a post-efekty. Moderní enginy (Unity, Unreal) generují shadery automaticky, ale porozumění pipeline je nezbytné pro optimalizaci.

Offscreen Rendering — vykreslování ne na obrazovku, ale do dočasného bufferu. Používá se pro: 1) efekty (blur, shadow), 2) renderování do textury, 3) předvýpočet snímků. Offscreen Rendering je nákladný: přepínání kontextu a dodatečný průchod vykreslováním. iOS automaticky zapíná Offscreen Rendering pro stíny a cornerRadius. Rasterizace — převod vektorových dat (vrcholy + shadery) na pixely. Rasterizátor určuje, které fragmenty patří do trojúhelníku a volá Fragment Shader. Kompozice — skládání vrstev do konečného obrazu. Core Animation komponuje CALayer, Android komponuje vrstvy SurfaceFlinger.

CPU — pro logiku a Canvas. GPU — pro grafiku a animace. IT Sectr doporučuje používat GPU rendering pro jakýkoli pohyblivý obsah (animace, přechody, rolování) — to zajišťuje stabilních 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apple framework pro GPU-akcelerované animované vykreslování. Základním prvkem je CALayer: obdélníková oblast s obsahem (obrázek, barva, text). CALayer spravuje: pozici, velikost, barvu pozadí, okraj, stín, cornerRadius a transformace (2D a 3D). Core Animation automaticky komponuje vrstvy na GPU — vývojář nemusí psát grafický kód.

CALayer

CALayer — lehký objekt (ne pohled), který obsahuje bitmapu obsahu. UIButton, UILabel, UIImageView — všechny interně používají CALayer. Vlastnosti: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Animace vlastností CALayer probíhá na GPU — to je hlavní výhoda Core Animation. CALayer.shouldRasterize — zapíná rasterizaci vrstvy pro ukládání komplexní grafiky do mezipaměti. CAShapeLayer — podtřída pro vektorovou grafiku: kreslí cestu na GPU. Používá se pro ukazatele průběhu, grafy, masky a animaci tvarů. CAShapeLayer.path — animovatelná vlastnost (animace morfingu tvarů).

Kompozice v Core Animation — proces skládání CALayer do konečného snímku. Každý CALayer je samostatná textura na GPU. Kompozice probíhá v Render Server (samostatný proces). Vlastnosti vyžadující kompozici: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Čím méně vrstev — tím rychlejší kompozice.

Optimalizace (Overdraw, Offscreen Rendering)

Overdraw — situace, kdy je stejný pixel malován několikrát v jednom snímku. Příklad: červené pozadí → modrý obdélník → text. Středový pixel je kreslen 3krát. Overdraw je hlavní příčinou zpomalení UI, zejména na starších zařízeních. iOS: Debug Color Blended Layers (Xcode) — červené oblasti = smíšené (overdraw). Android: Debug GPU Overdraw (Možnosti pro vývojáře) — barvy od modré (1x) po červenou (3x+).

Overdraw

Jak snížit Overdraw: 1) použijte opaque = true pro neprůhledné pohledy (iOS). 2) Android — použijte android:windowBackground pouze jednou. 3) Odstraňte neviditelné vrstvy. 4) Použijte vrstvenou architekturu: pozadí (1 průchod) → obsah (2 průchody). 5) Vyhněte se zbytečnému clipChildren a clipToPadding. Offscreen Rendering — vykreslování do bufferu před obrazovkou. Spouštěče: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — žluté oblasti = offscreen. Na Androidu: profile GPU rendering — zkontrolujte délku pruhů.

Vektorová Grafika (SVG, Vector Drawable)

Vektorová grafika — obrázky popsané matematickými vzorci (cesty, křivky, výplně). Vektory neztrácejí kvalitu při změně měřítka — ideální pro ikony a ilustrace v mobilních aplikacích.

SVG (Scalable Vector Graphics) — standard W3C. Není přímo podporováno v mobilních OS. Převádí se: na iOS — do PDF vector assets (Xcode 12+), na Android — do Vector Drawable XML. Vector Drawable — Android formát. Definováno v XML: <vector> s <path> a <group>. Podporuje animaci prostřednictvím AnimatedVectorDrawable. PDF Vector Assets (iOS) — vektorová PDF v Assets.xcassets. Xcode je kompiluje do textur optimalizovaných pro GPU. SVG a Vector Drawable nepodporují komplexní efekty (blur, gradient mesh). Pro fotky a přechody používejte rastrové PNG/WebP.