Reduzir o overdraw

Um app pode desenhar o mesmo pixel mais de uma vez em um único frame, um evento chamado overdraw. Geralmente, o overdraw é desnecessário e pode ser eliminado. Ele se manifesta como um problema de desempenho que desperdiça tempo de GPU para renderizar pixels que não contribuem com o que o usuário vê na tela.

Este documento explica o overdraw: o que é, como diagnosticá-lo e ações que podem ser tomadas para eliminá-lo ou atenuá-lo.

Sobre o overdraw

O overdraw acontece quando o sistema desenha um pixel várias vezes em um único frame de renderização. Por exemplo, se tivermos vários cartões de IU empilhados, cada um esconderá uma parte do cartão que estiver abaixo dele.

No entanto, o sistema ainda precisa desenhar as partes escondidas dos cartões na pilha. Isso ocorre porque os cartões empilhados são renderizados de acordo com o algoritmo do pintor, ou seja, na ordem inversa. Essa sequência de renderização permite que o sistema aplique uma mistura alfa adequada aos objetos translúcidos, por exemplo, sombras.

Encontrar problemas de overdraw

A plataforma oferece as seguintes ferramentas para ajudar a determinar se o overdraw está afetando o desempenho do seu app.

Ferramenta Depuração de overdraw da GPU

A ferramenta Depuração de overdraw da GPU usa codificação por cores para mostrar o número de vezes que seu app desenha cada pixel na tela. Quanto maior essa contagem, maior a possibilidade de o overdraw afetar o desempenho do app.

Para saber mais, veja como visualizar o overdraw da GPU.

Ferramenta Criação de perfil de renderização de GPU

A ferramenta Criação de perfil de renderização de GPU exibe em um histograma com rolagem o tempo que cada fase do pipeline de renderização leva para exibir um único frame. A parte Processo de cada barra, indicada em laranja, mostra quando o sistema está trocando buffers. Essa métrica fornece pistas importantes sobre o overdraw.

Em GPUs de desempenho mais fraco, a taxa de preenchimento disponível (a velocidade em que a GPU pode preencher o buffer do frame) pode ser muito baixa. À medida que cresce o número de pixels necessários para desenhar um frame, a GPU pode demorar mais para processar novos comandos e solicitar que o resto do sistema aguarde até conseguir concluir a atividade. A barra Processo mostra que essa métrica acontece quando a GPU fica sobrecarregada tentando desenhar pixels o mais rápido possível. Outros problemas diferentes de números brutos de pixels também podem causar o aceleramento dessa métrica. Por exemplo, se a ferramenta Depuração de overdraw da GPU mostrar um overdraw muito grande, e a barra de Processo aumentar, é provável que haja um problema com o overdraw.

Para saber mais, veja como determinar a velocidade de renderização da GPU.

Corrigir o overdraw

Existem várias estratégias para reduzir ou eliminar o overdraw:

  • Remover planos de fundo desnecessários em layouts
  • Nivelar a hierarquia de exibição
  • Reduzir a transparência

Esta seção fornece informações sobre cada uma dessas abordagens.

Remover planos de fundo desnecessários em layouts

Por padrão, um layout não tem plano de fundo, o que significa que nada é renderizado diretamente. No entanto, quando os layouts têm planos de fundo, eles podem contribuir para o overdraw.

Remover planos de fundos desnecessários é uma maneira rápida de melhorar o desempenho da renderização. Um plano de fundo desnecessário pode nunca ser visível, já que ele será completamente coberto por todo o resto que o app estiver desenhando sobre a exibição. Por exemplo, o sistema pode cobrir completamente um plano de fundo pai quando desenhar visualizações filhas em cima dele.

Para descobrir o motivo do overdraw, siga a hierarquia com a ferramenta Layout Inspector. Enquanto faz isso, procure planos de fundo que possam ser eliminados, porque eles não são visíveis para o usuário. Casos em que muitos contêineres compartilham uma mesma cor de plano de fundo oferecem outra oportunidade de eliminar planos de fundo desnecessários. É possível definir o plano de fundo da janela como a cor de fundo principal do seu app e deixar todos os contêineres acima dele sem valores definidos.

Nivelar hierarquia de exibição

Layouts modernos facilitam o empilhamento e a criação de camadas em exibições para produzir um design bonito. No entanto, isso pode prejudicar o desempenho, resultando em overdraw, principalmente em cenários em que cada objeto de exibição empilhado é opaco. O resultado é a necessidade de desenhar pixels visíveis e invisíveis na tela.

Se encontrar esse tipo de problema, você poderá melhorar o desempenho otimizando a hierarquia de exibição para reduzir o número de objetos de IU sobrepostos. Para saber mais sobre como fazer isso, consulte Otimizar hierarquias de exibição.

Reduzir transparência

A renderização de pixels transparentes na tela, conhecida como "renderização alfa", é um dos principais responsáveis pelo overdraw. Diferentemente do overdraw padrão, em que o sistema esconde completamente os pixels desenhados já existentes, desenhando pixels opacos por cima deles, os objetos transparentes precisam que os pixels existentes sejam desenhados primeiro para que a equação de mistura correta possa ocorrer. Efeitos visuais como animações transparentes, esmaecimentos e sombras projetadas envolvem algum tipo de transparência e, portanto, podem contribuir significativamente para a existência do overdraw. Nessas situações, é possível melhorar o overdraw reduzindo o número de objetos transparentes renderizados. Por exemplo, é possível obter texto cinza desenhando texto preto em uma TextView com um valor alfa translúcido definido. Mas é possível conseguir o mesmo efeito com um desempenho muito melhor, simplesmente desenhando o texto na cor cinza.

Para saber mais sobre os custos de desempenho impostos pela transparência em todo o pipeline de desenho, veja o vídeo Custos ocultos de transparência (em inglês).