Visite virtuelle


La visite virtuelle est notre cœur de métier.
Nous l’envisageons comme une nécessité absolue
pour un site présentant un espace.

 

 

Notre processus de production commence par une écoute attentive des besoins de nos clients, et, grâce à une veille technologique poussée, nous leur proposons les solutions interactives les plus adaptées à leurs besoins, et à leurs budgets.

Nous définissons ensemble le cahier des charges et l’agenda de production. Nous mettons en place un site de travail permettant de collaborer en temps réel à la conception de la visite virtuelle, puis à celle du site définitif.

Ce principe de construction collaborative permet d’intégrer votre vision de la visite (réelle) d’un bien, que nous allons traduire en une visite virtuelle. Ainsi, la visite virtuelle est le reflet de votre savoir-faire.

 

Avant-propos:
Les contenus interactifs présentés dans cette page réagissent aux mouvements de souris quand elle est au dessus d’eux,
dans cette configuration, ce n’est plus la page qui est active, mais bien le contenu interactif.
Pour monter ou descendre dans la page, vous devez donc utiliser les espaces latéraux.

 

La prise de vue:

 

Première étape de la conception de la visite, elle est capitale et déterminante pour toute la suite de la réalisation. Les choix des points de vue sont élaborés en fonction de leurs intérêts esthétiques et fonctionnels. Nous réalisons les prises de vues en tenant compte de la meilleure heure de la journée ou de la nuit, avec un positionnement permettant de mettre en valeur le lieu, et de lui donner le meilleur rendu 360°.

Nous photographions systématiquement en HDR (High Dynamic Range) de afin d’enregistrer toutes les valeurs de luminosité de la scène, et de manière à pouvoir la « magnifier » tout en la gardant crédible. Vous pouvez voir l’effet d’une prise de vue HDR dans l’illustration ci-dessous, en déplaçant le slider.

 

Nous travaillons également systématiquement en haute définition (taille de l’équirectangulaire : 20000 x 10000 pixels), de telle manière à pouvoir offrir au visiteur la possibilité de zoomer dans l’image, et de voir précisément tous les détails de la scène, comme dans l’exemple çi-dessus, extrait de la visite virtuelle du musée Bourdelle.

Lors de la prise de vue des images 360, nous réalisons également des prises de vues conventionnelles, en haute définition, en HDR, pour pouvoir les utiliser dans un diaporama intégré dans la visite virtuelle, ou ailleurs dans le site.

Les prises de vues 360 peuvent éventuellement être faites en stéréoscopie, afin de proposer aux utilisateurs de casques VR (Google cardboard et Oculus Rift), une immersion en relief dans la scène. Dans ce cas, la prise de vue est réalisée avec un robot motorisé synchronisant deux appareils :

appareil_photo_stereo

Une fois la prise de vue effectuée, le traitement de l’image commence: nous développons les fichiers bruts (RAW), réalisons le HDR et retouchons si besoin (par exemple, les caméras de surveillance sont gommées pour des raisons évidentes de sécurité). puis nous assemblons les images en une seule image, l’équirectangulaire, comportant toutes les images en une seule projection, de 360° horizontalement par 180° verticalement, c’est cette image que nous utilisons pour le montage de la visite virtuelle.

bourdelle-equi

Cliquez sur l’image pour lancer la visite

 

Le montage de la visite:

 

 

Tous les équirectangulaires étant montés, nous les intégrons dans la visite, et créons l’interface graphique entre la visite et le visiteur.

Si notre client à déjà une charte graphique, nous l’intégrons dans la visite en la respectant scrupuleusement pour ce qui est des éléments déjà existants ( logo, typo, … ) et pour des éléments non définis (boutons de navigation), nous les créons en s’inspirant de la charte graphique existante, et les intégrons après validation par le client. Nos réalisations étant « sur mesure », nous ne proposons pas de « packs » comprenant telle ou telle fonctionnalité, néanmoins, voici une liste non exhaustive de fonctionnalités disponibles:

