In this page we'll see how to transform simple mirror-ball shots into interactive Virtual Tours of Spherical format.
By nature it is not possible to photograph a complete sphere with a single shot. However, completing the invisible area with any background, which can be dark, it is possible to remap a picture of a sphere or semi-sphere into a panorama with that format. For this demonstration we will use the photography of Dustin Stewart whose original can be viewed here.
Note that we start with a square picture that exactly fits the circle of a mirror reflecting 360 degree around it :
We will see two different ways to transform this image into a panorama, using both the same tool in Gimp.
Checking Out The Availability Of The Polar Coordinates Plugin
Before starting the actual edition of the photography we'll verify that the plugin needed to do it is available to our image editor. For this example we will use Gimp but also the same plugin works in Adobe Photoshop and other programs. To begin we'll drag the original image above Gimp's main window to open the file :
We can see the picture open in the center of the window :
Displaying the Filters (Filters) menu we'll look for the Distorts item to find out if the Polar Coordinates tool is installed. In this case, the drained color from its name indicates that the tool is not available, so we must install the appropriate plugin before we can use it :
For this it is necessary to have a copy of Helmut Dersch's Panorama Tools. This file is no longer available at the author's oficial website, so for your convenience you can download Panorama Tools 2.6 from our site. Opening the file you'll find the PanoTools folder :
Inside this folder you'll find several other folders and files. Two of them named Readme.txt and Readme.html contain the instructions to install Panorama Tools. Depending on your computer's operating system, on the tool or tools you want to use and the program with which you will use the plugins it will be necessary to copy different files to different locations. In this example we'll install Panorama Tools for Gimp on Windows XP. The first step is to copy the pano12.dll file to the C:/WINDOWS/SYSTEM folder :
Next we'll get into the Gimp folder :
Here we find another file also named Readme.txt, with specific instructions to install Panorama Tools for Gimp in different operating systems, and a file named PTools.exe :
Follwoing the instructions in the Readme.txt file we'll copy the PTools.exe file to the Gimp's plugin folder whose location is at C:/ARCHIVOS DE PROGRAMA/Gimp-2.0/lib/Gimp/2.0/plug-ins :
After copying the files it is necessary to close and restart Gimp.
Unwraping the photograph
Once the program is restarted we'll display again the Filters menu until we find the Distorts item and, as we can see, now the Polar Coordinates tool is available. We'll click on the item to access it :
In the dialog window that will open, correponding to the tool, we'll find several items. We must make sure that the To Polar checkbox is unchecked to obtain the type of projection we need. Also, we'll find a slider named Circle depth in percent. If this is near the 0% end we can see on the preview that the areas of the original photography outside the circle mirror -in this case a light colored roof with dark details- are projected into the square in the preview :
Pulling the slider to the opposite end correponding to 100% the projection of these areas is moved outside the projection in the preview. Now the square we see only contains the projection of the center circle of the original photograph :
We'll click on OK to confirm the conversion of the image. The square we'll see next on Gimp's main window represents the lower half of the sphere of the Virtual Tour we are intending to create :
Since we know a spherical panorama must be created from an image whose width/height relation is 2 to 1 (360 x 180 degrees) and that the image we have so far will only cover the lower hemisphere of the image, we need to alter the image's proportions to go on. We'll display the Image menu and click on Scale Image :
In the dialog window of the tool that pops up we can see the actual dimensions of the projection. As it is a square, naturally both the height and width are identical :
The proportions change that we need implies that the width of the image must be four times as large as its height. For the typing of a new value at any choosen box does not alter the value in the other box, thus keeping the aspect ratio fixed, we must click on the icon to the right of theses values, so that the chain is split. We can now introduce independent values to both fields :
After clicking to confirm the transformation, the image aspect has changed, being now much wider than it is high :
Displaying the Select menu we'll click on All to select the entire image :
Displaying the Edit menu we'll click on Copy to copy the image to the clipborad :
Next, with the image copied to the clipboard we'll display the File menu and click and click on New to create a new window with another image :
By default the new image will be the same size of the image stored into the clipboard. However this corresponds to just the lower half of the sphere, so to create an image that contains the full sphere we'll double the value corresponding to the height :
The new window that opens bears exactly the aspect ratio taht we need, this is, the width of the image doubles its height. To copy a background color we'll click on the Bucket Fill tool :
With a click on the window's background we'll fill it with the color selected on the tool's options, in our example, black :
By using the key combination Control + V or displaying the Edit menu we'll click on Paste to paste over the black background the image that we had copied to the clipboard :
As we can see, the image width matches the new window's frame although only covers half of its height :
We'll click on the Move tool's icon to make it active :
We'll click on the image's window's frame to make it active again and carefully and using only the keyboard's arrow keys we'll move the floating image down until its lower end exactly matches the lower end of the frame. To do this is recommended to zoom into the image by rolling the mouse's wheel while keeping the Control key pressed. It is very important to complete this step with only keys and the mouse's wheel to keep the image from moving to the sides, leaving part of the picture out of the frame :
Once the picture is moved to its new location, we'll display the Layer menu to click on Anchor Layer to anchor the layer on its place. We can get the same done by clicking on the dark background of the image, not on the photography :
The floating border of the picture is gone showing that the layer is already anchored :
The iamge is already created. We just need to choose a file name for it and the save it. Displaying the File menu we'll click on Save As :
In the dialog that opens we can select the location of our preference and to type in a name and format for the file to be created :
By choosing a format like PNG still another window will open with choices where we can decide the compression level for the new image. We'll choose not to compress it by pulling the compression slider to zero :
A few moments after clicking on Save the newly created image is already in the location we had choosen for it :
This is the aspect of the image we have created :
Click on the image to see it published as an interactive Virtual Tour :
The method below uses the same Polar Coordinates tool that we have used so far but in a different way. We'll start once again with the original image opened on Gimp's main window :
This time we'll display the Select menu and click on All to select the entire picture :
While the image is selected we'll display the Edit menu to click on Copy to save the image to the clipboard :
Once the image is stored into the clipboard we'll display the File menu and click on New to create a new image window :
Once again the open tool dialog shows as default for the new image the width and height of the image which remais saved to the clipboard :
This time, however, before creating the new image we'll double both the values asigned to both width and height of the square image :
The window containing the new image is therefore four times as big as the original picture. We'll click on the Bucket Fill tool icon to activate it :
With a click on the image's empty background we'll paint it with the color selected on the current tool options, in this example black. We could skip this step altogheter because later on we'll crop this area out of the image, but this way we'll have a better visibility to work with :
Using the key combination Control + V or displaying the Edit menu to click on Paste we'll paste over the dark background the image that still is stored in the clipboard :
The original square source picture, this way, appears perfectly centered in front of the larger square of the new image that we have created :
To fix the floating photograph over the dark background we'll display the Layer menu and click on Anchor Layer, which we can also get by clicking on the dark background, not over the photograph beacuse if we would do so, all we would get is a black spot on the picture from the Bucket Fill tool which is still active :
The dissapearence of the moving border between the photograph and the dark background tells us that the layer has been anchored :
Maximizing this Gimp window we can work more comfortably :
It is time to apply the main transformation. Displaying the Filters menu we'll look for the Distorts item to click on Polar Coordinates :
In the dialog window that pops up, just as in the previous method, we'll make sure the checkbox named To Polar is unchecked. The Circle depth in percent slider, pulled to the 100% end this time leaves visible the projection of the areas outside of the mirror ball in the source picture over black background :
After clicking to apply the Polar Coordinates filter to our image, it appears on the main Gimp's window. The areas of roof which are visible above the middle line of the image could be left visible, however, it's not such a smart presentation for the sphere so we prefer to crop them out :
To get this done we'll click on the icon correponding to the Rectangle Select tool to activate it :
By clicking on a spot external to the image we'll start to trace a rectangle which we'll extend over it until we hace precisely selected the area we want to delete from the Virtual Tour :
Once tehe area is selected we'll use the delete key from our keyboard or display the Edit menu to click on Cut :
The selected area of the image has been left empty :
With a new click on the Bucket Fill tool icon we'll make it active again :
By clicking on the empty background we'll paint it with the black color which was still selected on the tool's options :
It is time to give our image the right aspect ratio for a spherical projection, this is, its width must double its height : Displaying the Image menu we'll click on Scale Image :
In the dialog window that opens we see that naturally the width and height of the square image are identical :
Without forgetting to click once on the chain-like icon to the right of the size's values to split it appart and so allowing for the image deformation, we'll alter one of the values. For not adding a ficticious area to the total size we prefer to reduce the height to a half :
Once the transformation is executed we can see on the Gimp's main window that the aspect ratio has changed and we have obtained the equirectangular image we were looking for. This looks very similar to the one we have obtained in the first part of this article by using a different method. Note, however, that this time the final picture is bigger :
Displaying the File menu we'll click on Save As to save the image we have just created :
In the dialog window that pops up we can choose a name, a location and a format for the new equirectangular picture :
Having choosen a compressable format such as PNG, Gimp will show us still another window to choose the compression level we desire :
Once the image is saved, we can find it on the location we have assigned it one step back :
This is tehe aspect of the image we have created, very similar to the one created above in this page but, being its size larger than that of the previous example, the Virtual Tour we'll obtain from it will be of a higher definition :
Click on the image to see it as an interactive Virtual Tour.
Add A Question Or Comment
All fields are optional. Messages not regarding the subject may be moderated.
If you like 360 Facil please share it with your social networks
With any camera
360 Degree Interactive Panoramas
In Three Easy Steps
After reading this tutorial you'll be able to create your first 360 degree interactive photography with the camera you already have :
1 - Photograph
Take one or more pictures of the place you want to show.
2 - Edit
Convert your pictures into 360 degree panoramas.
3 - Publish
Make your panoramas interactive and available to the world on the internet.
If a picture is worth a thousand words, a 360 degree interactive panorama is worth a thousand pictures...
Online Virtual Tour Creator
Using the online virtual tour creator you can :
Convert your 360 degree pictures to virtual tours with a single click.
Insert your virtual tours into web sites, emails, blogs or wherever you like by just copying and pasting a text.
Know in a practical way all kinds of 360 degree pictures.
Discover that you can create hundreds of interactive virtual tours just as easily as you take pictures with your camera.
Check that with just one click from your camera and another click from your mouse it is possible to create a 360 degree interactive virtual tour out of nothing. And completely free of charge!!!
You can get started right now, even if you don't have a camera
Find us in Facebook and thank you for your Like.