Images et Textures

Format d’image vectoriel et bitmap

Dans un fichier, l’information graphique peut être stockée :

Dans un format vectoriel où les formes des objets graphiques sont décrites par des formules mathématiques

Dans un format matriciel / pixélisées / bitmap où l’image est représentée comme une grille de pixels.

Avertissement

Plus rarement, le terme bitmap peut aussi être utilisé pour désigner une image ayant 1 bit par pixel : image en noir et blanc.

L’intérêt principal du format vectoriel est qu’il ne perd pas en qualité lorsque l’on zoome, ainsi ce format permet de représenter les polices vectorielles comme Times new roman ou Arial… Par exemple, lorsqu’on grossit un caractère dans une police vectorielle, que ce soit à l’écran ou à l’impression, ses contours restent nets et lisses. Voici une comparaison :

A gauche : un zoom sur un caractère au format vectoriel ; à droite : un zoom sur un caractère bitmap.

Pour les polices vectorielles, le format standard est le TrueType (TTF) aussi bien sous Windows que sous Linux. Pour le Web, il existe le format SVG utilisant des balises XML pour décrire les formes géométriques présentes dans l’illustration. Voici un exemple du contenu du fichier SVG à gauche ainsi que son rendu dans le navigateur à droite :

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="200" height="100">
  <circle cx="150" cy="50" r="40" fill="red" />
  <circle cx="050" cy="50" r="40" fill="blue" />
  <line x1="50" y1="50" x2="150" y2="50" stroke="black"/>
</svg>

Si le format vectoriel domine le monde de l’illustration : image dessinée à la main avec un faible nombre de couleurs (notamment avec des logiciels comme Illustrator ou InkScape), le format bitmap contrôle le monde de la photo car il permet de représenter une multitude de couleurs ceci pour chaque pixel. En contrepartie, lorsque l’on zoome l’image se dégrade faisant apparaître les carrés des pixels de l’image d’origine.

Le caractère matriciel des images est aussi relié aux capteurs CCD/CMOS des appareils photos numériques et des smartphones qui sont organisés en grille régulière de photodiodes correspondant aux pixels de l’image finale :

Note

Il y a cependant une petite différence. En effet, une photodiode d’un capteur CCD convertit une source de lumière en électrons. Ainsi pour reconstruire une image couleur, un filtre rouge, vert ou bleu est placé devant chaque photodiode pour la spécialiser dans un canal donné. Nous avons donc une seule information R, V ou B par photodiode. Pour construire l’image finale et avoir une information R,V et B pour chaque pixel, il faut donc utiliser un algorithme d’approximation pour calculer les deux informations manquantes à partir des photodiodes voisines.

Dans la suite, nous nous interessons uniquement aux formats d’image bitmap utilisés pour représenter les textures et les sprites dans les jeux.

Taille d’une image matricielle

Dans la mémoire

Dans la RAM de l’ordinateur, une image matricielle n’est pas compressée. L’encodage le plus courant utilise un octet par couche R/G/B soit 24 bits par pixels. On peut donc calculer la place d’une image pixélisée en mémoire :

Taille d’une image bitmap en mémoire avec une résolution de 24 bits par pixel : Largeur × Hauteur × 3 octets

A noter que 24 bits représentant 16 777 216 valeurs, vous entendrez ainsi parler d’images en 16 millions de couleurs.

Sur le disque

Si le format n’utilise pas de compression pour stocker les données, la taille du fichier va respecter la même règle. Voici différents exemples avec un sprite du jeu Xenon II :

Image 1 :

Image 2 :

Image 3 :

Glissez-déposez chaque image sur le bureau. En passant le curseur sur chaque vignette, vous obtenez plus d’informations sur l’image :

Nous remarquons que chaque image a une résolution de 100x100 pixels ce qui fait au total 10 000 pixels. En effectuant un clic droit propriétés, nous obtenons la taille exacte de chaque fichier :

XenonPal : 11 076 octets

XenonBMP : 30 056 octets

XenonRGBA : 40 056 octets

Si l’on fait les ratios : taille du fichier divisé par le nombre de pixels, on obtient environ :

XenonPal : 1 octet par pixel

XenonBMP : 3 octets par pixel

XenonRGBA : 4 octets par pixel

Nous constatons tout d’abord que les tailles des fichiers images sont un peu plus importantes que le nombre de pixels de l’image multiplié par le nombre d’octects par pixel. En effet, pour chaque image, il faut stocker des informations supplémentaires dans l’entête du fichier et cela peut aller de 56 octets à 1076 pour ces trois exemples.

Ensuite, le nombre d’octets par pixel varie fortement entre ces trois images. Comment expliquer cela :

