La possibilité de prendre des photos panoramique "spériques" (donc sur 360° de large et +180°/-180° de haut) est une belle innovation proposée gratuitement par Google sur les smartphones android et iOs. Le fonctionnement de base consiste à capturer une "image sphérique" avec l’app Street View de Google et à la "publier" : après quelques minutes de traitement votre photosphère apparait et le fichier jpg correspondant est enregistré dans le répertoire "pictures/panoramas" de votre smartphone. C’est ce fichier qu’il faut récupérer pour l’utiliser sans passer par les services en-ligne de Google.

Parenthèse pour un gros coup-de-gueule contre Google : ce service permet à GoogleMap de s’enrichir gratuitement avec toutes les photos (normales et sphériques) publiées par les utilisateurs sans aucune contrepartie. On peut ainsi les retrouver et les utiliser avec leur url sur GoogleMap : ceci était vrai au début mais dépuis quelques temps Google réfuse des photos, mêmes des publications anciennes, sans prévenir. Certaines photos ne sont donc plus visibles sur GoogleMaps. J’ai donc sur mes sites spip des liens GoogleMaps qui affichent maintenant un pavé noir : merci Google, on ne me reprendra plus !

Pour réaliser des photos-sphères enregistrées en jpg, il a aussi des applications (android et iOs) qui font ça très bien et en particulier l’excellent GCAM (décliné ici) pour nombreux modèles android.

J’ai donc cherché un moyen pour afficher directement, dans les articles spip, les fichiers jpg de mes photospères sans passer par Google et j’ai trouvé "Photo Sphere Viewer" qui fait cela correctement : https://photo-sphere-viewer.js.org
"Photo Sphere Viewer" est un ensemble de scripts js qu’il faut télécharger et regrouper dans un répertoire à installer sur le serveur de votre site spip, à la racine (donc à cotè des répertoires de spip : tmp, local, squelettes, etc.). J’ai téléchargé ces script et je les ai regroupés dans un répertoire "psv" (psv = photo sphere viewer). Attention, il fait 280Mo zippé et 470Mo dézippé.

psv.zip

 Dézipper psv.zip et télécharger le répertoire "psv" obtenu sur le serveur du site spip (à coté de "squelettes")

J’ai ensuite mis au point un "modèle" spip <psvxxx|> qui réalise l’affichage en mode "photo-sphère" d’un fichier jpg d’identifiant xxx inséré dans un article spip.

psv-html.zip

 Dézipper psv-html.zip et télécharger le modèle "psv.html" dans le répertoire "modeles" à l’intérieur de "squelettes".

Enfin, il faut copier-coller les lignes ci-dessous au début du texte de chaque article dans lequel il y aura des photo-sphères (ceci active les scripts nécessaires à l’affichage des photo-sphères) :

<link rel="stylesheet" href="../psv/psv421/dist/photo-sphere-viewer.css"/>
<script src="../psv/three/build/three.min.js"></script>
<script src="../psv/uevent201/browser.js"></script>
<script src="../psv/psv421/dist/photo-sphere-viewer.js"></script>

Un peu de théorie ...

Idéalement une photo sphérique couvre 360° horizontalement et +180°/-180° verticalement, ce qui produit une image de rapport LxH = 2x1 qui est affiché sans déformation par "Photo Sphere Viewer".
En réalité on est souvent amenés à prendre des photos spériques incomplètes, ne couvrant pas la totalité du champ visuel :

Il faudra donc spécifier dans le modèle <psvxxx|> des paramêtes de "crop" afin de ne pas (trop) déformer l’image affichée.

L’affichage ainsi obtenu des images "photo-sphère" fonctionne su tout navigateur web actualisé (firefox, chrome, safari, edge) sur PC, Mac, et mobiles android et iOs. On peut se déplacer dans l’image avec la souris ou les doigts, on peut agrandir ou réduire l’affichage, on peut afficher l’image en plein écran, on peut lancer la rotation automatique de l’image, on peut télécharger le fichier jpg de l’image ...

Cérise sur le gateau ... on peut afficher plusieurs photo-sphères dans un même article spip !

Les paramètres disponibles pour ce modèle <psvxxx|> sont les suivants :
 xxx = identifiant spip de l’image jpg à afficher
 width = largeur de l’image en vw (par défaut = 97) - la hauteur de l’image est calculée automatiquement par le modèle <psvxxx|>
 align = alignement de l’image : left, center ou right (par défaut = center)
 offset = positionnement en rotation de l’image : de 0 à 2π (par défaut = 0)
 zoom = agrandissement de l’image : de 0 à 100 (par défaut = 0)
 shifty = décalage vertical de l’image en vw (par défaut = 0)
 legende = texte (en blanc) incrusté dans la barre de navigation (par défaut = rien)
— si legende=1 texte incrusté=TITRE du document-image
— si legende=2 texte incrusté=DESCRIPTIF du document-image
— si legende=texte libre=texte incrusté - ATTENTION : dans les légendes ne pas utiliser le caractère ’ (guillemet simple droit) qui bloque le script d’affichage. Si nécessaire, utiliser le caractère ’ (guillemet-apostrophe).

---

Exemple d’affichage d’image "photo-sphère"
 image id=399 avec les paramètres par défaut

PIC-20220607PHOTOSPHERE

---

Ci-dessous deux exemples d’affichage d’images panoramiques
 image id=394 avec les paramètres par défaut

PANO_20210806_095636

 image id=395 avec les paramètres par défaut

PANO_20210806_095736

---

Ci-dessus des affichages en mode "photo-sphère" de panoramas obtenus collant trois images à l’aide de l’outil "photomerge" de Photoshop
 assemblage "cylindrique", image id=387 avec les paramètres par défaut et "shifty=100"

Panorama_maso_cyl2k

 assemblage "automatique", image id=388 avec les paramètres par défaut et "shifty=50"

Panorama_maso_auto2k

 assemblage "repositionnement", image id=389 avec les paramètres par défaut et "shifty=100"

Panorama_maso_reposnt2k

---

Ci-dessus des affichages en mode "photo-sphère" d’images panoramiques et normales
 sommet Lagazuoi, image id=390 avec les paramètres par défaut et "shifty=270" et "zoom=20" et "legende=2"

Lagazuoi

Vers le sommet

 le cinque-torri vu du Lagazuoi, image id=391 avec les paramètres par défaut et "legende=Le massif des "cinque torri" vu du Lagazuoi"

Cinque torri