Créez un panoramique 360 pour votre blog de voyage

Avant-propos : j’avais initialement publié cet article sur le blog TravelPlugin. Il réintègre aujourd’hui mon blog après avoir subi une petite mise à jour. Bien que sortant quelque peu de la ligne éditoriale du blog, il répondra tout du moins aux questions des quelques curieux qui me demande « mais comment fais-tu tes panoramiques ».

Ne vous est-il jamais arrivé de vous dire : « Bof, ça ne rend pas là… » en ajoutant des photos sur votre blog de voyage ? Pour y remédier : le panoramique 360. Également appelé visite virtuelle, il permet au lecteur de se déplacer dans la photo comme bon lui semble en naviguant avec sa souris.

Pour créer de superbes panoramas interactifs à 360° et les insérer dans votre blog, voici le tutoriel complet, de la prise de vue au montage puis à la publication. Vous plongerez vos lecteurs au cœur de l’action et ainsi les envoûterez comme ici devant le Trésor de Pétra !

Pour profiter pleinement du panoramique 360°, passez un mode plein écran

Cliquez sur la table des matières pour accéder aux différentes sections :

Le matériel
Quel objectif choisir ?
La prise de vue

Le montage
Assemblage du panoramique avec Hugin
Visualisation du panoramique avec FSPViewer
Post-traitement avec Gimp

Insertion du panoramique dans votre blog WordPress

Si vous n’utilisez pas WordPress, toutes les étapes restent valables excepté l’insertion dans votre blog. Et cerise sur le gâteau, tous les logiciels utilisés sont open sources, gratuits, et fonctionnent aussi bien sous Linux, Windows ou Mac OS.

Le matériel

Pour faire un panoramique 360, il faut prendre plusieurs photos que l’on assemblera ensuite. Le principe est le même que les panoramiques horizontaux. Vous recollez plusieurs photos prises en enfilade, si ce n’est qu’ici il faut couvrir tout le champ : droite, gauche, haut et bas ; partout quoi !

Quel objectif choisir ?

Déroulez à plat un planisphère, vous vous retrouvez avec un rectangle de 360° horizontal par 180° vertical.

360×180
Un pano 360 c’est ça… Non sans blague !

Un objectif couvrant les 360° ne demanderait qu’une seule photo, mais évidemment ça n’existe pas. Comprenez que plus votre objectif sera un grand angle moins vous aurez de photos à prendre pour couvrir ces 360°. Cela simplifie la prise de vue et l’assemblage.

90×45
L’objectif avec un champ horizontal de 90° et vertical de 45° nécessite 16 photos

Malheureusement, ces maudits fabricants ne parlent pas en degrés, mais en longueur focale exprimée en mm.

Alors quel angle couvre votre objectif ?

  • Objectif équivalent 28mm* – Champ horizontal 65°, champ vertical 46° soit 4 rangées horizontales de 6 photos
  • Objectif équivalent 16mm – Champ horizontal 96°, champ vertical 74° soit 3 rangées horizontales de 4 photos
    (* 28 mm sur un boîtier full-frame, ou 18 mm sur un APS-C ou encore 14 mm sur un Micro 4/3)

Mais ces valeurs sont avec des recouvrements trop faibles entre chaque photo. Ce qui rendra l’assemblage très difficile, voire impossible.
Faites votre calcul suivant la taille du capteur de votre appareil et la longueur focale de votre objectif grâce à ce calculateur où après avoir renseigné la taille du capteur de la focale de l’objectif, vous obtiendrez l’angle de champ (Angle and Field of View, AoV) horizontal, vertical et diagonal.

L’objectif Fisheye

Avec son angle de champ de 180° en diagonale, l’objectif fisheye est le Graal du panoramique 360. On en trouve dans toutes les marques de boîtier. Il fait des photos très déformées dans les coins, mais pratiques pour notre pano.

OneChaï
Dessin © Tony de TravelPlugin

Mon fisheye est un Samyang 7,5 mm monté sur un boîtier hybride à monture Micro 4/3, extrêmement compact. Ceux pour boîtier APS-C sont beaucoup plus volumineux.

Il existe également des adaptateurs fisheye que l’on peut ajouter au bout de l’objectif d’un compact ou d’un bridge.

La prise de vue

Mieux qu’un très long blabla incompréhensible, voici une petite vidéo utile.

Important : En plus du mode auto ISO, débrayez la balance automatique des blancs et choisissez une position fixe. La balance des blancs doit être la même sur toutes les photos.

