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...
...and this is what happens when one fails. If that happens, try another program*.
*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++.
- 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)
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 !
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...
...and this is what happens when one fails. If that happens, try another program*.
*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++.
- 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)
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:
