Overdraw em aplicativos móveis: o que é, causas e otimização

O que é Overdraw em gráficos móveis?

Overdraw é uma situação em que o mesmo pixel da tela é redesenhado várias vezes dentro de um único quadro de renderização. Em um cenário ideal, cada pixel deve ser escrito exatamente uma vez, mas em interfaces reais, devido a Views aninhadas, imagens de fundo e camadas transparentes, a GPU realiza escritas repetidas.

Cada redesenho adicional aumenta o tempo de renderização do quadro. A uma taxa padrão de 60 FPS, cada quadro tem aproximadamente 16,6 ms. Se o overdraw fizer com que esse limite seja excedido, a taxa de quadros cai para 30 FPS ou menos, degradando visivelmente a suavidade da interface.

De acordo com Android Performance Patterns do Google, um aplicativo com fator de overdraw 3x gasta três vezes mais tempo no sombreador de fragmentos do que um aplicativo com overdraw 1x. Em dispositivos GPU de baixo desempenho, isso causa atrasos perceptíveis durante a rolagem e animação.

Para desenvolvedores móveis, entender o overdraw é criticamente importante: esse fator é o que mais frequentemente causa rolagem irregular e baixas taxas de quadros em telas aparentemente simples com um grande número de elementos aninhados.

Como o Overdraw afeta o desempenho da GPU

O pipeline da GPU consiste em vários estágios: sombreador de vértices, rasterização e sombreador de fragmentos. O sombreador de fragmentos é a parte mais cara, pois é executado para cada pixel de cada primitiva. Com overdraw 2x, o sombreador de fragmentos processa o dobro de pixels, o que aumenta diretamente o tempo do quadro.

GPUs móveis modernas como Qualcomm Adreno e Apple GPU têm mecanismos de Early-Z Test e Hidden Surface Removal que compensam parcialmente o overdraw. No entanto, essas otimizações funcionam apenas em certas condições, e não se deve confiar apenas na aceleração de hardware.

Por exemplo, ao renderizar elementos semitransparentes, o Early-Z por hardware é ineficaz e cada pixel é processado completamente — o overdraw em tais cenários pode chegar a 5x ou mais.

Principais causas do redesenho excessivo

Fundos multicamadas são uma das principais causas de overdraw em aplicativos móveis. Quando uma Activity ou ViewController define uma cor de fundo, cada View aninhada pode adicionar seu próprio fundo, e o pixel é redesenhado em cada nível da hierarquia.

Um estudo da Uber Engineering mostrou que a remoção de fundos excessivos em seu aplicativo Android reduziu o overdraw em 32% e o tempo de renderização da tela em 25%. Situação similar existe no iOS: definir opaque = true para Views não transparentes elimina a mistura alfa e evita escritas múltiplas de pixels.

• Sobreposições transparentes — elementos com canal alfa sobre outros elementos sempre causam overdraw.
• ClipChildren=false — desabilitar o recorte de elementos filhos leva à renderização de áreas invisíveis.
• Usar ShapeDrawable em vez de cores simples aumenta a carga no sombreador de fragmentos.
• Aninhamento excessivo — cada nível da hierarquia de View adiciona uma camada potencial de redesenho.

Na plataforma iOS, o overdraw ocorre frequentemente devido ao uso de UIStackView transparentes, CALayer com shouldRasterize e UIBlurEffect sobrepostos. A Apple recomenda verificar o overdraw através da ferramenta Core Animation no XCode — ela mostra as zonas de redesenho como uma sobreposição vermelha.

Como diagnosticar Overdraw: ferramentas e métodos

Debug GPU Overdraw é uma ferramenta integrada do Android que colore a tela de diferentes cores dependendo do fator de overdraw. Roxo significa 1x, azul — 2x, verde — 3x, rosa — 4x, vermelho — 5x ou mais. Uma tela ideal deve ser majoritariamente roxa.

No iOS, diagnósticos similares são realizados pela ferramenta Core Animation no XCode Instruments. Ela visualiza as zonas de redesenho e mostra o número exato de escritas de pixels no modo Color Blended Layers. Camadas verdes são opacas (ótimas), as vermelhas contêm transparência e causam overdraw.

• Profile GPU Rendering no Android mostra um histograma do tempo de renderização. Barras verdes altas indicam problemas de overdraw.
• Renderscript é uma ferramenta mais avançada para analisar o pipeline de renderização em dispositivos com Android 10+.
• Metal Debugger no XCode permite analisar cada passe de renderização e ver o número exato de chamadas do sombreador de fragmentos.

Após o diagnóstico, é importante medir o FPS antes e depois da otimização. Uma diferença de 10–15 FPS ao corrigir o overdraw é um resultado normal para uma tela complexa com listas e animação.

Técnicas de otimização de Overdraw em aplicativos móveis

Remover fundos excessivos é o método mais simples e eficaz. No Android, basta definir android:windowBackground apenas para a Activity ou tema, não para cada View. No iOS, opaque = true para todos os UIView não transparentes reduz o overdraw a quase zero para esses elementos.

De acordo com Google I/O 2019, a otimização do overdraw no Google Maps permitiu reduzir o tempo de renderização do quadro em 40% através da fusão de camadas e do uso de ClipRect para limitar a área de desenho. Para desenvolvedores Android, o Google recomenda as seguintes práticas:

• ClipRect — limita a área de desenho do Canvas. Se não houver nada fora da área visível, a GPU não desperdiça recursos.
• ViewStub — para elementos raramente usados ou invisíveis na carga inicial. O componente renderiza apenas quando inflate é chamado.
• merge e include — reduzem a profundidade da hierarquia de View, o que diminui o número de passes de renderização.
• Buffers planos — substituir Layouts aninhados por um único ConstraintLayout ou RelativeLayout.

Em iOS, a otimização é alcançada através da configuração de CALayer: definir masksToBounds = true recorta o conteúdo além dos limites da camada, e shouldRasterize ativa o cache de bitmap para camadas estáticas.

Exemplos de código: eliminando Overdraw no Android e iOS

Vamos ver exemplos práticos em Kotlin e Swift demonstrando cenários típicos de eliminação de overdraw. O primeiro exemplo mostra a otimização através de ClipRect no 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)
    }
}

O segundo exemplo em Swift mostra como desabilitar a transparência de uma camada se o elemento não deve ser semitransparente:

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

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

O terceiro exemplo demonstra o uso de ViewStub para carregamento adiado de mapa no Android. ViewStub não renderiza até se tornar visível, o que elimina o overdraw no estágio de inicialização da tela:

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