Panorama, Hugin, Stellarium and three.js: Creating equirectangular panos

It’s been a long time since I didn’t post any geek stuff here, so here we go. At last!

I’ve recently installed Stellarium, which is a great planetarium software, helping a lot to figure out what’s above our heads at a given time, what will be, or what has been, which is great  to learn the sky, figure out what will be enjoyable on the next clear night, or what that was the other day.

Stellarium has a nice feature that allows users to use their own landscape instead of the predefined ones. The predefined ones are nice, but they don’t really reflect reality for me, because I’m usually in my little garden, surrounded by walls and trees and other view-blockers. So I decided to make a landscape of “my garden” and went out and took pictures, rotating about myself.

360° worth of garden

I then imported all these pictures into Hugin, another great free software that helps stitching panoramas. Some years ago, the process was long and painful, filled with control points settings, corrections and this kind of things.

Nowadays, you can launch Hugin, click Load images…, select them, click Align…, wait, and click Create Panorama…, and wait. This thing just rocks and does everything by itself.

Here’s the Fast Panorama Preview window that Hugin opens after you click on Align, showing the result of its calculations. Most likely, you can just close that window and proceed with Create Panorama.

panorama

Now that you have a 100MB TIF file containing your 360° equirectangular panorama, you can open it with the Gimp to fix some of the details that Stellarium wants right. First, make sure that the image ratio is 2/1, and that both dimensions are a power of 2. (4096 pixels wide by 2048 high, for example). The ratio is for the panorama to look right, and the power of 2 is an OpenGL rendering requisite.

Last but not least as you’ll want to see stars in the sky, you have to remove the sky from your panorama. The best is to take the picture with a clear sky so that the sky’s colour is homogeneous. I’ve used the Gimp’s Select by Color tool, which is much greater than the Fuzzy Select tool for that job because it will also select the isolated sky pixels inside a tree’s branches, for example. In case some of the rest of the picture is sky-coloured too, just exclude these bits from the selection (using Ctrl + any other Select tool). When your selection’s right, make sure you have an alpha channel on your image (Layer/Transparency/Add alpha channel if it’s not already grayed out), then get rid of your selected sky (using Cut or the Delete key, for example). Here’s the result :

Panorama in Gimp

(You’ll see that the ground is bad, that’s because my original pictures didn’t include enough ground. Also, I cheated with some tree tops, because my original pictures didn’t include enough sky).

There just remains to export the file, and create Stellarium’s landscape.ini file, as described on their wiki. I suggest you use their Moon landscape’s landscape.ini file as a basis. The only information you need to have is your latitude, longitude and elevation, which you’ll get out of any smartphone, GPS or Google Maps; and the angle to use to point North in your landscape, calculated this way.

Aaaand, here we are in Stellarium, showing the perfect International Space Station transit that could have been observed on the 28th here (you can know when and where to look for the ISS easily, with NASA’s Spot The Station service or loads of smartphones apps):

stellarium

(Of course, it’s after sunset but you can still see it). The end result is not downloadable because it’s too big (45MB).

Added bonus

You can also export these panoramas to be viewable in HTML-5 compatible browsers, using the nice three.js library. Here it is (with a fake sky re-added) :

[iframe src=”/panos/jardin.jpg” width=”500″ height=”250″]

Use Right-click/This Frame/Show only this frame inside the image, then View source if you want to try that at home.