Compositing: cos'è, livelli e principio di funzionamento

Cos'è il Compositing?

Compositing è la fase finale della pipeline grafica in cui tutti i livelli renderizzati separatamente (scene 3D, elementi UI, video, interfaccia di sistema) vengono combinati in un'unica immagine per la visualizzazione sullo schermo. Ogni livello può avere il proprio colore, trasparenza (alpha), posizione e ordine di impilamento.

Nel contesto dello sviluppo mobile, il compositing è importante per l'interfaccia utente: finestre, pulsanti, testo, icone — tutti questi elementi vengono composti in un'unica scena. Il sistema di compositing gestisce l'ordine di disegno (z-order), la corretta sovrapposizione di elementi semitrasparenti e l'animazione di transizione tra gli stati dell'interfaccia.

Compositing nella pipeline grafica

Nella pipeline grafica, il compositing avviene dopo il completamento di tutti i passaggi shader e della rasterizzazione. La GPU prende i livelli pronti dai framebuffer, applica operazioni di blending e scrive il risultato nel framebuffer principale (front buffer) per l'invio al display.

Come funziona il Compositing?

Compositing utilizza la miscelazione pixel per pixel (blending) dei colori provenienti da diversi livelli. Ogni pixel dell'immagine di output viene calcolato in base ai colori dei pixel dei livelli sovrapposti, tenendo conto della trasparenza (canale alpha) e della modalità di miscelazione selezionata.

Canale alpha e trasparenza

Ogni livello contiene un canale alpha (il quarto componente del colore RGBA) che determina la sua opacità. Alpha = 1.0 — completamente opaco, alpha = 0.0 — completamente trasparente. Alpha blending calcola il colore del pixel come somma ponderata dei colori dei livelli anteriore (source) e posteriore (destination): risultato = source * alpha + dest * (1 - alpha).

Ordine di disegno (algoritmo del pittore)

Il compositing viene eseguito dal livello più lontano a quello più vicino (back-to-front). Prima viene renderizzato il livello di sfondo, poi ogni livello successivo viene sovrapposto al precedente tenendo conto della sua trasparenza. Z-order determina quale livello è sopra e coprirà quelli sottostanti.

Algoritmi di Compositing

Compositing supporta varie modalità di miscelazione (blend modes) che determinano come i colori dei livelli vengono combinati. Ogni modalità produce un effetto visivo diverso e ha i propri costi computazionali.

Premultiplied Alpha

Nella modalità premultiplied alpha, i canali colore vengono memorizzati già moltiplicati per il canale alpha (RGB × A). Questo elimina la necessità di moltiplicare in ogni operazione di blending, accelerando il compositing. Premultiplied alpha è il formato standard per il compositing GPU in iOS Core Animation e Android HWUI.

Compositing nei Sistemi Operativi Mobili

Ogni sistema operativo mobile ha il proprio sistema di compositing ottimizzato per le proprie piattaforme hardware. Compositing nei sistemi operativi mobili è responsabile del rendering dell'intera interfaccia utente.

iOS: Core Animation + Metal

Su iOS, il compositing è gestito da Core Animation — un sistema di alto livello che funziona su Metal o OpenGL ES. Core Animation crea un layer tree (albero di livelli) che viene poi composto nell'immagine finale. Core Animation determina automaticamente quali livelli sono cambiati e ridisegna solo quelli (compositing incrementale), riducendo al minimo il carico sulla GPU.

Android: SurfaceFlinger + HWUI

Su Android, il compositing è eseguito da SurfaceFlinger — un servizio di sistema che combina superfici (surfaces) da varie applicazioni e dall'interfaccia di sistema. SurfaceFlinger utilizza HWC (Hardware Composer) per delegare parte del lavoro di compositing all'hardware dedicato del controller del display.

Prestazioni del Compositing

Le prestazioni del compositing sono un collo di bottiglia comune nelle applicazioni mobili, specialmente con animazioni complesse e molti livelli semitrasparenti sovrapposti. Ogni livello aggiuntivo richiede lettura, miscelazione e scrittura di pixel in memoria.

Fattori che influenzano le prestazioni

• Numero di livelli — ogni livello richiede un passaggio di blending separato. Ridurre il numero di livelli accelera il compositing linearmente.
• Risoluzione dei livelli — livelli ad alta risoluzione aumentano il numero di pixel elaborati. Utilizzare la dimensione minima possibile dei buffer offscreen.
• Trasparenza e overdraw — i livelli semitrasparenti richiedono la lettura dei pixel sottostanti, aumentando la larghezza di banda.
• CPU compositing — se il compositing viene eseguito sulla CPU (software rendering), le prestazioni calano drasticamente. Il compositing GPU è sempre preferibile.

GPU Compositing vs CPU Compositing

I dispositivi mobili moderni eseguono il compositing sulla GPU tramite unità di blending specializzate. GPU compositing utilizza unità ROP parallele e filtri di texture per una rapida miscelazione dei pixel. Il CPU compositing viene utilizzato solo in rari casi (dispositivi vecchi, test).

Ottimizzazione del Compositing

L'ottimizzazione del compositing è uno dei compiti principali nello sviluppo di interfacce mobili. La fluidità dell'interfaccia (60 FPS) dipende direttamente dall'efficienza della combinazione dei livelli.

Principali metodi di ottimizzazione

• Minimizzazione dei livelli — combinare livelli statici in uno solo (layer flattening) tramite pre-rendering.
• Livelli opachi — i livelli opachi non richiedono alpha blending, accelerando significativamente il compositing.
• Compositing incrementale — ridisegnare solo i livelli modificati, non l'intera scena (utilizzato da Core Animation).
• Hardware Composer — utilizzo di HWC per il compositing hardware senza coinvolgimento della GPU.

Strumenti di profilazione

Per analizzare le prestazioni del compositing, utilizzare: Core Animation Profiler (Xcode Instruments) — mostra il numero di livelli e la frequenza di compositing; GPU Debugger (Android Studio) — visualizza il carico della GPU e l'overdraw; Overdraw Visualization — strumento di debug che mostra le aree di ridisegno multiplo dei pixel.