En théorie, il est nécessaire d’utiliser un trépied et une tête panoramique. Le but étant de prendre toutes vos photos depuis exactement le même point. De plus votre appareil doit pouvoir pivoter autour du « point de la pupille d’entrée » pour éviter les erreurs de parallaxe.

En pratique, je n’utilise rien de tout ça. Je voyage léger donc le trépied reste à la maison ! Aucun problème pour les panoramiques de paysages, mais c’est sujet à quelques bugs au montage si vous êtes en ville.
La foule est tentante à prendre, elle crée une impression d’immersion, mais attention, les personnes auront bougé d’une photo à l’autre ! Et si tout le monde bouge, bonjour la galère pour remonter tout ça !

Il est préférable de ne pas avoir d’objets trop proches de vous. Ça donne certes une certaine profondeur à la scène, mais sans trépied ni tête panoramique ça risque fort d’introduire des problèmes de parallaxe et de ruiner votre pano.

Le montage

Vous êtes donc rentré de voyage avec vos super panos et vous trépignez d’impatience de monter tout ça.

Assemblage du panoramique avec Hugin

Voyons d’abord les 7 photos utiles à notre tutoriel. Elles ont été prises à Boukhara en Ouzbékistan.

photo1
Photo horizontale n° 1 – Boukhara en Ouzbékistan
photo2
Photo horizontale n° 2 – Boukhara en Ouzbékistan
photo3
Photo horizontale n° 3 – Boukhara en Ouzbékistan
photo4
Photo horizontale n° 4 – Boukhara en Ouzbékistan
photo5
Photo du Ciel – Boukhara en Ouzbékistan
photo6
Photo du sol n° 1 – Boukhara en Ouzbékistan
photo7
Photo du sol n° 2 – Boukhara en Ouzbékistan

Téléchargez et installez Hugin. Ce logiciel d’assemblage de panoramique convient également très bien pour assembler de simples panoramiques horizontaux.

Hugin1
Au démarrage de Hugin vous obtenez la fenêtre d’aperçu rapide. Cliquez pour agrandir.

Cliquez sur « 1. Charger les images »

Sélectionnez et chargez votre série de 7 photos à assembler.
Si votre objectif communique les données de prise de vue dans les EXIF, les champs de la boite « Données de l’appareil et de l’objectif » se remplissent automatiquement après le chargement de vos photos.

Si votre fisheye est un objectif 100 % manuel sans contact électronique avec le boîtier, les champs EXIF de vos photos seront vides. Renseignez-les comme ci-dessous.

Hugin2
Le champ HFOV se remplit seul d’après la distance focale et le coefficient multiplicateur

Pour connaître le coefficient multiplicateur de votre boîtier, voici une liste de coefficients de conversion.

Une fois fait, vos 7 photos apparaissent dans la zone de prévisualisation. Peu importe dans quel ordre, elles ne sont pas reliées entre elles. Pour cela il ne vous reste plus qu’à…

Cliquer sur « 2. Aligner »

Hugin va alors chercher des points communs entre chaque photo pour les assembler, d’où la nécessité d’avoir des zones de recouvrement.

Hugin3
On voit bien que les différentes photos ont été assemblées, mais le résultat est très grossier

Le véritable assemblage n’a pas encore été fait. Hugin s’en sort bien pour assembler les 4 photos prises à l’horizontale, mais c’est beaucoup plus aléatoire pour le ciel et le sol.

Il est alors possible que ce genre de popup apparaisse :

Hugin3a
Hugin n’a pas réussi à raccorder la photo 5 aux autres

Trouvez et insérez vos points de contrôle manuellement

Les points de contrôle sont les points communs entre deux photos

Ouvrez une nouvelle fenêtre dans le menu « Vue-> Éditeur de panorama » et allez sur l’onglet « Points de contrôle ». Au-dessus de chaque photo se trouve un menu déroulant avec la liste de nos 7 clichés et le nombre de points de contrôle.

Hugin6
Hugin a trouvé 19 points de contrôle entre ces 2 photos et représentés par des petits carrés numérotés

Vous pouvez vous amuser à vérifier, mais généralement Hugin ne se trompe pas.

Hugin7crop
Vous pouvez donc contrôler le nombre de points communs entre chaque photo

Tout va bien entre les 4 photos horizontales, Hugin a trouvé de nombreux points de contrôle. Vous pouvez les passer à l’aide des petites flèches orange qui se trouvent entre les 2 images.

La photo du ciel colle également avec nos 4 horizontales.

Hugin8crop
Il y a de nombreux points de contrôle, car notre photo du ciel comprend le haut des 2 mosquées.

