Overdraw en aplicaciones móviles: qué es, causas y optimización

¿Qué es Overdraw en gráficos móviles?

Overdraw es una situación en la que el mismo píxel de la pantalla se redibuja varias veces dentro de un solo fotograma de renderizado. En un escenario ideal, cada píxel debería escribirse exactamente una vez, pero en las interfaces reales, debido a las vistas anidadas, las imágenes de fondo y las capas transparentes, la GPU realiza escrituras repetidas.

Cada redibujado adicional aumenta el tiempo de renderizado del fotograma. A una tasa estándar de 60 FPS, cada fotograma dispone de aproximadamente 16.6 ms. Si el overdraw provoca que se supere este límite, la tasa de fotogramas baja a 30 FPS o menos, lo que degrada notablemente la fluidez de la interfaz.

Según Android Performance Patterns de Google, una aplicación con un factor de overdraw de 3x gasta tres veces más tiempo en el sombreador de fragmentos que una aplicación con overdraw de 1x. En dispositivos GPU de bajo rendimiento, esto provoca retrasos notables durante el desplazamiento y la animación.

Para los desarrolladores móviles, entender el overdraw es de vital importancia: este factor es el que con mayor frecuencia causa desplazamiento entrecortado y bajas tasas de fotogramas en pantallas aparentemente simples con una gran cantidad de elementos anidados.

Cómo afecta Overdraw al rendimiento de la GPU

El pipeline de la GPU consta de varias etapas: sombreador de vértices, rasterización y sombreador de fragmentos. El sombreador de fragmentos es la parte más costosa, ya que se ejecuta para cada píxel de cada primitiva. Con overdraw 2x, el sombreador de fragmentos procesa el doble de píxeles, lo que aumenta directamente el tiempo de fotograma.

Las GPU móviles modernas como Qualcomm Adreno y Apple GPU tienen mecanismos de Early-Z Test y Hidden Surface Removal que compensan parcialmente el overdraw. Sin embargo, estas optimizaciones solo funcionan bajo ciertas condiciones, y no se debe confiar únicamente en la aceleración por hardware.

Por ejemplo, al renderizar elementos semitransparentes, el Early-Z por hardware no es efectivo, y cada píxel se procesa completamente: el overdraw en estos escenarios puede alcanzar 5x o más.

Principales causas del redibujado excesivo

Los fondos multicapa son una de las principales causas de overdraw en aplicaciones móviles. Cuando una Activity o ViewController establece un color de fondo, cada Vista anidada puede añadir su propio fondo, y el píxel se redibuja en cada nivel de la jerarquía.

Un estudio de Uber Engineering mostró que eliminar los fondos excesivos en su aplicación Android redujo el overdraw en un 32% y el tiempo de renderizado de pantalla en un 25%. Existe una situación similar en iOS: establecer opaque = true para Vistas no transparentes elimina la mezcla alfa y evita escrituras múltiples de píxeles.

• Superposiciones transparentes — los elementos con canal alfa sobre otros elementos siempre causan overdraw.
• ClipChildren=false — deshabilitar el recorte de elementos hijos provoca el renderizado de áreas invisibles.
• Usar ShapeDrawable en lugar de colores simples aumenta la carga en el sombreador de fragmentos.
• Anidamiento excesivo — cada nivel de la jerarquía de View añade una capa potencial de redibujado.

En la plataforma iOS, el overdraw ocurre a menudo debido al uso de UIStackView transparentes, CALayer con shouldRasterize y UIBlurEffect superpuestos. Apple recomienda verificar el overdraw mediante la herramienta Core Animation en XCode — muestra las zonas de redibujado como una superposición roja.

Cómo diagnosticar Overdraw: herramientas y métodos

Debug GPU Overdraw es una herramienta integrada de Android que colorea la pantalla de diferentes colores según el factor de overdraw. El morado significa 1x, azul — 2x, verde — 3x, rosa — 4x, rojo — 5x o más. Una pantalla ideal debería ser mayoritariamente morada.

En iOS, el diagnóstico similar se realiza con la herramienta Core Animation de XCode Instruments. Visualiza las zonas de redibujado y muestra el número exacto de escrituras de píxeles en modo Color Blended Layers. Las capas verdes son opacas (óptimas), las rojas contienen transparencia y causan overdraw.

• Profile GPU Rendering en Android muestra un histograma del tiempo de renderizado. Las barras verdes altas indican problemas de overdraw.
• Renderscript es una herramienta más avanzada para analizar el pipeline de renderizado en dispositivos con Android 10+.
• Metal Debugger en XCode permite analizar cada paso de renderizado y ver el número exacto de llamadas al sombreador de fragmentos.

Después del diagnóstico, es importante medir los FPS antes y después de la optimización. Una diferencia de 10–15 FPS al corregir el overdraw es un resultado normal para una pantalla compleja con listas y animaciones.

Técnicas de optimización de Overdraw en aplicaciones móviles

Eliminar fondos excesivos es el método más simple y efectivo. En Android, basta con establecer android:windowBackground solo para la Activity o el tema, no para cada View. En iOS, opaque = true para todos los UIView no transparentes reduce el overdraw a casi cero para esos elementos.

Según Google I/O 2019, la optimización del overdraw en Google Maps permitió reducir el tiempo de renderizado del fotograma en un 40% mediante la fusión de capas y el uso de ClipRect para limitar el área de dibujo. Para desarrolladores Android, Google recomienda las siguientes prácticas:

• ClipRect — limita el área de dibujo del Canvas. Si no hay nada fuera del área visible, la GPU no desperdicia recursos.
• ViewStub — para elementos poco usados o invisibles en la carga inicial. El componente se renderiza solo cuando se llama a inflate.
• merge e include — reducen la profundidad de la jerarquía de View, lo que disminuye el número de pasos de renderizado.
• Buffers planos — reemplazar Layouts anidados por un solo ConstraintLayout o RelativeLayout.

En iOS, la optimización se logra mediante la configuración de CALayer: establecer masksToBounds = true recorta el contenido más allá de los límites de la capa, y shouldRasterize activa el almacenamiento en caché del mapa de bits para capas estáticas.

Ejemplos de código: eliminación de Overdraw en Android y iOS

Veamos ejemplos prácticos en Kotlin y Swift que demuestran escenarios típicos de eliminación de overdraw. El primer ejemplo muestra la optimización mediante ClipRect en 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)
    }
}

El segundo ejemplo en Swift muestra cómo deshabilitar la transparencia de una capa si el elemento no debe ser semitransparente:

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

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

El tercer ejemplo demuestra el uso de ViewStub para la carga diferida de un mapa en Android. ViewStub no se renderiza hasta que se vuelve visible, lo que elimina el overdraw en la etapa de inicialización de la pantalla:

<!-- 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()