Cannot seem to keep aspect ratio when zooming in or changing to fullscreen

[Macfelon]

Hi, I was able to setup my view to have the correct aspect ratio on a large pano style image, and if I don't touch it, it looks fine, but if I go to Fullscreen or scroll out, it crushes the horizontal width and I have looked at many options on the project, but I don't see one that keeps it in step with the original sizing.

[mpetroff]

To isolate whether or not the issue is with your configuration, do you see similar issues with the pannellum.org examples?

If you don't see issues with the examples, do you have an example you can link to that shows this behavior, or at least screen shots?

[Macfelon]

I copied the setup from the demos and it was squished, so I modified until I got it to show initially after load the way I wanted. It can be seen at https://travelingwithrob.com/hotels/testingPano.jsp The file is HUGE for testing, so it will take a bit load. My key setup values are the following: <meta name="viewport" content="width=device-width,initial-scale=1.0,max-width=2560,max-height=1100"> <style> #panorama { width: 600px; height: 200px; } </style> <div id="panorama"></div> <script> var viewer = pannellum.viewer('panorama', { "default": { "firstScene": "dining", "sceneFadeDuration": 1000 }, "scenes": { "dining": { "title": "Dining Room", "hfov": 25, "autoRotate": -5, "minHfov": 25, "maxHfov": 120, "max-height" : 1400, "max-width" : 2560, "pitch": -3, "yaw": 117, "type": "equirectangular", "panorama": "/hotels/hotelimages/marquette2021/DSC05589Panorama.jpg", "hotSpots": [ { "pitch": -3.3, "yaw": -125.8, "type": "scene", "text": "Living Room", "sceneId": "living" }, { "pitch": -3.4, "yaw": -3.7, "type": "info", "text": "Coats" }, { "pitch": -21.1, "yaw": 131.2, "type": "info", "text": "Stove" }, { "pitch": -4.7, "yaw": -164.1, "type": "info", "text": "Exit" } ] }, "living": { "title": "Living Room", "hfov": 110, "yaw": 5, "type": "equirectangular", "panorama": "/hotels/hotelimages/marquette2021/panotest2.jpg", "hotSpots": [ { "pitch": -2.6, "yaw": 116.4, "type": "scene", "text": "Dining Room", "sceneId": "dining", "targetYaw": -23, "targetPitch": 2 } ] } } });

[mpetroff]

Okay, the problem is due to the aspect ratio of your image and has nothing to do with zoom or fullscreen. For some reason, your image doesn't contain Photo Sphere XMP data, despite PTGui including it by default for equirectangular panoramas since v9.1.9, released almost a decade ago. For images that aren't full 360 x 180 deg panoramas that do not include Photo Sphere XMP data, the haov, vaov, and vOffset parameters need to be manually specified when they differ.

In the case of your DSC05589Panorama.jpg image, it's a full 360 deg and seems to be approximately centered vertically, so you would just need to specify the vaov (vertical angle of view) parameter. Based on the image aspect ratio, it should be 65.3 deg.

I would also strongly advise against using images that big without using Pannellum's multiresolution format. Due to the image dimensions, I couldn't open it on a relatively new laptop and could only open it on my desktop machine, which has discrete graphics. To maintain compatibility across the widest range of devices, equirectangular images should not be used directly when more than 8192px wide.

[Macfelon]

This is super helpful. I do plan on using multires as I get things sorted. It’s such a heavy load at full res, yes. Thank you!!!

[Macfelon]

My goodness the speed improvement on multires is mindblowing! This is intensely well written.