Skia: essência, arquitetura e papel no motor gráfico Flutter

O que é Skia?

Skia é uma biblioteca gráfica 2D multiplataforma desenvolvida pelo Google e disponível sob a licença BSD. Ela fornece uma API unificada para desenhar formas geométricas, texto, imagens e sombras, abstraindo o backend gráfico subjacente. Skia é escrita em C++ e otimizada para funcionar em uma ampla gama de dispositivos, desde telemóveis até servidores.

A história do Skia começou em 2005 como uma biblioteca proprietária da empresa Skia Inc. Em 2007, foi adquirida pelo Google, que abriu seu código-fonte e começou a usá-la em seus produtos. Hoje, Skia é o motor gráfico principal do Google Chrome (incluindo Chrome OS), Android (desde a versão 4.0) e, claro, Flutter. A biblioteca é mantida pela equipe do Google e é constantemente melhorada: novos backends, otimizações de desempenho e suporte para APIs gráficas modernas são adicionados.

A principal característica do Skia é que não é apenas um conjunto de funções para desenhar primitivas. É um pipeline gráfico completo que inclui rasterização de curvas (caminhos), anti-aliasing, sobreposição de máscaras, tratamento de transparência e correção de cor. Skia suporta formatos de imagem PNG, JPEG, WebP e GIF, e pode renderizar texto através do motor HarfBuzz para modelagem de glifos.

Skia vs outras bibliotecas gráficas

Ao contrário do Cairo (usado no GTK) ou Quartz 2D (usado no macOS), o Skia foi originalmente projetado para funcionar em múltiplas plataformas com diferentes APIs gráficas. Isso lhe confere vantagem em frameworks multiplataforma como Flutter. Cairo é orientado para renderização por software, enquanto Skia suporta aceleração GPU desde o início, algo crítico para animações de interface.

Arquitetura do Skia

A arquitetura do Skia é construída como um pipeline multicamadas, onde cada camada é responsável por um estágio específico de conversão de comandos gráficos em pixels. Essa estrutura permite reutilizar as camadas superiores independentemente da API gráfica subjacente.

A camada superior — Canvas API — fornece ao desenvolvedor uma abstração para desenho. Os métodos drawRect, drawCircle, drawPath, drawText aceitam parâmetros geométricos e estilos (cor, transparência, transformações). O Canvas converte esses comandos em uma sequência de operações que são passadas para o Skia Pipeline — um grafo interno de comandos otimizado antes da execução.

A camada intermediária — Surface e Device — gerencia o buffer de destino onde ocorre a renderização. A Surface é criada com o tamanho, espaço de cor e tipo de backend especificados. O Device implementa um backend de renderização específico: rasterizador CPU (Raster), OpenGL (GL), Vulkan (Vk) ou Metal (Mt). O Device contém implementações otimizadas de cada operação de desenho para um backend específico.

A camada inferior — Ganesha (backend GPU) — implementa a renderização acelerada por hardware. Ganesha usa a GPU para rasterização de caminhos, preenchimentos de gradiente e sobreposição de efeitos. Ela coleta comandos em lotes e minimiza a alternância de estado da GPU. Cada API gráfica tem sua própria implementação Ganesha: Skia GL para OpenGL, Skia Vulkan para Vulkan, Skia Metal para Metal.

Representação intermediária — SkSL

Skia usa sua própria linguagem de shaders SkSL (Skia Shading Language) para descrever efeitos. O código SkSL é compilado em SPIR-V (representação intermediária), que é então traduzido para um formato de shader específico do backend (GLSL, HLSL, MSL). Isso fornece uma maneira unificada de descrever efeitos gráficos independentemente da plataforma.

Como o Skia funciona no Flutter

Flutter usa Skia como motor de renderização principal em todas as plataformas: Android, iOS, Web, Windows, macOS e Linux. Quando um aplicativo Flutter renderiza um quadro, os widgets são convertidos em uma árvore RenderObject, que é então passada para a camada Engine (em C++), e o Engine usa Skia para a renderização final.

O processo de renderização de um quadro inclui várias etapas. Primeiro, o Flutter Engine constrói uma Display List — uma sequência de chamadas da API Canvas descrevendo o que e como desenhar. Esta lista é então passada para Skia, que divide as operações em partições (áreas da tela), as ordena por profundidade e as passa para o backend de renderização correspondente. A aceleração GPU é ativada automaticamente se Skia detetar uma API gráfica disponível.

