Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Montag, 14. Mai 2012, 19:24

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:

      Quellcode

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      
      <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>


    • 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:

      Quellcode

      1
      2
      3
      4
      5
      6
      
      <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:
    http://krpano.com/examples/hotspotextract/

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

    And the whole example as download:
    http://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:

      Quellcode

      1
      2
      3
      
      <!-- 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

2

Montag, 14. Mai 2012, 20:41

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

3

Montag, 14. Mai 2012, 20:45

Thank you very very much, I will try it as soon as possible and show it. Super!

Beiträge: 103

Wohnort: Berlin

Beruf: Panoramafotograf

  • Nachricht senden

4

Dienstag, 15. Mai 2012, 10:04

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
Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

5

Dienstag, 15. Mai 2012, 10:32

Great!
And so nice on ipad too. *thumbup*
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Tuur« (15. Mai 2012, 13:27)


6

Dienstag, 15. Mai 2012, 13:19

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:

Zitat

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

Beiträge: 103

Wohnort: Berlin

Beruf: Panoramafotograf

  • Nachricht senden

7

Dienstag, 15. Mai 2012, 15:02

heureka!

its all working!
in Lens Settings i hadnt set "Image Shift" to "0". Thats all... Stupid me.

- Jan
Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

Rodeus

Anfänger

Beiträge: 24

Wohnort: Russian Federation

  • Nachricht senden

8

Dienstag, 15. Mai 2012, 21:51

Tears of joy rolls down from my eyes to my old calculator *cry*
Livepano.ru

9

Mittwoch, 16. Mai 2012, 10:55

Wahou !!!! Greats !!!!! *w00t*

works perfect

thank's a lot Klaus *thumbsup* *thumbsup* *thumbup*

10

Mittwoch, 16. Mai 2012, 12:01

well....instead animation function with alphas...play with animated hotspots.....woooooooowww!!!!

Beiträge: 53

Wohnort: kanagawa,japan

Beruf: photographer

  • Nachricht senden

11

Mittwoch, 16. Mai 2012, 17:33

すばらしいです!
It is wonderful.

大変な時間と労力の節約と、完璧な仕上がりになります!
With serious time and economy of a labor, it becomes a perfect result!

ありがとうございます!
Thank you very much!

12

Mittwoch, 23. Mai 2012, 03:09

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"!

13

Mittwoch, 23. Mai 2012, 12:23

Hi Klaus. One question, can i produce same with Kolor Autopano giga? Or it works best with those two programs?

Regards,
Jesse Passoja
Passoja design
www.passojadesign.com

14

Mittwoch, 23. Mai 2012, 14:08

Hi,
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

15

Mittwoch, 23. Mai 2012, 15:35

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

16

Mittwoch, 23. Mai 2012, 15:39

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.

Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

18

Sonntag, 3. Juni 2012, 18:01

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*
http://www.virtualtuur.com
Skype:studiotuur

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Tuur« (6. Juni 2012, 14:13)


Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

19

Mittwoch, 6. Juni 2012, 18:44

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*
http://www.virtualtuur.com
Skype:studiotuur

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Tuur« (14. Juni 2012, 14:57)


Tuur

Erleuchteter

Beiträge: 2 902

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

20

Samstag, 23. Juni 2012, 20:00

mobile question

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*
http://www.virtualtuur.com
Skype:studiotuur