Skia : essence, architecture et rôle dans le moteur graphique Flutter

Qu'est-ce que Skia ?

Skia est une bibliothèque graphique 2D multiplateforme développée par Google et disponible sous licence BSD. Elle fournit une API unifiée pour dessiner des formes géométriques, du texte, des images et des ombres, en faisant abstraction du backend graphique sous-jacent. Skia est écrite en C++ et optimisée pour fonctionner sur une large gamme d'appareils, des téléphones mobiles aux serveurs.

L'histoire de Skia a commencé en 2005 en tant que bibliothèque propriétaire de la société Skia Inc. En 2007, elle a été acquise par Google, qui a ouvert son code source et a commencé à l'utiliser dans ses produits. Aujourd'hui, Skia est le moteur graphique principal de Google Chrome (y compris Chrome OS), Android (à partir de la version 4.0) et, bien sûr, Flutter. La bibliothèque est maintenue par l'équipe Google et est constamment améliorée : de nouveaux backends, des optimisations de performance et la prise en charge des API graphiques modernes sont ajoutés.

La caractéristique clé de Skia est qu'il ne s'agit pas simplement d'un ensemble de fonctions pour dessiner des primitives. C'est un pipeline graphique complet qui comprend la rastérisation de courbes (chemins), l'anticrénelage, la superposition de masques, le traitement de la transparence et la correction des couleurs. Skia prend en charge les formats d'image PNG, JPEG, WebP et GIF, et peut rendre du texte via le moteur HarfBuzz pour le façonnage des glyphes.

Skia vs autres bibliothèques graphiques

Contrairement à Cairo (utilisé dans GTK) ou Quartz 2D (utilisé dans macOS), Skia a été conçu dès l'origine pour fonctionner sur plusieurs plateformes avec différentes API graphiques. Cela lui confère un avantage dans les frameworks multiplateformes comme Flutter. Cairo est orienté vers le rendu logiciel, tandis que Skia a pris en charge l'accélération GPU dès le début, ce qui est crucial pour les animations d'interface.

Architecture de Skia

L'architecture de Skia est construite comme un pipeline multicouche, où chaque couche est responsable d'une étape spécifique de conversion des commandes graphiques en pixels. Cette structure permet de réutiliser les couches supérieures indépendamment de l'API graphique sous-jacente.

La couche supérieure — Canvas API — fournit au développeur une abstraction pour le dessin. Les méthodes drawRect, drawCircle, drawPath, drawText acceptent des paramètres géométriques et des styles (couleur, transparence, transformations). Canvas convertit ces commandes en une séquence d'opérations qui sont transmises au Skia Pipeline — un graphe de commandes interne optimisé avant exécution.

La couche intermédiaire — Surface et Device — gère le tampon de destination dans lequel le rendu s'effectue. Surface est créée avec la taille, l'espace colorimétrique et le type de backend spécifiés. Device implémente un backend de rendu spécifique : rastériseur CPU (Raster), OpenGL (GL), Vulkan (Vk) ou Metal (Mt). Device contient des implémentations optimisées de chaque opération de dessin pour un backend spécifique.

La couche inférieure — Ganesha (backend GPU) — implémente le rendu accéléré par matériel. Ganesha utilise le GPU pour la rastérisation des chemins, les remplissages de dégradés et la superposition d'effets. Il regroupe les commandes en lots et minimise les changements d'état du GPU. Chaque API graphique a sa propre implémentation Ganesha : Skia GL pour OpenGL, Skia Vulkan pour Vulkan, Skia Metal pour Metal.

Représentation intermédiaire — SkSL

Skia utilise son propre langage de shaders SkSL (Skia Shading Language) pour décrire les effets. Le code SkSL est compilé en SPIR-V (représentation intermédiaire), qui est ensuite traduit dans un format de shader spécifique au backend (GLSL, HLSL, MSL). Cela fournit une manière unifiée de décrire les effets graphiques indépendamment de la plateforme.

Comment Skia fonctionne dans Flutter

Flutter utilise Skia comme moteur de rendu principal sur toutes les plateformes : Android, iOS, Web, Windows, macOS et Linux. Lorsqu'une application Flutter rend une image, les widgets sont convertis en un arbre RenderObject, qui est ensuite transmis à la couche Engine (en C++), et le moteur utilise Skia pour le rendu final.