IIntroduction de la visite:
L’introduction de la visite est la première impression qu’elle donne,
elle doit donc être réfléchie pour donner le ton,
et impacter le visiteur d’entrée de jeu.

  • Splashscreen: Certaines visites doivent présenter leur contenu en différentes langues, dans ce cas, c’est à ce niveau que le choix se fait. En général, la visite présente un écran d’accueil, qui peut être composé de texte seul, d’une image seule, d’un mélange des deux, d’une vidéo, d’un bouton d’appel à une action, ou d’une composition de ces contenus.
  • Introduction petite planète : ce type de projection permet une entrée dans l’image hors du commun, elle peut être complètement paramètrée en terme de durée et de projection. (exemple de l’hôtel du Collectionneur, exemple de Mars par Curiosity ).
  • Barres de chargement : elles peuvent prendre la forme de boucles ou de barres, afficher un texte ou une image, et renseigner le visiteur sur l’état du chargement de la visite.
  • Contrôles masqués/affichés : les contrôles de la visite peuvent être masqués et ne s’afficher qu’après un certain délai ou être affichés dès le début.
  • Fond sonore : une musique ou un fond sonore peuvent être actifs, ou être lus après un clic sur son bouton.
  • Autorotation : la visite peut tourner d’elle même, ou rester immobile, de même il est possible de la paramètrer pour que sans action, elle présente tous les panoramas (autotour), ou qu’elle présente un déplacement aléatoire après un certain délai sans actions de la part du visiteur (idleview).
  • gyroscope: pour les navigateurs mobiles, tablettes et smartphones, la navigation peut se faire en utilisant le gyroscope du terminal. Dans ce cas, l’utilisateur n’a qu’à tourner son appareil pour que la visite tourne du même angle. Cette fonctionnalité peut être activée dès le début de la visite, ou être engagée sur un clic du visiteur.
  • prise en main du visiteur: dans certains cas, il est souhaitable d’orienter le visiteur vers un point particulier de la sphère, de lui donner une information, d’appeler une interaction.

 

IIDesign:
Le design de la visite est son identité,
il positionne la visite dans un univers,
et contribue à l’unité graphique avec le site.


Les boutonsbarre de boutons

Les boutons de navigation sont essentiels pour l’interaction du visiteur avec la visite,
ils sont également un élément de design et contribuent ainsi à l’identité graphique.


 

btn_zoom bouton zoom :  le visiteur peut zoomer ou dezoomer dans l’image. Nous pouvons concevoir des visites avec un très fort taux d’agrandissement: les visites gigapixels, ou nous pouvons aussi proposer des éléments gigapixels dans une visite à taux normal d’agrandissement, comme dans l’exemple suivant, le tableau de Maurice Denis, Plage au bonnet rouge:

 btn-direction boutons de direction : ils servent à diriger la vue, ils sont de moins en moins utilisés car les visiteurs savent qu’ils peuvent se déplacer directement dans la sphère par cliquer-glisser, ils sont absents des versions mobiles des visites.

btn-homebouton de retour à la vue initiale: Il n’est pas très utilisé, il permet au visiteur de retourner à la vue initiale.

btn_hotspotsbouton hotspots :  ce bouton permet d’afficher ou de masquer les hotspots * présents sur la sphère.

btn_deplacementbouton de mode de déplacement : le visiteur peut se déplacer dans la sphère en tournant ou en tirant l’image (mode googleview). Ce bouton propose les deux modes (voir l’exemple çi-dessus).

btn_sonbouton son : ce bouton sert à lire ou à couper les sons de la visite, il peut être remplacé par une barre de volume allant de 0 à 100%. les sons d’ambiance de la visite sont coupés quand utilisateur ouvre un média contenant sa propre bande-son. Les sons peuvent être également limités à un secteur de l’image, ce sont les hotspots sonores*.

btn_autorotationbouton autorotation : permet d’activer ou de désactiver l’autorotation de la visite.

btn_autotourbouton autotour : permet d’activer ou de désactiver l’autotour. La différence avec l’autorotation et que l’autotour change de panorama après la révolution complète d’une vue, ou après un délai pré-réglé.

btn_planbouton plan : permet d’afficher ou de masquer le plan de la visite. Le plan est un élément capital dans la visite virtuelle d’un bien immobilier, d’un musée, ou de tout autre lieu présentant plusieurs points de vue 360°, il permet au visiteur de mieux appréhender l’espace, et sert également à la navigation dans la visite, car le plan peut contenir des hotspots directionnels * (voir l’exemple çi-dessous).

btn_geolocalisationbouton géolocalisation : permet d’afficher ou de masquer une carte type GoogleMaps, BingMaps, OpenStreetMap ou Yandex, avec la possibilité de géo-tagger le lieu sur cette carte (voir l’exemple çi-dessous).

btn_sharebouton de partage : c’est un des éléments les plus importants pour la diffusion de la visite, elle permet de partager la visite par l’envoi d’un email ou par son partage sur les réseaux sociaux Facebook, Google+, Twitter et Linkedin en un seul clic (avec la possibilité d’utilise également Tumblr, Digg, StumbleUppon, Reddit, Delicious et VKontakte).

