Overdraw nelle app mobili: cos'è, cause e ottimizzazione

Cos'è l'Overdraw nella grafica mobile?

Overdraw è una situazione in cui lo stesso pixel dello schermo viene ridisegnato più volte all'interno di un singolo fotogramma di rendering. In uno scenario ideale, ogni pixel dovrebbe essere scritto esattamente una volta, ma nelle interfacce reali a causa di viste annidate, immagini di sfondo e livelli trasparenti, la GPU esegue scritture ripetute.

Ogni ridisegno aggiuntivo aumenta il tempo di rendering del fotogramma. A un rateo standard di 60 FPS, ogni fotogramma ha circa 16,6 ms. Se l'overdraw causa il superamento di questo limite, il frame rate scende a 30 FPS o inferiore, degradando notevolmente la fluidità dell'interfaccia.

Secondo Android Performance Patterns di Google, un'app con un fattore di overdraw 3x spende tre volte più tempo nello shader di frammento rispetto a un'app con overdraw 1x. Su dispositivi GPU con basse prestazioni, ciò causa lag evidenti durante lo scorrimento e l'animazione.

Per gli sviluppatori mobili, comprendere l'overdraw è di fondamentale importanza: questo fattore è la causa più frequente di scorrimento a scatti e bassi frame rate in schermi apparentemente semplici con un gran numero di elementi annidati.

Come l'Overdraw influisce sulle prestazioni della GPU

La pipeline della GPU è composta da diverse fasi: vertex shader, rasterizzazione e fragment shader. Il fragment shader è la parte più costosa perché viene eseguito per ogni pixel di ogni primitiva. Con overdraw 2x, il fragment shader elabora il doppio dei pixel, aumentando direttamente il tempo del fotogramma.

Le moderne GPU mobili come Qualcomm Adreno e Apple GPU dispongono di meccanismi Early-Z Test e Hidden Surface Removal che compensano parzialmente l'overdraw. Tuttavia, queste ottimizzazioni funzionano solo in determinate condizioni e non ci si dovrebbe affidare esclusivamente all'accelerazione hardware.

Ad esempio, durante il rendering di elementi semitrasparenti, l'Early-Z hardware è inefficace e ogni pixel viene elaborato completamente — l'overdraw in tali scenari può raggiungere 5x e oltre.

Principali cause del ridisegno eccessivo

Sfondi multistrato sono una delle principali cause di overdraw nelle app mobili. Quando un'Activity o un ViewController imposta un colore di sfondo, ogni vista annidata può aggiungere il proprio sfondo e il pixel viene ridisegnato a ogni livello della gerarchia.

Uno studio di Uber Engineering ha mostrato che la rimozione degli sfondi eccessivi nella loro app Android ha ridotto l'overdraw del 32% e il tempo di rendering dello schermo del 25%. Una situazione simile esiste in iOS: impostare opaque = true per le viste non trasparenti elimina l'alpha blending e previene scritture multiple di pixel.

• Sovrapposizioni trasparenti — gli elementi con canale alpha sopra altri elementi causano sempre overdraw.
• ClipChildren=false — la disabilitazione del clipping degli elementi figli porta al rendering di aree invisibili.
• Utilizzare ShapeDrawable invece di colori semplici aumenta il carico sul fragment shader.
• Annidamento eccessivo — ogni livello della gerarchia delle viste aggiunge un potenziale strato di ridisegno.

Sulla piattaforma iOS, l'overdraw si verifica spesso a causa dell'uso di UIStackView trasparenti, CALayer con shouldRasterize e UIBlurEffect sovrapposti. Apple raccomanda di verificare l'overdraw tramite lo strumento Core Animation in XCode — mostra le zone di ridisegno come una sovrapposizione rossa.

Come diagnosticare l'Overdraw: strumenti e metodi

