You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • "360gradenfotografie" started this thread

Posts: 51

Location: Tilburg, The Netherlands

  • Send private message

1

Tuesday, September 3rd 2019, 2:02pm

3D transitions

I was hoping that with the new release it would be possible to create "3D transitions" easily.

Of course it's possible to create depthmaps and position every scene in 3D space (using ox, oy and oz of the <image> tag), and then use view.ty/tx/tz to fly between them. This obviously gives the best results, but it involves a lot of manual work for every tour.

I would like to do the following:
  • [click] on hotspot
  • Move the current pano image in 3D space so that the viewer approaches the hotspot (1 sec)
  • Delayed call after 0.5 sec:
  • Loadscene (1 sec blend)
  • Move the new pano image in 3D space so that the viewer moves towards the center of the scene (1 sec)

This creates a nice sense of 3D space without the need to create depthmaps etc. Problem is: I cannot dynamically set the ox/oy/oz of another pano image then the one I'm currently viewing. Is there any workaround for this?

It was discussed earlier:
- 3dvista's transitions in Krpano?
- Google Street View Style Navigation
- Shift inside the sphere

There's even a plugin, but none of the transitions run really smoothly:
- GTransition (walk-through transition effect) for krpano

This post has been edited 2 times, last edit by "360gradenfotografie" (Sep 16th 2019, 9:47pm)


a.pu

Trainee

Posts: 80

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

2

Tuesday, September 3rd 2019, 2:44pm

Actually the best thing to be done using tx, ty transitions is presented here

http://panosphera.ru/gallery/transitions/

This simple demo moves around 12 hotspots covering entire cube surface without any pano loading

I had similar task in real project (about 40 panos) and got this three objectives
1. gather spatial data for all panoramas
2. develop a module that counts transition direction based on spatial data
3. develop transition itself

Also I had to preload entire cubefaces for each panorama where user can go. Which even in reduced size will consume web traffic.

I think it is possible to define relative pano positions by eye if you've got several panoramas in project.
This requires to create sort of an editor.

This post has been edited 2 times, last edit by "a.pu" (Sep 3rd 2019, 2:57pm)


  • "360gradenfotografie" started this thread

Posts: 51

Location: Tilburg, The Netherlands

  • Send private message

3

Tuesday, September 3rd 2019, 2:58pm

Actually the best thing to be done using tx, ty transitions is presented here

http://panosphera.ru/gallery/transitions/


Thanks, I know that example! It looks really nice, but when loading panos as hotpots I can't use scenes, multires, stereo images, etc.

A great solution would be to tween ox/oy/oz of the current and other <image> tags on the fly.

a.pu

Trainee

Posts: 80

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

4

Tuesday, September 3rd 2019, 3:03pm



Thanks, I know that example! It looks really nice, but when loading panos as hotpots I can't use scenes, multires, stereo images, etc.

A great solution would be to tween ox/oy/oz of the current and other <image> tags on the fly.


Yep,
this trick works only as a transitional effect

5

Wednesday, September 4th 2019, 11:33pm

Hi,

here a quick and fully automatic solution for simple 3d transitions:
https://krpano.com/examples/simple3dtransition/

The xml:
https://krpano.com/viewsource.html?examp…sition/tour.xml

That's a default krpano VTOUR with the default hotspots, the only thing that is modified is this hotspot click action from the vtourskin.xml.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<action name="skin_hotspotstyle_click" scope="local">
    if(caller.linkedscene,
        copy(hs_linkedscene, caller.linkedscene);
        if(caller.linkedscene_lookat, txtsplit(caller.linkedscene_lookat, ',', hs_lookat_h, hs_lookat_v, hs_lookat_fov); );
        set(caller.enabled, false);
        skin_hidetooltips();
        spheretospace(caller.ath,caller.atv,caller.depth, tx,ty,tz);
        set(s, -0.5);
        tween(image.ox|image.oy|image.oz|caller.alpha, calc((s*tx)+'|'+(s*ty)+'|'+(s*tz)+'|0'), 0.5, default,
            skin_loadscene(get(hs_linkedscene), get(skin_settings.loadscene_blend));
            set(view.oz, 500);
            tween(view.oz, 0);
            if(hs_lookat_h !== null, skin_lookat(get(hs_lookat_h), get(hs_lookat_v), get(hs_lookat_fov)); );
            skin_updatescroll();
        );
    );
