Intégrer la réalité virtuelle sur une page web en trois lignes de code
La réalité virtuelle a longtemps été une technologie compliquée à gérer. Aujourd’hui, intégrer des images à 360 degrés en VR sur une page web, c’est facile. Voici comment.
Un jour, peut-être, la réalité virtuelle (VR) mangera le Web. Sauf que, pour l’instant, c’est plutôt l’inverse qui se profile. Dès 2009, la Toile montrait son aptitude à la 3D avec la technologie WebGL et les premières expériences Chrome. En 2014, les navigateurs Firefox et Chrome proposaient des versions pour la VR, MozillaVR et Chromium, basées sur le standard WebVR, compatible avec les casques VR. Porté sur mobile avec Chrome, le WebVR a bénéficié du succès du Google Cardboard, le casque VR en carton de Google. Le site Sketchfab va l’adopter à son tour pour afficher sa 3D et, signe des temps, les expériences Chrome y passent aussi.
Ajouter des photos 360° sur une page web est devenu simple. Voici comment utiliser A-Frame, une plateforme lancée fin 2015 par la fondation Mozilla, qui facilite l’intégration de contenus WebVR.
Afficher plusieurs photos 360° dans une page web
Les photos 360° affichées à l’aide d’A-Frame arborent un petit logo en forme de lunettes VR (en bas à droite). En cliquant dessus, l’image s’affiche en plein écran et peut être visualisée sur un téléphone mobile avec un Google Cardboard.
A-Frame n’autorise cependant qu’une seule photo 360° par page. Pour dépasser cette limite, nous allons recourir au plugin embed360 développé par l’Américain Mark Lee.
Voici le résultat:
L’Electrolab de Nanterre, un hackerspace en 360° et VR (naviguez dans l’image, cliquez sur les lunettes sur mobile pour la VR avec Google Cardboard):
L’Etablisienne, fablab à Paris, en 360° et VR:
Etape 1: choix des images
Utilisez de préférence des photos au format sphérique, également appelé équirectangulaire. Si vous n’en avez pas sous la main, faites une recherche de photos équirectangulaires (equirectangular en anglais) sur Flickr. Pensez à filtrer la recherche par type de licence pour connaître vos droits sur les images. Déposez votre sélection dans le dossier qui contient habituellement les photos de votre page web.
Dans notre exemple, nous avons choisi des images en 360° réalisées lors des visites de labs de l’équipe Makery, en l’occurrence à l’Etablisienne à Paris (image de tête de cet article) et à l’Electrolab à Nanterre.
Etape 2: 3 lignes de code
Les lignes de code qui suivent sont à insérer dans le fichier HTML de votre page web.
Il n’y pas de plugin à télécharger, c’est le script suivant qui va l’appeler :
Le code suivant concerne les photos à afficher dans votre page. La ligne qui contient l’URL (Uniform Resource Locator, l’adresse web de l’image) est à répéter autant de fois que vous avez de photos. N’oubliez pas de changer l’URL à chaque fois.
Dernière étape, insérez le code suivant à la fin de votre série d’images.
Etape 3 (optionnelle): taille des photos
Le plugin embed360 propose une taille par défaut pour les photos qu’on peut toutefois modifier. Il suffit d’insérer le code suivant en tête du fichier HTML – les valeurs en pixel (px) sont données à titre indicatif. Si vous avez plusieurs pages, insérez le même code, sans les balises <style>, dans le fichier style.css.
Si vous n’avez qu’une seule photo, vous pouvez utiliser A-Frame sans recourir au plugin. Le process est identique mais le script et le code d’affichage de la photo changent. Par défaut, la photo s’affichera en plein écran. Pour l’intégrer, il faut ajouter l’option embedded comme expliqué ici.
On n’a pas fini d’entendre parler du WebVR et de A-Frame qui facilite aussi l’intégration de la réalité augmentée. Le 19 avril, les locaux parisiens de Mozilla accueillaient d’ailleurs un meetup pour découvrir ces nouveaux outils. Les marques ne sont pas les dernières à s’y mettre, à l’instar de Renault et son expérience VR autour de la Kadjar.
Premier meetup très riche hier soir chez @Mozilla avec @ARTE autour de la technologie WebVR et de ses usages #webvrparis pic.twitter.com/mDIUqBJOo1
— ARTE_Interactif (@ARTE_Interactif) April 20, 2017