Uma das principais vantagens do Skia no Flutter é o Flutter Impeller Preview — a capacidade de pré-visualizar shaders. Skia compila shaders no momento do primeiro uso, o que pode causar atrasos (shader jank). Para resolver este problema, o Flutter está migrando para Impeller — um novo motor de renderização, mas Skia continua sendo a escolha principal para versões estáveis do Flutter.

Layer Tree e Paint

Flutter usa o conceito de Layer Tree — uma árvore de camadas, cada uma representando uma parte da UI. Skia recebe comandos de desenho para cada camada e determina se várias camadas podem ser combinadas em uma única passagem de renderização. A composição de camadas é uma tarefa complexa, pois para cada pixel é preciso considerar transparência e modos de mistura (blend modes), que Skia implementa através de shaders GPU.

Renderização de texto via Skia

Skia renderiza texto através da integração com as bibliotecas HarfBuzz (modelagem) e ICU (unicode). No Flutter, cada widget de texto cria um objeto Paragraph que converte o texto em uma série de comandos Skia para desenhar glifos. Skia suporta anti-aliasing subpixel, hinting de fontes e trabalho com emojis através da biblioteca SkUnicode.

Desempenho do Skia

O desempenho do Skia é resultado de anos de otimização e da combinação de várias técnicas: agrupamento de comandos em lote, cache de texturas e minimização da alternância de contexto da GPU. Isso é criticamente importante para o Flutter, pois cada quadro deve ser renderizado em 16 ms (60 FPS) ou 8 ms (120 FPS).

De acordo com benchmarks da Equipe Flutter, o uso de Skia com aceleração GPU em dispositivos de gama média (Qualcomm Snapdragon 700 series) proporciona 60 FPS estáveis ao renderizar interfaces complexas com mais de 30 widgets na tela. Com renderização por software (CPU), o desempenho cai 40–60%, mas permanece aceitável para telas simples.

Shader Jank — o principal problema do Skia

O principal problema de desempenho do Skia no Flutter é o shader jank (travamentos por shaders). Quando um novo elemento visual com uma combinação desconhecida de efeitos aparece na tela, Skia compila um novo shader em tempo real. A compilação pode levar de 50 a 200 ms, durante os quais a aplicação perde quadros. Isso é especialmente notável ao percorrer listas longas com decorações personalizadas. O Google está resolvendo esse problema com o Impeller, um novo motor de renderização que compila shaders antecipadamente.

Skia em diferentes plataformas

Skia suporta uma ampla variedade de plataformas, cada uma usando seu próprio backend de renderização. A escolha do backend é determinada durante a compilação do Flutter Engine com base na plataforma de destino e nas APIs gráficas disponíveis.

Android

No Android, o Skia funciona através de OpenGL ES (em todos os dispositivos) e Vulkan (em dispositivos Android 7.0+ com suporte Vulkan). A seleção do backend é automática: Vulkan é preferido por oferecer menor latência de driver. O Android também usa Skia para renderização da UI do sistema através do HWUI (Hardware Accelerated UI), tornando Skia parte do sistema operacional, não apenas do Flutter.

iOS

No iOS, o Skia usa Metal — a API gráfica proprietária da Apple. Metal fornece acesso de baixo nível à GPU com sobrecarga mínima. Antes da introdução do Metal (2014), o Skia no iOS usava OpenGL ES, mas nas versões atuais do Flutter o Metal é o único backend GPU para iOS, proporcionando uma melhoria de desempenho de até 30% em comparação com OpenGL.

Desktop (Windows, macOS, Linux)

No desktop, o Skia usa OpenGL (macOS, Linux) e Direct3D 12 (Windows). O suporte para Direct3D 12 foi adicionado no Flutter 3.13 para Windows e proporciona uma melhoria significativa de desempenho em relação ao OpenGL no Windows. Skia também suporta renderização por software através do ANGLE (OpenGL sobre Direct3D) no Windows para compatibilidade reversa com drivers gráficos antigos.

Web

No Flutter for Web, o Skia é compilado para WebAssembly (via Emscripten) e renderiza através de WebGL. Neste modo, o Skia funciona inteiramente no navegador sem usar código nativo. O desempenho da versão WebGL do Skia é inferior ao dos backends nativos, mas para a maioria das aplicações web são alcançados 60 FPS em navegadores modernos com aceleração WebGL por hardware.