Hello Fellow Yuneec Pilot!
Join our free Yuneec community and remove this annoying banner!
Sign up

Interactive Panorama Tutorial

Joined
Jul 6, 2018
Messages
991
Reaction score
647
Location
UK
Here's a fairly in-depth tut on creating Panoramas with the H/H+. Work in progress, so will be adding more details / screenies in due course.

There are several stages to making a working online interactive panoramic photo like this one. These are:

1. Taking the Panorama photos on the UAV
2. Stitching and blending those shots
3. Grading the composite photo, re-canvasing to 2:1, conforming the sky, and spot fixing of any errors
4. Slicing the Panorama using Marzipano

5. Uploading the files to a web server.

Services required:

1. Web Hosting

Software required:

1. A Panorama Stitching Application: I use MS ICE (free), and on the rare occasions where that fails, Hugin (free), PhotoStitcher (£20) or PhotoMerge in Photoshop (CS2 or higher).
If you want full manual control, go straight to Hugin, but if you want to spend some cash
PtGUI is very good too.
2. An Image Editor like Photoshop, GIMP (free) etc
3. A text editor like
Notepad++ (free)
4. An FTP file transfer app like
Filezilla (free)

Got all that ? OK, we're ready to go.

1. Setting up the craft to produce good panoramas

- On your controller, Go to Photo Mode, and set that to Panorama. Tap the little shutter icon that appears, and set the panorama mode to Double layer (18 shot)
- Overcast days produce the best results because of the lack of hard shadows and more diffuse light, but we can win on sunny days too if we remove the multiple lens flares later.
- Use Manual Exposure, Locked White Balance, and no ND Filter. Set exposure by pointing your camera at the sky, 90-180 degrees away from where the sun is now.
- Make sure you have GPS lock, and then park your UAV somewhere in space. Check it is not moving around too much before you start the Pano record sequence with the Photo button. It will take about 1 minute to complete and may pause longer on some shots than others.
- Higher is not necessarily better with Panoramas - if you can be low enough to have some trees / detailed objects at the horizon that will help the stitching work. Most stitching programs have problems matching the horizon more than anything else, so this is worth considering.
- We can proceed with just 1 set of Panorama photos, but for more control of dynamic range later, you can set your exposure differently, and then run the Pano routine again while the craft is still in the same place, to produce another set of lighter or darker photos, which we can stitch separately, and then combine with the first in post later if we like, so that we get versions with a) the sky and b) the ground perfectly exposed. This is how you can solve the 'sky constantly too bright' problem that tends to occur with single-set panoramas.

2. Stitching

- We need each set of Pano pics in its own folder so we don't get confused, so if doing 2 of them, name the folders accordingly, 'light', 'dark' etc.
- For each variation of the Panorama we need to load all 18 photos into your chosen stitching program (instructions below for MS ICE)
- Choose Simple Panorama / Automatic Stitch, which should choose rotational source as its method and produce a decent composite panoramic image, which you should save in a hi-res lossless format like TIFF or PNG.
- Auto-crop works well, but auto-complete less so (especially if your legs are in shot), so I usually just accept the cropped image, and export that. It'll be about 13000 px wide.
- In most cases this will just work and produce a composite image will not contain many perceivable errors. If it doesn't, try it in another stitching application, or worst case, use Photo Merge in Photoshop or PtGUI to do it (semi) manually.
- at the end of this stage you should have 1 composite image for each Panorama you took.

This is what a panorama that has worked looks like...

ICE Win.JPG

...and this is what happens when one fails. If that happens, try another program*.

ICE Fail.JPG

*If anyone can tell me how to do an ordered panorama in MS ICE, and if that can fix the auto-fails , please do let me know ! I can't find any tutorials on this !

3. Canvas Sizing, Editing, Grading and Sky Fix

