Dans ce “Savoir-Faire”, nous allons aborder l’intégration de contenu de réalité virtuelle 360 pour agrémenter et enrichir notre site internet.

Pour intégrer une image ou une vidéo 360 en mode VR sur votre site internet, il existe plusieurs choix possible. Votre choix se définit en fonction de ce que vous voulez faire.
Publier une photo en <header> sur votre site, créer un diaporama ou créer une visite virtuelle.

Pour cela, nous avons des projets abouties en <html> pour les webmaster, et pour les community manager des plates-formes d’intégration.
Les projets de VR pour le web sont plus ou moins aboutis, le tout se normalise afin de ne pas trop se compliquer la tâche. Les projets à destination des webmaster sont nombreux A-Frame, WebGL, GoogleViewer… Par ailleurs, Mozilla très actif dans ce domaine propose d’autres projets si vous souhaitez aller plus loin(3D animation, jeux, stories VR,etc..).
Tous ces projets sont “open” et donc, modifiable selon vos envies et vos connaissances.

Pour intégrer une image 360(compatible VR) en <header> sur mon site web, j’ai utilisé A-Frame. Simple et efficace! J’ai essayé GoogleViewer, et pour une fois, sur un produit Google, je me suis cassé le nez dessus. En suivant, de multiples discussions sur googleviewer, j’ai pu constater que je n’étais pas le seul à galérer… ils corrigent vite les bugs, mais cela reste encore énormément vêlu à mon goût. Donc le choix de A-Frame était naturel pour moi!

A-Frame est un canvas web pour construire et publier des expériences de réalité virtuelle avancée ou non. Quelques éléments de cette bibliothèque VR :

Realité virtuelle simplifiée: A-Frame gère la configuration 3D et WebVR requise pour le multi plates-formes, y compris le mobile, le bureau, Vive et Rift en déclarant <a-scene>.
HTML déclaratif: A-Frame peut être utilisé à partir de HTML, A-Frame est accessible à tous: développeurs web, fans de VR, éducateurs, artistes, fabricants, enfants.
Cross-Platform: Créez des applications VR pour Vive, Rift, Daydream, GearVR et Cardboard. Vous n’avez pas un casque ou des contrôleurs? Pas de problème! A-Frame fonctionne toujours sur les ordinateurs de bureau et les smartphones standard.
Architecture de l’entité-composante: A-Frame est un canvas, fournissant une structure composant déclarable, réutilisable pour tree.js. Les développeurs ont un accès à JavaScript, API DOM, tree.js, WebVR et WebGL.
Performance: Optimisé au départ pour WebVR. Il utilise le HTML, donc il ne touchent pas le moteur de rendu du navigateur. Toutes les objets 3D sont alloués en mémoire.
Tool Agnostic: A-Frame fonctionne avec les API de JavaScript JavaScript normales et donc avec toutes les bibliothèques telles que React, Vue.js, jQuery ou d3.js. Les développeurs Web sont chez eux.
Inspecteur visuel: A-Frame fournit un inspecteur 3D visuel intégré similaire aux outils de développement d’un navigateur et à une interface similaire à Unity. Ouvrez toute scène A-Frame et appuyez sur <ctrl> + <alt> + i.
Registre: Réutilisez les composants de la communauté créés et partagés. Branchez les composants directement à partir du HTML.
Caractéristiques: intègre des composants tels que des formes géométriques, les matériaux, les lumières, les animations, les modèles, de la réflection, les ombres, l’audio positionnel, les commandes Vive / Touch / Cardboard. Avec les composants de la communauté, rajoutez des éléments tels que les systèmes de particules, de la physique, du multi-utilisateurs, des océans, des montagnes, la reconnaissance vocale…

Sur le site de A-Frame, vous avez différent exemple d’intégration selon vos desiderata. Fini la simple photo/vidéo d’agrément d’un site, interagissons avec l’internaute, offrons-lui de la profondeur.

Pour commencer, il vous faut le package délivré via Github. Après l’avoir récupéré, vous déployez sur vote site, le répertoires suivant “panorama”, trouvé ici :

  • Z:\~MONSTOCKAGE~\aframe-master\aframe-master\examples\boilerplate\panorama

