Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment)

Hi,

here a new and advanced example for how to extract a partial part out of any kind of pano image for usage as pixel-perfect-aligned distorted hotspot. Different to this example the hotspot doesn't need to be inside a cubeface.

For extracting the hotspot image from the source pano image, additionally tools are necessary - either the free Hugin Stitcher or the commercial PTGUI Stitcher can be used.

As example I'm using here this (old and not very well stitched) pool pano - the blue water of the pool should be the hotspot. The pool is bigger than one cube face and because of this, good for a demonstration:

Here the step by step tutorial:

1. Load the spherical source pano image into PTGUI or Hugin:
   

   PTGUI:

   • 1.1. Enable the 'Advanced Mode'.
     
     
   • 1.2. Select the 'Source Images' tab.
     
     
   • 1.3. Add the pano image and skip the Camera / lens data dialog.
     
     
   • 1.4. Select the 'Lens Settings' tab and select there 'Equirectangular panorama' as lens type and enter 360 as horizontal field of view. Note - for a partial pano enter the smaller hfov and for a flat pano enter 1.0 as hfov.
     

   Hugin:

   • 1.1. Select 'Load images...', load the pano image and select ''Equirectangular' as lens type and 360 as HFOV. Note - for a partial pano enter the smaller hfov and for a flat pano enter 1.0 as hfov.
     

   
   

2. Select the part of the pano where the whole hotspot is visible:
   

   PTGUI:

   • 2.1. Use the 'Panorama Editor' window and select via mouse dragging and the fov sliders and the numeric transforms the right part of the pano image. The projection need to be Rectilinear.
     
     
   • 2.2. Go back to the 'Panorama settings' tab and write down the horizontal field of view value.
     
     
   • 2.3. Then to the 'Image Parameters' tab and write down the Yaw, Pitch and Roll values.
     

   Hugin:

   • 2.1. Open the 'Preview window' and enable the 'Auto' update button...
     
     and and select via mouse dragging and the fov sliders and the numeric transforms the right part of the pano image. The projection need to be Rectilinear.
     
     
   • 2.2. Go back to the 'Stitcher' tab and write down the horizontal field of view value.
     
     
   • 2.3. Then to the 'Images' tab and write down the Yaw, Pitch and Roll values.
     

   For the pool example - here the extracted values:
   hfov = 150
   yaw = -90
   pitch = -4
   roll = -30

   
   

3. Render the pano part:
   

   PTGUI:

   • 3.1. Go to the 'Create Panorama' tab.
   • 3.2. Select 'Set optimum size...' or enter your own target pixel size (any size is possible).
   • 3.3. Enter the hotspot name and press 'Create Panorama'.
     

   Hugin:

   • 3.1. Go to the 'Stitcher' tab
   • 3.2. Select 'Calc optimal size' or enter your own target pixel size (any size is possible).
   • 3.3. As Output just select 'Remapped Images: [x] No exposure correction, low dynamic range.
   • 3.4. Press 'Stitch' and save the hotspot image.
     

   For the pool example - here the extracted image (already modified - green instead of blue color):
   

   
   