Si votre ciel ne comprend que très peu d’objets de la scène, il y aura peu de points de contrôle.

Les clichés du sol vont demander un peu plus de travail.

Hugin8aCrop
Seulement 8 points de contrôle avec l’image 2 : C’est un peu léger !

Trouvez des points communs entre cette photo du sol et au moins deux des quatre photos horizontales.

Hugin8b
Si nous comparons la photo 6 et la 1, nous avons la même raie de lumière au sol, sur la droite

Dans le coin supérieur droit de la photo 6, on peut voir le haut d’une marche qui apparaît également sur la photo 1. Ajoutez à la main ce point de contrôle que ce faignant d’Hugin n’a pas trouvé.

Mais avant décochez la case « Estimation automatique » en bas à droite de l’écran. La fonctionnalité devient pénible avec ce genre de photos à orientations différentes.

Hugin9
Zoomez automatiquement en Cliquant sur la zone recherchée de la photo 6. Une petite croix apparaît.

La zone est zoomée davantage dans le carré de la croix. Déplacez la croix à loisir en choisissant de préférence l’intersection de deux lignes. 

Hugin10
Vous pourrez identifier précisément le même point sur l’autre photo – Puis cliquez sur « ajouter » en bas à droite

Ce popup apparaîtra alors assez souvent :

Hugin11
Pas d’inquiétude, ignorez-le en cliquant sur valider

Renouvelez l’opération jusqu’à avoir si possible 4-5 points de contrôle dans des zones distantes de l’image. L’orientation différente des images vous donne parfois des nœuds au cerveau, mais c’est très bon pour améliorer votre perception 3D.

Hugin11a
En répétant l’opération manuelle sur plusieurs endroits, nous arrivons à ce résultat

Réitérez l’opération avec la deuxième photo du sol, puis entre elles deux également.

Hugin11b
Nous avons de la chance, Hugin a trouvé 12 points de contrôle sur le sol, là où il n’en trouve très souvent aucun

L’astuce ici est d’identifier les défauts dans les pavés que l’on peut un peu plus facilement voir entre deux images.

Hugin a également trouvé un point sur mes tongs. Les points de contrôle se trouvant sur une personne doivent être supprimés, car celle-ci a nécessairement bougé entre les deux photos. Cliquez dessus puis « supprimez » en bas à droite.

Cliquez à nouveau sur « 2. Aligner »

Après l’ajout manuel des points de contrôle, Hugin ne procède pas à nouveau automatiquement à l’agencement des photos entre elles. Le fait de les réaligner fera tout rentrer dans l’ordre.

Ajoutez un masque pour supprimer vos pieds

Il a beau être très intelligent, Hugin ne gère pas vos pieds à l’assemblage. Il va falloir lui expliquer et c’est là que les masques interviennent. Au moment de la prise de vue, je vous ai dit de prendre deux photos du sol.

Sous l’onglet « Masques » de l’éditeur de panorama. Choisissez la photo puis cliquez sur « Ajouter un nouveau masque ».

Les points de contour s’insèrent par clic gauche puis faites clic droit une fois terminé pour obtenir ceci. Faites de même pour l’autre photo du sol.

Hugin13
Mettez « Exclure la région » comme type de masque si ce n’est pas la valeur par défaut

Il n’est pas rare qu’après l’assemblage les personnes ayant bougé au cours des prises de vue soient coupées en deux. Dans ce cas, masquez-les sur une des deux photos.

Redressez la ligne d’horizon

Sous l’onglet « Déplacer/Glisser » de l’aperçu rapide, maintenez le clic gauche enfoncé sur l’image et déplacez la de gauche à droite pour choisir le centre de votre pano. Je ne vous conseille pas de haut en bas, ça fait des trucs un peu bizarres !

Cliquez sur « Redresser » afin de remettre l’horizon bien droit.

Hugin15
On ne veut pas qu’une des mosquées soit coupée en deux, un morceau à gauche et un autre à droite du pano.

Cliquez sur « Assembler »

En bas à droite de l’écran, dans l’onglet « Assemblage » de l’éditeur de panorama. Puis renseignez les éléments comme ci-dessous.

Hugin16.1
Cliquez « Calculer la taille optimale » Hugin conservera la résolution de départ des images

Trouvez un nom de projet, ici Boukhara_Kalon.pto, et enregistrez. Ce fichier ne comprend aucune image, juste les points de contrôle et toute la configuration de votre panoramique 360.

