search

mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.28k stars 724 forks source link

Improvement multiresolution panorama #786

Closed kandrzejczak closed 9 months ago

kandrzejczak commented 5 years ago

@mpetroff Do you have a plan to improve user first impresion with multiresolution panorama ? Because now the user needs to download 350-600kb to load the panorama fragments they are looking at. While loading, it sees black squares in places where the image is still missing. It looks bad on devices with slow internet and when you want to do an zoom in effect at the entrance to scene. Examples black squares in panellum with multiresolution panorama: image image

How did the competition (krpano, marzipano) solve this problem ? They are the first to load one image (~50KB) with contains 6 very small images (all cube texture). Blurry panorama looks better than the black square. Example: image

What do you think about this solution and is there any real way to introduce this change in panellum in the future?

mpetroff commented 5 years ago

You're greatly exaggerating the issue; the panorama on the pannellum.org homepage only needs ~100kB to display the lowest resolution, not 350-600kB. Even on a 3G mobile connection, this only takes a few seconds. On most internet connections, there isn't an issue.

Both krpano and Marzipano load a single 50-60kB preview image with all of the cube faces at once, so you don't see the individual faces loading, so it may be perceived as faster even if it isn't. Since Pannellum is ~20kB instead of krpano's ~150kB, panoramas actually display faster in Pannellum, at least until the JavaScript is cached, since it's quicker to download Pannellum's JavaScript plus the lowest resolution cube faces than it is to download krpano's JavaScript alone.

I have plans to eventually create a new multiresolution implementation that uses a low distortion equal area projection instead of a cube map, which will be more bandwidth efficient. As part of this, I plan on introducing a feature for placing a LQIP / SQIP placeholder in the JSON configuration, so the original display will only require a few kilobytes, and will be displayed almost instantly.

Rafath21 commented 4 years ago

Hey @mpetroff! Amazing work here. Can't appreciate enough. I'm a college student trying pannellum for my project, but the quality of the image is getting really bad. I looked up for solutions, but those are for macOS and i work on WINDOWS 10. Could you please help?

mpetroff commented 4 years ago

@Rafath21 Pannellum runs in a web browser, and the web platform is OS-agnostic, so I have no idea what you're referring to. You're going to need to be a bit more specific.

Rafath21 commented 4 years ago

Hi @mpetroff !

My issue is that even after using an image with good resolution, the quality of that image is getting degraded when it becomes a panorama. 1 Annotation 2020-07-06 202410

What do you think can be the issue? I tried reducing the size of the container that holds it, even then the quality of the panorama is really poor. Attaching here the original image and the panorama screenshot. Thank you for responding! Really appreciate it

mpetroff commented 4 years ago

That image has extremely low resolution, not "good" resolution. That's why it's looks bad. It's also not a panorama, so Pannellum is not the appropriate tool to display it. I found the Flickr page you took the image from, and based on the EXIF data, the horizontal angle of view of the image is only around 37 deg.

It's also not an equirectangular format image, so it can't be properly displayed in Pannellum and can't be properly converted by the utils/multires/generate.py script. For an image that low in resolution, there's no reason to use the multiresolution format either. Here's what it looks like if we just ignore the fact that it's not in equirectangular format (given how small the angle of view is, the distortions from the projection mismatch aren't too severe): https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https://c1.staticflickr.com/3/2663/3971923776_2750f3e094_b.jpg&haov=37&vaov=28

Rafath21 commented 4 years ago

Hey Matthew! Really thankful to you for solving my problem . Literally sat for hours figuring it out but couldn't since I'm a beginner at this. I got my answer now. The problem was the image not being equirectangular. Thanks man!! Stay Safe :))

mpetroff commented 9 months ago

Support for including spherical harmonic transform based previews and equirectangular thumbnails in Pannellum's configuration were introduced in 9788fc6512fe0de950cb10678dc4d4f453ad376e, which eliminates the appearance of black squares even on the slowest of internet connections.