Questa pagina spiega cos'è l'overdraw, come diagnosticarlo e come eliminarlo o mitigarne gli effetti.
Quando un'app disegna lo stesso pixel più di una volta all'interno di un singolo frame, si parla di overdraw. L'overdraw è in genere superfluo ed è meglio eliminarlo. L'overdraw diventa un problema di prestazioni quando spreca il tempo della GPU per il rendering di pixel che non contribuiscono a ciò che l'utente vede sullo schermo.
Informazioni sull'overdraw
L'overdraw si verifica quando il sistema disegna un pixel sullo schermo più volte in un singolo frame di rendering. Ad esempio, se hai una pila di schede dell'interfaccia utente, ogni scheda nasconde una parte di quella sottostante. Tuttavia, il sistema deve comunque disegnare le parti nascoste delle schede nella pila. Questo perché le schede impilate vengono sottoposte a rendering in base all'algoritmo del pittore, ovvero in ordine da dietro in avanti. Questa sequenza di rendering consente al sistema di applicare una corretta fusione alfa agli oggetti traslucidi, come le ombre.
Trovare problemi di overdraw
La piattaforma offre i seguenti strumenti per aiutarti a determinare se l'overdraw influisce sulle prestazioni della tua app.
Strumento Debug overdraw GPU
Lo strumento Debug overdraw GPU utilizza la codifica a colori per mostrare il numero di volte in cui la tua app disegna ogni pixel sullo schermo. Maggiore è questo numero, maggiore è la probabilità che l'overdraw influisca sulle prestazioni della tua app.
Per saperne di più, consulta Visualizzare l'overdraw della GPU.
Strumento Rendering GPU
Lo strumento Rendering GPU mostra il tempo impiegato da ogni fase della pipeline di rendering per visualizzare un singolo frame come un istogramma scorrevole. La parte Processo di ogni barra, indicata in arancione, mostra quando il sistema sta scambiando i buffer. Questa metrica fornisce indizi importanti sull'overdraw.
Sulle GPU meno performanti, la velocità di riempimento disponibile, ovvero la velocità con cui la GPU può riempire il buffer dei frame, può essere bassa. Man mano che aumenta il numero di pixel necessari per disegnare un frame, la GPU potrebbe impiegare più tempo per elaborare nuovi comandi e chiedere al resto del sistema di attendere fino a quando non riesce a recuperare. La barra Processo mostra questo picco quando la GPU è sovraccarica nel tentativo di disegnare i pixel il più rapidamente possibile. Anche problemi diversi dal numero di pixel non elaborati potrebbero causare un picco di questa metrica. Ad esempio, se lo strumento Debug overdraw GPU mostra un overdraw elevato e la barra Processo presenta picchi, è probabile che si sia verificato un problema di overdraw.
Per saperne di più, consulta Velocità di rendering della GPU.
Correggere l'overdraw
Puoi eseguire le seguenti operazioni per ridurre o eliminare l'overdraw:
- Rimuovi gli sfondi non necessari nei layout.
- Riduci la trasparenza.
Questa sezione fornisce informazioni su entrambi gli approcci.
Rimuovere gli sfondi non necessari nei layout
Per impostazione predefinita, un layout non ha uno sfondo, il che significa che non esegue il rendering di nulla direttamente. Tuttavia, quando i layout hanno sfondi, potrebbero contribuire all'overdraw.
Puoi migliorare le prestazioni di rendering rimuovendo gli sfondi non necessari, ad esempio uno sfondo non visibile perché completamente coperto da tutto ciò che l'app sta disegnando sopra. Ad esempio, un Box figlio o un layout
con un modificatore .background potrebbe coprire completamente lo sfondo di un contenitore principale,
rendendo il passaggio di disegno del padre completamente invisibile all'utente,
ma comunque completamente elaborato dalla GPU.
Per scoprire perché stai eseguendo l'overdraw, esamina l'albero dei componenti nello strumento Layout Inspector. Puoi cercare gli sfondi non visibili all'utente ed eliminarli. Puoi anche eliminare gli sfondi non necessari ovunque siano presenti più container che condividono un colore di sfondo. Imposta lo sfondo della finestra sul colore di sfondo principale della tua app e lascia tutti i container sopra senza valori di sfondo definiti.
Ridurre la trasparenza
Il rendering dei pixel trasparenti sullo schermo, noto come rendering alfa, è un fattore chiave che contribuisce all'overdraw. A differenza dell'overdraw standard, quando il sistema nasconde completamente i pixel disegnati esistenti disegnando pixel opachi sopra di essi, gli oggetti trasparenti richiedono che i pixel esistenti vengano disegnati per primi, in modo che possa verificarsi l'equazione di fusione corretta.
Gli effetti visivi come le animazioni trasparenti, le dissolvenze e le ombre esterne comportano una certa trasparenza e possono quindi contribuire in modo significativo all'overdraw. Puoi migliorare l'overdraw in queste situazioni riducendo il numero di oggetti trasparenti di cui esegui il rendering. Ad esempio, puoi ottenere testo grigio disegnando testo nero in
un Text composable e applicando un valore alfa traslucido utilizzando modifier
= Modifier.alpha(0.5f). Tuttavia, puoi ottenere lo stesso effetto con prestazioni migliori impostando direttamente il colore del testo del composable su un grigio opaco: color = Color.Black.copy(alpha = 0.5f).
Per scoprire di più sui costi di prestazioni imposti dalla trasparenza nell'intera pipeline di disegno, guarda Hidden Costs of Transparency.