Walk Through Effect in pannellum?

[sravan406]

Hello Friends,

Can any one help me. In implementing Walk through effect in pannellum.. Thanks in Advance.

[mpetroff]

You're going to have to be a bit more specific with what you need help with.

[sravan406]

Am using pannellum for stitching 360 degree images..I want to implement walk through effect when transition happens between the images...

[mpetroff]

You just repeated what you said before. What do you mean by a "walk through effect"?

Also Pannellum isn't a tool for stitching 360 degree images, just displaying them; something like Hugin is a tool for stitching said images.

[strarsis]

I guess (s)he means the effect one sees in Google Street View when switching between panoramas.

[sravan406]

@strasis exactly I mean the same.. How can I achieve transition switching between panoramas

[mpetroff]

Street View-like (or Matterport-like) transitions require a 3d-reconstruction of the scene (using photogrammetry and/or lidar). This is not supported by Pannellum.

[DStillingfleet]

Perhaps a zoom towards hotspot feature like that in #706 would be a compromise?

I've implement such a feature using LookAt before changing the scene, but it requires some extra coding.

I was also toying with the idea of manually separating a panorama into two layers; foreground and background. Imagine a panorama of a forest with mountains behind / above. The foreground layer would consist of forest with the remainder transparent. The background layer would consist of the mountains with lower half (the forest) removed and grassy slopes reconstructed using gimp. The idea was then to place the two panoramas in two separate pannellum divs, the foreground on top of the background, and then zoom in on the foreground faster than the background. This would give the Street View-Like transition.

One stumbling block I don't think Pannellum supports transparencies, or am I wrong?

[sravan406]

Am manipulating the hfov value to get the zoom effect, but it's not up to the mark. Can you please provide any sample example how to use LookAt

[DStillingfleet]

Sure. It will take me a while to unpick some of the extra code in my scripts first.

Regards

Derek

On 31 Aug 2019, at 14:23, sravan406 notifications@github.com wrote:

Am manipulating the hfov value to get the zoom effect, but it's not up to the mark. Can you please provide any sample example how to use LookAt

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[DStillingfleet]

Okay, untangling my 2000 plus lines of code is too large of an undertaking. But this should give you the jist of how a zoom to a new scene can be achieved.

Please note that I've not tested this outside my own script, so you may need to tidy this up.

Declare a Hotspot Click Handler up front. Something like this...

var HotSpotClickHandler = function(){StartZoom()}

You can create multiple handlers for different change of scene, or pass variables to the StartZoom function (below) to handle different scenes.

Add clickHandlerFunc to your pannellum hotspot instead of a sceneId, eg

"hotSpots": [
        {
            "pitch": 2,
            "yaw": 132,
            "type": "scene",
            "text": "Next Scene",
            "clickHandlerFunc": HotSpotClickHandler
        }
    ]

Create the StartZoom function called by the event handler. You can create

function StartZoom() // Initiate LookAt / Zoom
{
    var pZ = 0 ; // Or other pan angle to Zoom in on.
    var yZ = 0 ; // Or other yaw angle to Zoom in on.
    var vZ = 25 ; // Or other Hfov angle to Zoom in on.
    var pS = 100 ; // Or other zoom speed
    Pannellum.lookAt(pZ,yZ,vZ,pS); 
    setTimeout(function(){Step_2();}, 100);  // Call Step 2
}

Create Step_2 function that will check to see if the LookAt is complete.

function Step_2()  // Loops until the LookAt is finished
{

   pI=Math.round(Pannellum.getPitch()); // get actual pitch and round
   yI=Math.round(Pannellum.getYaw()); // get actual yaw and round    
   vI=Math.round(Pannellum.getHfov()); // get actual Hfov and round

    if(yI>180){yI=yI-360;Pannellum.setYaw(yI,0);}  
    if(yI<-180){yI=yI+360;Pannellum.setYaw(yI,0);}

   if(pI===pZ1 && yI===yZ1 && vI===vZ1)  // Has LookAt finished
    {       
        setTimeout(function(){Step_3();}, 10); // LookAt finished, load new scene.
    }
   else
    {       
        setTimeout(function(){Step_2();}, 100);  // Loop if LookAt not finished.
    }
}

Create Step_3 function that will load the new scene when the LookAt is complete.

function Step_3()  // Loops until the LookAt is finished
{
    var nameOfNewScene = "Scene2" // Or what ever the name of the next scene is.
    Pannellum.loadScene(nameOfNewScene);
}

I'm self taught with no formal Javascript qualifications. It's just a hobby, so no doubt there are better (more efficient) coding practices to achieve the above.

To achieve a more impressive "walk through experience" I use multiple pannellum instances stacked on top of each other. So whilst the zoom / LookAt is in progress at the top of the stack, the next scene is loaded in the pannellum instance beneath it. As the zoom completes on the top in, I change the opacity of the top stack to reveal the new scene beneath.

[DStillingfleet]

Hi Matthew

I wondering if there is any potential in using an image morphing script when changing from one scene to the next.

It would require the tour builder to identify the matching objects from one scene to the next, and the references to be held in a JSON file.

Here's some examples...

https://github.com/jembezmamy/morpher-js

https://github.com/ppisljar/image-morph-js

What do you think?

Best wishes

Derek

[mpetroff]

That gets very complicated very quickly. The feature matching would need to be at least semi-automated to make it useful, and the transforms would need to be implemented on the sphere instead of the plane, which would be more difficult. I suspect a better approach would be to use a machine-learning-based algorithm to pre-calculate a depth map for each panorama and use those as part of the transition (for both the source and destination panoramas). Such an approach would be fully automated and could treat each panorama separately, which simplifies things.