Qu’est-ce que le parallax mapping ?

Introduction

Définition d’une parallax map

Semblable à une carte topographique, une parallax map est un type de texture caractérisant la profondeur ou la hauteur des détails d’une surface.

Sans effets spéciaux, l’image 3D d’un mur de briques manque de relief. Le parallax mapping lui confère plus de réalisme en creusant davantage les joints. En manipulant ainsi les textures pour leur donner un aspect tridimensionnel dans un espace 2D, cette technique crée une illusion d’optique.

Le parallax mapping a une multitude d’applications, parmi lesquelles :

• Jeux vidéo
• Cinéma et animation
• Réalité virtuelle et réalité augmentée
• Design web

Principes de base de la perception de la profondeur

Les yeux et le cerveau s’associent pour traiter les informations visuelles et percevoir la profondeur. Le cerveau détermine la profondeur au moyen d’indices binoculaires qui l’aident à former une image homogène à partir des images perçues par chaque œil. C’est ce qui vous permet d’apprécier la profondeur.

Il est également possible de discerner la profondeur avec un seul œil, grâce aux indices monoculaires. La perspective, les ombres, la taille relative et les dégradés de texture fournissent des informations importantes au cerveau concernant la profondeur.

Le parallax mapping repose sur la perception de la profondeur par le cerveau humain. Lorsque l’on bouge, les objets proches se déplacent plus que les objets lointains. Le parallax mapping s’appuie sur ce principe pour modifier les textures des objets selon l’angle de vue, simulant ainsi la profondeur à laquelle le cerveau s’attend.

Par exemple, derrière le volant d’une voiture, les arbres proches semblent défiler rapidement, tandis que les montagnes au loin bougent lentement. Cette différence de mouvement crée une sensation de profondeur. Le parallax mapping reproduit cette expérience en déplaçant les détails proches légèrement plus vite, ce qui donne une illusion de profondeur sur une surface pourtant plane.

Textures de parallaxe

Les textures de parallaxe (aussi appelées « displacement maps » ou « height maps ») sont des images en niveaux de gris, où les nuances de gris représentent la hauteur des reliefs d’une surface. Les tons clairs figurent les zones qui ressortent et les tons foncés les zones renfoncées.

Ces textures permettent de donner de la profondeur à des surfaces planes, sans ajouter de polygones. Le réalisme des visuels s’en trouve accentué, sans qu’il soit nécessaire de renoncer à la rapidité ou de ralentir le chargement.

Le parallax mapping utilise des textures pour déterminer la manière dont chaque partie de la texture principale doit évoluer selon l’angle de vue. L’algorithme de la map interprète ensuite les valeurs de niveaux de gris de la texture de parallaxe pour générer une image plus réaliste.

Création de textures de parallaxe

Voici la procédure à suivre pour créer une texture de parallaxe :

1. Choisissez une image de référence. Cette image à la texture plane représente la surface à répliquer (des briques, des tuiles ou une pierre, par exemple).
2. Déterminez la hauteur. Identifiez les parties de la texture que vous souhaitez faire ressortir ou enfoncer.
3. Convertissez l’image en niveaux de gris. Dans un outil de retouche d’images, peignez les zones en niveaux de gris en utilisant des tons clairs pour les parties élevées et des tons foncés pour les parties renfoncées.
4. Peaufinez le design. Accentuez le contraste et le flou de la texture pour créer des transitions plus fluides entre les zones.

Vous n’avez pas à faire tout cela manuellement. Adobe Photoshop fournit des outils qui permettent de créer des images en niveaux de gris et de les peaufiner. Pour créer des textures de parallaxe en quelques clics, optez pour l’outil plus avancé Adobe Substance 3D.

Techniques de parallax mapping

Fonctionnement du parallax mapping

Cette technique repose sur plusieurs principes de fonctionnement :

• Décalage de texture. Le parallax mapping consiste à décaler les coordonnées de la texture. Les échantillons de texture sont déplacés depuis l’angle de vue du spectateur ou de la spectatrice, créant ainsi une illusion de profondeur.
• Displacement maps et height maps. Une map de niveaux de gris définit la distance de décalage à appliquer à la texture.
• Angle de vue. L’effet varie selon l’angle depuis lequel la surface est visualisée. Dès que l’angle de vue change, le décalage est ajusté pour simuler une surface 3D.

Imaginons que vous teniez un livre ouvert, dont chacune des pages représente une couche de profondeur d’une texture. Si vous regardez le livre selon un angle de 90°, vous voyez clairement chaque page. En revanche, si vous l’inclinez, les pages proches recouvrent celles qui se trouvent plus loin. Le parallax mapping reproduit cet effet sur des textures 2D en utilisant une height map qui définit la distance d’éloignement des textures par rapport au spectateur ou à la spectatrice.

Guide détaillé du parallax mapping

Des outils tels que Substance 3D simplifient l’utilisation de cette technique avancée. Voici quelques conseils pour bien débuter avec le parallax mapping :

• Choisissez une texture. Il peut s’agir d’un mur de briques, d’une allée pavée ou d’un sol carrelé, par exemple.
• Créez une height map. Faites appel à une application comme Photoshop pour convertir la texture en niveaux de gris.
• Utilisez un moteur graphique. La plupart des moteurs graphiques, dont Unity, incluent une fonctionnalité de parallax mapping. Importez la texture principale et la height map.
• Appliquez le shader de parallax mapping. Affectez un shader ou des matériaux pour appliquer le parallax mapping à la texture et l’associer à la height map.
• Réglez les paramètres. Ajustez l’intensité de l’effet de parallaxe pour créer l’illusion de profondeur souhaitée.
• Observez la texture sous plusieurs angles. Déplacez la caméra pour observer le changement de texture en fonction de l’angle de vue.

Au-delà de ces conseils de démarrage, n’hésitez pas à pousser plus loin vos essais de parallax mapping.

Avantages

Le parallax mapping offre de nombreux avantages, notamment :

• Un réalisme accru. Offrant un effet plus tactile, les images générées avec cette technique permettent de simuler des expériences réelles.
• Une expérience émotionnelle immersive. Ce surcroît de réalisme a une incidence sur la mise en récit des jeux vidéo et des animations. Les histoires prennent véritablement vie.
• Des performances optimisées. Le parallax mapping permet de donner de la profondeur en manipulant des textures, et non en ajoutant des polygones. Le rendu est ainsi beaucoup plus rapide, ce qui s’avère utile dans les applications en temps réel telles que les jeux vidéo.

Applications pratiques

Le parallax mapping se prête à diverses applications. En voici quelques exemples :

• Jeux vidéo, notamment en réalité virtuelle
• Modèles architecturaux
• Visualisation de produits pour les fabricants et retailers

Passez d’une image plane à la 3D avec le parallax mapping dans Substance 3D.

Des jeux vidéo au design web, le parallax mapping représente une véritable révolution. Cette technologie permet de donner vie aux designs et d’ajouter davantage de détails aux images 2D.

Pour observer la puissance de cette technique, le meilleur moyen consiste à l’appliquer à vos propres designs. Essayez Adobe Substance 3D et créez des images complexes saisissantes, qui semblent jaillir de l’écran.