mpetroff
Optimized cubemap
Hi, what I usually see for loading cubemap is - we have two sets of cube faces one set in high resolution and another set of faces in low resolution. This is done so that images are loaded faster and user's bandwidth is saved. Initially low resolution image is loaded and after a specific time interval, if the user is still looking at the cube face, high resolution image is loaded.
But in panellum examples, I see only one set of faces are being taken as input. Is there some way we can load both images using something like: (please note highResolutionCubeMap & lowResolutionCubeMap.
pannellum.viewer('panorama', {
"type": "cubemap",
"highResolutionCubeMap": [
"/images/wyman-park-playground-cubic/face0.jpg",
"/images/wyman-park-playground-cubic/face1.jpg",
"/images/wyman-park-playground-cubic/face2.jpg",
"/images/wyman-park-playground-cubic/face3.jpg",
"/images/wyman-park-playground-cubic/face4.jpg",
"/images/wyman-park-playground-cubic/face5.jpg"
],
"lowResolutionCubeMap": [
"/images/wyman-park-playground-cubic-low-res/face0.jpg",
"/images/wyman-park-playground-cubic-low-res/face1.jpg",
"/images/wyman-park-playground-cubic-low-res/face2.jpg",
"/images/wyman-park-playground-cubic-low-res/face3.jpg",
"/images/wyman-park-playground-cubic-low-res/face4.jpg",
"/images/wyman-park-playground-cubic-low-res/face5.jpg"
],
});
If it is not supported, is there any workaround by using multiresolution feature by setting something like depth=2 ? The input should remain same - i.e highResolutionCubeMap & lowResolutionCubeMap.
The short answer is that what you're asking is not supported, since the multiresolution feature is the intended method for fast loads and for saving bandwidth.
The only workaround I can think of that doesn't involve modifying both pannellum.js and libpannellum.js to add the feature you're asking for is to use a low-resolution cube map and combine it with a high-resolution equirectangular image. You'd start off with the low-resolution cube map and once you want to load the high-resolution image, you'd trigger a custom function. This function would load the equirectangular image and have a callback for when the load completes. The callback would add the loaded Image object as a new scene (with addScene()) and switch to it (with loadScene()).
The addScene and loadScene methods' documentation is a bit ambiguous. It takes scene ID and config as a string. But I couldn't figure out how they are defined.
Here at https://github.com/genesys-ai/panellum_poc/blob/1054c68cc2051055a1bd48dc44144e0bbc074b8c/panellum_optimized_cubemap/index.html#L51, I created two cubemaps. hrPan and lrPan for high resolution and low resolution.
Result hosted at: https://genesys-ai.github.io/panellum_poc/panellum_optimized_cubemap/
Can you please tell me how exactly do i need to use the getScene and loadScene to dynamically put high resolution cubmap faces into low resolution cube map viewer.
The addScene and loadScene methods' documentation is a bit ambiguous. It takes scene ID and config as a string. But I couldn't figure out how they are defined.
They're defined the same way they are for tours. In the tour example, circle and house are scene IDs, and the parts in curly brackets after the scene ID keys are the configs (the documentation erroneously says that config should be a string when it should be an object). The scene ID is an arbitrary string; it just needs to match between the two function calls.
Can you please tell me how exactly do i need to use the getScene and loadScene to dynamically put high resolution cubmap faces into low resolution cube map viewer.
As I said in my initial response, this isn't possible. You can't dynamically replace the cube faces. You can, however, pre-load a higher-resolution equirectangular image, add it as a new scene, and switch to it. Since the image is pre-loaded, you won't have a loading screen (although I can't guarantee that the switch will be completely seamless).