Sie sind nicht angemeldet.

3D transitions

360gradenfotografie

Schüler

  • »360gradenfotografie« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Tilburg, The Netherlands

  • Nachricht senden

1

Dienstag, 3. September 2019, 14:02

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
360gradenfotografie.nl

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »360gradenfotografie« (16. September 2019, 21:47)

a.pu

Schüler

Beiträge: 120

Beruf: software engineer, author of krpano syntax highlighting, bundler and style guide

  • Nachricht senden

2

Dienstag, 3. September 2019, 14:44

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.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »a.pu« (3. September 2019, 14:57)

360gradenfotografie

Schüler

  • »360gradenfotografie« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Tilburg, The Netherlands

  • Nachricht senden

3

Dienstag, 3. September 2019, 14:58

Zitat von »a.pu«

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.
360gradenfotografie.nl

a.pu

Schüler

Beiträge: 120

Beruf: software engineer, author of krpano syntax highlighting, bundler and style guide

  • Nachricht senden

4

Dienstag, 3. September 2019, 15:03

Zitat von »360gradenfotografie«



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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

5

Mittwoch, 4. September 2019, 23:33

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.

Quellcode

 
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:

Quellcode

 
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:

Quellcode

 
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.

Quellcode

 
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:

Quellcode

 
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

Schüler

  • »360gradenfotografie« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Tilburg, The Netherlands

  • Nachricht senden

6

Donnerstag, 5. September 2019, 09:30

Hi Klaus,

Thanks for your reply!

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

Quellcode

 
1
2

                             ----------[blend]---------
----------[zoom]---------- | ----------[zoom]----------


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

Quellcode

 
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?
360gradenfotografie.nl

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

7

Donnerstag, 5. September 2019, 09:57

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:

Quellcode

 
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

Schüler

  • »360gradenfotografie« ist der Autor dieses Themas

Beiträge: 71

Wohnort: Tilburg, The Netherlands

  • Nachricht senden

8

Donnerstag, 5. September 2019, 10:12

Zitat von »klaus.krpano«

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.
360gradenfotografie.nl

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

9

Donnerstag, 5. September 2019, 10:25

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.

spacerywirtualne

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

10

Dienstag, 14. Januar 2020, 14:51

Zitat von »klaus.krpano«

would be possible too, but like example 2 it requires aligned panos.
Can it be done also on not aligned panoramas? If I set "linkedscene_lookat" then the effect is completely mixed up. *huh*


regards
Piotr
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

spacerywirtualne

Profi

Beiträge: 1 117

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours : the cms4vr owner

  • Nachricht senden

11

Montag, 24. Februar 2020, 21:45

Klaus...

Can you write how to combine your blending effect with linkedscene_lookat? If there is a value, eg. [...] linkedscene_lookat="100,20,60" />, in the hotspot code, the effect is not so great... *cry*

Piotr
Your own professional, online cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube :: wiki.cms4vr.com

cms4vr team *thumbsup*

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

12

Dienstag, 25. Februar 2020, 10:20

Hi,

an non-blocking lookto animation instead of the instant lookat might be working solution in this case... (not tested yet).

Then there should be the 3d movement and additionally also a viewing rotation...

Best regards,
Klaus

alicanyildiz

Schüler

Beiträge: 78

  • Nachricht senden

13

Sonntag, 26. April 2020, 05:14

waow, nice, how can I use for Panotour Pro?

I need this transition.
https://krpano.com/examples/simple3dtransition/example3.html

Thank you very much.
king regards.
Alican Y.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »alicanyildiz« (26. April 2020, 13:51)

alicanyildiz

Schüler

Beiträge: 78

  • Nachricht senden

15

Mittwoch, 29. April 2020, 21:52

Zitat von »sblack«

plugin for krpano:

https://www.robostitcher.com/gtransition-plugin-for-krpano


for PTP:
https://www.robostitcher.com/gtransition-plugin-for-panotour
not enough. only for the next scene. but it doesn't work for all. Please examine the example I sent.

thank you
best,

alicanyildiz

Schüler

Beiträge: 78

  • Nachricht senden

17

Montag, 4. Mai 2020, 18:27

Zitat von »sblack«

next scene? work fine for all well north aligned panos. all issues solved here https://www.facebook.com/groups/130163024102046/
hi,
no unsolved. this is not working right. only the next scene is getting closer. effects are also required for the previous scene. sorry i think it is not enough.

thanks,
best

_Greg

Anfänger

Beiträge: 6

  • Nachricht senden

18

Samstag, 16. Mai 2020, 11:00

Usage with polygonal hotspot

Hi,
The effect is really nice. I tried to use this transition with polygonal hotspots but despite by pano are correctly aligned, the tween view doesn't recognize the correct direction (always the same).

I use a workaround by keeping image hotspots and use callwith(hs,onclick); but I wonder how to pass the correct parameters to the transition action directly from the polygonal hotspot.
Greg

Ähnliche Themen