Switching from one pano to another when panning takes longer the first time round which causes stuttering when panning

Anfänger

Wohnort: Bangor, North Wales

Donnerstag, 14. September 2017, 16:51

Hi,

I am trying to use krpano to do something to PanoMoments or Photosynth.

I am loading (in this example/ configurable) 4 panoramas as cube faces and depending on panning (where you look) it switches every 90 degrees (360/4) from one panorama to the next.
Everything is working fine - all the cube faces are loaded on startup and I can drag the pano with the mouse

So far so good

BUT

The first time one of the 90 degree pans is reached there is a delay when it switches to the other panorama - ONLY THE FIRST TIME.
I checked with the network monitor but there is no loading happening.
Tried to figure it out with the performance monitor in Chrome and that shows that the first time there is a spike in "painting"

Once all the borders have been "painted" once it is all smooth but not the first time round.

As I said - the example is only 4 panoramas but I wanted to use it with 16/32 and then the stutter the first time round makes it quite unusable *sad*

I have tried smaller tiles but it doesn't make a difference (smallest I tried was 512x512 and it still had this delay).

Anybody any idea?

You can see the example here under https://playingwithstuff.000webhostapp.c…cubeswitch.html
The 4 images are the same pano just getting darker - so if you look around at 90 degrees the first time it will "hang" - from then on there is no problem.
I have attached the XML - perhaps I am doing something silly ??

Any ideas are appreciated.

Cheers.

Quellcode

<krpano>

    <!-- the blending offset and overlap range in degrees -->
    <images number="4" dirname="." filename="Smog" /> 


    <!-- the startup viewing settings -->
    <view hlookat="0" vlookat="0" fovtype="HFOV" fov="100" fovmin="50" fovmax="150" />

    <!-- autorotation -->
    <autorotate enabled="false" waittime="3.0" />


    <!-- the action/code starts here -->

    <action name="start" autorun="onstart">
        for(set(k,1), k LE images.number, inc(k),
            set(name_l, calc:images.dirname +""+images.filename + k + "_l.jpg");
            set(name_f, calc:images.dirname +""+images.filename + k + "_f.jpg");
            set(name_r, calc:images.dirname +""+images.filename + k + "_r.jpg");
            set(name_b, calc:images.dirname +""+images.filename + k + "_b.jpg");
            set(name_u, calc:images.dirname +""+images.filename + k + "_u.jpg");
            set(name_d, calc:images.dirname +""+images.filename + k + "_d.jpg");
            addcube(get(k),get(name_l),get(name_f),get(name_r),get(name_b),get(name_u),get(name_d));
        );
        
    </action>
    
    <action name="addcube">
        addface('face_%1_l', '%2',  -90,   0);
        addface('face_%1_f', '%3',    0,   0);
        addface('face_%1_r', '%4',  +90,   0);
        addface('face_%1_b', '%5', +180,   0);
        addface('face_%1_u', '%6',    0, -90);
        addface('face_%1_d', '%7',    0, +90);
    </action>

    <action name="addface">
        addhotspot('%1');
        copy(hs, hotspot['%1']);
        set(hs.url, '%2');
        set(hs.ath, %3);
        set(hs.atv, %4);
        set(hs.width,  1000);
        set(hs.height, 1000);
        set(hs.distorted, true);
        set(hs.enabled, false);
        set(hs.alpha, 0.0);
    </action>
    
    <events name="switchcubes"
            onviewchange="switchcubes();"
    />

    <action name="switchcubes">
        roundval(view.hlookat);
        add(pan, view.hlookat, 0);
        mod(pan,360);
        div(slicedegree,360,images.number);
        
        if(pan LT 0,
            add(pan,360);
        );
        
        for(set(i,1), i LE images.number, inc(i),
            mul(end,i,slicedegree);
            sub(start,end,slicedegree);
            <!--trace(start);-->
            if(pan GE start,
                if (pan LT end,
                    forloopalpha(get(i));
                );
            );
        );      

    </action>
    
    <action name="forloopalpha">    
        for(set(i,1), i LE images.number, inc(i),
            if(i EQ %1,
                setcubealpha(get(i),1);
                ,
                setcubealpha(get(i),0);
            );
        ); 
    </action>

    <action name="setcubealpha">
        set(hotspot[face_%1_l].alpha, %2);
        set(hotspot[face_%1_f].alpha, %2);
        set(hotspot[face_%1_r].alpha, %2);
        set(hotspot[face_%1_b].alpha, %2);
        set(hotspot[face_%1_u].alpha, %2);
        set(hotspot[face_%1_d].alpha, %2);
    </action>
    

</krpano>

»Barcud« hat folgende Datei angehängt:

