No WebGL fallback only working for multiRes about pannellum HOT 11 CLOSED

The images for the fallback renderer have their outside row of pixels duplicated to try to avoid visible lines from appearing at the edge of the cube faces. A regular cube map doesn't have the pixels duplicated, and I haven't been able to get the CSS 3D renderer to work very well without them.

from pannellum.

I moved the edge pixel duplication from the multires generation script to libpannellum.js by using canvas elements instead of img elements. I then was able to add CSS 3D fallback support for cubemap panoramas. Additionally, I fixed a flickering issues at the edges of the cube faces.

from pannellum.

Testing with your changes in Safari 5.1.7 (Windows) does not work.
TypeError: 'undefined' is not a function (evaluating 'a.getContext("2d")'
This happens in libpannellum.js (line 72) and I guess is related with this issue.

Getting faceContext as follows var faceContext = this.canvas.getContext('2d'); on line 51 works, but then in Safari the tour does not move (only shows a static image). So I guess I'm getting the wrong context somehow.

I'm insisting in the Safari case, cause iPhone devices are using it too and there are many devices using iPhone 4.x (I'm not sure if iPhone 5 incorporated WebGL or it was included later).

from pannellum.

Line 51 is the context for the WebGL canvas, while line 72 is executed six times, one for each cube face, and doesn't use the canvas referenced on line 51 at all. I don't think this is related to the Stack Overflow answer you linked to, although I could be wrong, as I think that involves requesting a different context for the same canvas, while with this issue, different contexts are requested for different canvases. I try to look into this further later today.

WebGL support in Safari for iOS was introduced in iOS 8, which is supported by the iPhone 4s and later. Versions of Safari that don't support WebGL seem to currently account for approximately 4% of global browser usage. Android WebGL support is also spotty.

from pannellum.

Yes I thought the same about the context. But the fact is that it happens in Safari when it does not support WebGL and that it crashes in libpannellum.js (line 72).

Maybe from iPhone 4s WebGL is partially introduced, but not totally supported. At least that's what we saw testing on real devices against this page:

• iPhone 4.x (While your browser seems to support WebGL, it is disabled or unavailable.)
• iPhone 5.x (While your browser seems to support WebGL, it is disabled or unavailable.)
• iPhone 6.x (Your browser supports WebGL)

Note that, this "disabled or unavailable" message is shown when canvas.getContext("webgl") == null && canvas.getContext("experimental-webgl") == null && ("WebGLRenderingContext" in window)

from pannellum.

I installed Safari 5.1.7 on a Windows 7 VM but was unable to reproduce your issue. There were no errors in the console, but it didn't work since it didn't properly support CSS 3D transforms; krpano didn't work either. I was also unable to reproduce the issue using Safari 7.0.5 under OS X 10.9.4.

from pannellum.

When it does not work what you get is this image looking at the floor and not moving? That is what happens on iPhone 4, 4s and 5.

The CSS 3D transforms you did for the example in pannellum.org, however, works on Safari 5.1.7 ( I know you're using multires there, but anyway...)

from pannellum.

I can move the image, but it does other strange things. See this Sauce Labs screencast.

Based on Sauce Labs testing, cubemaps in the current development version work on Safari 5+ on OS X and iOS 5+ (at least in the iOS simulator).

from pannellum.

Now it works. Other stuff was failing for us cause the build was not including the css. See #54

from pannellum.

Probably this part 'WebkitAppearance' in document.documentElement.style is too restrictive in pannellum.js when checking if HTML fallback is gonna use (when webGL is not supported).

For Internet Explorer 10, for example, the HTML version works quite good. So I recommend to either remove that check or add also the support for IE 10 there

from pannellum.

I just made it work with IE 10 / 11. See ea42bfd.

from pannellum.