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:

      • 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 Klaus,

    just did a test with Tutorial and... almost.
    In my test the hotspot alignment is not perfect. Maybe i did somthing wrong.

    Temporary Test Panorama

    Ptgui Info:


    " url="%SWFPATH%/skin/merkab-highlight.jpg"
    distorted="true"
    onloaded="calc_pos_from_hfov_yaw_pitch_roll(76,-122.372, -6.944, -8.7384);"
    visible="false" alpha="0"
    handcursor="false"
    />"


    Should be working, right? Its a little shifted. I go on testing...
    - Jan

  • Hi,

    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

  • Cool! Great, thank you Klaus! You Superman!
    Very useful information for the correct solution! *thumbup*
    Now everything will be much easier without any calculations and "hits finger in the sky"!

  • Hi,

    i like to make like a small movie with this in the pano.
    i have extracted 10 pics and want to show them quickly after each other.

    instead of making for every pic a seperate hotspot i used addhotspot and change the url with another action.

    but that doesn't work nice..

    What is the best way to do that?

    and also like to have it pov driven.. *cry*

    i also have seen the actions overflow again and problems with wait in actions.

    Cheers
    Tuur *thumbsup*

  • ok example.

    the photo is not done yet.. first i want to check the code.. if it's gonna work.

    so look here and turn like 20degrees clock wise you see 'tarzan'.
    but when you look at the code it's not the best way i should say.

    http://virtualtuur.com/wbtest/2
    http://virtualtuur.com/wbtest/2/pool.xml

    this is what i want but i want the tarzan to go on.. unless you leave a hlookat range of say 40 degrees..


    Edit: sort of solved.. i just like the 'movie' only to go on between 0 and 40 degrees

    http://virtualtuur.com/wbtest/5/
    http://virtualtuur.com/wbtest/5/pool.xml


    Tuur *thumbsup*

  • Hi,

    i made this example that also works on ipad and iphone.

    for ipad the hotspots are: 437x2000 = 120 kb
    and for iphone it's: 295x1350 = 85 kb

    jpg quality 4..

    I find the quality on the ipad a bit bad..
    i tried the desktop version but also that renders very pixelated..

    what is the way to go to make it look nice on ipad ?
    i think bigger hotspots make it even more heavy..

    (for iphone i took the music out..

    just a test..

    http://virtualtuur.com/WBtest/7/

    *confused*

    Tuur *thumbsup*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!