Debug GPU Overdraw è uno strumento integrato di Android che colora lo schermo in diversi colori a seconda del fattore di overdraw. Viola significa 1x, blu — 2x, verde — 3x, rosa — 4x, rosso — 5x o più. Uno schermo ideale dovrebbe essere prevalentemente viola.

In iOS, una diagnostica simile viene eseguita dallo strumento Core Animation in XCode Instruments. Visualizza le zone di ridisegno e mostra il numero esatto di scritture di pixel in modalità Color Blended Layers. Gli strati verdi sono opachi (ottimali), quelli rossi contengono trasparenza e causano overdraw.

• Profile GPU Rendering in Android mostra un istogramma del tempo di rendering. Barre verdi alte indicano problemi di overdraw.
• Renderscript è uno strumento più avanzato per analizzare la pipeline di rendering su dispositivi con Android 10+.
• Metal Debugger in XCode consente di analizzare ogni passaggio di rendering e vedere il numero esatto di chiamate al fragment shader.

Dopo la diagnostica, è importante misurare gli FPS prima e dopo l'ottimizzazione. Una differenza di 10–15 FPS nella correzione dell'overdraw è un risultato normale per uno schermo complesso con elenchi e animazioni.

Tecniche di ottimizzazione dell'Overdraw nelle app mobili

Rimuovere gli sfondi eccessivi è il metodo più semplice ed efficace. In Android, basta impostare android:windowBackground solo per l'Activity o il tema, non per ogni vista. In iOS, opaque = true per tutti gli UIView non trasparenti riduce l'overdraw a quasi zero per quegli elementi.

Secondo Google I/O 2019, l'ottimizzazione dell'overdraw in Google Maps ha permesso di ridurre il tempo di rendering del fotogramma del 40% attraverso la fusione dei livelli e l'uso di ClipRect per limitare l'area di disegno. Per gli sviluppatori Android, Google raccomanda le seguenti pratiche:

• ClipRect — limita l'area di disegno del Canvas. Se non c'è nulla al di fuori dell'area visibile, la GPU non spreca risorse.
• ViewStub — per elementi usati raramente o invisibili al caricamento iniziale. Il componente viene renderizzato solo quando viene chiamato inflate.
• merge e include — riducono la profondità della gerarchia delle viste, diminuendo il numero di passaggi di rendering.
• Buffer piatti — sostituire layout annidati con un singolo ConstraintLayout o RelativeLayout.

In iOS, l'ottimizzazione si ottiene attraverso la configurazione di CALayer: impostare masksToBounds = true taglia il contenuto oltre i limiti del livello e shouldRasterize abilita la cache bitmap per livelli statici.

Esempi di codice: eliminazione dell'Overdraw in Android e iOS

Vediamo esempi pratici in Kotlin e Swift che dimostrano scenari tipici di eliminazione dell'overdraw. Il primo esempio mostra l'ottimizzazione tramite ClipRect in Android:

class OptimizedView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onDraw(canvas: Canvas) {
        canvas.clipRect(
            paddingLeft.toFloat(), paddingTop.toFloat(),
            width - paddingRight.toFloat(), height - paddingBottom.toFloat()
        )
        // Draw content only within clipped area
        super.onDraw(canvas)
    }
}

Il secondo esempio in Swift mostra come disabilitare la trasparenza per un livello se l'elemento non deve essere semitrasparente:

class OpaqueLabel: UILabel {
    override var isOpaque: Bool {
        get { true }
        set { }
    }

    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        super.draw(rect)
    }
}

Il terzo esempio dimostra l'uso di ViewStub per il caricamento ritardato della mappa in Android. ViewStub non viene renderizzato fino a quando non diventa visibile, eliminando l'overdraw nella fase di inizializzazione dello schermo:

<!-- layout/activity_main.xml -->
<ViewStub
    android:id="@+id/map_stub"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inflatedId="@+id/map_container"
    android:layout="@layout/map_fragment" />

// Inflate on demand
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()