Le visiteur ayant utilisé cette fonction partage la visite sur sa page, et l’envoie à tous ses contacts.

btn_resaux sociaux

Une autre méthode de partage plus active est proposée, permettant à l’utilisateur de s’identifier dans la visite, comme dans l’exemple suivant :

cesacom

cliquez sur l’image pour lancer la visite

btn_fullscreen bouton plein écran : permet de passer en affichage plein écran ou en mode fenêtre (voir l’exemple çi-dessus). Ce bouton n’existe pas sur les mobiles.

btn_help bouton d’aide : à tout moment, l’utilisateur peut afficher un écran d’aide à la navigation.

btn_information bouton d’information : ce bouton affiche des informations sur le panorama actuellement visité, ou sur la visite. Ces informations peuvent être composées de tout contenu multimédia.

btn_mask bouton de masquage : ce bouton permet d’afficher ou de masquer tous les boutons et/ou tous les hotspots de la visite, pour ne laisser voir que la photo, éventuellement à l’exception d’éléments graphiques déterminés.

Ces boutons font partie du design de la visite, et présentent des fonctions bien déterminées, mais générales. Parallèlement à ces boutons, d’autres éléments graphiques sont possibles, avec des fonctions plus spécifiques. Par exemple, un logo peut permettre d’ouvrir le site du client, un bouton permet de réserver une table dans un restaurant, un autre d’afficher la météo pour un hôtel, un autre d’ouvrir un tchat vidéo avec le concierge d’un hôtel … les possibilités sont nombreuses, et nous travaillons sur mesure !


Les hotspots

Les hotspots sont essentiels pour donner de l’information au visiteur,et faire vivre la visite,
contrairement aux boutons, ils sont fixés sur la sphère, et tournent avec elle.


Les hotspots sont placés sur l’image 360 et peuvent être de plusieurs types : icône, texte, image, vidéo, sonore, web et peuvent ouvrir des fenêtres d’information ou d’appel à action supplémentaires. les hotspots icône texte et image sont soit présent de manière permanente sur l’image, soit présents au survol de la souris (sauf sur les mobiles), ils renvoient généralement à du contenu supplémentaire apparaissant dans une fenêtre.

les hotspots vidéos sont de plusieurs types :

  • une fenêtre video au dessus de la visite, celle-çi contenant une vidéo hébergée localement, ou une vidéo hébergée sur un serveur (youtube,vidéo,etc …)
  • une fenêtre vidéo dans la visite, typiquement dans un écran présentée dans la visite.
  • la vidéo est fondue dans la visite et tourne avec elle, comme dans cet exemple :

Cliquez sur l’image pour lancer la visite

Cette fonctionnalité peut être particulièrement intéressante pour les musées et pour les agents immobiliers: on peut envisager dans le premier cas un guide expliquant une œuvre, dans le second, un agent faisant la présentation du bien. Cette fonction n’est pour l’instant pas disponible sur les mobiles, mais un lien ouvre la vidéo dans une nouvelle fenêtre.

Les hotspots sonores sont des sons joués uniquement quand le visiteur regarde une direction donnée, ils participent également à l’immersion dans la scène, comme par exemple entendre le bruit de l’eau quand on regarde une cascade, les chants des oiseaux quand on regarde un jardin. Dans l’exemple çi-dessus, la musique de l’orchestre est un hotspot sonore, on ne l’entend plus quand on regarde de l’autre coté.

Les hotspots web permettent d’afficher un site ou le contenu d’une page web, ou une portion de page web dans une visite virtuelle. C’est une fonction très intéressante pour les clients ayant régulièrement des informations à changer, par exemple les nouvelles entrées d’une agence immobilière ou la carte d’un restaurant. L’hôtel du Collectionneur à Paris a choisi cette solution:

 

 

IIIPost-Production:
Une fois la visite terminée,
La post-production vient mettre en place
les éléments de diffusion et de formatage.

SEO: La visite virtuelle en elle-même est constituée de fichiers html, xml, javascript et images. Ils ne sont pas naturellement optimisés pour les moteurs de recherche, ne contiennent pas de mots-clés ni de balises permettant à Google d’en indexer le contenu. De même, certains fichiers images sont optimisables, notamment pour les échanges sur les réseaux sociaux, ils sont alors optimisés à cette étape.

Protection sur domaine/encryptage: pour éviter tous vols de contenus, certains fichiers sont encryptés et d’autres empêchent l’hébergement sur des domaines non-autorisés.