La ONE X2 est une caméra grand public parfaitement utilisable pour la création de visites virtuelles. Je vous propose ici un processus simple en plusieurs étapes parfaitement décrites pour créer très rapidement vos visites virtuelles. Le logiciel de visualisation que j’utilise est Pannellum, il donne un très bon rendu et est totalement gratuit.
PREREQUIS
Pour la capture des images, il vous faut disposer d’une caméra 360, d’un mini trépied et d’une perche à selfie.
ETAPE 1 – CAPTURE
La capture de chaque image 360 n’a rien de particulier ici. Si vous ne souhaitez pas que le photographe apparaisse dans l’image, vous pouvez utiliser les techniques d’effacement que j’ai décrites dans mes articles Effacement mono capture et Effacement avec deux captures.
Une fois capturée et éventuellement traitée, l’image finale doit être exportée afin d’être disponible en projection équirectangulaire et au format jpeg.
ETAPE 2 – CONFIGURATION DE LA VISUALISATION
Pour tester l’inclusion de votre image, elle doit être recopiée et accessible par votre serveur. l’URL de l’image doit ensuite être ajoutée à la configuration de Pannellum. A titre d’exemple, l’activation via iframe peut se faire par un code de ce type:
<iframe style="border-style: none;" src="chemin-pannellum.htm#panorama=chemin-image.jpg" width="600" height="400" allowfullscreen="allowfullscreen"></iframe>
Pour plus de possibilités, je vous conseille de définir une configuration avec un fichier JSON. La palette des possibilités est alors bien plus large, et est d’ailleurs nécessaire pour définir une visite virtuelle. Exemple de fichier :
{
“default”: {
“firstScene”: “img0”,
“author”: “panhobby”,
“sceneFadeDuration”: 1000
},
"scenes": {
"img0": {
"title": "Entrée",
"hfov": 110,
"pitch": -2.8,
"yaw": 300,
"type": "equirectangular",
"panorama": "chemin/00.jpg",
"hotSpots": [
{
"pitch": -5.29,
"yaw": 260,
"type": "scene",
"text": "Intérieur 1",
"sceneId": "img1",
"targetPitch": 0,
"targetYaw": 5
}
]
},
"img1": {
...
},
"img2": {
...
}
}
Avec cette configuration, on retrouve une section par image, pour chacune d’elle, les paramètres pitch et yaw définissent la position centrale par défaut de l’image (elle doit être fixée pour la première image).
Ensuite, on peut définir des points de contrôle ou lien d’une image à une autre dans la section hotspots . La position du point de contrôle est définie par les paramètres pitch et yaw. Le paramètre scenedID est le nom de l’image à afficher sur activation du point de contrôle, et enfin les paramètres targetPitch et targetYaw sont la direction centrale à afficher dans la nouvelle image.
Bien que ce type de configuration soit très simple, il n’est pas aisé de connaitre les coordonnées dans l’image. Pour cela, je vous conseille d’activer le mode debug en fixant le paramètre hotSpotDebug à “true”. Une fois activé, pour chaque clic avec la souris dans l’image, les coordonnées pitch et yaw sont affichées dans la console du navigateur. Cela vous permet d’obtenir les coordonnées du point central de l’image, que vous devez ensuite fixer dans les paramètres yaw et pitch, ou targetYaw et targetPitch.
En renouvelant ces configurations pour chacune des images, vous créez des liens entre les images ce qui constitue votre visite virtuelle.
Dans cet exemple, j’ai configuré uniquement deux images qui sont liées entre elles depuis l’image de départ vers la seconde image, et vice-versa. Pour réduire le temps de chargement des images, elles sont en résolution réduite de 50% de la résolution max de la ONE X2 et avec un taux de compression relativement élevé.
CONCLUSION
Dans cet article, nous avons vu comment configurer Pannellum pour réaliser des visites virtuelles de quelques images. Vous l’aurez noté, la tâche n’est pas extrêmement aisée pour un grand nombre d’images. Dans ce cas, l’utilisation de logiciels plus évolués, offrant une interface graphique de configuration, mais également plus couteux, sera plus approprié.
A noter que je n’ai montré qu’une configuration simple, le logiciel Pannellum dispose de bien plus de paramètres de personnalisation. Pour une liste exhaustive, veuillez vous rendre sur le site du logiciel ainsi que sur le site de son développeur Matthew Petroff.