3 octets par pixel : c’est le format le plus courant, avec un octet par couche Rouge/Vert/bleu.

4 octets par pixel : ici un canal supplémentaire est présent pour stocker la transparence. Ce canal est codé sur 1 octet : le fichier ne stocke plus trois couches RGB mais 4 couches RGBA, le A désigant le canal alpha de la tranparence. Si vous regardez l’image associée sur cette page web, vous verrez que le fond est blanc car il correspond à la couleur de fond de la page Web. Ainsi, les pixels autour du petit vaiseau ont été indiqués comme transparents.

1 octet par pixel : Comment coder une couleur sur 1 octet ? Ici on n’utilise plus une description par composante R/V/B mais un code 8 bits désignant une entrée dans une palette de couleurs. La palette peut comporter jusqu’à 256 entrées et associe une couleur RGB à chaque entrée. Dans une telle image, seulement 256 couleurs sont présentes sur l’ensemble des pixels et ces 256 couleurs sont choisies parmi 16 millions. C’est largement suffisant pour le sprite ci-dessus.

Les différents formats d’image

Paramètres des différents formats

Certains formats d’image sont basqiques et sauvegardent sur le disque la matrice de pixels brute. D’autres formats sont plus complexes car leur contenu s’organise suivant différents paramètres. Ainsi pour la même image, le même format peut stocker des informations très différentes dans le fichier image suivant les paramètres choisies :

Utilisation d’une méthode de compression sans perte où les données sont compressées sans dégradation de l’information comme le fait l’algorithme zip par exemple.

Format 24 bits : 1 octet est utilisé pour représenté chaque couche RGB, l’ordre des canaux peut être B/G/R ou R/G/B ou …

Format 16 bits : différents encodages sont utilisés pour stocker l’information couleur sur seulement 16 bits. On peut par exemple choisir un encodage en 5R/5B/6G soit 5 bits pour le rouge, 5 pour le bleu et 6 pour le vert ou un encodage en 5/5/5.

Format 8/4/2/1 bits : ces formats sont généralement associés à une palette de couleurs. Ainsi, avec 1 bit par pixel, on a seulement deux couleurs présentes dans l’image, avec 2 bits : 4 couleurs, 4 bits 16 couleurs et 8 bits 256 couleurs. La grille de pixels stockent non plus une couleur mais un code couleur et la palette stockée dans le fichier image associe chaque code avec la couleur à afficher.

La prise en charge de la transparence. Pour cela deux grandes méthodes existent. Soit on utilise une 4-ième couche en plus des trois couches RGB. Dans cette configuration, cette couche est appelée couche alpha et elle stocke l’information de transparence sur 8 bits (0 : totalement transparent, 256 : totalement opaque, 128 : 50% transparent). On obtient donc une image en 32 bits. L’autre méthode de représentation de la transparence est associée au mode palette. Pour cela, un code couleur est réservé pour indiquer la transparence qui est alors totale : pas de tranparence intermédiaire comme dans le mode 8 bits.

Le stockage d’une image preview. Pour une image de plusieurs mégas, l’intérêt de stocker une image réduite dans le fichier image permet d’afficher directement cette image à l’écran de votre appareil photo sans avoir à lire toutes les données de l’image en grande résolution.

Le multipage : certains formats d’image permettent de stocker plusieurs images dans un seul fichier. Cela permet d’éviter l’utilisation du format PDF.

La colorimétrie : si vous êtes un professionnel du graphisme vous aurez comme exigence qu’une image apparaisse à l’identique quelle que soit l’écran où elle est affichée. Cependant, deux modèles d’écran différents ont des rendus différents pour un même valeur R/G/B. Il faut donc utiliser des espaces colorimétriques pour associer les valeurs RGB à un repère couleur normalisé. Le fichier image doit donc embarquer les données décrivant l’espace colorimétrique utilisé.

Si vous êtes un fabricant d’un appareil photo numérique ou d’un scanner numérique, vous allez décider quelles paramètres choisir pour exporter vos images. Ainsi coder un format d’image avec des options précises est une tâche qui requiert quelques centaines de lignes. Cependant, si vous développez un logiciel photo, ce logiciel doit être en mesure pour décoder un format de connaître tous les paramètres existant, ceux de la norme comme ceux rajouter par certains constructeurs. Ainsi, écrire un lecteur pour un seul format d’image requiert des milliers de ligne de code, et même avec la meilleure volonté du monde, il est possible que toutes les options ne soient pas couvertes car certaines sont obsolètes et plus documentées et d’autres viennent juste d’être ajoutées à la norme et ne sont pas encore disponibles.

Les différents formats

Le format JPG