Le processus de rendu d'une image comprend plusieurs étapes. D'abord, le Flutter Engine construit une Display List — une séquence d'appels à l'API Canvas décrivant quoi et comment dessiner. Cette liste est ensuite transmise à Skia, qui divise les opérations en partitions (zones d'écran), les trie par profondeur et les transmet au backend de rendu correspondant. L'accélération GPU est activée automatiquement si Skia détecte une API graphique disponible.

L'un des principaux avantages de Skia dans Flutter est le Flutter Impeller Preview — la possibilité de prévisualiser les shaders. Skia compile les shaders au moment de la première utilisation, ce qui peut causer des ralentissements (shader jank). Pour résoudre ce problème, Flutter migre vers Impeller — un nouveau moteur de rendu, mais Skia reste le choix principal pour les versions stables de Flutter.

Layer Tree et Paint

Flutter utilise le concept de Layer Tree — un arbre de couches, chacune représentant une partie de l'UI. Skia reçoit des commandes de dessin pour chaque couche et détermine si plusieurs couches peuvent être combinées en un seul passage de rendu. La composition de couches est une tâche complexe, car pour chaque pixel, la transparence et les modes de fusion (blend modes) doivent être pris en compte, que Skia implémente via des shaders GPU.

Rendu de texte via Skia

Skia rend le texte via l'intégration avec les bibliothèques HarfBuzz (façonnage) et ICU (unicode). Dans Flutter, chaque widget de texte crée un objet Paragraph qui convertit le texte en une série de commandes Skia pour dessiner les glyphes. Skia prend en charge l'anticrénelage subpixel, le hinting des polices et le travail avec les emojis via la bibliothèque SkUnicode.

Performances de Skia

Les performances de Skia sont le résultat d'années d'optimisation et de la combinaison de plusieurs techniques : le regroupement de commandes par lots, la mise en cache de textures et la minimisation des changements de contexte GPU. C'est d'une importance critique pour Flutter, car chaque image doit être rendue en 16 ms (60 FPS) ou 8 ms (120 FPS).

Selon les benchmarks de l'équipe Flutter, l'utilisation de Skia avec accélération GPU sur des appareils de milieu de gamme (Qualcomm Snapdragon 700 series) offre un 60 FPS stable lors du rendu d'interfaces complexes avec plus de 30 widgets à l'écran. Avec le rendu logiciel (CPU), les performances chutent de 40 à 60 %, mais restent acceptables pour des écrans simples.

Shader Jank — le principal problème de Skia

Le principal problème de performance de Skia dans Flutter est le shader jank (à-coups de shader). Lorsqu'un nouvel élément visuel avec une combinaison inconnue d'effets apparaît à l'écran, Skia compile un nouveau shader à la volée. La compilation peut prendre 50 à 200 ms, pendant lesquelles l'application saute des images. Cela est particulièrement notable lors du défilement de longues listes avec des décorations personnalisées. Google résout ce problème avec Impeller, un nouveau moteur de rendu qui compile les shaders à l'avance.

Skia sur différentes plateformes

Skia prend en charge une large gamme de plateformes, chacune utilisant son propre backend de rendu. Le choix du backend est déterminé lors de la compilation du Flutter Engine en fonction de la plateforme cible et des API graphiques disponibles.

Android

Sur Android, Skia fonctionne via OpenGL ES (sur tous les appareils) et Vulkan (sur les appareils Android 7.0+ avec support Vulkan). La sélection du backend est automatique : Vulkan est préféré car il offre une latence de pilote plus faible. Android utilise également Skia pour le rendu de l'UI système via HWUI (Hardware Accelerated UI), faisant de Skia une partie du système d'exploitation, pas seulement de Flutter.

iOS

Sur iOS, Skia utilise Metal — l'API graphique propriétaire d'Apple. Metal offre un accès de bas niveau au GPU avec une surcharge minimale. Avant l'introduction de Metal (2014), Skia sur iOS utilisait OpenGL ES, mais dans les versions actuelles de Flutter, Metal est le seul backend GPU pour iOS, offrant une amélioration de performance allant jusqu'à 30 % par rapport à OpenGL.

Desktop (Windows, macOS, Linux)

Sur desktop, Skia utilise OpenGL (macOS, Linux) et Direct3D 12 (Windows). Le support de Direct3D 12 a été ajouté dans Flutter 3.13 pour Windows et offre une amélioration significative des performances par rapport à OpenGL sur Windows. Skia prend également en charge le rendu logiciel via ANGLE (OpenGL sur Direct3D) sur Windows pour la rétrocompatibilité avec les anciens pilotes graphiques.

Web

Dans Flutter for Web, Skia est compilé en WebAssembly (via Emscripten) et rend via WebGL. Dans ce mode, Skia fonctionne entièrement dans le navigateur sans utiliser de code natif. Les performances de la version WebGL de Skia sont inférieures à celles des backends natifs, mais pour la plupart des applications web, 60 FPS sont atteints sur les navigateurs modernes avec accélération matérielle WebGL.