cubeswitch.xml (2,58 kB - 65 mal heruntergeladen - zuletzt: 14. Oktober 2023, 08:29)

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

2

Donnerstag, 14. September 2017, 18:00

Hi,

your example link is not working.

Best regards,
Klaus

Zum Seitenanfang

Barcud

Anfänger

Beiträge: 16

Wohnort: Bangor, North Wales

3

Donnerstag, 14. September 2017, 21:18

Hmm, strange - it is for me.
Yes, they are not the most reliable and the occasional tile doesn't load but generally it should be fine. Just clicked it and it worked in Chrome and Edge.
It is not fast - so it might have the black window with "krpano Demo" for about 3 seconds before it loads the tiles.

Hope it works *cry*

Zum Seitenanfang

Barcud

Anfänger

Beiträge: 16

Wohnort: Bangor, North Wales

4

Freitag, 15. September 2017, 13:25

OK, tried several things.
Changes the script so only when actually going over a "border" and action will be called - no better.
Used visible instead of changing alpha value - no better.

Used zorder - and it works - panning without a stutter BUT when loading the images at the beginning it seems the zorder is not used?? The images come up one after another and then the one with the highest zorder comes to the top again. Changed order there or tried to make them visible afterwards but that didn't change anything.
In Chrome with developer tools switched on it makes a big difference if I do a "Empty Cache and Hard Reload" - doing that it properly cycles through all images (which is not nice).

So all in all - alpha change or visible change cause a "performance" hit which makes the panning stutter but just changing zorder does not???

But why then does it work OK with visible and alpha change when you panned around 360 degrees once?? Is it then all cached which speeds things up ??

I am still at a loss.

Put the second example also up - hope it works - cubeswitchzorder <-- loading "problem" cycles through images but panning all the way around is smooth with image change

The first example is still out - cubeswitch <-- problem there is that once you try panning past 90,180,270,0 it stutters the first time round - second time round everything is fine.

xml of cubeswitchzorder is attached

All my tries of using alpha, visible or force visibility are in but commented out.

Has anybody an idea why alpha/visible would create the stutter??

And - I don't mind going down the zorder route but how do I prevent the images from cycling trough at the beginning.

The idea is to have 16 or 32 images - not fully equirectangular but only "slices" (180 degrees vertical and perhaps 30 degrees wide) so any cycling through all whilst loading is not wanted - neither the stutter.

Again - any ideas welcome.

Cheers.

Quellcode

 <krpano>
	<images number="4" dirname="." filename="Smog" /> 
	<!--<images number="8" dirname="." filename="pano" />-->


	<!-- the startup viewing settings -->
	<view hlookat="0" vlookat="0" fovtype="HFOV" fov="100" fovmin="50" fovmax="150" />

	<!-- autorotation -->
	<autorotate enabled="false" waittime="3.0" />
	<!--<autorotate enabled="true"
            waittime="3.0" 
            speed="10.0" 
            horizon="0.0"  
     />-->


	<!-- title text--> 
	<layer name="title" url="%SWFPATH%/plugins/textfield.swf" align="top" width="90%" y="5%" html=" " background="false" css="text-align:center; font:Arial; font-size:20px; font-weight:bold; font-style:italic; color:#FFFFFF;" textshadow="2" enabled="false" />


	<!-- the action/code starts here -->

	<action name="start" autorun="onstart">
		div(slicedegree,360,images.number);
		for(set(k,1), k LE images.number, inc(k),
			set(name_l, calc:images.dirname +""+images.filename + k + "_l.jpg");
			set(name_f, calc:images.dirname +""+images.filename + k + "_f.jpg");
			set(name_r, calc:images.dirname +""+images.filename + k + "_r.jpg");
			set(name_b, calc:images.dirname +""+images.filename + k + "_b.jpg");
			set(name_u, calc:images.dirname +""+images.filename + k + "_u.jpg");
			set(name_d, calc:images.dirname +""+images.filename + k + "_d.jpg");
			addcube(get(k),get(name_l),get(name_f),get(name_r),get(name_b),get(name_u),get(name_d));
			
			mul(end,k,slicedegree);
			sub(start,end,slicedegree);
			set(end_a[a].item[get(k)].value, get(end));
			set(start_a[a].item[get(k)].value, get(start));
		);
<!--	trace(not all visible);
		for(set(t,1),t LE images.number,inc(t),
			cubevisible(get(t),true);
		); -->
		def(currpano,integer,3); <!-- set to "wrong" number so refresh will happen on first go -->
		trace(only once);
	</action>
	
	<action name="addcube">
		addface('face_%1_l', '%2',  -90,   0);
		addface('face_%1_f', '%3',    0,   0);
		addface('face_%1_r', '%4',  +90,   0);
		addface('face_%1_b', '%5', +180,   0);
		addface('face_%1_u', '%6',    0, -90);
		addface('face_%1_d', '%7',    0, +90);
	</action>

	<action name="addface">
		addhotspot('%1');
		copy(hs, hotspot['%1']);
