Oddly, the failing iPad and the working iPhone 6s report the same capabilities on the WebGL test report. all desktop browsers, an iPhone 5s, and iPhone 6s. The 1545pix-wide iframe works fine on other platforms I’ve tried, e.g. _not_ an iframe, the 4000 x 2000 pixel jpg works fine. If I load pannellum by itself in separate windows, e.g. 360 photos, you can embed your panorama photos in the same viewer.
If I load pannellum in an iframe declared with a width of 1025 pix, it fails. This will show the 360 photo in a viewer that lets users explore the image in the. So if the iframe is declared as 800 pix wide, I can load pannellum with a 4000 x 2000 pixel jpg. 4000 pix wide, andĢ) Panellum is loaded inside an iframe greater than 1024 pix wide: I am attempting to display 360 degree equirectangular JPGs in an iframe, and my iPad 4 displays the “Your browser does not have the necessary WebGL support.” error if both of the following are true:ġ) The panorama is approx. I’ve discovered some unexpected behavior on older iOS devices. I guess I could write a check that sees whether or not the image is progressive and combine that with browser detection. WebKit doesn’t throw any errors and silently fails to properly display the image instead, making it difficult to write a proper check that can display a helpful error message. For some reason, iOS only works properly with progressive encoded JPEGs, and your images have standard JPEG encoding. This appears to be the same issue that is described in issue #77. It might be nice to add in parameters to set the maximum extents of the view instead of the maximum extents of the center, but it would be much trickier to implement than the current center limits.Ģ. Currently there are the minPitch, maxPitch, minYaw, and maxYaw parameters that limit where the center of the view can be set to obviously, if this is set such that the black space is barely cut off at a specific zoom, zooming out will make the black space visible. Avoiding display of empty black space is a bit more tricky since this is dependent on both window size and zoom. You should be able to avoid distortion without having to add empty space to the images using a combination of the haov, vaov, and vOffset parameters. You can remove this with viewer.removeListener('tick', fn).1. This app is designed to view your high-resolution panoramic (Panorama) images, videos with equirectangular. viewer.on('tick', fn)Īttach a frame listener to the viewer, where fn accepts the dt (delta time) parameter per frame. You can open a any image, video file to view from your computer or your Google Drive. The current vertical rotation angle in radians. The current horizontal rotation angle in radians. The current field of view of the perspective camera in radians. The viewer will no longer be usable after this point. Stop the render loop, disable the input controls, and destroy the WebGL context. By default, min and mag filter will use 'linear' for smoother filtering. This can be an image, video, or an options object for regl#texture(). viewer.texture(image)Ĭhanges the current image to the specified DOM image. Has no effect if the controls are already disabled. viewer.disableControls()ĭisable the input controls, detaching mouse/touch events from the canvas. Has no effect if the controls are already enabled.
viewer.enableControls()Įnable the input controls, attaching mouse/touch events to the canvas. This may be useful if, say, you change the canvas size when the requestAnimationFrame is not running. Stop the requestAnimationFrame render loop. Start the requestAnimationFrame render loop. The image should be a DOM Image or Video element, and should already be loaded. onload = ( ) => to ignore mouse/touch rotation. Const create360Viewer = require ( '360-image-viewer' ) const canvasFit = require ( 'canvas-fit' ) // load your image const image = new Image ( ) image.