4. Load that hotspot image into krpano:
   
   • 4.1. The coordinate system from Hugin/PTGUI and krpano is different, so the Yaw, Pitch and Roll values need to be recalculated.
     This is a bit complex, so I have written an action for that, that will calculate all necessary values automatically.
     

     Here that action for the recalculation - insert it anywhere in your xml:

     Code

     <action name="calc_pos_from_hfov_yaw_pitch_roll">
       div(hfov,%1,57.295779);
       div(yaw,%2,-57.295779);
       div(pitch,%3,57.295779);
       div(roll,%4,-57.295779);
       mul(hfov,0.5);Math.tan(hfov);mul(width,hfov,1000);set(height,'prop');
       Math.cos(ch,yaw);Math.sin(sh,yaw);
       Math.cos(ca,pitch);Math.sin(sa,pitch);
       Math.cos(cb,roll);Math.sin(sb,roll);
       mul(m0,ca,ch);
       mul(tmp,cb,sa);mul(tmp,ch);mul(tmp2,sb,sh);add(m3,tmp,tmp2);
       mul(m4,cb,ca);
       mul(tmp,cb,sa);mul(tmp,sh);mul(tmp2,sb,ch);sub(m5n,tmp,tmp2);mul(m5n,-1);
       mul(tmp,sb,sa);mul(tmp,ch);mul(tmp2,cb,sh);sub(m6n,tmp,tmp2);mul(m6n,-1);
       Math.atan2(yaw,m6n,m0);
       Math.atan2(roll,m5n,m4);
       Math.asin(pitch,m3);
       mul(ath,yaw,57.295779);
       mul(atv,pitch,57.295779);
       mul(rotate,roll,57.295779);
     </action>

     Display More
   • 4.2. That calc_pos_from_hfov_yaw_pitch_roll(hfov, yaw, pitch, rol) action can now be called in the onloaded Event from the hotspot. The action has the hfov, yaw, pitch and roll values from Hugin or PTGUI as parameters. See step 2.2 and 2.3.
     
   • 4.3 The final xml code will look like this:
     
     
     Code

     <hotspot name="spotNNN"
              url="pool_extract.jpg" 
              distorted="true"
              onloaded="calc_pos_from_hfov_yaw_pitch_roll(150, -90, -4, -30);"
              ...
              />

5. The result:
   

   Here the final example:
   https://krpano.com/examples/hotspotextract/

   The xml of it:
   https://krpano.com/examples/hotspotextract/pool.xml

   And the whole example as download:
   https://krpano.com/examples/hotspotextract/pool.zip

   HTML5 / Mobile Notes:

   • For HTML5 hotspots the width or height of the hotspot image shouldn't exceed a certain size.
   • For Desktop HTML5 the size should be below 2000px to avoid rendering problems in Safari.
   • And for mobile/tablet devices the size should be even more smaller because of performance and memory limitations on these devices, e.g. keep it below 1200-1400px.
   • Define the smaller images in the xml by using the devices setting and different url values:
     
     
     Code

     <!-- lower resolution images for HTML5 and mobile devices -->
     <hotspot name="water" url="pool_extract_html5desktop.jpg" devices="html5+desktop" />
     <hotspot name="water" url="pool_extract_html5mobile.jpg"  devices="mobile|tablet" />

Best regards,
Klaus

Additional notes for flat and object panos:

1. Use 1.0 as horizontal field of view for the input image.
2. Set the hfov and vfov values for the hotspot manually in the stitcher, the fov sliders itself are limited to 1.0.
3. After step 2.3. round the hfov, yaw, pitch and roll values to 2 or 3 decimal places and enter them again in the stitcher.

Why that?
PTGUI and Hugin are only displaying the first 4 decimal places of these values but the real intern values have more decimal places. So to make the rendering and the values exactly fitting together, a manual rounding and re-entering is necessary.

Best regards,
Klaus

Hi,

Quote from info@totzek.de

In my test the hotspot alignment is not perfect. Maybe i did somthing wrong.

Set 'Horizontal compression' and 'Vertical compression' to 0.0 !
Any other values there will lead to wrong results of course.

And try also this tip:

Quote

After step 2.3. round the hfov, yaw, pitch and roll values to 2 or 3 decimal places and enter them again in the stitcher.

Why that?
PTGUI and Hugin are only displaying the first 4 decimal places of these values but the real intern values have more decimal places. So to make the rendering and the values exactly fitting together, a manual rounding and re-entering is necessary.

Best regards,
Klaus

Hi,

Quote from Nelike imagery

One question, can i produce same with Kolor Autopano giga?

No, because in Autopano Giga it's not possible to load an Equirectangular image as input.

Best regards,
Klaus

Quote from Job.1

I don't try on iPad, this working on iPad and iPhone ?

yes, of course!

It's just a distorted hotspot, you can test it also on Desktop Safari with iPhone/iPad user agent.