- Load your Panorama composite(s) into layers in your Image editing Application. Instructions below are for Photoshop, but you should also get the general idea in anything else.
- Marzipano requires a hi-res JPEG that is exactly 2:1 ratio, so first step is to alter / extend the canvas size (not the image size) of our panorama(s) to make the height exactly half the width. Get that added at the TOP of the image to give you some blank space there.
- Rectangle marquee select a portion of the sky, then transform that selection, and drag the top side of the selection up, stretching your sky into the blank canvas. You can go all the way to the top, or stop short, and use a masked gradient on a higher layer (colours picked from your existing sky) to complete the upper portion.
- Optionally use the clone tool to disguise / cover any areas where the stitcher has given wonky results. You can also remove pilots / people from the picture this way ! Also useful for removing extra lens flares on sunny days - we only want 1 ideally, so you can remove the other 2 ! Be careful not to do any edits at the edges of the image, or you will see the seam when you upload it later.
- Now we can Grade the images - I use levels, hue/saturation, and color balance to grade my panoramas, but use any of the colour / grading functions you like to get the look you want.
There is good reason to do this with adjustment layers if you can - it means you don't have to redo the grading on the other (differently exposed) version of the panorama if you have it.
- We need to sharpen the base image, but ideally not the one you will be using for clouds, so if using more than 1 panorama, only sharpen the 'ground' one. Zoom to 25-50% and find an area that has trees in it , or something else where we can really see the sharpness. I use unsharp mask in PS to do mine, but you can also use straight 'sharpen' and 'sharpen more' to get much the same effect. Be careful not to over-sharpen, or your panoramas will come out 'sparkly' when animated in the web viewer ! The reason to preview at 25-50% is that this is roughly the size it will appear when online.
- If you did multiple exposure panoramas, grade the darker version to match what you did on the lighter image. You can now use layer masks, and black to white gradients in them to mask between the 2 panoramas, the aim being that both the ground and the sky will now have correct exposure when combined, giving something vaguely like an HDR image.
Your darker sky should fade in just above the horizon.
- Save your composite graded final as a JPEG at 100% quality.

4. Slicing and Dicing

We've done the difficult bits, so now all we have to do is upload our JPEG to Marzipano, and allow it to process our file.

