Compositing: o que é, camadas e princípio de funcionamento

O que é Compositing?

Compositing é o estágio final do pipeline gráfico onde todas as camadas renderizadas separadamente (cenas 3D, elementos de UI, vídeo, interface do sistema) são combinadas em uma única imagem para exibição na tela. Cada camada pode ter sua própria cor, transparência (alpha), posição e ordem de empilhamento.

No contexto do desenvolvimento mobile, o compositing é importante para a interface do usuário: janelas, botões, texto, ícones — todos esses elementos são compostos em uma única cena. O sistema de compositing gerencia a ordem de desenho (z-order), a sobreposição correta de elementos semitransparentes e a animação de transição entre estados da UI.

Compositing no pipeline gráfico

No pipeline gráfico, o compositing ocorre após a conclusão de todas as passagens de shader e rasterização. A GPU pega as camadas prontas dos framebuffers, aplica operações de blending e escreve o resultado no framebuffer principal (front buffer) para envio ao display.

Como funciona o Compositing?

Compositing usa a mistura pixel a pixel (blending) de cores de diferentes camadas. Cada pixel da imagem de saída é calculado com base nas cores dos pixels das camadas sobrepostas, levando em conta a transparência (canal alpha) e o modo de mistura selecionado.

Canal alpha e transparência

Cada camada contém um canal alpha (o quarto componente de cor RGBA) que determina sua opacidade. Alpha = 1.0 — completamente opaco, alpha = 0.0 — completamente transparente. Alpha blending calcula a cor do pixel como uma soma ponderada das cores das camadas frontal (source) e traseira (destination): resultado = source * alpha + dest * (1 - alpha).

Ordem de desenho (algoritmo do pintor)

O compositing é realizado da camada mais distante para a mais próxima (back-to-front). Primeiro, a camada de fundo é renderizada, então cada camada subsequente é sobreposta à anterior levando em conta sua transparência. Z-order determina qual camada está acima e cobrirá as inferiores.

Algoritmos de Compositing

Compositing suporta vários modos de mistura (blend modes) que determinam como as cores das camadas são combinadas. Cada modo produz um efeito visual diferente e tem seus próprios custos computacionais.

Premultiplied Alpha

No modo premultiplied alpha, os canais de cor são armazenados já multiplicados pelo canal alpha (RGB × A). Isso elimina a necessidade de multiplicação em cada operação de blending, acelerando o compositing. Premultiplied alpha é o formato padrão para compositing por GPU no iOS Core Animation e Android HWUI.

Compositing em SOs Móveis

Cada sistema operacional móvel tem seu próprio sistema de compositing otimizado para suas plataformas de hardware. Compositing em SOs móveis é responsável por renderizar toda a interface do usuário.

iOS: Core Animation + Metal

No iOS, o compositing é gerenciado pelo Core Animation — um sistema de alto nível que funciona sobre Metal ou OpenGL ES. O Core Animation cria uma layer tree (árvore de camadas) que é então composta na imagem final. Core Animation determina automaticamente quais camadas mudaram e redesenha apenas essas (compositing incremental), minimizando a carga na GPU.

Android: SurfaceFlinger + HWUI

No Android, o compositing é realizado pelo SurfaceFlinger — um serviço do sistema que combina superfícies (surfaces) de vários aplicativos e da UI do sistema. SurfaceFlinger usa HWC (Hardware Composer) para delegar parte do trabalho de compositing ao hardware dedicado do controlador de display.

Desempenho do Compositing

O desempenho do compositing é um gargalo comum em aplicativos móveis, especialmente com animações complexas e múltiplas camadas semitransparentes. Cada camada adicional requer leitura, mistura e escrita de pixels na memória.

Fatores que afetam o desempenho

• Número de camadas — cada camada requer uma passagem de blending separada. Reduzir o número de camadas acelera o compositing linearmente.
• Resolução das camadas — camadas de alta resolução aumentam a quantidade de pixels processados. Use o menor tamanho possível de buffers offscreen.
• Transparência e overdraw — camadas semitransparentes exigem leitura dos pixels subjacentes, aumentando a largura de banda.
• CPU compositing — se o compositing for feito na CPU (software rendering), o desempenho cai drasticamente. O compositing por GPU é sempre preferível.

GPU Compositing vs CPU Compositing

Dispositivos móveis modernos realizam compositing na GPU através de unidades de blending especializadas. GPU compositing usa unidades ROP paralelas e filtros de textura para mistura rápida de pixels. O CPU compositing é usado apenas em casos raros (dispositivos antigos, testes).

Otimização do Compositing

A otimização do compositing é uma das tarefas principais no desenvolvimento de interfaces mobile. A suavidade da UI (60 FPS) depende diretamente da eficiência da combinação de camadas.

Principais métodos de otimização

• Minimização de camadas — combinar camadas estáticas em uma (layer flattening) através de pré-renderização.
• Camadas opacas — camadas opacas não requerem alpha blending, acelerando significativamente o compositing.
• Compositing incremental — redesenhar apenas as camadas que mudaram, não toda a cena (usado pelo Core Animation).
• Hardware Composer — uso de HWC para compositing por hardware sem envolvimento da GPU.

Ferramentas de perfilamento

Para analisar o desempenho do compositing, use: Core Animation Profiler (Xcode Instruments) — mostra o número de camadas e a frequência de compositing; GPU Debugger (Android Studio) — exibe a carga da GPU e overdraw; Overdraw Visualization — ferramenta de depuração que mostra áreas de redesenho múltiplo de pixels.