Compositing : ce que c'est, les couches et principe de fonctionnement

Qu'est-ce que le compositing ?

Compositing est l'étape finale du pipeline graphique où toutes les couches rendues séparément (scènes 3D, éléments d'interface utilisateur, vidéo, interface système) sont combinées en une seule image pour l'affichage à l'écran. Chaque couche peut avoir sa propre couleur, transparence (alpha), position et ordre d'empilement.

Dans le contexte du développement mobile, le compositing est important pour l'interface utilisateur : fenêtres, boutons, texte, icônes — tous ces éléments sont composés en une seule scène. Le système de compositing gère l'ordre de dessin (z-order), la superposition correcte des éléments semi-transparents et l'animation de transition entre les états de l'UI.

Compositing dans le pipeline graphique

Dans le pipeline graphique, le compositing a lieu après la fin de tous les passes de shaders et de la rastérisation. Le GPU prend les couches finies des framebuffers, applique des opérations de blending et écrit le résultat dans le framebuffer principal (front buffer) pour l'envoyer à l'écran.

Comment fonctionne le compositing ?

Compositing utilise le mélange pixel par pixel (blending) des couleurs provenant de différentes couches. Chaque pixel de l'image de sortie est calculé en fonction des couleurs des pixels des couches superposées, en tenant compte de la transparence (canal alpha) et du mode de mélange sélectionné.

Canal alpha et transparence

Chaque couche contient un canal alpha (le quatrième composant de couleur RGBA) qui détermine son opacité. Alpha = 1,0 — complètement opaque, alpha = 0,0 — complètement transparent. Alpha blending calcule la couleur du pixel comme une somme pondérée des couleurs des couches avant (source) et arrière (destination) : résultat = source * alpha + dest * (1 - alpha).

Ordre de dessin (algorithme du peintre)

Le compositing est effectué de la couche la plus éloignée à la plus proche (back-to-front). D'abord, la couche d'arrière-plan est rendue, puis chaque couche suivante est superposée sur la précédente en tenant compte de sa transparence. Z-order détermine quelle couche est au-dessus et couvrira celles du dessous.

Algorithmes de compositing

Compositing prend en charge différents modes de mélange (blend modes) qui déterminent comment les couleurs des couches sont combinées. Chaque mode produit un effet visuel différent et a ses propres coûts de calcul.

Premultiplied Alpha

Dans le mode premultiplied alpha, les canaux de couleur sont stockés déjà multipliés par le canal alpha (RGB × A). Cela élimine la nécessité de multiplier à chaque opération de blending, accélérant le compositing. Premultiplied alpha est le format standard pour le compositing GPU dans iOS Core Animation et Android HWUI.

Compositing dans les OS mobiles

Chaque système d'exploitation mobile a son propre système de compositing optimisé pour ses plateformes matérielles. Compositing dans les OS mobiles est responsable du rendu de toute l'interface utilisateur.

iOS : Core Animation + Metal

Sous iOS, le compositing est géré par Core Animation — un système de haut niveau fonctionnant sur Metal ou OpenGL ES. Core Animation crée un layer tree (arbre de couches) qui est ensuite composé en une image finale. Core Animation détermine automatiquement quelles couches ont changé et ne redessine que celles-ci (compositing incrémental), minimisant la charge du GPU.

Android : SurfaceFlinger + HWUI

Sous Android, le compositing est effectué par SurfaceFlinger — un service système qui combine les surfaces de diverses applications et de l'interface système. SurfaceFlinger utilise HWC (Hardware Composer) pour déléguer une partie du travail de compositing au matériel dédié du contrôleur d'affichage.

Performance du compositing

La performance du compositing est un goulot d'étranglement courant dans les applications mobiles, en particulier avec des animations complexes et de nombreuses couches semi-transparentes. Chaque couche supplémentaire nécessite la lecture, le mélange et l'écriture de pixels en mémoire.

Facteurs affectant la performance

• Nombre de couches — chaque couche nécessite un passage de blending séparé. Réduire le nombre de couches accélère linéairement le compositing.
• Résolution des couches — les couches haute résolution augmentent le nombre de pixels traités. Utilisez la taille minimale possible des buffers hors écran.
• Transparence et overdraw — les couches semi-transparentes nécessitent la lecture des pixels sous-jacents, ce qui augmente la bande passante.
• CPU compositing — si le compositing est effectué sur le CPU (software rendering), la performance chute drastiquement. Le compositing GPU est toujours préférable.

GPU Compositing vs CPU Compositing

Les appareils mobiles modernes effectuent le compositing sur le GPU via des unités de blending spécialisées. GPU compositing utilise des unités ROP parallèles et des filtres de texture pour un mélange rapide des pixels. Le CPU compositing n'est utilisé que dans de rares cas (anciens appareils, tests).

Optimisation du compositing

L'optimisation du compositing est l'une des tâches clés dans le développement d'interfaces mobiles. La fluidité de l'UI (60 FPS) dépend directement de l'efficacité de la combinaison des couches.

Principales méthodes d'optimisation

• Minimisation des couches — combiner les couches statiques en une seule (layer flattening) par pré-rendu.
• Couches opaques — les couches opaques ne nécessitent pas d'alpha blending, ce qui accélère considérablement le compositing.
• Compositing incrémental — ne redessiner que les couches modifiées, pas toute la scène (utilisé par Core Animation).
• Hardware Composer — utilisation de HWC pour le compositing matériel sans intervention du GPU.

Outils de profilage

Pour analyser la performance du compositing, utilisez : Core Animation Profiler (Xcode Instruments) — affiche le nombre de couches et la fréquence de compositing ; GPU Debugger (Android Studio) — affiche la charge GPU et l'overdraw ; Overdraw Visualization — outil de débogage qui montre les zones de redessin multiple de pixels.