<!-- trying to force only face_1_x to have a high zorder and all the other ones low to prevent image cycling on loading but no luck-->
		indexoftxt(ind,'%1','1');
		if(ind != -1,
			set(hs.zorder, 5);
			,
			set(hs.zorder,1);
		); 
		set(hs.url, '%2');
		set(hs.ath, %3);
		set(hs.atv, %4);
		set(hs.width,  1000);
		set(hs.height, 1000);
		set(hs.distorted, true);
		set(hs.enabled, false);
		set(hs.visible, true);
		set(hs.alpha, 1.0);
	</action>
	
	<events name="switchcubes" onviewchange="switchcubes();"
	/>

	<action name="switchcubes">
		add(pan, view.hlookat, 0.5);
		mod(pan,360);
		if(pan LT 0,
			add(pan,360);
		);

		for(def(i,integer,1), i LE images.number, inc(i),
			if(pan GE start_a[a].item[get(i)].value,
				if (pan LT end_a[a].item[get(i)].value,
					if(currpano != i,
						trace(i);
						<!--forloopalpha(get(i));-->
						<!--forloopvisible(get(i));-->
						forloopzorder(get(i));
						set(currpano,get(i));
					);	
				);
			);
		);		
	</action>
	
	<action name="forloopalpha">
		for(set(m,1), m LE images.number, inc(m),
			if(m EQ %1,
				setcubealpha(get(m),1);
				,
				setcubealpha(get(m),0);		
			);
		);
	</action>
	
	<action name="forloopvisible">
		<!--trace('active pano: ',%1);-->
		for(set(m,1), m LE images.number, inc(m),
			if(m EQ %1,
				cubevisible(get(m),true);
				,
				cubevisible(get(m),false);			
			);
		);
	</action>

	<action name="forloopzorder">
		for(set(m,1), m LE images.number, inc(m),
			if(m EQ %1,
				setcubezorder(get(m),5);
				,
				setcubezorder(get(m),1);		
			);
		);
	</action>
		
	<action name="setcubealpha">
		set(hotspot[face_%1_l].alpha, %2);
		set(hotspot[face_%1_f].alpha, %2);
		set(hotspot[face_%1_r].alpha, %2);
		set(hotspot[face_%1_b].alpha, %2);
		set(hotspot[face_%1_u].alpha, %2);
		set(hotspot[face_%1_d].alpha, %2);
	</action>
	
	<action name="cubevisible">
		set(hotspot[face_%1_l].visible, %2);
		set(hotspot[face_%1_f].visible, %2);
		set(hotspot[face_%1_r].visible, %2);
		set(hotspot[face_%1_b].visible, %2);
		set(hotspot[face_%1_u].visible, %2);
		set(hotspot[face_%1_d].visible, %2);
	</action>

	<action name="setcubezorder">
		set(hotspot[face_%1_l].zorder, %2);
		set(hotspot[face_%1_f].zorder, %2);
		set(hotspot[face_%1_r].zorder, %2);
		set(hotspot[face_%1_b].zorder, %2);
		set(hotspot[face_%1_u].zorder, %2);
		set(hotspot[face_%1_d].zorder, %2);
	</action>	
	
</krpano>

»Barcud« hat folgende Datei angehängt:

cubeswitchzorder.xml (4,7 kB - 66 mal heruntergeladen - zuletzt: Gestern, 17:43)

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

5

Freitag, 15. September 2017, 17:38

Hi,

there could be numbers of reason - it could be also your hardware (gpu-memory, gpu-drivers), but to be able to say more it would be first necessary to have a look at your example - e.g. to see exactly what you're doing - e.g. there is no information yet about your krpano version and if html5 or flash.

So about your links - sorry, but for me they are not working, I'm always getting a 'server not found' error.
Are you sure your server is public accessible?

Best regards,
Klaus

Zum Seitenanfang

Barcud

Anfänger

Beiträge: 16

Wohnort: Bangor, North Wales

6

Freitag, 15. September 2017, 19:42

I can certainly understand that you would need to see it and I have to say - I am confused. *confused*

000webhostapp.com is a free hosting service based on hostinger.
I use it mainly for WebGL stuff and I have shared links to the site before with people.
Had the account for a couple of years now but only used it to share small projects.

I tried to reach the site via the tor browser and choose a couple of different countries to connect to the internet from and the site was always found.
Just asked some friends in Germany and it works there.