- Go to the marzipano tool and load in your JPEG. If its aspect ratio is correct, it will accept it and start, or else it will fail with an error.
- Wait for it to create all the tiles, and check the preview, especially the vertical seam. If this is visible, you may need to go back into PS, offset the image, blur / hide the visible line with the Clone Tool, and re-export.
- Drag up and check your sky looks acceptable. It will cascade in to a single point at the very top, but nobody is looking there, so that's probably fine. If not, edit in PS (replace the upper portion with that gradient we mentioned earlier!), and re-export / upload.
- Set a title for the Panorama, and choose your options (I do drag mode, full screen, but don't include controls. If you do include them, that gives some arrows at the bottom of the screen that can be used to fast pan.
- Set an 'Initial View' where you want the pano to start when it loads.
- Export the final, which will give you a zip folder with hundreds of tiny files in it.

5. Getting it Online

- Unzip the zip to a folder on your computer.
- FTP into your server using FileZilla or equivalent and upload the whole folder to your web server into a suitable path. This will take ages - it's hundreds of small image files.
- Copy the path down to the 'app-files' level, and preview in a web browser. Check it starts where you specified in 'Initial view' in MarziPano.
- Now we can edit the spin rate, and where the central focus default is. These settings are in the index.js file, which you can open in a text editor like Notepad++.

index.JPG

- Name coming out wrong in the title bar ? Change that in the data.js file, and re-upload to the app-files folder (won't update until you ctrl-load the page)
data.JPG


And that's it - we're done ! Paste that link wherever you like to share the panorama.

AeroJ

Mods - pls move this wherever you think it needs to go ! ;)
 
Last edited:
It could go either way... I was just thinking in terms of the H How To being so filled up with stickies already... I'm perfectly fine with moving it though.
 
I make 360 photo spheres with a DJI Spark using a similar approach with ICE.
After resizing the canvas to 2:1 with Gimp I add the metadata by uploading to the website:

NadirPatch.com make panorama photo for facebook

This gives Android phone interactivity with a personal copy of the sphere.

For sharing the interactive sphere I've found a free 360 hosting site called 'Panoraven':

Sharing my new 360-degree photo

Since Microsoft Image Composite Editor (ICE) can create a 360 pano from video obtained by slowly 'flat spinning' the drone you can create a centered 2:1 aspect ratio of the video-pano, add metadata and share on Panoraven . This 360 video-pano was scaled to 6000 x 3000 pixels, is a bit low resolution but the small file size allows quick loading.

Sharing my new 360-degree photo

For Windows local viewing I use FPSview :
Welcome to the FSPViewer web pages

Once the metadata has been added you can post your 360 sphere or panorama to Facebook and use a link to Facebook to share the 360 pano.
 
Last edited:
UPDATE: MS ICE / Photostitcher fails

Having processed an increasing number of panoramic photos now I have noticed that MS ICE fails to produce a flawless result in most cases - occasionally you'll be lucky and it'll do a great job, but in most cases, even when the overall result looks generally fine, there will be alignment problems, usually on the horizon, that are very difficult to solve afterwards. Photo-stitcher is even worse in that sometimes it will just fail with an error message, and not produce any result at all.

Hugin to the rescue...

I really can't recommend Open source Pano Stitcher Hugin enough - it can succeed when all other stitchers fail, and provides a very good level of manual control if things ever go wrong with its auto processes. Aligning, and producing the final panorama takes longer than the other programs, but generally I find produces a much higher quality stitch that is well worth the small extra wait. It can also deal with HDR bracketing sets.

TH specific issues...

There is a problem with the EXIF data that the TH jpegs produce meaning that the program will produce multiple error reports in its process window, and won't even be able to tell what field of view is required to assemble the panorama. Enter the FOV as 115 degrees to tell it what it needs to know before you align the images.

All other errors that appear in the process window might look worrying, but actually don't affect the final result at all.
 
there will be alignment problems, usually on the horizon,
I have Hugin too...very, very, very slow...interface and adjustments have a bit of a learning curve.
Horizon mismatches usually result from flying under even slight windy conditions where the drone's resulting imagery is tilted relative to the horizon. Often , at the least, the mismatches are 180 degrees apart in slightly windy conditions.
If your looking for contest perfection and are at ease with the Hugin process then the time spent can be rewarding. A gimbal type camera drone can resolve the wind type of induced mismatches in my experience.
I still prefer ICE for use with the Spark because it is quick and easy to use as compared to Hugin.
 
I have Hugin too...very, very, very slow...interface and adjustments have a bit of a learning curve.
Yep, agree with both those things. I can forgive its slowness on the final output though because its blending is so excellent. But I do value the speed of ICE, so usually try the stitch there first...

A gimbal type camera drone can resolve the wind type of induced mismatches in my experience.
I don't doubt that, but of course the TH is a gimbal camera so shouldn't have that problem as much as I have been getting it :) I have got excellent panoramas on windy days, and failed ones with almost no wind at all, so I am still at a loss why some stitch perfectly and others don't. In one particularly confusing case I was trying to do an HDR composite, so did 2 18 shot panoramas in a row (without moving the craft), the second one having a much reduced exposure, and one stitched perfectly (the darker one), and the other failed in 3 different stitching programs !

But overall, I have recently become more convinced that MS ICE is just not great at stitching, because of the ones that fail there I can usually get Hugin to produce a perfect result.
 
Last edited:
Uh-oh - anyone running Chrome might have noticed that over Xmas, when it updated to version 71, their Marzipano full-screen buttons stopped working !
I am investigating this and will post the code solution as soon as I find it, but there is not much info out there at the moment being that it's only a few days since this became an issue. But in the meantime, if you use Chrome, and your full-screen doesn't work, that'll be why...

In the meantime F11 still works.
 
Last edited:

New Posts

Members online

Forum statistics

Threads
20,955
Messages
241,599
Members
27,284
Latest member
csandoval