Graphiques et Rendu dans le Développement Mobile : Ce Que C'est, Comment Fonctionne le Processus et Comment Ça Opère

Graphiques et Rendu : Fondamentaux du CPU et GPU

Rendu est le processus de conversion des données (sommets, textures, shaders) en une image à l'écran. Sur les appareils mobiles, le rendu peut être effectué sur le CPU (processeur central) ou le GPU (processeur graphique). Le choix dépend du type de graphiques et des performances requises.

CPU vs GPU Rendering

CPU Rendering — traitement séquentiel. Chaque instruction est exécutée l'une après l'autre. Le CPU est optimisé pour la logique et le branching. Canvas (Android), Core Graphics (iOS) fonctionnent sur le CPU. Avantage : précision, prise en charge d'algorithmes complexes. Inconvénient : lent avec un grand nombre d'éléments graphiques. GPU Rendering — traitement parallèle. Des milliers de cœurs GPU traitent les sommets et les pixels simultanément. Metal (iOS), Vulkan (Android), OpenGL ES (les deux plateformes) utilisent le GPU. Le GPU Rendering est obligatoire pour la 3D, les animations à 60 FPS et les effets complexes. Les frameworks UI modernes (SwiftUI, Jetpack Compose, Flutter) utilisent le GPU par défaut.

Shaders (Vertex, Fragment)

Shaders sont des programmes exécutés sur le GPU. Ils déterminent l'apparence de chaque objet à l'écran. Le pipeline graphique se compose de plusieurs étapes, mais deux shaders principaux — Vertex Shader et Fragment Shader — sont utilisés dans 99% des cas. Les shaders sont écrits en GLSL (OpenGL), MSL (Metal) ou HLSL (DirectX).

Vertex Shader — traite les sommets d'un modèle 3D. Entrée : position du sommet, normale, coordonnées UV. Sortie : position transformée (modèle → vue → projection). Vertex Shader ne peut pas créer ni supprimer de sommets — seulement les transformer. Fragment Shader — calcule la couleur de chaque pixel (fragment) dans un triangle rasterisé. Entrée : données interpolées du Vertex Shader (UV, normales). Sortie : couleur RGBA. Fragment Shader est responsable du texturage, de l'éclairage (Phong, PBR) et des post-effets. Les moteurs modernes (Unity, Unreal) génèrent les shaders automatiquement, mais la compréhension du pipeline est nécessaire pour l'optimisation.

Offscreen Rendering — rendu non pas à l'écran mais dans un tampon temporaire. Utilisé pour : 1) les effets (blur, shadow), 2) le render-to-texture, 3) le pré-calcul des images. Offscreen Rendering est coûteux : changement de contexte et passe de rendu supplémentaire. iOS active automatiquement Offscreen Rendering pour les ombres et cornerRadius. Rastérisation — conversion des données vectorielles (sommets + shaders) en pixels. Le Rasterizer détermine quels fragments appartiennent à un triangle et invoque le Fragment Shader. Composition — assemblage des couches dans l'image finale. Core Animation compose les CALayer, Android compose les couches SurfaceFlinger.

CPU — pour la logique et Canvas. GPU — pour les graphiques et les animations. IT Sectr recommande d'utiliser le GPU rendering pour tout contenu en mouvement (animations, transitions, scroll) — cela garantit 60 FPS stables.

Core Animation (CALayer, CAShapeLayer)

Core Animation — le framework d'Apple pour le rendu animé accéléré par GPU. L'élément de base est CALayer : une zone rectangulaire avec du contenu (image, couleur, texte). CALayer gère : la position, la taille, la couleur de fond, la bordure, l'ombre, cornerRadius et les transformations (2D et 3D). Core Animation compose automatiquement les couches sur le GPU — le développeur n'a pas besoin d'écrire de code graphique.

CALayer

CALayer — un objet léger (pas une vue) qui contient un bitmap de contenu. UIButton, UILabel, UIImageView — tous utilisent CALayer en interne. Propriétés : frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. L'animation des propriétés de CALayer se produit sur le GPU — c'est le principal avantage de Core Animation. CALayer.shouldRasterize — active la rastérisation de la couche pour la mise en cache de graphiques complexes. CAShapeLayer — une sous-classe pour les graphiques vectoriels : dessine un chemin sur le GPU. Utilisé pour les barres de progression, les graphiques, les masques et l'animation de formes. CAShapeLayer.path — une propriété animable (animation de morphing de formes).

Composition dans Core Animation — le processus d'assemblage des CALayer dans l'image finale. Chaque CALayer est une texture séparée sur le GPU. La composition se produit dans le Render Server (un processus séparé). Propriétés nécessitant la composition : opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Moins il y a de couches — plus la composition est rapide.

Optimisation (Overdraw, Offscreen Rendering)

Overdraw — une situation où le même pixel est peint plusieurs fois dans une image. Exemple : fond rouge → rectangle bleu → texte. Le pixel central est dessiné 3 fois. Overdraw est la principale cause de lenteur de l'UI, surtout sur les appareils plus anciens. iOS : Debug Color Blended Layers (Xcode) — zones rouges = mélangé (overdraw). Android : Debug GPU Overdraw (Options Développeur) — couleurs du bleu (1x) au rouge (3x+).

Overdraw

Comment réduire Overdraw : 1) utilisez opaque = true pour les vues non transparentes (iOS). 2) Android — utilisez android:windowBackground une seule fois. 3) Supprimez les couches invisibles. 4) Utilisez une architecture en couches : fond (1 passe) → contenu (2 passes). 5) Évitez clipChildren et clipToPadding inutilement. Offscreen Rendering — rendu dans un tampon avant l'écran. Déclencheurs : shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode : Debug Offscreen Renderer — zones jaunes = offscreen. Sur Android : profile GPU rendering — vérifiez la longueur des barres.

Graphiques Vectoriels (SVG, Vector Drawable)

Graphiques Vectoriels — images décrites par des formules mathématiques (chemins, courbes, remplissages). Les vecteurs ne perdent pas en qualité lors du redimensionnement — idéal pour les icônes et illustrations dans les applications mobiles.

SVG (Scalable Vector Graphics) — standard W3C. Non supporté directement dans les OS mobiles. Converti : sur iOS — en PDF vector assets (Xcode 12+), sur Android — en Vector Drawable XML. Vector Drawable — format Android. Défini en XML : <vector> avec <path> et <group>. Prend en charge l'animation via AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDF vectoriels dans Assets.xcassets. Xcode les compile en textures optimisées pour le GPU. SVG et Vector Drawable ne supportent pas les effets complexes (blur, gradient mesh). Pour les photos et les dégradés, utilisez du PNG/WebP raster.