Comments (11)
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.
Related Issues (20)
- hotspot HOT 1
- Can I use a normal image (not panorama or photosphere) in pannellum? HOT 2
- Removing white screen between images loading without using scenes HOT 3
- i have problem caching image i set to canvas HOT 2
- Mouse click to cube coordinates HOT 1
- generate.py tile size edge case HOT 1
- Cubemap panorama HOT 1
- question - Support for depth map (equirectangular image with encoded depth value) HOT 1
- Virtual Tour Scene Misalignment with Navigation Arrows. HOT 3
- black squares when using multiple resolutions HOT 1
- Add typescript definitions on DefinitelyTyped HOT 1
- Feature Request: /latest/ path on cdn.pannellum.org HOT 1
- autoRotateInactivityDelay without autoRotate causes it to lookAt on scene start HOT 3
- how to set custom hotSpots arrow rotation HOT 1
- Untilting a panorama HOT 2
- Simple Panorama Example can't load my image? HOT 2
- Why there is no LOADING system for MRES pano ? HOT 1
- How to turn the azimuth values of nearby points to the hotspot view inside the panoramic view. HOT 8
- some android browser throw maxWidth error HOT 1
- Viewer.removeHotSpot HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pannellum.