Les images

Représentation informatique d'une image

Il existe deux possibilités pour représenter numériquement une image :

  • considérer le plan de l'image comme une matrice de points, et pour chaque point préciser la couleur ou le niveau de gris ; on parle alors d'images matricielles (ou bitmap) ;

  • considérer que l'image est un ensemble de courbes élémentaires, définies par des points de départ et d'arrivée, avec des tangentes à ces points ; on parle alors d'images vectorielles.

Le système matriciel est bien adapté à la photographie, tandis que le vectoriel est orienté pour la production de logos, plan, image simple. Le fichier informatique produit sera moins lourd.

Les deux images ci-dessous représentent un cercle :

  • pour l'image vectorielle, il suffit de définir le centre du cercle, son rayon, et l'épaisseur et la couleur de son trait pour décrire complètement l'image ;

  • pour l'image matricielle (bitmap), il faut définir la couleur de chaque point du plan.

Principe d'une image vectorielle et matricielle (http://www.forumfr.com/sujet337331-aide-pour-un-dm-svp.html)

Contrairement à une image vectorielle, un zoom "logiciel" d'une image matricielle conduira forcément à une pixellisation.

Agrandissement d'une image matricielle et vectorielle (http://coyau.blogspot.fr/2009/08/google-sinteresse-au-svg.html)

L'affichage de ce deux types d'image, que ce soit sur un écran ou sur du papier, se fera finalement par un système matriciel.

Un zoom "réel" (avec une lentille par exemple) conduira donc forcément à une pixellisation.

Les scènes que nous utiliserons en réalité virtuelle sont généralement des images matricielles ; mais il est possible d'intégrer des images vectorielles dans ces scènes.

Définition et résolution d'une image matricielle

La définition d'une image matricielle est donnée par le nombre de points élémentaires ou pixels qu'elle intègre, par exemple 800x600 (soit 800 pixels de large sur 600 de haut).

Définition d'une image matricielle (http://www.blog.christophemely.com/resolution-et-definition-comment-faire-bonne-impression/)

La résolution d'une image matricielle est le nombre de pixels par unité de longueur (généralement le pouce, soit 2,58 cm). L'unité généralement utilisée est le dpi ("dots per inch" ou "points par pouces").

Résolution d'une image matricielle (http://www.blog.christophemely.com/resolution-et-definition-comment-faire-bonne-impression/)

La couleur et trichromie soustractive

Un peintre peut théoriquement obtenir toutes les couleurs à partir de trois couleurs élémentaires : Cyan, Magenta et Jaune.

En posant différentes couches de couleur sur le blanc du papier (ou de la toile) il va enlever certaines composantes de couleur à la lumière blanche reflétée par le support.

On parle alors de colorimétrie soustractive.

Trichromie soustractive

C'est également le principe utilisé par les imprimantes, avec la "couleur" noir en supplément, de manière à mieux reproduire les noirs intenses.

L'acronyme CMJN désigne l'utilisation du cyan, magenta, jaune et noir pour reproduire une image.

La couleur et trichromie additive

L'affichage sur un écran, qu'il soit cathodique (s'il en reste encore) LCD, plasma, ou LED, se fait par adjonction et modulation de 3 lumières de couleurs de base (produites par des diodes électroluminescentes ou LED par exemple).

On parle alors de trichromie additive qui utilise trois couleurs primaires, rouge vert bleu (ou RVB ou encore RGB en anglais).

Lorsque ces trois couleurs sont au maximum, elles produisent du blanc et du noir lorsqu'elles sont toutes "éteintes".

Trichromie additive

Chaque couleur primaire est codée informatiquement sous un certains nombre de bits (éléments binaire qui prend la valeur 1 ou 0).

Généralement, le codage d'une couleur primaire se fait sous 8 bits, soit 28=256 possibilités par couleur primaire, qui présentent donc une valeur comprise entre 0 et 255 (noter qu'un logiciel comme Photoshop utilise 16 bits pour représenter une couleur primaire).

La notation décimale n'étant pas très appropriées aux codages informatiques, on préfère souvent utiliser l'hexadécimale, qui permet de représenter les 16 possibilités d'un ensemble de 4 bits avec un seul symbole (qui peut être 0, 1, 2,.........9, A, B, C, D, E , F).

