VII — Visualiseur d'images et vidéos 360°
Dans cette section je distille le contenu d'un tutoriel à cette adresse qui est un peu daté (écrit en 2017).
Nous allons créer une application très simple mais très utile : afficher des stimuli 360° (aussi dits omnidirectionnels).
Ce sont des images ou des videos qui capturent un environnement dans toutes les directions. Un observateur trouvera de l'information visuelle où qu'il regarde. Par conséquent elles sont souvent pensées comme des sphères.
Les fichiers 360° sont stockés sous différents formats. Unity en supporte plusieurs, dont deux types très utilisés.
La projection cubemap
Le contenu omnidirectionnel est projeté sur les faces d'un cube.
La projection équirectangulaire
Cette projection est nommée cylindrique, elle nous est commune car c'est ainsi que la Terre est souvent représentée sur des cartes. Elle déforme fortement les pôles de la sphère (chaque zone colorée est un carré en réalité).
Pour commencer, téléchargez au moins une image et une vidéo que vous trouverez listées dans la section "Passage à la XR & TP3". Ajoutez les où vous souhaitez dans votre projet Unity (créez une nouvelle scène Unity pour ce module).
Il y a deux manières simples de présenter un contenu 360° avec Unity.
- Créer une sphère, y appliquer un stimulus 360° comme texture, inverser ses "normales" pour que la texture ne soit visible que de l'intérieur.
- Utiliser le stimulus comme Skybox. Une skybox dans un moteur de jeu vidéo est une image/vidéo qui est fixe par rapport à l'observateur et remplit omnidirectionnellement le monde. Par exemple, Unity utilise la skybox ci-dessous par défaut.
Image 360°
Méthode Sphère
Dans votre scène créez une sphère (3D object > Sphere). Créez aussi un nouveau matériel, assigner l'image que vous avez téléchargée comme "Base Map" du matériel, puis changez l'option "Render Face" pour l'option "Back". Assignez ce matériel à votre sphère.
Le paramètre "Render Face" contrôle si un modèle 3D est affiché par le moteur 3D normalement ou inversé (voit l'intérieur). Dans notre cas cela revient à afficher l'intérieur de la sphère seulement, c'est ce que nous souhaitons car notre caméra doit se trouver au centre exact de la sphère.
Par conséquent placez la caméra et la sphère aux coordonnées (0, 0, 0). Votre sphère doit aussi être très large autrement vos observateurs vont loucher en VR : changer l'échelle de la sphère pour une valeur supérieure ou égale à 15 (15m est environ la distance à laquelle nos yeux convergent "à l'infini").
Vous avez maintenant un visualiseur d'image 360° 🥳🎉
Méthode Skybox
Attention les paramètres de la skybox sont liées à votre caméra et aux paramètres globaux de votre projet. Changer une skybox changera potentiellement pour toutes vos scènes.
Assurez-vous que votre caméra affiche une skybox comme fond. Vérifiez dans le composant de la caméra :
Un Skybox Material n'est pas n'importe quel matériel, il est de type "skybox"...
Créez un nouveau matériel nommé "SkyboxMaterial". Changez son type de shader pour "Skybox/Panoramic", puis assignez votre image 360° au paramètre "Spherical (HDR)" :
Le contrôle de quelle skybox est affichée se trouve dans les paramètres d'illumination (Window > Rendering > Lighting > Environment). Assignez votre nouveau matériel comme "Skybox Material".
Le fond de votre scène 3D a changé instantanément ! Vous pouvez bouger la caméra autant que vous souhaitez cela n'aura aucun effet, seule ses rotations changent le fond visuel maintenant.
Vidéo 360°
Je décris la méthode appropriée d'affichage des vidéos 360° avec la méthode "Skybox" mais la même méthode s'applique à la première (la sphère).
Si vous glissez-déposez une vidéo dans votre hiérarchie vous verrez qu'elle se transforme en un GameObject particulier : il contient un composant "Video Player" prenant comme source la vidéo en question.
"Play on Awake" : la vidéo se lance dès que cet objet est initialisé (quand le jeu se lance possiblement). Vous pouvez aussi choisir de faire débuter la vidéo manuellement avec du code ou avec un "Unity Event" lorsque l'utilisateur interagit en VR.
Une vidéo ne peut pas être placée comme image d'un Material, nous devons passer par un lecteur de vidéo qui va lire la vidéo et nous retourner des images. Nous allons dire à "Video Player" de placer ces images dans un objet "Render Texture". Cherchez et choisissez "Render Texture" dans "Create". Modifiez le paramètre "Size" pour qu'il ait les dimensions de votre vidéo (ici : 3840 par 1920 pixels).
Changez l'option du composant "Video Player" comme ci-dessous pour que "Render Texture" contienne les images de la vidéos. "Render Mode" prend la valeur "Render Texture", ajoutez (glissez-déposez) ensuite la "Render Texture" que vous venez de créez dans "Target Texture".
Pour finir reprenez votre "SkyboxMaterial", assignez votre "Render Texture" à la place de l'image que nous avions placée précédemment.
Lancer le jeu, la vidéo 360° joue en fond 🥳🎉
P.S. : si vous souhaitez utiliser la méthode Sphère à la place, assignez simplement votre "Render Texture" comme "Base Map" au matériel "SphereMaterial".