Ce format est certainement le plus répandu sur le web. Il utilise un algorithme réduisant la qualité de l’image originale afin de diminuer la taille du fichier. Pour cela, l’algorithme utilise un paramètre de qualité allant de 10% à 100%. Les logiciels de dessin amateur fixe cette valeur automatiquement et vous ne vous rendez pas compte de son existence. Cependant, dans les logiciels professionnels, demande à l’utilisteur de la choisir. Ceci permet de faire un compromis entre qualité de l’image finale et taille du fichier sur le disque. En résumé :

Le format JPG est utilisé pour réduire la taille des fichiers en dégradant l’image suivant un paramètre de qualité.

Le format est utilisée pour les photos

Sur les schémas (trait noir sur fond blanc) il a tendance a produire des artefacts visuellement désagréables, il est donc peu utilisé pour ce type d’images.

Le format PNG

Ce format est non destructif. Il peut être utilisé avec ou sans compresssion. S’il y a compression elle est non destructive (comme la compression zip). Ainsi la taille du fichier est réduite mais contrairement au JPG, il n’y a pas de perte. En résumé :

Le format PNG est non desctructif

Il est généralement utilisé pour stocker des schémas sans produire d’artefacts (contrairement au JPG)

Le format BMP

Format d’image introduit par Microsoft dans les années 90, il est un des formats d’image les plus simples à développer et à utiliser pour programmer. Par exemple, un fichier image BMP en 24 bits ou 32 bits peu être lu en écrivant seulement 200 lignes de code. Cette simplicité a impliqué la popularité de ce format.

Le format GIF

Le format GIF est plus ancien que le format PNG et ils ont longtemps été concurrents (le PNG était libre de droit contrairement au GIF). Ce format est un peu désuet car la norme PNG a évolué plus rapidement. Cependant, le format GIF dispose d’une spécifité par rapport aux autres formats : il peut gérer une animation par empilement de plusieurs images et ajout d’un tempo de visualisation. Si dans les années 80 un gif animé, cela ressemblait à :

Cette fonctionnalité permet de créer aujourd’hui des gif animés humoristiques (tenor.com ou giphy.com). Pourquoi un tel engouement ? Parce que tout simplement, lire une vidéo sur une page web, c’est encore aujourd’hui compliqué, il faut un codec, un player… Avec le gif animé, le lecteur de format est implanté dans tous les navigateurs Web depuis 30 ans. L’effet saccadé du gif animé rajoute à l’effet comique. De plus on peut copier/coller cette image animée n’importe où comme dans un email. En bref, le format gif survit grâce à cette option !

Le format PPM

Le format PPM très peu connu mais disponible dans tous les logiciels graphiques dignes de ce nom est un format ultra-basique de stockage des données RGB 24 bits. L’entête du fichier comporte :

Un code indiquant le format PPM

La largeur et de la hauteur de l’image

La valeur 255 indiquant un codage en 8 bits par canal

La matrice de pixels est stockée de gauche à droite et de haut en bas. La transparence n’est pas prise en charge par ce format. Il existe une version texte indentifiée par le code P3 et une version binaire utilisant le code P6. La version binaire stocke les informations couleurs en utilisant 3 octects par pixel. La version texte écrit chaque valeur séparée par un espace. Voici un exemple en mode texte ainsi que l’image correspondante :

La compatibilité avec les navigateurs Web

Pour montrer que rien n’est simple dans les formats d’images, voici le tableau de compatibilité entre les différents formats et les principaux navigateurs Web :

La signature d’un fichier

Normalisation

Beaucoup de monde croit à tort que le format de fichier est donné par l’extension du fichier, il s’agit seulement d’une indication. L’extension de fichier permet à l’OS de sélectionner le programme par défaut servant à ouvrir le fichier en question. Pour savoir exactement quel format utilise le fichier, une signature est placée en début de fichier. L’ensemble de ces signatures est normalisé. Vous pouvez ainsi consulter leur liste. Voici les signatures les plus courantes :

BM pour le format BMP

%PDF pour le format PDF

FF D8 pour le format JPG

‰PNG pour le format PNG

GIF pour le format GIF

P3/P6 pour le PPM

Visualiser la signature

Pour identifier la signature d’un fichier image, on peut utiliser un utilitaire affichant le contenu du fichier octet par octet.

Dans ce type de programme, l’affichage se fait en hexadécimal. On n’utilise pas 10 chiffres mais 16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Ainsi pour représenter les 8 bits d’un octet, on écrit deux chiffres indiquant les valeurs des 4 premiers bits et des 4 suivants. Ainsi, le code 0xFF correspond aux bits 0b11111111 soit la valeur 255.

