Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Comparaison de performances entre rendu Vectoriel et Bitmap avec Flash Player (cacheAsBitmap)

Il y a quelques mois, j'ai développé une application de dessin à-la-Illustrator pouvant gérer des centaines, voire des milliers d'objets à l'écran. Ces objets sont tous des objets vectoriels, dessinés avec Flash Player (moveTo, lineTo & Co) et quand on ajoute autant d'objets, les performances générales de l'application commencent à souffrir. C'est à ce moment-là que j'ai commencé à m'intéresser à l'optimisation des éléments vectoriels.
Heureusement, cela fait longtemps que d'autres se sont posé la question, surtout depuis Flash Player 8 (qui était bien plus lent que FP9) et ont écrit de très bon articles à ce propos. Même si ces articles ont été écrits il y a 3, 4 voire 5 ans, ils sont toujours pertinents. Voici ma sélection:

• Varicose-g: High-Performance Graphics in Flash 8 par Grant Skinner
• Vector vs. Bitmap: file-size and performance par Aral Balkan

Comme cela est précisé dans le 2eme article, Flash Player est très bon pour afficher rapidement un objet vectoriel mais cela lui demande du calcul processeur et si les calculs sont trop nombreux, votre CPU arrive à saturation et votre application va se mettre à ramer.

Aral Balkan propose un petit exemple très pertinent pour illustrer ses propos. Je l'ai rapidement recréé sous Flash Builder 4 (l'exemple de base était fait avec Flash Pro) et voici ce que cela donne:

Flex Source Code Download: Télécharger le code source complet de l'application

Fonctionnement de l'application de test

L'application est très simple, au départ, on ajoute 1000 lignes (vectorielles donc) aléatoires à un UIComponent.

Quand l'utilisateur appuie sur "Start", on va faire bouger cet UIComponent en x/y de manière aléatoire. Le changement de position de ce composant va demander un nouveau rendu à Flash Player.

Le bouton "Make it Vector / Make it Bitmap" permet de basculer la propriété cacheAsBitmap (si on clique sur Make It Bitmap, cela passe cacheAsBitmap à true).

La propriété "cacheAsBitmap" indique à Flash Player qu'il doit prendre "une capture" du composant et la garder en temps que Bitmap et plus en temps qu'objet vectoriel.

Résultats

Si vous lancez le test, vous verrez que le rendu Vector va prendre une grande partie de votre processeur (70% sur ma machine) alors que le rendu Bitmap laisse le CPU à environ 10%.

Comme il est expliqué dans les articles,  le rendu Vector prend beaucoup de ressources processeur mais peu de RAM alors que pour le rendu Bitmap, on a le comportement inverse. Mais depuis le temps, des améliorations ont été faites sur Flash Player (et encore plus sur le 10.1) et le rendu Bitmap ne modifie plus tellement la consommation de RAM.

Rendu Bitmap à utiliser à bon escient

Le rendu Bitmap est donc très pratique pour optimiser les performances de vos rendus vectoriels mais il faut savoir que dans certains cas, ces avantages ne se feront pas sentir.

En effet, si votre composant en rendu Bitmap voit sa propriété de scale ou de rotation modifiée, il va redemander un rendu Vector puis refaire le cache Bitmap. Si vous ne changez que le X/Y de ce composant, vous aurez les gains de performance espérés.

Dans l'exemple, cochez "Use Scale" pour que la propriété "scaleX" du UIComponent soit modifié à chaque frame. Vous verrez que vous obtiendrez des performances similaires au rendu Vectoriel, même si cacheAsBitmap est à true