🛥️Des bateaux et des hommes en 360

Ce projet est l’un des volets numériques de la série du même nom diffusé sur TV5 Monde en 2018. Centré sur la réalité virtuelle des casques Oculus Go, sorti la même année, cette expérience consiste à visiter en 360 et 3D l’intérieur des bateaux, truffés d’information textuelles ou vidéo.

Missionné pour la partie VR, j’ai proposé une approche technique et l’ai implémenté de facon à ce qu’elle soit le plus modulaire possible.

Vidéo 360 et 3D

Tous les lieux sont capturés avec une caméra 360 équipée de 6 lentilles. Ce qui permet de produire une vidéo 360 et 3D, ce qui est le top pour un casque 3DoF comme l’Oculus Go.

Le directeur technique et moi-même expérimentons avec différentes résolutions, avec un système permettant d’augmenter la résolution dynamiquement si l’appareil le permet. J’affiche ensuite cette vidéo avec un composant spécifique sur une sphère entourant l’utilisateur afin qu’il ait l’impression d’être dans le lieu capturé.

Pour lire une vidéo avec le son depuis n’importe quel appareil, un clic initial est nécéssaire. C’est pour cela que la page ne démarre qu’après le clic d’un utilisateur sur un bouton de démarrage.

Éléments interactifs et curseur

L’Oculus Go étant un casque 3Dof avec une manette restreinte, on utilise un système de curseur centré devant l’utilisateur avec un délai de survol qui permet de déclencher un clic.

Cette méthode, inspiré des lunettes VR en carton de Google, n’est cependant plus une pratique recommandée en termes d’expérience utilisateur, car elle repose sur un mouvement de tête peu naturel et qui fatigue rapidement l’utilisateur.

Pour les éléments interactifs, Aframe propose un développement impératif basé sur des événements transmis d’un composant à un autre. On utilise donc ces événements pour faire apparaitre ou disparaitre des panneaux d’informations avec des animations appropriées. Par ailleurs, un voile semi-transparent jaune est placé dès qu’un panneau est ouvert et la vidéo de fond est mise en pause pour centrer l’attention sur le panneau en question.

Là où l’on va plus loin, c’est avec le lecteur vidéo qui doit être fait à la main. Ouvrir un onglet vidéo va faire apparaitre un plan affichant le contenu d’une balise vidéo HTML. Un bouton sur le côté permet de la lancer ou de l’arrêter, bien qu’elle soit lancée à l’ouverture. J’ai également codé la bande de lecture qui évolue en 3D en fonction de l’avancement de la vidéo.

Presque un CMS

Recréer chaque scène a la main prend énormément de temps.
J’ai implémenté un mini-CMS basé sur des fichiers JSON détaillant pour chaque salle sa vidéo de fond et une liste de tous les éléments interactifs avec leur position.
Ce fichier est importé dans Aframe et permet de remplir la scène correctement.
Un composant Aframe ensuite activé permet de déplacer facilement les éléments interactifs, puis d’exporter la nouvelle configuration.

Cela a permis de place plus rapidement la centaine d’éléments dans les différentes salles.