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

  • http://beenseen.ru/wp-content/uploads/tours/temp/tour.html

    Please help!

    xml code:

    Its the same as described, alignment is ok, but its dynamic! why is it changing?
    how can i use this example in make vtour multires?

  • Hi guys!

    I've always made distorted aligned spots without any problems. But now I can't get it working properly *blink* *confused* Either I'm missing some point or maybe there's some tricky thing in PT Gui...

    Here's the link:

    http://vt.most-inform.com/bugs/distorted/[size=10]
    [/size]
    The aligned spot supposed to be the ice cream refrigerator (should open doors when hovered). But the spot appears above the intended location. I traced hfov, yaw, pitch and roll values and they are passed to the calc_pos_from_hfov_yaw_pitch_roll(); action properly. But for some awkward reason the spot is placed inadequately.


    Panoramas are aligned OK (I added the second pano to check it with KEEPVIEW). My code seems to be OK also:

    http://vt.most-inform.com/bugs/distorted/tour.xml

    Maybe thee's some change in Krpano behaviour or just some stupid tricky thing which I can't see *wink*

    Regards,

    Alexey

  • Hehe) I moved the values from the style into the hotspot itself and now it works properly. Hmmm.... However those values were traced properly from the action...


    (5 Minutes later)

    *tongue* got it working. It turns out that using

    Code
    hfov="40" yaw="110.394" pitch="-14.4036" roll="18.1743"

    inside the hotspot style made the hfov, yaw, pitch, roll inside the action owervritten. I replaced them in the style with

    Code
    hs_hfov="40" hs_yaw="110.394" hs_pitch="-14.4036" hs_roll="18.1743"

    and now it works *wink*


    Maybe this brainstorming might be helpful for some of you...

    Regards,

    Alexey

  • Is there anyway to get the proper coordinates from panoramic 3d rendered image?

    I already tried to align with scale, ath and atv, but getting it perfect is pretty difficult.

  • Is there anyway to get the proper coordinates from panoramic 3d rendered image?

    I already tried to align with scale, ath and atv, but getting it perfect is pretty difficult.

    There are several ways you can go about this. Perhaps something that you could take a look at is this : https://krpano.com/examples/usage/#dragable-hotspots. This example lets you move hotspots with your mouse and gives you the ath and atv.

    Another option would be build an action that outputs the position of the cursor translated to the pano to a textfield.

  • hi klaus,
    i follow your example,make a fridge door open-close effect,xml code like this:

    Code
    <hotspot name="fridge-open"			url.normal="fridge-open.jpg"			distorted="true"			onloaded="calc_pos_from_hfov_yaw_pitch_roll(122, 0, 0, 0);" 									visible="false"									/>
    			<action name="calc_pos_from_hfov_yaw_pitch_roll">				calc(deg2rad, Math.PI / 180.0);
    				<!-- 计算热点尺寸 -->				calc(hfov, 0.5 * (%1) * deg2rad);				Math.tan(hfov);				set(width, calc(hfov * 1000));				set(height, 'prop');
    				<!-- 计算球面坐标系和旋转设置 -->				calc(yaw, -(%2) * deg2rad);				calc(pitch, (%3) * deg2rad);				calc(roll, -(%4) * deg2rad);				Math.cos(ch, yaw);				Math.sin(sh, yaw);				Math.cos(ca, pitch);				Math.sin(sa, pitch);				Math.cos(cb, roll);				Math.sin(sb, roll);				Math.atan2(yaw,  calc(cb*sh - sb*sa*ch), calc(ca*ch));				Math.atan2(roll, calc(sb*ch - cb*sa*sh), calc(cb*ca));				Math.asin(pitch, calc(cb*sa*ch + sb*sh));				calc(ath, yaw / deg2rad);				calc(atv, pitch / deg2rad);				calc(rotate, roll / deg2rad);			</action>			
    			<hotspot name="hs1" alpha="0" 				depth="1000"				polyline="false"				scaleflying="true"				tx="0"				ty="0"				tz="0"				onclick="abc();"				>				<point ath="-19.853476" atv="-3.9391" />				<point ath="-19.326172" atv="35.578593" />				<point ath="20.01022" atv="34.117677" />				<point ath="19.731663" atv="-4.047307" />			</hotspot>
    			<action name="abc">				if(hotspot[fridge-open].visible == true,set(hotspot[fridge-open].visible,false),set(hotspot[fridge-open].visible,true));							</action>


    bug:after first time click polygon area,i must remove cursor out of polygon area,onclick action can work. after that,all the thing works well,can you help me?

  • Hi there,


    I was successful and very happy with Klaus' action "calc_pos_from_hfov_yaw_pitch_roll" on desktop and iOS inserting an image hotspot accurately. But switching to WebVR I recognized a slight horizontal offset of some pixel of that hotspot image. Is this a known issue? Any workaround?


    Best regards,
    Chris

  • Hi,

    I am having some difficulty with the depth="off" method for hotspots. I am using the latest release (1.19 pr8) with all the default settings based on the MAKE VTOUR (NORMAL) droplet and I am not getting it to work.
    I have searched the forum and found that for most people it appears to work OOTB. *confused*
    Any pointers on what I am doing wrong or missing are greatly appreciated.
    Thank you
    Christian

    Here is a brief outline of the process I am using:

    1) Create a tour using the normal droplet based on a pano image.
    2) Default cubeface size is 2048x2048 for desktop views and 1024x1024 for mobile devices.
    3) Add a crop of the background image and place it as a hotspot in the scene, aligned with the background, desaturated to see the location.
    4) In the first scene, I set the depth of the hotspot to "2048" and it is perfectly aligned in the 360 view, but it shifts slightly in VR.
    5) In the second scene, I set the depth to "off" as described in the documentation and on the forum to render the hotspot at an infinite distance, but it appears that the depth resorts to the default "1000". The actual value returned when doing a trace is NaN.

    Here is a link to the tour:

    http://christianrietzke.de/vr/depth/tour.html

    And here is the code - everything else is left at the default.

  • Hi,

    the rendering itself is correct, but the alignment/scaling of your hotspot is not.

    You have adjusted the scale for depth=2048, but it would need to be scaled for depth=off.

    Please see the first post of this thread for creating pixel-perfect hotspot images (for stereo usage they need to be defined with depth=off in the xml).

    Best regards,
    Klaus

  • Thank you, Klaus. Was just writing an update to my previous post when I saw your response. Will certainly take a closer look at the first post in this thread and try the method described there.

    In the meantime, I did achieve my goal of perfect alignment of a hotspot with the background image for regular and vr mode - after a lot of trial and error. *smile*
    To get the alignment to work, I set the worldscale variable in the webvr.xml settings to "10.0".
    Here's the code:

    Code
    <plugin name="WebVR" devices="html5" keep="true"
    	    	url="webvr.js"
    			worldscale="10.0"
            	...
    	    	/>


    And here is the updated example:
    http://christianrietzke.de/vr/depth/tour.html

    Like I said - got this through trial and error and it might be a bit of a hack/ bandaid, especially as it has a global effect on the tour and might cause other yet unforeseen issues.
    But it works in this case across Android and iOS platforms, which makes for happy clients. *g*

Participate now!

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