HuginSample

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

Intermediate Steps fpr Creating an Equirectangular Image

• Use the images in durlach_saumarkt of 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

Combine with Aframe Object

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

Examples of Equirectangular Images - AFrame

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

3D Modelling. AR and Aframe Scenes

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

Hugin

• 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)

Spherical (equirectangular) Images for AFrame

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.

Fixing the Panorama

Fixing the Gimp Output for AFrame 360 Degree Panorama

• 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)

Wikiversity

The sample image belong to the introduction in 3D Modelling on Wikiversity.

Use generated Panorama in AFrame 360 Degree Image

The provide example is designed as learning resource for the generation of 360 degree images in AFrame

Download OpenSource software

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.

Video Tutorial for Hugin

• 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

Acknowledgement

Thank you to the developers of Hugin for providing this advanced panorama stitching tool for all major operating systems as OpenSource software.