Nous conseillons wxHecEditor car c’est un outil multi-plateformes.

Dans ce type d’utilitaire, l’interface centrale présente le contenu en hexadécimal et la fenêtre de droite le contenu équivalent en mode texte. Ouvrez plusieurs fichiers de type différent et vérifiez si leur signature correspond à leur extension.

Note

si vous n’avez pas envie d’installer un utilitaire, vous pouvez aussi ouvrir chaque fichier dans un éditeur de texte standard comme notepad++ ou autre. La signature étant souvent codée en texte, vous la retrouverez ainsi dans les premiers caractères affichés.

Convertir une image vers le format PPM

Convertion

Charger les données d’un fichier image est une opération, complexe ceci à cause des multiples paramètres de sauvegarde. De plus il faudrait idéalement pouvoir lire tous les formats existant, cela représente la même quantité de travail que de créer un logiciel graphique professionnel, nous allons donc éviter cette option.

Nos besoins étant modeste, il est plus simple de convertir toutes les fichiers images/textures utilisées dans un format simple à lire, le plus simple pour nous étant le PPM. Pour convertir chaque fichier, il suffit de l’ouvrir dans un logiciel d’infographie et de l’exporter en PPM. Voici les différentes solutions logicielles gratuites que nous vous proposons :

Photopea

Ce clône de photoshop a un énorme avantage : il est online. Ainsi il ne requiert aucune procédure d’installation et il est de plus multi-plateforme car il s’exécute dans le navigateur. Il suffit de faire un gliser déposer du fichier dans le naviteur pour le charger. Ensuite, il suffit d’aller dans le menu : Fichier > Exporter en tant que > Plus > PPM :

Krita

Krita est un logiciel de dessin open source professionnel. Il permet la lecture de nombreux types de fichiers ainsi que l’export au format PPM. Pour cela il suffit de choisir dans le menu Fichier : enregistrer sous et ensuite de sélectionner le format PPM.

Gimp

Le très célèbre logiciel open source de dessin, une interface un peu difficile à prendre en main mais très puissant. Il peut lire de nombreux formats d’image et permet l’export au format PPM. Pour cela, allez dans le menu Fichier, sélectionnez exporter sous, puis ensuite cliquez sur Sélectionner le type de fichier et choisissez PPM.

Code C++ pour lire une texture PPM

Nous avons préparé une fonction : int G2D::ExtractTextureFromPPM(const std::string & filepath, bool applyTransparency) intégrée à la librairie G2D.

Comment fonctionne-t-elle ?

Elle retourne l’identifiant de texture une fois l’image chargée.

Les fichiers images PPM ont été stockés dans un répertoire assets placé au même niveau que les fichiers sources.

Dans le code source, les chemins des fichiers sont indiqués par : « .//assets//xenon.ppm ».

Le booléen indique si on doit appliquer une transparence dans l’image. Si cela est le cas, la couleur du pixel en haut à gauche de l’image est utilisée pour désigner les pixels transparents.

Un exemple de projet est téléchargeable : ProjetXenon.

Voici la démo du sprite du vaisseau se déplaçant à l’écran :

Autres utilitaires

Nous avons parlé des logiciels graphiques pour dessiner et convertir des images. Mais, il existe de petits utilitaires tout autant utiles pour les projets. Voici une petite liste montrant les principaux outils disponibles sous Windows.

Colopicker

Tout d’abord, installez les outils powertoys windows .

Appuyez ensuite sur les touches : Windows + SHIFT + C pour lancer l’outil.

Pour analyser une couleur, déplacez-vous sur sa position et cliquez dessus pour avoir accès aux informations.

Mspaint

Toujours là depuis la naissance de Windows (1985), ce bon vieux Paint vous permet de retailler les parties des images qui vous intéressent. Dans sa dernière version, il peut zoomer ce qui vous permet d’effectuer des retouches au pixel prêt.

Capture

Petit utilitaire sympathique permettant de capturer une zone de votre écran. Il permet aussi de déposer quelques notes sur l’image avant la sauvegarde.

PrtScr

Ce n’est pas un logiciel mais une touche de votre clacier, aussi appelée Print Screen ou Imp Ecr (Imprime Ecran). L’appui sur cette touche n’a pas pour effet d’imprimer ce que vous voyez à l’écran, mais cela effectue une photographie instantannée de l’écran en cours. L’image obtenue est mise automatiquement dans le press-papier. Il n’y a aucun bruit, aucune confirmation de réussite, c’est une action silentieuse. Il vous suffit alors d’ouvrir votre logiciel préféré (Word y compris) et de faire un coller pour déposer l’image depuis le presse-papier.