google / marzipano

A 360° media viewer for the modern web.
http://www.marzipano.net
Apache License 2.0
2.01k stars 998 forks source link

Limiting the view on partial panoramas #134

Open 12557 opened 6 years ago

12557 commented 6 years ago

Hey guys. By the way what a great tool! I am using it for my work and i have a very tricky question for you all.

Everything is working fine but on one special Marzipano i need to limit the view so the user is not able to turn around completely. Why? Because my rendert pano image cant be full 360°. So do you know how i can limit the view for example to just 100°? Would be so nice!

Kindest regards Matthias

tjgq commented 6 years ago

You need to write a custom view limiter in Javascript to prevent the non-existent portions of the panorama from becoming visible.

(There is a built-in RectilinearView.limit.yaw, but it probably doesn't do what you want: it limits the range of yaw values you can center the view at, but depending on the fov, the non-existent portions of the pano might still be visible on the sides).

jordyno commented 6 years ago

@tjgq could you please elaborate a bit on how to write the custom view limiter?

12557 commented 6 years ago

@jordyno in data.js

"pitchMin": -0.15, "pitchMax": 0.1, "yawMin": -0.2, "yawMax": 0.2,

cheers 12557

jordyno commented 6 years ago

thanks @12557 , that could help to certain degree, but I would like to implement what @tjgq had in mind, as simply limiting pitch and yaw does not guarantee that the same portion of panorama will be viewable at different FOVs

12557 commented 6 years ago

hey @jordyno do you mean on different screen sizes? this is what i am searching too. It is working but i got into trouble when i tried it on ipads and iphones! maybe you have a idea?

12557 commented 6 years ago

hey @jordyno hey @tjgq did you move forward with the custom limiter? i need some hints urgently because you where right @jordyno it does`t work in all screen sizes. On iphone portrait mode it gets to limited. Thats the Problem!

Thank you guys!

tonymihay commented 6 years ago

Hi all! Are there any updates/solutions?

jamajamik commented 4 years ago

Please is there a simple way to view cropped partial equirectangular panos (e.g limited hfov && vfov)? I know I can use the hfov && vfov parameter and do some scripting to generate full 360x180 equirectangular image with 2:1 ratio which is supported by Marzipano. Nevertheless I want to avoid generating thousand of duplicit images just for the sake of viewer. I would prefer the viewer to consume hfov, vfov paramaters + cropped image and fill some background color for the remaining part on the fly. Something like https://pannellum.org/documentation/examples/partial-panorama/

I do not need tiles , zoom levels. Neither to exactly set view limits set for any screen size (seeing black background is not a problem). I would be happy to view pictures around 1000-2000px without any processing overhead....

Boorj commented 4 years ago

My custom modifications were:

//changed in index.js
    var limiter = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100*Math.PI/180, 120*Math.PI/180);
    var view = new Marzipano.RectilinearView(data.initialViewParameters, limiter);
// to 
    var limiter1 = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100*Math.PI/180, 120*Math.PI/180);
    var limiter2 = Marzipano.RectilinearView.limit.yaw(-0.2, 0.2);
    function myLimiter(params){
      var modifiedParams = limiter1(params);
      modifiedParams = limiter2(modifiedParams);
      return modifiedParams;
    }
    var view = new Marzipano.RectilinearView(data.initialViewParameters, myLimiter);

And everything's working excellent.

FlashDroid commented 4 years ago

@Boorj - Thank you, In part this is what I was looking for, but i have a little problem because my project has two scenes (scene1 and scene2), how can I do so that scene2 has different limits of scene1? Thanks in advance.

FlashDroid commented 4 years ago

Here a solution for using different values of yaw and pitch limits in different scenes.

In file data.js In this example i have two scenes that are referenced in the data.js file as 0-outdoor and 1-indoor.

In file index.js

Step one - Find the line of code below and comment it. var limiter = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100Math.PI/180, 120Math.PI/180);

Step two - Replace with the code below. var limiter; if (data.id == '0-outdoor') { limiter = Marzipano.util.compose( Marzipano.RectilinearView.limit.traditional(data.faceSize, 100Math.PI/180, 120Math.PI/180), Marzipano.RectilinearView.limit.yaw(-0.2, 0.2), Marzipano.RectilinearView.limit.pitch(-0.1, 0.1), ); } else if (data.id == '1-indoor') { limiter = Marzipano.util.compose( Marzipano.RectilinearView.limit.traditional(data.faceSize, 100Math.PI/180, 120Math.PI/180), Marzipano.RectilinearView.limit.yaw(-1.5, 1.5), Marzipano.RectilinearView.limit.pitch(-0.9, 0.9), ); } else { limiter = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100Math.PI/180, 120Math.PI/180); }

Boorj commented 4 years ago

just some formatting for your solution (haven't check that manually):

var limiter = Marzipano.RectilinearView.limit.traditional(data.faceSize, 100 * PI180, 120 * PI180);
var PI180 = Math.PI / 180;

switch (data.id) {
    case '0-outdoor':
        limiter = Marzipano.util.compose(
            limiter,
            Marzipano.RectilinearView.limit.yaw(-0.2, 0.2),
            Marzipano.RectilinearView.limit.pitch(-0.1, 0.1),
        );
        break;

    case '1-indoor':
        limiter = Marzipano.util.compose(
            limiter,
            Marzipano.RectilinearView.limit.yaw(-1.5, 1.5),
            Marzipano.RectilinearView.limit.pitch(-0.9, 0.9),
        );
        break;
}