Well - but all that doesn't help if you can't see it.
I do not have my own domain/server so I need to sort that one out first - even though I'm not sure what to do about it.

Could post a screen video but that is just not the same as actually trying it.

Just a couple of things - pretty sure no HW problem NVidia 970 and as I said - no matter how small the tiles it always happens.

krpano version krpano 1.19-pr8 and I am forcing html5:only - works on my phone as well.

Will update the issue once I think I sorted out the *cursing*

hosting problem *cry*

Thanks for trying anyway.

Zum Seitenanfang

Barcud

Anfänger

Beiträge: 16

Wohnort: Bangor, North Wales

7

Freitag, 15. September 2017, 23:30

OK - I will give it one more go before the weekend

First try (first xml posted) setting hotspot alpha - stutters when going over the 90,180... boundaries when a new hotspot becomes visible - http://pano.5gbfree.com/cubeswitch/cubeswitch.html

Second try (second xml) using zorder to make hotspots visible -
tried to improve scripting - only do something if there is a change .....
works on panning without stutter but on first load - or in developer mode with empty cache and hard reload - the images overlap on loading.
Thought I set the zorder but perhaps not - http://pano.5gbfree.com/cubeswitchzorder…itchzorder.html

Hope it works on that server for you.

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

8

Samstag, 16. September 2017, 00:41

Both links work for me. To best see what you are talking about I used the arrow key to pan the image. As a new pano loads for the first time panning stops until the new pano is loaded, then continues. The next time you do this there is no stopping.

Try using multires and be sure you have a preview version for each pano. See if that makes a difference. And just so everyone is on the same page, update to the current version of KRPano. (You are using PR8. Current version is PR12.)

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

9

Samstag, 16. September 2017, 01:20

To see this working more smoothly go to my Hawaiian tour. Go to the Haleakala Sunrise Animation (roughly the middle of the tour). Press and hold the left or right arrow key. You should see little or no hesitation as the panos crossfade.

This is with PR3. Haven't converted the tour to PR12. Each pano is multires and has a preview.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

Barcud

Anfänger

Beiträge: 16

Wohnort: Bangor, North Wales

10

Samstag, 16. September 2017, 18:43

Your tour is blending 2 panoramas by really loading them - right . So you load a second panorama.

Sorry if my example doesn't really show what I would like to achieve and I know now that I picked the wrong images/panoramas.

My idea was to sort of do what panomoments ( https://www.panomoments.com/ ) does or what photosynth did.

So the images should be about 180 degrees vertical but only about 90 degrees wide. Taken in a rotating motion (not necessarily around to nodal point) you just convert those images to cubefaces which have a front, top and bottom - no stitching them together. Then you upload those cubefaces and the script positions them next to each other and when you "move" the panorama it will visualise movement.

Sorry for choosing such a bad example - will try to post something which shows better what I mean next week.

The problems with loading a new panorama would be that the old one is gone so if you go back and forth you would always need to reload (even though most will come out of cache this is not what I wanted).
That is why I used distorted hotspots because they allow me to have them all loaded and manipulate the alpha value or zorder. The idea with alpha value was that I could have a small blend phase not the hard cut only.

What I can't understand is why there is the stutter even though all the data is there ( I checked the network log of the chrome developer tools - all images are loaded to hotspots in the beginning) ?
Why would changing the alpha value affect the movement that much - but only the first time?

As I said - I will try to come up with a better example next week.

And thanks for the multires/preview image idea - will look into it.

Cheers

Zum Seitenanfang

Scott Witte

Fortgeschrittener

Beiträge: 382

Wohnort: Milwaukee, WI USA

Beruf: Professional Photographer

11

Montag, 18. September 2017, 06:27

Zitat von »Barcud«

My idea was to sort of do what panomoments does...

If that is what you are after, it is really a kind of object VR -- muliple frames, not panoramas. Currently, that is only available officially in KRPano using Flash. For HTML5 you can use code developed by several users here but I expect you will want to make some modifications to fully duplicate what Panomoments does.

The way you get around the "stuttering" is to load upcoming frames in the background and make them visible when needed while also making unneeded frames not visible (for the kind of frame change Panomotion does) or moving them behind the newly visible frame if you want any kind of crossfade.

Scott Witte
Tour de Force 360VR
Scott Witte Photography

Zum Seitenanfang

Barcud

Anfänger

Beiträge: 16

Wohnort: Bangor, North Wales

12

Montag, 18. September 2017, 13:37

Yes, I think you are right - it really is more object VR than panorama.
Only "problem" will be that for full-screen and looking up/down I need the front/up/down cube face in decent quality which makes the image size (in terms of data) quite big.

Well hey - I might as well give it a go.

Thanks for the pointers.

Cheers,
Bernd

Zum Seitenanfang