Share
Ces derniers temps, nous avons assisté à une montée en flèche de la popularité et des capacités techniques de la réalité virtuelle. En règle générale, lorsque nous pensons à la réalité virtuelle, nous pensons aux jeux et aux logiciels de bureau dédiés. Cependant, ce n’est pas le seul espace dans lequel la réalité virtuelle se développe.
Grâce à la puissance toujours croissante de WebGL, la réalité virtuelle fait désormais son entrée dans les navigateurs sous forme de WebVR. Parallèlement, elle offre de nouvelles façons de partager la photographie de manière toujours plus immersive..
Avec une photo dans le bon format et un appareil de réalité virtuelle tel que Google Cardboard, HTC Vive ou similaire, une personne peut se sentir comme si elle se tenait exactement à l'endroit où se trouvait l'appareil photo au moment où la photo a été prise. capacité à regarder tout autour de l'environnement, en regardant dans la profondeur de l'espace 3D simulé.
Et même sans appareil VR, les personnes naviguant sur le Web peuvent toujours naviguer à travers une image panoramique sphérique à l'aide d'une souris..
Dans ce tutoriel, nous allons configurer les panoramas à 360 degrés basés sur WebVR de trois manières différentes, à l'aide d'outils conçus pour rendre WebVR accessible et simple à utiliser:
Pour savoir dans quoi nous travaillons, consultez les démonstrations de chacun des outils ci-dessus, illustrant le type d'image 360 que nous allons créer:
Un panorama à 360 degrés peut être interagi et visualisé de deux manières différentes..
Lorsqu'une personne regarde une photo WebVR à 360 degrés via un appareil approprié compatible VR, tel qu'un Google Cardboard ou un HTC Vive, par exemple, l'image est scindée en deux images et traitée de manière à ce que le casque puisse l'utiliser. qu'ils génèrent l'illusion de profondeur.
Dans ce cas, la personne regarde autour de la scène en tournant simplement l'endroit et en regardant de haut en bas. L’accéléromètre de l’appareil mettra à jour l’affichage de l’image pour suivre la direction dans laquelle l’utilisateur regarde..
Lorsqu'une personne regarde à travers un appareil non compatible VR, l'image à 360 degrés revient à s'afficher sous la forme d'une seule image qui peut être balayée en cliquant dessus et en la faisant glisser..
WebVR est toujours à la pointe de la technologie, de sorte que certains de ses aspects ne sont pas largement pris en charge. Cependant, les panoramas à 360 degrés ne nécessitent qu'un petit sous-ensemble de fonctionnalités WebVR. Par conséquent, la prise en charge d'au moins l'affichage au niveau de repli est en réalité assez répandue..
Tant qu'un navigateur prend en charge WebGL, le téléspectateur verra le repli «cliquer et faire glisser» pour une photo 360. WebGL est maintenant entièrement fonctionnel dans tous les principaux navigateurs.
Pour vérifier si un navigateur que vous utilisez prend en charge WebGL, visitez le site get.webgl.org. Si vous voyez un cube en rotation, WebGL est opérationnel..
Plusieurs téléphones prennent en charge WebVR lorsqu'ils sont combinés avec un casque, tel que Google Cardboard ou Daydream. Compte tenu de la récente incitation de Google à WebVR, il n’est pas surprenant que ses versions de Chrome pour iOS et Android prennent en charge WebVR immédiatement..
Si vous avez un casque Samsung Gear VR, en revanche, vous devrez utiliser le propre navigateur de Samsung..
La manière de procéder pour afficher WebVR via un écran monté sur la tête et alimenté par le bureau dépend de l'unité en question..
Pour l’Oculus Rift ou le HTC Vive / SteamVR, vous pouvez utiliser une version expérimentale de Chromium ou Firefox Nightly. La version de Chromium WebVR est disponible uniquement pour Windows, tandis que Firefox Nightly est également disponible pour macOS et Linux..
À l'heure actuelle, Oculus Rift ne prend en charge que Windows, aucun plan multi-plate-forme n'étant signalé, aucun des deux navigateurs ne convient. Cependant, la prise en charge multiplate-forme de HTC Vice / SteamVR arriverait très bientôt. Si vous possédez cet appareil et pensez préférer créer vos panoramas sur macOS ou Linux à ce moment-là, vous pouvez choisir Firefox Nightly comme principal navigateur de test maintenant.
Pour des instructions complètes sur la configuration de l’un ou l’autre de ces navigateurs pour WebVR, visitez le site de Mozilla VR..
Bert incendie, 2016. Les pompiers nettoyant la zone les derniers jours de l'incendie. District de Williams Ranger, au nord de Parks, AZ. 6-21-16. Photo de Dyan Bone. Crédit du Service forestier américain, région du Sud-Ouest, forêt nationale de Kaibab. CC BY SA.La première chose dont vous aurez besoin est une photo dans un format adapté aux panoramas WebVR, que vous pouvez voir indifféremment comme une photo sphérique, équirectangulaire ou à 360 degrés. Vous pouvez prendre votre propre par:
Nous avons d'excellents articles sur certaines des techniques que vous pouvez utiliser:
Vous pouvez également vous procurer des images équirectangulaires via Flickr. Nous utiliserons une image de la forêt nationale de Kaibab pour ce tutoriel..
Créez un répertoire contenant les panoramas que vous allez créer, téléchargez-y le fichier ci-dessus, puis renommez l'image en "fire.jpg".
Si vous envisagez d'afficher votre panorama dans WebVR complet plutôt que sous la forme d'une image cliquer-glisser dans un navigateur de bureau, vous voudrez probablement télécharger la version "Format d'origine" au format 2 040 x 5120 pour une fidélité visuelle maximale. Sachez cependant que les utilisateurs peuvent voir un écran blanc pendant le chargement de cette grande image, en fonction de leur connexion Internet. Si cela peut poser problème, choisissez plutôt l’une des plus petites tailles..
NB: plus tard, si vous voyez un trou noir au bas des panoramas que vous créez avec cette image, cela signifie que le fichier est incomplet et vous devrez le télécharger à nouveau..
Si vous souhaitez tester vos panoramas sur un périphérique distant / secondaire, tel qu'un téléphone compatible Cardboard, vous aurez également besoin d'un moyen de visualiser vos fichiers via votre réseau local. Vous pouvez le faire comme vous le souhaitez, mais vous pouvez utiliser deux options:
Chaque exemple sera placé sur sa propre page Web, vous aurez donc besoin d'un document HTML très basique pour commencer à utiliser chaque exemple:
Photos 360 Panorama
Dans le répertoire de votre projet, créez trois fichiers HTML:
Collez ensuite le code de démarrage dans chaque fichier, en modifiant le contenu du
Si vous créez un panorama WebVR à partir de rien, il sera assez complexe et nécessitera un codage assez volumineux. Cependant, avec d’excellents frameworks comme le WebVR Starter Kit, le processus se résume en deux étapes..
Toutes les expériences de réalité virtuelle que vous pouvez créer avec le kit de démarrage WebVR sont alimentées par un seul fichier JavaScript. Donc, pour commencer, il vous suffit de charger ce fichier JS dans le … section de votre fichier "webvrstarterkit.html" en les collant dans l'extrait suivant:
Si vous préférez ne pas charger ce fichier JS depuis une source externe, vous pouvez télécharger le projet WebVR à partir de son référentiel GitHub. Vous trouverez le fichier "vr.js" dans le répertoire "build".
Avec le JavaScript WebVR chargé, la page est maintenant prête à avoir des éléments VR ajoutés. Pour créer un panorama à 360 degrés, insérez le code suivant dans le … section:
Et c'est tout! Votre panorama à 360 degrés est maintenant prêt à partir.
Notez que la valeur entre les crochets est le chemin de notre image équirectangulaire. Cela peut également être configuré pour charger une image externe en insérant une URL à la place..
Lorsque vous prévisualisez votre fichier "webvrstarterkit.html" maintenant, il devrait ressembler à ceci: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame est un framework WebVR différent, mais les moyens de créer un panorama 360 sont très similaires à ceux que vous avez décrits ci-dessus. Comme avec le kit de démarrage WebVR, A-Frame est alimenté par un seul fichier JavaScript. Charger ce fichier dans le … section de votre fichier "aframe.html" avec ce code:
Si vous préférez ne pas charger le fichier JS depuis une source externe, vous pouvez télécharger le référentiel A-Frame à partir de GitHub. À partir du dossier "dist", vous devez utiliser la version simplifiée du script pour la version actuelle du projet, par exemple. "aframe-v0.4.0.min.js".
Au lieu d'utiliser une balise de script dans le corps de la page, A-Frame utilise ses propres éléments HTML personnalisés. Le premier élément à ajouter est toujours
le
Ensuite, pour ajouter votre image à 360 degrés, insérez le code suivant dans le … section:
Vos résultats devraient ressembler à ceci: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Sous le capot, GuriVR est en réalité la bibliothèque A-Frame. Ce qu’elle cherche à faire est de donner un moyen intuitif et simple de configurer des expériences de réalité virtuelle via une interface d’éditeur..
Pour utiliser GuriVR, allez dans l'éditeur GuriVR. Dans l'interface d'édition, vous pouvez simplement entrer le mot panorama suivi de l'URL d'une image sphérique, et GuriVR se chargera du reste pour vous.
Une fois que vous avez fait cela, cliquez sur sauvegarder en bas de l'écran, puis cliquez sur le bouton Lien de partage bouton, et vous recevrez un lien que vous pouvez donner aux autres pour montrer votre panorama.
Vous pouvez également intégrer le panorama dans une page Web à l'aide d'un iframe élément. Mettez à jour votre fichier "gurivr.html" avec le code suivant, en veillant à ajouter votre propre URL GuriVR dans l'iframe src attribut:
Démo d'image GuriVR 360
Lorsque vous avez terminé, vous devriez obtenir un panorama 360 tel que celui-ci: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Vous avez maintenant trois moyens différents pour créer des panoramas basés sur WebVR et permettre aux gens de se connecter à votre photographie d'une toute nouvelle manière. Récapitulons rapidement ce que nous avons couvert:
Accentsconagua
scénario tag, puis à l'intérieur, il utilise VR.panorama () pour créer votre image 360.panorama et ensuite l'URL de votre photo pour créer votre image 360. Vous pouvez éventuellement intégrer l’URL fournie dans une page Web via un iframe.Maintenant que vous avez vu à quelle vitesse vous pouvez créer une expérience WebVR à partir d'une photo-sphère, j'espère que vous êtes inspiré pour aller là-bas et capturer le monde en trois dimensions.!
