Grafica e Rendering nello Sviluppo Mobile: Cos'è, Come Funziona il Processo e Come Opera

Grafica e Rendering: Fondamenti di CPU e GPU

Rendering è il processo di conversione dei dati (vertici, texture, shader) in un'immagine sullo schermo. Sui dispositivi mobili, il rendering può essere eseguito sulla CPU (processore centrale) o sulla GPU (processore grafico). La scelta dipende dal tipo di grafica e dalle prestazioni richieste.

CPU vs GPU Rendering

CPU Rendering — elaborazione sequenziale. Ogni istruzione viene eseguita una dopo l'altra. La CPU è ottimizzata per la logica e il branching. Canvas (Android), Core Graphics (iOS) funzionano sulla CPU. Vantaggio: precisione, supporto per algoritmi complessi. Svantaggio: lento con un grande numero di elementi grafici. GPU Rendering — elaborazione parallela. Migliaia di core GPU elaborano vertici e pixel simultaneamente. Metal (iOS), Vulkan (Android), OpenGL ES (entrambe le piattaforme) utilizzano la GPU. Il GPU Rendering è obbligatorio per 3D, animazioni a 60 FPS ed effetti complessi. I framework UI moderni (SwiftUI, Jetpack Compose, Flutter) utilizzano la GPU per impostazione predefinita.

Shader (Vertex, Fragment)

Shader sono programmi eseguiti sulla GPU. Determinano l'aspetto di ogni oggetto sullo schermo. La pipeline grafica è composta da diverse fasi, ma due shader principali — Vertex Shader e Fragment Shader — sono utilizzati nel 99% dei casi. Gli shader sono scritti in GLSL (OpenGL), MSL (Metal) o HLSL (DirectX).

Vertex Shader — elabora i vertici di un modello 3D. Input: posizione del vertice, normale, coordinate UV. Output: posizione trasformata (modello → vista → proiezione). Vertex Shader non può creare o eliminare vertici — solo trasformarli. Fragment Shader — calcola il colore di ogni pixel (frammento) in un triangolo rasterizzato. Input: dati interpolati dal Vertex Shader (UV, normali). Output: colore RGBA. Fragment Shader è responsabile della texture, dell'illuminazione (Phong, PBR) e dei post-effetti. I motori moderni (Unity, Unreal) generano shader automaticamente, ma comprendere la pipeline è necessario per l'ottimizzazione.

Offscreen Rendering — rendering non sullo schermo ma in un buffer temporaneo. Utilizzato per: 1) effetti (blur, shadow), 2) render-to-texture, 3) pre-calcolo dei frame. Offscreen Rendering è costoso: cambio di contesto e un passaggio di rendering aggiuntivo. iOS abilita automaticamente Offscreen Rendering per ombre e cornerRadius. Rasterizzazione — conversione di dati vettoriali (vertici + shader) in pixel. Il Rasterizer determina quali frammenti appartengono a un triangolo e invoca il Fragment Shader. Compositing — assemblaggio dei layer nell'immagine finale. Core Animation compone i CALayer, Android compone i layer SurfaceFlinger.

CPU — per logica e Canvas. GPU — per grafica e animazioni. IT Sectr raccomanda di utilizzare il GPU rendering per qualsiasi contenuto in movimento (animazioni, transizioni, scroll) — questo garantisce 60 FPS stabili.

Core Animation (CALayer, CAShapeLayer)

Core Animation — il framework di Apple per il rendering animato accelerato dalla GPU. L'elemento base è CALayer: un'area rettangolare con contenuto (immagine, colore, testo). CALayer gestisce: posizione, dimensione, colore di sfondo, bordo, ombra, cornerRadius e trasformazioni (2D e 3D). Core Animation compone automaticamente i layer sulla GPU — lo sviluppatore non deve scrivere codice grafico.

CALayer

CALayer — un oggetto leggero (non una view) che contiene un bitmap del contenuto. UIButton, UILabel, UIImageView — tutti utilizzano CALayer internamente. Proprietà: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. L'animazione delle proprietà di CALayer avviene sulla GPU — questo è il principale vantaggio di Core Animation. CALayer.shouldRasterize — abilita la rasterizzazione del layer per la cache di grafica complessa. CAShapeLayer — una sottoclasse per la grafica vettoriale: disegna un percorso sulla GPU. Utilizzato per barre di progresso, grafici, maschere e animazione di forme. CAShapeLayer.path — una proprietà animabile (animazione di morphing di forme).

Compositing in Core Animation — il processo di assemblaggio dei CALayer nel frame finale. Ogni CALayer è una texture separata sulla GPU. Il compositing avviene nel Render Server (un processo separato). Proprietà che richiedono compositing: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Meno layer ci sono — più veloce è il compositing.

Ottimizzazione (Overdraw, Offscreen Rendering)

Overdraw — una situazione in cui lo stesso pixel viene dipinto più volte in un frame. Esempio: sfondo rosso → rettangolo blu → testo. Il pixel centrale viene disegnato 3 volte. Overdraw è la causa principale di lag nell'interfaccia, specialmente sui dispositivi più vecchi. iOS: Debug Color Blended Layers (Xcode) — aree rosse = mescolato (overdraw). Android: Debug GPU Overdraw (Opzioni Sviluppatore) — colori dal blu (1x) al rosso (3x+).

Overdraw

Come ridurre Overdraw: 1) utilizzare opaque = true per le view non trasparenti (iOS). 2) Android — utilizzare android:windowBackground una sola volta. 3) Rimuovere i layer invisibili. 4) Utilizzare un'architettura a livelli: sfondo (1 passaggio) → contenuto (2 passaggi). 5) Evitare clipChildren e clipToPadding non necessari. Offscreen Rendering — rendering in un buffer prima dello schermo. Trigger: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — aree gialle = offscreen. Su Android: profile GPU rendering — controllare la lunghezza delle barre.

Grafica Vettoriale (SVG, Vector Drawable)

Grafica Vettoriale — immagini descritte da formule matematiche (percorsi, curve, riempimenti). I vettori non perdono qualità quando vengono ridimensionati — ideale per icone e illustrazioni nelle applicazioni mobili.

SVG (Scalable Vector Graphics) — standard W3C. Non supportato direttamente nei sistemi operativi mobili. Convertito: su iOS — in PDF vector assets (Xcode 12+), su Android — in Vector Drawable XML. Vector Drawable — formato Android. Definito in XML: <vector> con <path> e <group>. Supporta l'animazione tramite AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDF vettoriali in Assets.xcassets. Xcode li compila in texture ottimizzate per la GPU. SVG e Vector Drawable non supportano effetti complessi (blur, gradient mesh). Per foto e gradienti, utilizzare PNG/WebP raster.