</action>
It can either changed in the vtourskin.xml or redefined in the tour.xml.

That should look like in your example - moving toward the hotspot position and in the new scene a moving-in animation.
But because there is no depth-geometry the resulting distortions are depending on the image-content and how it is aligned to the cube-faces.

About the code:

1. this line converts the hotspots ath/atv position to a 3D position:

Source code

1
spheretospace(caller.ath,caller.atv,caller.depth, tx,ty,tz);

2. then this code moves the pano 3D position half-way into the opposite direction:

Source code

1
2
set(s, -0.5);
tween(image.ox|image.oy|image.oz|caller.alpha, calc((s*tx)+'|'+(s*ty)+'|'+(s*tz)+'|0')
opposite direction by the negative scale value and because the pano itself will be moved and not the view

3. after loading the next scene the view.oz value will set to 500 to move the view a bit outwards and then tweened back to 0 as moving animation.

Source code

1
2
set(view.oz, 500);
tween(view.oz, 0);

The remaining code of that action is the default one from the vtourskin.xml.


Instead of step 3 it would be also possible to use the moving direction toward the hotspot also as moving-in direction in the next scene. But therefore the scenes should be aligned together (e.g. same north in all panos) and the KEEPVIEW flag be used:

Source code

1
2
set(image, ox=calc(tx), oy=calc(ty), oz=calc(tz));
tween(image.ox|image.oy|image.oz, 0|0|0, 0.5, default);


Here the example from above with that modification:
https://krpano.com/examples/simple3dtransition/example2.html

The xml:
https://krpano.com/viewsource.html?examp…ition/tour2.xml

Best regards,
Klaus

  • "360gradenfotografie" started this thread

Posts: 51

Location: Tilburg, The Netherlands

  • Send private message

6

Thursday, September 5th 2019, 9:30am

Hi Klaus,

Thanks for your reply!

The transition you're proposing (example2.html) looks like this, schematically:

Source code

1
2
                             ----------[blend]---------
----------[zoom]---------- | ----------[zoom]----------


To smoothen the transition, a scheme like this would be better:

Source code

1
2
              ----------[blend]----------
----------[zoom]---------- | ----------[zoom]----------


At the moment it doesn't seem possible because only the current image's ox/oy/oz can be modified. Right?

Is there a workaround or another way to make it happen?

7

Thursday, September 5th 2019, 9:57am

Hi,

would be possible too, but like example 2 it requires aligned panos.

Here an example:
https://krpano.com/examples/simple3dtransition/example3.html

The xml:
https://krpano.com/viewsource.html?examp…ition/tour3.xml

In this example KEEPMOVING is used as flag for the scene loading to allow moments during blending.
And for the 3D transition both, the image.ox/oy/oz and view.tx/ty/tz settings are initially set to an offset, and then during blending only the view.tx/ty/tz values are tweened back to 0:

Source code

1
2
3
4
5
6
7
8
...
set(s, -0.5);
set(image, ox=calc(s*tx), oy=calc(s*ty), oz=calc(s*tz));
set(view, tx=calc(s*tx), ty=calc(s*ty), tz=calc(s*tz));
tween(view.tx|view.ty|view.tz, 0|0|0, 1.0);
tween(caller.alpha, 0.0, 0.25, default,
  skin_loadscene(get(hs_linkedscene), get(skin_settings.loadscene_blend));
  ...
The moving-time is 1.0 seconds, the blending itself is set for 0.5 seconds, so a 0.25 second delay before the scene gets loaded/blended to blend in the middle of the transition.

Best regards,
Klaus

  • "360gradenfotografie" started this thread

Posts: 51

Location: Tilburg, The Netherlands

  • Send private message

8

Thursday, September 5th 2019, 10:12am

In this example KEEPMOVING is used as flag for the scene loading to allow moments during blending.
And for the 3D transition both, the image.ox/oy/oz and view.tx/ty/tz settings are initially set to an offset, and then during blending only the view.tx/ty/tz values are tweened back to 0


Awesome! I'll dive into it immediately.

9

Thursday, September 5th 2019, 10:25am

One more note - I would recommend using multires for this kind of transition to make it more smooth.

My example above is using large single-res images and the image-decoding of these larges images is blocking the browser for short intervals which can make the transition less smooth. With multires and the smaller tile images there this is less to happen.