Puis vous retournez dans le répertoire “dist” à la racine du projet, et vous récupérez le fichier “aframe-master.js”, et vous le collez dans le répertoire que nous avons précédemment récupéré, “panorama”. Vous obtenez :

Intégration image 360 pour de la réalité virtuelle

Par la suite, vous éditez le fichier index.html pour modifier le chemin de la déclaration du <js>.

<script src="../../../dist/aframe-master.js"></script>
en
<script src="aframe-master.js"></script>

Vous pouvez en profiter pour modifier la photo à afficher et le texte d’accroche. Vous publiez le tout, et hop! Votre première photo 360 est en ligne!

Le code est basique. Un peu de familiarisation.
Dans mon <head>, nous connaissons déjà.

<script src="aframe-master.min.js"></script>

Dans mon <body>, de nouvelles balises déclaratives.
<a-scene/> le canvas qui va afficher notre contenu dynamique 2D/3D.
<a-sky/> le contenu de mon “ciel”, il s’agit d’un image 360
<a-text/> une balise au même titre qu’un <label/>

Chaque balise possède plusieurs attributs classiques (width, height, border, etc…) et de nouveaux (position, rotation, etc…). Toutes les informations sont à retrouvées sur le site de A-frame.

<a-scene>
<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
<a-text value="Integration simple d'une image 360" width="6"
        position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
</a-scene>

Rien de plus! Avec quelques <class> supplémentaires, vous pouvez obtenir une présentation de qualité et offrant une interaction avec l’internaute.
Cette bibliothèque offre de nombreuses possibilités pour la création de diaporama 360 avec des liens, les interactions, ajout d’éléments 3D, création d’interface virtuelle. L’intégration de vidéo est tout aussi aisée.


Pour les Community Manager qui souhaitent intégrer de la 360, il existe une solution “quasi” prêt à l’emploi, Delight VR .
Vous vous inscrivez, vous obtenez une clé et un bout de code à insérer, et hop! C’est prêt! Moins de code à faire, moins gourmand en ressource, il peut être une bonne alternative. Delight permet lui de traiter différents types de photo VR selon leur format de sortie brute (formats stéréo / mono 360/180 équidistants et sphériques courants).

STEREO_180_LR: Une photo “equi-rectangulaire” stéréo à 180 degrés, l’œil gauche et droit distincts.
STEREO_180_LR_SPHERICAL: Une photo sphérique stéréo à 180 degrés, l’œil gauche et droit distincts.
STEREO_180_TB: une photo “equi-rectangulaire” stéréo à 180 degrés, l’œil gauche et droit étant respectivement en haut et en bas.
STEREO_180_TB_SPHERICAL: Une photo sphérique stéréo à 180 degrés, l’œil gauche et droit étant respectivement en haut et en bas.
STEREO_360_TB: Une photo “equi-rectangulaire” stéréo à 360 degrés, l’œil gauche et droit étant respectivement en haut et en bas.
STEREO_360_LR: Une photo “equi-rectangulaire” stéréo à 360 degrés, l’œil gauche et droit distincts.
MONO_360: Un photo monocéamine mono de 360 ​​degrés.
STEREO_CUBEMAP: une zone cubique stéréo à 360 degrés. 6 côtés pour chaque œil (src-left et src-right pour ce format). Ce format est généralement exporté depuis le processeur OctaneVR.
CARDBOARD_PHOTO: photo prise avec l’application Carton Camera. Il s’agit généralement d’un <jpg> panorama à 360 °.

<dl8-img src="image.png" poster="poster.jpg" title="Example Image 1"
          author="John Doe" format="STEREO_360_TB">
  </dl8-img>

Comme vous pouvez le constater l’intégration est prévu pour la présentation de contenu photo ou vidéo 360 pour de la réalité virtuelle avec ou sans casque. La documentation est assez bien faite et le tout reste accessible.

Intégration d’une image 360 VR, ma préférence va vers A-Frame… Les mains dans le cambouis pour un résultat à la hauteur de nos attentes, et offrant de nombreuses possibilités en 2D, 3D et scénique.
Dans le prochain “Savoir-Faire”, j’aborderai l’intégration de vidéo 360 VR et son traitement post-production. En corrélation avec ce savoir-faire, je vous présenterai les diaporamas 360 VR, et les visites virtuelles pour les sites web.