mpetroff / pannellum

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

Iframe don't work on Chrome and Chromium browsers when viewing large images. #875

Open HaujetZhao opened 4 years ago

HaujetZhao commented 4 years ago

For this example:

<iframe width="600" height="600" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https://b3logfile.com/file/2020/05/1590418246329-1dd23642.jpg"></iframe>

My Firefox (both on Android and Windows) can successfully view the panorama.

But the Chrome on my Android says:

This panorama is too big for your device! It's 8704px wide, but your device only supports images up to 8192ps wide. Try another device. (If you're the author, try scaling down the image)

And my Chromium Edge on Windows says:

Your browser does not have the necessary WEBGL support to display this panorama. 

But when I check into https://get.webgl.org/, the result shows Your browser supports WebGL , so I don't know whether it's on Chrome or Pannellum's account.

I also tried to enable all the options involved with WebGL in chrome://flags but it does't work.

mpetroff commented 4 years ago

I'd recommend following the instructions given: rescale the image down to 8192px wide.

Many devices, particularly mobile devices, don't support WebGL textures larger than 4096px on a side, so Pannellum will split an image in two if it exceeds the texture size limit but will only do so once. This gives universal support for equirectangular panoramas up to 8192px wide. Anything larger starts having excessively large file sizes and should thus be delivered with Pannellum's multiresolution format instead.

As for Chromium Edge, check the browser's developer console for the exact WebGL error. I can't offer much assistance without that information.

HaujetZhao commented 4 years ago

I'd recommend following the instructions given: rescale the image down to 8192px wide.

Many devices, particularly mobile devices, don't support WebGL textures larger than 4096px on a side, so Pannellum will split an image in two if it exceeds the texture size limit but will only do so once. This gives universal support for equirectangular panoramas up to 8192px wide. Anything larger starts having excessively large file sizes and should thus be delivered with Pannellum's multiresolution format instead.

As for Chromium Edge, check the browser's developer console for the exact WebGL error. I can't offer much assistance without that information.

Here is the Chromium Edge console message:

pannellum.js:23 WebGL: INVALID_VALUE: texImage2D: bad image data
Ba.init @ pannellum.js:23
va @ pannellum.js:68
pa @ pannellum.js:47
P.onload @ pannellum.js:43
load(异步)
oa @ pannellum.js:43
Ya @ pannellum.js:84
(匿名) @ pannellum.js:95
pannellum.js:26 Error: Something went wrong with WebGL! 1281
HaujetZhao commented 4 years ago

I'd recommend following the instructions given: rescale the image down to 8192px wide.

Many devices, particularly mobile devices, don't support WebGL textures larger than 4096px on a side, so Pannellum will split an image in two if it exceeds the texture size limit but will only do so once. This gives universal support for equirectangular panoramas up to 8192px wide. Anything larger starts having excessively large file sizes and should thus be delivered with Pannellum's multiresolution format instead.

As for Chromium Edge, check the browser's developer console for the exact WebGL error. I can't offer much assistance without that information.

Your explain made me clear, Thanks so much. May I ask if it's possible to rescale the image down to 8192 just using js in pannellum preventing failure caused by mega images?

mpetroff commented 4 years ago

Unfortunately, that's a fairly generic error message for WebGL; for some reason, it has an issue with the image. I have no issues with any of the examples I've tried, so there isn't a general issue with Chromium Edge (79, 80, or 81). There's either something peculiar with your particular computer or with your particular image. Do any of the examples on pannellum.org work for you in Chromium Edge?

It would be possible to modify Pannellum to automatically scale down the images, but the browser API for doing so generally does a poor job, so it's not done.