Choisissez ensuite un nom pour le fichier JPG de sortie. Je choisis généralement le même, Boukhara_Kalon.jpg, et c’est parti pour le véritable assemblage. Une fois l’opération terminée, votre image équirectangulaire ressemble à ça :

Boukhara_Kalon_ori_small
C’est presque parfait, il y a juste deux zones de vide en bas de l’image qui font du noir

Hugin n’avait aucune information pour ces zones, car c’est là où je me trouvais. Je ne me suis pas assez décalé pour prendre la seconde image du sol. Rien de dramatique, on corrigera avec Gimp.

Mais avec le bas très déformé, il n’est pas aisé de se rendre compte du rendu final de cette image. Nous allons donc utiliser FSPViewer.

Visualisation du panoramique avec FSPViewer

Téléchargez et installez FSPViewer (sous Linux, les archives disponibles ici ne sont généralement plus utilisables, le plus simple étant alors d’installer FSPViewer sous Wine). Chargez le fichier Boukhara_Kalon.jpg et bingo ! Vous pouvez naviguer comme bon vous semble dans votre pano et zoomer avec la molette.

Les zones de vide qui semblaient assez grosses sur l’image à plat sont en fait minuscules. Le résultat est parfait.

Il arrive qu’il y ait des bugs d’assemblage avec des décalages entre images. Dans ce cas, retournez dans Hugin pour voir s’il ne manque pas quelques points de contrôle dans la zone à problème. Mais très souvent, le bug est dû à un problème de parallaxe. Rappelez vous, la photo a été prise sans trépied ni tête panoramique et sans doute avec des objets trop proches de vous.

Post-traitement avec Gimp

Pourquoi Gimp ? Je fais tout mon post-traitement avec ce logiciel et en suis très satisfait. Mais libre à vous d’utiliser ici l’éditeur photo de votre choix.

Pour combler vos zones vides, deux solutions s’offrent à vous :

Ma préférence va à la deuxième option qui est bien plus puissante. Mais le tampon fera aussi bien l’affaire avec une zone assez petite.

Vous pouvez ensuite retoucher le contraste, la lumière, les couleurs, etc…  Comme bon vous semble, comme pour une photo classique.
Ne faites surtout pas ça avant l’assemblage ! Vos images ne s’accorderont plus à cause des corrections différentes d’une image à l’autre.

Insertion du panoramique dans votre blog WordPress

Nous rentrons maintenant dans la partie spécifique à WordPress

Il fut une époque lointaine, très lointaine même, où ce genre d’animations était géré par la technologie flash. Il en était ainsi pour les premiers panos publiés sur ce blog. Mais voilà, petit flash a vécu et petit flash sera bientôt mort, il est donc temps de tourner la page et de passer à autre chose.

Il existe plusieurs solutions, l’une d’entre elles étant Pannellum. Et par chance, il existe un plugin WordPress qui utilise Pannellum, à savoir WP VR – 360 Panorama and virtual tour creator for WordPress.

Je ne vais pas rentrer ici dans un tutoriel sur ce plugin, car une documentation plutôt complète est disponible. Certes, cette documentation est rédigée dans la langue de Shakespeare, mais si ce M Shakespeare n’est pas votre ami, nul doute que M Google Translate devrait vous réconcilier.

Et voilà, c’est fini et ça donne ça !

Pour profiter pleinement du panoramique 360°, passez un mode plein écran

À votre tour de créer de superbes panoramiques 360° pour votre blog.

Vous êtes paré pour agrémenter votre blog de superbes panoramiques à 360°

Vous pouvez voir tous mes Panos 360° mis en ligne sur le blog. Notez d’ailleurs que le rendu est très différent avec des espaces ouverts comme dans ce pano dans le désert à Merzouga au Maroc.

Un dernier conseil, n’attendez pas de partir en voyage pour prendre plein de panos et constater qu’aucun n’est exploitable à votre retour. Prenez des panoramiques chez vous et vérifiez que votre technique de prise de vue est correcte.

Une dose régulière de One Chaï ?

Comme les 1675 abonnés, reçois 2 fois par mois les nouveaux articles par mail.

Des récits drôles et enjoués, garanti 0 spam et tu désertes quand tu veux !


J'ai lu et accepte la politique de confidentialité de ce site.

Laurent

À propos de Laurent

Attiré par les destinations moins courues, en recherche perpétuelle du Kiffistan, je partage ici ma passion du voyage. J'essaye désespérément de me prendre très au sérieux, mais à ce jour, c'est un échec cuisant. Tu en sauras plus sur ce blog et sur moi dans l'à propos.