La nouvelle plateforme
de partage de tutoriels d'Ynov

632 tutoriels en ligne

Panorama 360° avec une GoPro et affichage immersif avec jQuery

Tuto qui passe de la prise des photos avec la goPro à l'affichage sur une page web avec jQuery en passant par l'assemblage dans Photoshop
De : Dennis Debest

  • Vues

    153

Tutoriel panorama 360° et affichage sur une page web

 

1. Les outils.

Vous aurez besoin de plusieurs choses pour réaliser ce projet :

  • Une GoPro
  • Un trépied avec un niveau intégré de préférence
  • Adobe photoshop
  • Adobe dreamweaver
  • Wamp Server (si vous désirez le faire en local)

2. Préparation.

Avant de se lancer il y a plusieurs choses a préparer :

3. Les photos.

Maintenant que tout est prêt installez la GoPro sur le trépied en fessant attention que tout soit niveau.

Pour ma part j’ai réglé la GoPro sur 7Mp medium pour éviter des fichiers de trop grande taille et une distorsion trop importante à cause du grand angle ce qui ralentirai considérablement le temps que photoshop met à assembler toutes les images.

On est prêt à prendre les photos penser à serrer les bonnes parties du trépied pour que seule la rotation soit possible et pas l’inclinaison. On va maintenant prendre des photos environ toutes les 30° pour cela j’utilise la télécommande GoPro pour éviter de bouger la camera entre les photos en appuyant directement dessus, prenez une ou deux photos supplémentaire après avoir fait un tour complet ça nous servira plus tard.

4. Photoshop.

On importe toutes les photos qu’on a faite avec la GoPro dans un dossier que je nommerai pano et on va aller sur photomerge dans le menu automate de photoshop.

Une fois qu’on a cliqué dessus on choisit le répertoire avec nos photos (ici GoPropano) et on prend soin de sélectionner spherical dans le menu layout et de cocher Geometric Distortion Correction pour contrer l’effet grand angle de la GoPro.

On obtient notre panorama avec un espace vide autour, utilisez la baguette magique afin de sélectionner  toute l’espace vide autour des photos une fois que c’est fait prenez l’outil de sélection classique et faite un clic droit à l’intérieur de l’espace vide sélectionner fill (remplissage) et choisissez content-aware.

On a maintenant un panorama avec les espace vide remplis mais qui fait plus d’un tour, pour corriger cela prenez l’outil de sélection classique et sélectionner la portion qui correspond à un tour complet ensuite dans le menu image cliquer sur crop (rognez).

Youpi notre panorama fait un tour parfait et rempli tout l’espace mais il faut faire attention à l’exposition des différentes photos pour éviter une séparation entre les deux bords quand on le mettra sur notre site avec une vraie vue à 360° pour vérifier l’endroit où les bords se touchent on utilise Offset qui se trouve dans Filtres -> Other et on fait bouger le slider horizontal ce qui nous permet ensuite de faire des corrections couleurs sur cette bordure si nécessaire.

Votre image est prêt mais beaucoup trop grande pour le web allez donc dans image -> taille de l’image et sélectionner une hauteur d’environ 600 pixels.

Maintenant vous pouvez exporter votre image en JPG et on peut passer à la partie suivante qui est de le mettre en ligne.

5. La partie web.

Nous avons maintenant un jolie panorama mais il reste plat et pas très intéressant, on va donc utiliser la module jQuery mentionné plus haut pour le rendre plus immersif et pour nous donner la possibilité de le partagé avec le monde entier en le mettant sur un site internet.

On commence par créer un nouveau site dans dreamweaver avec un serveur test et un dossier source C:\WAMP\www\GoPropano.

On dezip le fichier jQuery dans ce dossier et on met notre image dans le dossier img, ensuite dans le fichier index on change la source de la balise img pour qu’il pointe vers notre image et on a fini !

L'example de la vidéo

 

Commentaires

[AUTHOR]

| [DATE]

[MSG]