Multiple panorama / layers

[Matthias84]

Hi,

I would love to see the ability to switch between different panoramas. For example to get an past / presences switch and show one location at different times / lightning / spectrums etc.
But I guess this is not that easy to implement? :-/

[mpetroff]

It wouldn't be hugely difficult to implement, but I think it's a rather niche feature that shouldn't be included by default. Instead, it would be a good use of the API I'm developing for Pannellum. This would allow for an external button and code to be used to switch between images. I think this would be a better solution that just adding the feature by default as it also allows for variants of the idea, such as a toggle button for two images but a slider for a time series of images; more advanced variants such as a slider to fade between two images could also then be implemented.

[Matthias84]

I see your point and yes an external solution would be fine :-)

[cansik]

How far are you in implementing the api to do such a thing?

I am currently able to replace the currently shown image by the following code. This loads a new image (black/white version of alma) and renders initialises the renderer with it.

let renderer = viewer.getRenderer();
let config = viewer.getConfig();

// create image
let img = new Image();

img.onload = function(){
    console.log("image loaded!");
    let params = {};
    if (config.horizonPitch !== undefined)
        params.horizonPitch = config.horizonPitch * Math.PI / 180;
    if (config.horizonRoll !== undefined)
        params.horizonRoll = config.horizonRoll * Math.PI / 180;
    if (config.backgroundColor !== undefined)
        params.backgroundColor = config.backgroundColor;

    function renderInitCallback() {
        console.log("rendering image");
    }

    renderer.init(img, config.type, config.dynamic, config.haov * Math.PI / 180, config.vaov * Math.PI / 180, config.vOffset * Math.PI / 180, renderInitCallback, params);
    renderer.resize();
};

img.src = "img/alma-bw.jpg";

[mpetroff]

This can already be done. When using multires panoramas, or if you don't mind the loading message being displayed, you can just use loadScene. Otherwise, see https://github.com/mpetroff/pannellum/issues/459#issuecomment-359195487.

[ner00]

I am currently able to replace the currently shown image by the following code. This loads a new image (black/white version of alma) and renders initialises the renderer with it.

Does this transition the image to the same coordinates, or does it reinitialize them to default position? And how is the transition, sudden?

I'm trying to accomplish something similar, where I have a panorama sequence from the same spot taken at 3 different times of the year. I would like for the user to be able to look around while the panorama transitions (fade) in a loop. DevalVR has this functionality, but it would be great to be able to implement it in a modern web-based engine like pannellum.

@mpetroff Which approach would you recommend for the intended purpose, if possible.

[mpetroff]

@ner00 For what you're suggesting, I'd recommend using an external animation loop to draw the images with varying opacity to an off-screen <canvas> element. This gives you full control over the fade loop, although you would have to handle image loading yourself. You could then set dynamic: true in the configuration and pass the <canvas> element as the panorama in the Pannellum configuration. See, e.g., https://github.com/mpetroff/pannellum/issues/743#issuecomment-501481934.

[TheWaterbug]

@ner00 For what you're suggesting, I'd recommend using an external animation loop to draw the images with varying opacity to an off-screen <canvas> element. This gives you full control over the fade loop, although you would have to handle image loading yourself. You could then set dynamic: true in the configuration and pass the <canvas> element as the panorama in the Pannellum configuration. See, e.g., #743 (comment).

Does anyone have a working example of this? I want to present the same scene in two ways, e.g. with the doors open:

https://www.kan.org/Eastvale/Pano/pannellum/pannellum.htm?panorama=../images/RentalRoomOpen.jpg&autoLoad=true

or with the doors closed:

https://www.kan.org/Eastvale/Pano/pannellum/pannellum.htm?panorama=../images/RentalRoomClosed.jpg&autoLoad=true

This could be done via an opacity/blend slider, as mentioned above, or perhaps via a 720-degree horizontal image, e.g. yaw around modulo 360 to see the other image.

I'm not a programmer, unfortunately, but sometimes I can copy/paste/edit from a working example. 😄 Thanks!