This repository provides a sample image source for the Panorama photo stitcher - Hugin. It was created as support files for a Wikiversity Learning Resource about 3D Modelling. People that want to learn about creating 360 degree panoramas e.g. with AFrame can use this set of sample images to play around with Hugin.
- Create a panorama with Hugin
- Fix missing areas in the panorama and correct the projection with GIMP
See the Final result of your efforts in AFrame
- Use the images in
durlach_saumarktof this repository to play around with Hugin. - (Missing Ground) You might end up with an unmatched ground like this, because you missed to take images for the ground underneath yourself.
- Final
The equirectangular images in AFrame are the first step for the background. You can also add geometrical elements into the scene.
- See Geometrical Objects in a 360-Degree Image
- Crystal Lattice in AFrame
- Crystal Lattice with an equirectangular background image
- Dinosaur 3D model with an equirectangular background image
- The dinosaur (Spinosaurus) is a 3D model called "primal carnage spinosaurus" (URL: https://skfb.ly/pswyN) created by
seth the yutyrannus. The 3D model is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
Equirectangular images can be used in AFrame for a 360-degree panorama view.
- AFrame Example - Puy de Sancy
- Durlach - Saumarkt - Karlsruhe, Germany - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license
- Rieselfelder Münster - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 1 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 2 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 3 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 4 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Foschungsanlage Eusserthal
- Jelgava Palace - WikiCommons Source File - Uldins Bardins (2011) - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license. GeoLoc
- Aldara Park - WikiCommons Source File - Uldins Bardins (2011) image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license. GeoLoc
If you want to go further you can explore
- AFrame and Augmented Reality with the AR.js Documentation including Geolocation based Augmented Reality with AFrame,
- learn about 3D Modelling in Wikiversity
- start creating your Aframe scene with equirectangular images with JSON3D4Aframe.
- learn about tracking objects with Javascript
- Aframe Navigation with Equirectangular images as
a-sky-tag - URL: https://niebert.github.io/aframe360navigation/ - AR-Studio for AR.js - URL: https://ar-js-org.github.io/studio/ to create - AR - examples that use can be extended with equirectangular images and spatial allocation of 3D models.
- Download Hugin
- Install Hugin on your Operating System
- Load all the JPG images in the folder /durlach_saumarkt which are a bunch of JPG images of a market place in the town Karlsruhe-Durlach in Germany.
- Let Hugin align all the images for you (depending on the number of images and the performance of you computer it takes few minutes until this process is performed)
- Save the panorama to your local harddrive.
- You will see that the generated image is generated up-side-down. You can easily fix that by rotation of the output with you image editing software (e.g. GIMP)
If you want to play around with equirectangular images and view them in Aframe check the MediaWiki Commons Images of equirectangular projections. Please cite the authors when you used the images.
- If you use the panorama in AFrame scale the image in the vertical y-axis. A blank area at bottom of the Hugin output panorama should appear.
- The blank area at the botton is approximately 1/5 of the total height of the image.
- After exporting the image with GIMP and using in 360 degree panoramas in AFrame on the ground you will see a white circle. This circle can be covered the GIMP Clone Tool.
Fixing Missing Images in the Panorama with GIMP
In the collection of images from the Durlachsome areas of the sky and from the ground are missing. Due to changes in light it was impossible to collect the missing images later.
The missing areas in the panorama are
- in the sky and
- on the ground
Use clone in GIMP to fix the missing areas from the sky
- Copy some area from the ground and scale it and use it for the missing center on the ground
- Blend the scale images with image environment with "clone" in GIMP (see Youtube Video about Clone Tool)
The sample image belong to the introduction in 3D Modelling on Wikiversity.
The provide example is designed as learning resource for the generation of 360 degree images in AFrame
You can download the free OpenSource Software Hugin for all major Operating Systems
- Linux,
- MacOSX and
- Windows.
For MacOSX and Windows go to the following website for downloading :: Download Hugin For Linux Operating Systems you can install the software with your package manager.
- Intro to The Hugin Panorama photo stitcher by Brian Cluff - Youtube 2017/02/07
- Hugin Part 1 - Overview and Stitching 3 Photos by Jamie Hamel-Smith - Youtube 2017/02/07
- Hugin Part 2 - Hugin Part 2 - De-Fishing an Image and Straightening a Pattern by Jamie Hamel-Smith - Youtube 2017/02/07
Thank you to the developers of Hugin for providing this advanced panorama stitching tool for all major operating systems as OpenSource software.