Une couleur primaire peut donc prendre toutes les valeurs entre 00 et FF (soit entre 0 et 255 en décimal).

En pratique, pour faire la différence entre le décimal et l'hexadécimal, on note généralement ce dernier avec un # devant la valeur, donc pour reprendre la phase précédente, "de #00 à #FF".

Une couleur composée d'un mélange des trois couleurs primaires peut donc être représentée par 6 caractères hexadécimaux (dans l'ordre rouge vert bleu) comme indiqué dans le tableau suivant :

Palette de couleurs et code hexadécimal associé (sous 8 bits)

On notera tout particulièrement les valeurs du blanc #FFFFFF, du noir #000000, du rouge primaire #FF0000, du vert primaire #00FF00 et du bleu primaire #0000FF.

Le site ci-dessous permet de s'exercer à la compréhension de cette notation ; vous pourrez :

  • soit déplacer le curseur sur la palette et vérifier le code obtenu ;

  • soit saisir la valeur des couleurs primaire en décimal (de 0 à 255) ;

  • soit saisir la valeur globale en hexadécimal (de #000000 à #FFFFFF).

Les formats informatiques d'une image

Plus une image matricielle aura une définition et une résolution importante, ainsi qu'un codage de la couleur sur un grand nombre de bits, plus elle sera précise, mais plus le fichier informatique associé sera volumineux.

Pour tenter d'optimiser le compromis « précision / volume », différents formats informatiques existent, utilisant des algorithmes de compression avec ou sans pertes de qualité.

Voici les principaux :

  • TIF et PNG pour une compression sans pertes de qualité des images matricielles ;

    • le format PNG intègre la notion de transparence d'une image, ce qui est un atout important pour, par exemple, inclure des logos dans un scène de réalité virtuelle ;

  • GIF pour compression par réduction du nombre de couleurs ;

  • JPG et JPEG pour une compression avec pertes de qualité, le taux de compression(donc la qualité et le volume) étant réglable ;

  • SVG, WMF, EPS pour les images vectorielles.

Utilisations « classiques » :

  • JPEG : photos sur le Web ;

  • PNG : images simples sur le Web, ou images intégrant un transparence (par exemple le fond) ;

  • SVG : logos, images vectorielles ;

  • TIFF : sauvegarde et impression de photographies.

MéthodeChoix des images en réalité virtuelle

Pour réaliser une expérience de réalité virtuelle, vous aurez besoin de 2 types d'images :

  • optionnellement, des images "classiques" 2D, insérées dans votre expérience ;

  • obligatoirement une ou plusieurs images destinées à l'environnement de votre expérience (à moins que vous ne réalisiez cet environnement avec un objet 3D).

Dans les deux cas, le format informatique requis est généralement soit png, soit jpeg.

Les images "classiques" obéissent aux règles habituelles, à savoir qu'elles doivent avoir une définition suffisante pour éviter une pixellisation. Cette définition nécessaire dépend de la taille d'affichage et du zoom qui sera appliqué sur l'image.

Les images destinées à l'environnement (encore appelé scène), devront être des images panoramiques à 360°, de type "equirectangulaires", reconnaissable à l'aspect courbe de ce qui est sensé représenter une ligne droite.

L'affichage se faisant sur 360° avec des zooms parfois important, le "rendu dynamique" et la résolution de l'image sont des paramètres très critiques :

  • on préconise des images de type HDRI (Hight Dynamic Range Imaging : Imagerie à grande gamme dynamique) ;

  • leur résolution doit être suffisante afin d'éviter une pixellisation de l'environnement ; une résolution de 4096 px x 2048 px est préconisée ce qui correspond au format traditionnellement appelé "4K".

Attention : une image HDRI n'est pas forcément une image panoramique.

Vous trouverez ci-dessous un exemple d'image "equirectangulaire" représentant une scène de théâtre (d'après https://hdrihaven.com), dans sa représentation de départ, sur laquelle on peut noter la prédominance de formes sphériques :

Image HDRI panoramique d'une salle de théâtre pour environnement dans Sphère

puis la même image vue dans une visite virtuelle (les formes sphériques sont devenues cubiques).

Image HDRI du théâtre une fois dans l'expérience de réalité virtuelle

MéthodeDéterminer la définition d'une image

Pour connaître la définition d'une image stockée sur son ordinateur, il suffit en général,

  • soit de laisser le curseur de la souris sur le nom ou l'icône de l'image dans l'explorateur de fichiers ;

  • soit d'ouvrir l'onglet Propriétés / Détails du menu contextuel de l'image depuis l'explorateur.

Trouver la définition d'une image

Lorsque ces opérations ne suffisent pas, il faut alors ouvrir l'image dans un logiciel de traitement d'image (GIMP par exemple), pour accéder à ces informations.

MéthodeBanques d'images HDRI panoramiques, gratuites et libres de droits

Une recherche sur internet avec comme mots clés "HDRI" "panoramic" ou "360°" vous donne accès à de nombreuses images pour vos environnements ; elles ne sont cependant pas toutes gratuites et libres de droits.

Vous trouverez sur ces sites des images panoramiques, gratuites et libres de droits.

  • Texturify : http://texturify.com/category/environment-panoramas.html

    • sur ce site, lorsqu'on demande le téléchargement d'une image, elle s'ouvre dans un nouvel onglet du navigateur ; par un clic droit, on demande alors "Enregistrer l'image sous...". Vous pouvez aussi, sélectionner "enregistrer la cible du lien sous" par un clic droit sur "Download Texture".

  • HDI-HUB https://www.hdri-hub.com/hdrishop/freesamples/freehdri

    • sur ce site, vous téléchargez un fichier zip, qui une fois décompressé donne des images au format HDR, il est nécessaire de les convertir en png ou jpeg pour pouvoir les utiliser (voir ci-après).

  • HDRI Haven : https://hdrihaven.com/hdris/

    • sur ce site, les images sont au format HDR, il est nécessaire de les convertir en png ou jpeg pour pouvoir les utiliser (voir ci-après).

  • IHDRI https://www.ihdri.com/hdri-skies-outdoor/

    • sur ce site, les images sont au format HDR, il est nécessaire de les convertir en png ou jpeg pour pouvoir les utiliser (voir ci-après).

  • HDR MAPS : https://hdrmaps.com/freebies

    • sur ce site, les images sont au format .exr, il est nécessaire de les convertir en png ou jpeg pour pouvoir les utiliser (voir ci-après).

  • Polyhaven https://polyhaven.com/hdris

    • sur ce site, les images sont au format .exr, il est nécessaire de les convertir en png ou jpeg pour pouvoir les utiliser (voir ci-après).

MéthodeModification du format d'une image

Les images chargées sur internet peuvent être dans un format incompatible avec votre logiciel (par exemple le format ".hdr" destiné à la photographie, ou encore le format ".exr" destinés au stockage) et dans une définition trop importante.

Il est donc nécessaire d'effectuer un traitement du fichier informatique correspondant à l'image, avec un logiciel comme GIMP (open source de retouche d'image, équivalent à Photoshop disponible sur https://www.gimp.org/downloads/ ).

Dans l'exemple ci-dessous, on passe du format .hdr au .jpeg, et d'une définition de 8K à 4K. Si vous souhaitez simplement modifier l'extension du fichier (de ".hdr" vers ".jpeg" par exemple), omettez le seconde étape.

MéthodeIcônes diverses

Vous trouverez sur le net de nombreuses images, icônes et logos pouvant servir pour signaler un point d'intérêt, par exemple sur ce site :

sur lequel vous télécharger un fichier ".zip" à décompresser sur votre disque dur, dans lequel se trouve un grand nombre d'icônes.

Ce sont des images très simples, généralement au format ".png" afin d'avoir un fond transparent.

Si vous cherchez une image spécifique, ajoutez la mention « png » dans la barre de votre moteur de recherche pour accéder à des images à fond transparent.

MéthodeVignettes

Certains sites proposent avec une image panoramique HDRI, une vignette ou miniature ("Thumbnail" en anglais), représentant la scène "en vue réelle" sur une petite image, légère et facile à intégrer dans une visite virtuelle pour faire un lien vers une nouvelle scène par exemple.

Si vous ne disposez pas de la vignette d'une scène, vous pouvez en créer une facilement par la méthode suivante :

  • réalisez une visite avec le panoramique dont vous souhaitez extraire la vignette ;

  • faite une simulation de la visite ;

  • prenez une copie d'écran, avec un logiciel comme Pointofix par exemple.