Grafika i Renderovanje u Mobilnom Razvoju: Šta je, Kako Proces Funkcioniše i Kako Radi

Grafika i Renderovanje: Osnove CPU i GPU

Renderovanje je proces pretvaranja podataka (temena, teksture, šejderi) u sliku na ekranu. Na mobilnim uređajima, renderovanje se može izvršiti na CPU (centralnom procesoru) ili GPU (grafičkom procesoru). Izbor zavisi od vrste grafike i potrebnih performansi.

CPU vs GPU Rendering

CPU Rendering — sekvencijalna obrada. Svaka instrukcija se izvršava jedna za drugom. CPU je optimizovan za logiku i grananje. Canvas (Android), Core Graphics (iOS) rade na CPU. Prednost: preciznost, podrška složenim algoritmima. Nedostatak: sporo sa velikim brojem grafičkih elemenata. GPU Rendering — paralelna obrada. Hiljade GPU jezgara istovremeno obrađuju temena i piksele. Metal (iOS), Vulkan (Android), OpenGL ES (obe platforme) koriste GPU. GPU Rendering je obavezan za 3D, animacije od 60 FPS i složene efekte. Moderni UI okviri (SwiftUI, Jetpack Compose, Flutter) podrazumevano koriste GPU.

Šejderi (Vertex, Fragment)

Šejderi su programi koji se izvršavaju na GPU. Oni određuju kako svaki objekat izgleda na ekranu. Grafički pipeline se sastoji od nekoliko faza, ali dva glavna šejdera — Vertex Shader i Fragment Shader — koriste se u 99% slučajeva. Šejderi se pišu u GLSL (OpenGL), MSL (Metal) ili HLSL (DirectX).

Vertex Shader — obrađuje temena 3D modela. Ulaz: pozicija temena, normala, UV koordinate. Izlaz: transformisana pozicija (model → pogled → projekcija). Vertex Shader ne može da kreira ili briše temena — samo da ih transformiše. Fragment Shader — izračunava boju svakog piksela (fragmenta) u rasterizovanom trouglu. Ulaz: interpolirani podaci iz Vertex Shader-a (UV, normale). Izlaz: RGBA boja. Fragment Shader je odgovoran za teksturiranje, osvetljenje (Phong, PBR) i post-efekte. Moderni motori (Unity, Unreal) automatski generišu šejdere, ali razumevanje pipeline-a je neophodno za optimizaciju.

Offscreen Rendering — renderovanje ne na ekran, već u privremeni bafer. Koristi se za: 1) efekte (blur, shadow), 2) renderovanje u teksturu, 3) prethodno izračunavanje frejmova. Offscreen Rendering je skup: prebacivanje konteksta i dodatni prolaz renderovanja. iOS automatski uključuje Offscreen Rendering za senke i cornerRadius. Rasterizacija — pretvaranje vektorskih podataka (temena + šejderi) u piksele. Rasterizator određuje koji fragmenti pripadaju trouglu i poziva Fragment Shader. Kompozicija — sastavljanje slojeva u konačnu sliku. Core Animation komponuje CALayer-e, Android komponuje SurfaceFlinger slojeve.

CPU — za logiku i Canvas. GPU — za grafiku i animacije. IT Sectr preporučuje korišćenje GPU renderovanja za bilo koji pokretni sadržaj (animacije, prelazi, skrol) — ovo obezbeđuje stabilnih 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apple-ov okvir za animirano renderovanje ubrzano GPU. Osnovni element je CALayer: pravougaona oblast sa sadržajem (slika, boja, tekst). CALayer upravlja: pozicijom, veličinom, bojom pozadine, border-om, senkom, cornerRadius i transformacijama (2D i 3D). Core Animation automatski komponuje slojeve na GPU — developer ne mora da piše grafički kod.

CALayer

CALayer — lagani objekat (ne view) koji sadrži bitmap sadržaja. UIButton, UILabel, UIImageView — svi interno koriste CALayer. Svojstva: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Animacija svojstava CALayer se odvija na GPU — ovo je glavna prednost Core Animation. CALayer.shouldRasterize — uključuje rasterizaciju sloja za keširanje složene grafike. CAShapeLayer — podklasa za vektorsku grafiku: crta putanju na GPU. Koristi se za trake napretka, grafikone, maske i animaciju oblika. CAShapeLayer.path — animirajuće svojstvo (animacija morfinga oblika).

Kompozicija u Core Animation — proces sastavljanja CALayer-a u konačni frejm. Svaki CALayer je zasebna tekstura na GPU. Kompozicija se odvija u Render Server-u (odvojeni proces). Svojstva koja zahtevaju kompoziciju: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Što manje slojeva — brža kompozicija.

Optimizacija (Overdraw, Offscreen Rendering)

Overdraw — situacija u kojoj se isti piksel boji više puta u jednom frejmu. Primer: crvena pozadina → plavi pravougaonik → tekst. Centralni piksel se crta 3 puta. Overdraw je glavni uzrok usporavanja UI, posebno na starijim uređajima. iOS: Debug Color Blended Layers (Xcode) — crvene oblasti = izmešano (overdraw). Android: Debug GPU Overdraw (Opcije za programere) — boje od plave (1x) do crvene (3x+).

Overdraw

Kako smanjiti Overdraw: 1) koristite opaque = true za neprozirne view-ove (iOS). 2) Android — koristite android:windowBackground samo jednom. 3) Uklonite nevidljive slojeve. 4) Koristite slojevitu arhitekturu: pozadina (1 prolaz) → sadržaj (2 prolaza). 5) Izbegavajte nepotrebne clipChildren i clipToPadding. Offscreen Rendering — renderovanje u bafer pre ekrana. Okidači: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — žute oblasti = offscreen. Na Android-u: profile GPU rendering — proverite dužinu traka.

Vektorska Grafika (SVG, Vector Drawable)

Vektorska grafika — slike opisane matematičkim formulama (putanje, krive, popune). Vektori ne gube kvalitet pri skaliranju — idealno za ikonice i ilustracije u mobilnim aplikacijama.

SVG (Scalable Vector Graphics) — W3C standard. Nije direktno podržan u mobilnim OS. Konvertuje se: na iOS — u PDF vektorske resurse (Xcode 12+), na Android — u Vector Drawable XML. Vector Drawable — Android format. Definiše se u XML: <vector> sa <path> i <group>. Podržava animaciju putem AnimatedVectorDrawable. PDF Vector Assets (iOS) — vektorski PDF-ovi u Assets.xcassets. Xcode ih kompajlira u GPU-optimizovane teksture. SVG i Vector Drawable ne podržavaju složene efekte (blur, gradient mesh). Za fotografije i gradijente koristite raster PNG/WebP.