Grafică și Randare în Dezvoltarea Mobilă: Ce Este, Cum Funcționează Procesul și Cum Operează

Grafică și Randare: Fundamentele CPU și GPU

Randarea este procesul de conversie a datelor (vârfuri, texturi, shader-e) într-o imagine pe ecran. Pe dispozitivele mobile, randarea poate fi efectuată pe CPU (procesorul central) sau GPU (procesorul grafic). Alegerea depinde de tipul de grafică și de performanța necesară.

CPU vs GPU Rendering

CPU Rendering — procesare secvențială. Fiecare instrucțiune este executată una după alta. CPU este optimizat pentru logică și ramificare. Canvas (Android), Core Graphics (iOS) funcționează pe CPU. Avantaj: precizie, suport pentru algoritmi complecși. Dezavantaj: lent cu un număr mare de elemente grafice. GPU Rendering — procesare paralelă. Mii de nuclee GPU procesează vârfurile și pixelii simultan. Metal (iOS), Vulkan (Android), OpenGL ES (ambele platforme) folosesc GPU. GPU Rendering este obligatoriu pentru 3D, animații la 60 FPS și efecte complexe. Framework-urile UI moderne (SwiftUI, Jetpack Compose, Flutter) folosesc GPU implicit.

Shader-e (Vertex, Fragment)

Shader-ele sunt programe executate pe GPU. Ele determină cum arată fiecare obiect pe ecran. Pipeline-ul grafic constă din mai multe etape, dar două shader-e principale — Vertex Shader și Fragment Shader — sunt folosite în 99% din cazuri. Shader-ele sunt scrise în GLSL (OpenGL), MSL (Metal) sau HLSL (DirectX).

Vertex Shader — procesează vârfurile unui model 3D. Intrare: poziția vârfului, normala, coordonatele UV. Ieșire: poziția transformată (model → vedere → proiecție). Vertex Shader nu poate crea sau șterge vârfuri — doar să le transforme. Fragment Shader — calculează culoarea fiecărui pixel (fragment) într-un triunghi rasterizat. Intrare: date interpolate de la Vertex Shader (UV, normale). Ieșire: culoare RGBA. Fragment Shader este responsabil pentru texturare, iluminare (Phong, PBR) și post-efecte. Motoarele moderne (Unity, Unreal) generează shader-e automat, dar înțelegerea pipeline-ului este necesară pentru optimizare.

Offscreen Rendering — randarea nu pe ecran, ci într-un buffer temporar. Folosit pentru: 1) efecte (blur, shadow), 2) randare în textură, 3) pre-calcularea cadrelor. Offscreen Rendering este costisitor: comutare de context și o trecere suplimentară de randare. iOS activează automat Offscreen Rendering pentru umbre și cornerRadius. Rasterizare — conversia datelor vectoriale (vârfuri + shader-e) în pixeli. Rasterizatorul determină care fragmente aparțin unui triunghi și invocă Fragment Shader. Compozitare — asamblarea straturilor în imaginea finală. Core Animation compune CALayer-uri, Android compune straturi SurfaceFlinger.

CPU — pentru logică și Canvas. GPU — pentru grafică și animații. IT Sectr recomandă utilizarea GPU rendering pentru orice conținut în mișcare (animații, tranziții, derulare) — aceasta asigură 60 FPS stabili.

Core Animation (CALayer, CAShapeLayer)

Core Animation — framework-ul Apple pentru randarea animată accelerată de GPU. Elementul de bază este CALayer: o zonă dreptunghiulară cu conținut (imagine, culoare, text). CALayer gestionează: poziția, dimensiunea, culoarea de fundal, bordura, umbra, cornerRadius și transformările (2D și 3D). Core Animation compune automat straturile pe GPU — dezvoltatorul nu trebuie să scrie cod grafic.

CALayer

CALayer — un obiect ușor (nu o vedere) care conține un bitmap al conținutului. UIButton, UILabel, UIImageView — toate folosesc CALayer intern. Proprietăți: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Animația proprietăților CALayer are loc pe GPU — acesta este principalul avantaj al Core Animation. CALayer.shouldRasterize — activează rasterizarea stratului pentru cache-ul graficii complexe. CAShapeLayer — o subclasă pentru grafică vectorială: desenează un drum pe GPU. Folosit pentru bare de progres, grafice, măști și animație de forme. CAShapeLayer.path — o proprietate animabilă (animație de morfing a formelor).

Compozitarea în Core Animation — procesul de asamblare a CALayer-urilor în cadrul final. Fiecare CALayer este o textură separată pe GPU. Compozitarea are loc în Render Server (un proces separat). Proprietăți care necesită compozitare: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Cu cât mai puține straturi — cu atât mai rapidă compozitarea.

Optimizare (Overdraw, Offscreen Rendering)

Overdraw — o situație în care același pixel este pictat de mai multe ori într-un cadru. Exemplu: fundal roșu → dreptunghi albastru → text. Pixelul central este desenat de 3 ori. Overdraw este principala cauză a întârzierii interfeței, în special pe dispozitivele mai vechi. iOS: Debug Color Blended Layers (Xcode) — zonele roșii = amestecat (overdraw). Android: Debug GPU Overdraw (Opțiuni Dezvoltator) — culori de la albastru (1x) la roșu (3x+).

Overdraw

Cum să reduceți Overdraw: 1) utilizați opaque = true pentru vizualizările netransparente (iOS). 2) Android — utilizați android:windowBackground o singură dată. 3) Eliminați straturile invizibile. 4) Utilizați o arhitectură stratificată: fundal (1 trecere) → conținut (2 treceri). 5) Evitați clipChildren și clipToPadding inutile. Offscreen Rendering — randarea într-un buffer înainte de ecran. Declanșatori: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — zonele galbene = offscreen. Pe Android: profile GPU rendering — verificați lungimea barelor.

Grafică Vectorială (SVG, Vector Drawable)

Grafica Vectorială — imagini descrise prin formule matematice (drumuri, curbe, umpleri). Vectorii nu pierd calitatea la scalare — ideal pentru pictograme și ilustrații în aplicațiile mobile.

SVG (Scalable Vector Graphics) — standard W3C. Nu este suportat direct în sistemele de operare mobile. Convertit: pe iOS — în PDF vector assets (Xcode 12+), pe Android — în Vector Drawable XML. Vector Drawable — format Android. Definit în XML: <vector> cu <path> și <group>. Suportă animație prin AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDF-uri vectoriale în Assets.xcassets. Xcode le compilează în texturi optimizate pentru GPU. SVG și Vector Drawable nu suportă efecte complexe (blur, gradient mesh). Pentru fotografii și gradiente, utilizați PNG/WebP raster.