The EffectComposer is active when transition.blur = true.

When the EffectComposer is active and the viewer si resized, the image is deformed and/or black parts appear.

Resizing both the renderer and the composer seems to not be enough
https://github.com/mistic100/Photo-Sphere-Viewer/blob/master/src/js/PhotoSphereViewer.public.js#L223-L229

Using SVG paths we could add complex items on the viewer, like buildings facades, mountains shapes, etc.

A .destroy() method is needed and not just nullify.
For some reason even after nullify of the main object and clearing everything, after a few uses (different 360s in different places), even with proper unloading, it takes up more and more memory.

Maybe some ThreeJS objects not unloading ?
For mobile use 4,5 load/unload of totally different routes for PSV will crash due to out of memory which is common for big WebGL based apps

There are very generic class names used in the Photo Sphere UI (like .download-button, .active, .plus, .minus, etc). They can easily get overwritten.

I suggest to (at least) prefix all of them with a unique prefix, but I would rather use some kind of CSS naming convention, for example, a BEM methodology.

Of course, BEM is not the only CSS methodology and it's not perfect, but using any methodology (even if it's not perfect) is better than not using a methodology at all.

It would be great if there were additional easing parameter for the .animate() method. It would make animations much smoother.

the compiled plugin in the /dist directory is out of date. It doesn't contain the latest changes and fixes (for example the fisheye feature and the fixed loader animation).

Possible implementation :

if the position contains a key word (left, right, top, bottom, center) find if the X position is the first or second token
replaces keywords by percentage values
parse percentage values

When I use the default included picture, with the example configuration, (or my own) in the most simple implementation the picture flips upside down halfway through the 360. Both in Chrome and safari.

I don't get any javascript feedback in the console, seems errorfree

any ideas?

Thanks

JeremyHeleine@430c77f

Hi,

Is there any chance to implement smooths scrolling (e.g. like Panellum has)?

I tried to implement it on my own using the position-updated callback and the .animate()method, but position-updated returns only the new values. If the previous values (the initial position before drag started) were passed to the position-updated callback it would be much easier to do such things.

btw, it would be great if the .animate() method supported easing.

When move_inertia: true is enabled, the image gets "cut" if you move it fast (this didn't happen before). I can't figure out why, but its easy to replicate.

Just move fast right-left and the stop pressing and press again.
Has weird behavior

Try to use the gyro API to rotate the panorama like the native Google viewer.

http://www.tomg.co/gyrojs seems a promising wrapper

I'm not sure if this is an issue or a request, but it would be great if one was able to render the photo without the grid of those thin lines, showing sphere segments. On Jeremy Heleine's viewer the grid doesn't show up (but his viewer doesn't support markers), so I think it's possible. Or is it just me, and it's just an option that should be switched on / off?

Hi,

Some variable names in the main SCSS file are too generic. For example $main-background.

Could you add a prefix to all the SCSS variables in order to avoid possible conflicts? For example, let's prefix all the variables with $pss-, so that $main-background becomes $psv-main-background.

PS
There's even a better solution - SASS maps. I've implemented such a solution in the perfect-scrollbar library. Take a look at the example: https://github.com/noraesae/perfect-scrollbar/blob/master/src/css/themes.scss

Thanks!

Hello there

My firefox for windows 8 ( latest version of FF ) is showing up a "black pillar" after the image is rendered.

In the following browsers, the script is working properly ( no "black pillar" )

Same windows 8:
Chrome works

MacOSX:
Firefox,Chrome and Safari works.

The link where i'm implementing the viewer is:
http://lifecharcos.lpn.pt/visita_virtual/2/index.html

I am also experiencing the same warning as #7, but it does not mess my viewer in MacOSX
I am using the latest threejs ( rev 73 )

Attached is a printscreen of what I am seeing

I think the bug lies at the edges of the image, that the viewer cannot join them.

Thank you for your time.

Hi,

iOS isn't loading the photo sphere correctly. I think these warnings I found on the Safari Web Inspector might have something to do with it.

[Warning] WebGL: INVALID_VALUE: texImage2D: no canvas (three.min.js, line 522)
[Warning] WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size (three.min.js, line 522)

Let me know if you need more info.

When opened in an IFRAME, the fullscreen mode is applied to the parent window, and not the actual photosphere image. Could you please check it, and fix if possible? :-)

When including three.js and trying to run the basic example provided i get the following error in Firefox and Chrome Debug TypeError: D is not a function (photo-sphere-viewer.js:2255)
Uncaught TypeError: D is not a function
S.deviceOrientationSupported = D();

The only includes in the example/index.html look like this

Any suggestions much appreciated, best Jakob

• Better mousewheel support (see https://developer.mozilla.org/en-US/docs/Web/Events/wheel)
• Default FOV & position JeremyHeleine#2
• CSS classes to DOM elements
• center loading image

The video was taken on the photo-sphere-viewer.js.org site. It's not a browser or OS dependent issue. It happens on Chrome, Firefox and Safari. I tested on Windows 7/10 and OSX Yosemite.

photo-sphere-viewer.min.js (3.2.0-SNAPSHOT) on Chrome is throwing this error for me (on line 9).

Changes the displayed image without destroying the viewer.

The loading gif will hang if PSV.setPanorama is called while the viewer is in the process of loading a panorama. The bug occurs at lines 1445-1461 in the _loadTexture callback.

Say we have to panos, pano1 and pano2. If we callsetPanorama(pano1) and then call setPanorama(pano2) before pano1 finishes loading the viewer will show pano2 but the loading gif will never be cleared off the screen.

This happens because the once pano1 finished loading it's callback sets self.loader = null while pano2 is still loading. Therefore when pano2's callback evaluates the if statement at line 1448 self.loader.destroy() is never called.

A little bug

When doing a refresh of the markers (to perform different angular actions), grabbing the PSV.hud.markers object, iterating and removing all markers, will work, BUT the markers that are in the view point NOW, when remove is performed, will stick to the screen in a X,Y coordinates method.

Easy fix is .remove() by ID or class , but just wanted to submit the bug

When viewing the documentation page (http://mistic100.github.io/Photo-Sphere-Viewer/) with Internet Explorer 11 (Windows 8.1), the photosphere viewer gets stuck. The loading animation works normally, and then the navigation bar appears, but nothing else. (Screenshot below)

In the console, there's the following error message:

THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js

I've had the same behavior happening on personal tests (also IE11; works fine with Firefox or Chrome).
Hope this helps.

Hi,

I've found in a number of different panoramas that the scene looks as if you're viewing it underwater. The majority of straight lines in the image appear wavy, eg:

This isn't as noticeable near the equator, but the further you get from it the more prominent the effect becomes.

Increasing the number of length and width segments in the scene's sphere geometry from 32 to 64 seemed to do the trick. There does still appear to be some straight line waviness but its nowhere near as obvious.

Hello everyone!
i want to put on FullScreen when the page is fully loaded but i can't

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

what can i do to solve this?

sorry for the bad english

Hi

Trying to finalize the Angular plugin for PH, but I get this error.

Replicating::
When adding a 360 photo (taken with normal google camera) at a resolution 10348x5174 -- which is a power of 2. This version works.
Warning log:

THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
pack.3d.js:10 THREE.WebGLRenderer: image is not power of two (4095x2047). Resized to 4096x2048 <canvas width=​"4095" height=​"2047">​

-- Fixed with proposed .min. setting.

this.prop.size = size: Object height: 850 image_height: 2047.9999999999998 image_width: 4095.9999999999995 ratio: 0.9035294117647059 width: 768

When adding a 360 photo (taken with another phone) at a resolution of 5376x2688 -- which is a power of 2, doesn't work. -- image is black and cavans size turns to 0

Both are jpg, both are with standard cameras, image formats are similar, can't really find the problem

This is error log::

THREE.WebGLRenderer: image is not power of two (0x0). Resized to 0x0 <canvas width=​"0" height=​"0">​
THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. T…E.Texture {uuid: "F710BF59-6F15-4809-9606-48C0D99A4906", name: "", sourceFile: "", image: canvas, mipmaps: Array[0]…}_listeners: Objectdispose: Array[1]__proto__: Objectanisotropy: 1flipY: trueformat: 1021generateMipmaps: trueid: 2image: canvasmagFilter: 1006mapping: 300minFilter: 1008mipmaps: Array[0]name: ""offset: THREE.Vector2onUpdate: nullpremultiplyAlpha: falserepeat: THREE.Vector2sourceFile: ""type: 1009unpackAlignment: 4uuid: "F710BF59-6F15-4809-9606-48C0D99A4906"version: 1wrapS: 1001wrapT: 1001__proto__: THREE.Texture
WebGL: INVALID_VALUE: texImage2D: no canvas
index.html:1 [.WebGLRenderingContext-0xb811db40]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.```

```this.prop.size``` = ```height: 850
image_height: NaN
image_width: NaN
ratio: 0.9035294117647059
width: 768```

The canvas with the markers appears, but the texture is black.
Each time I move around, it generates lots of times the warning 

```[.WebGLRenderingContext-0xb74c4a78]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.``` 

How can I replace the "Change image" icon in the navbar with a text-link?

Hi, as I saw in the example, there is an implementation of setParanoma, however, when I tried to implement, this method is missing..

PSV.setPanorama()

Do we need to include any specific js to get this?

Thanks! @mistic100

Would be great if is it possibile to add custom marker on the photosphere.

Thank you so much

Can I start in pan mode by default, instead of autorotate?

New version doesn't work.
It's all black when loaded, even the git example.

Version from 3,4 days ago working fine.

UPDATE:
I don't have any errors or warning to report. Everything is the same as usual, except the image is not at all rendered, all is black

Freezes and not showing Navigation Bar when used with IE 11

How can I move the image while it is still in autorotate mode (I mean, without having to click the rotate button first)?

(most from JeremyHeleine work)

• allow degrees for latitudes and longitudes
• viewable longitude range (min & max)
• public methods for interesting properties
• panorama size parameter as an XMP fallback
• add methods to hide the navbar
• automatically hide the navbar when autorotate/gyroscope
• user move speeds depends on viewer size and zoom
• load all components in constructor, making all public methods available at init
• use https://github.com/mistic100/uEvent
• allow multiple CSS classes for custom buttons and markers
• get references to buttons
• method to disable button
• updateMarker should not alter the input object

User defined buttons with custom actions.

Hi, I just started using this (and am a beginner to three.js as well) and I basically wanted to be able to "attach" an image (or possibly a text box - whatever's easier) to a point on this photosphere and it should be able to move with the photosphere and be out of view when not in the photosphere's fov.

What would be the best way to go about this? There is no click event right off the bat and I'm not too sure how I should tackle this in a clean way that would work across different resolutions. My main issue is what positional values should I be using for such attachable elements - and how can I get them upon a click? (Since photospheres use an equirectangular projection, what would be a nice way to convert it to a meaning x/y that could be use to attach elements within the browser window to a specific point on the photosphere image)

Hi. Thank you for you work first :)

I have bug with view one image
http://zlo2k.no-ip.biz/photo/2015/15_08_24_krysha/pano_20150824_164420.jpg
when i try open it, chrome is crush.

Crome last version.

Thank you again, and sorry for my english :)

When using gotoMarker() which works fine and looks cool with the transition effect, but does not trigger the selected-marker event as a click would.

I could use the ID to fetch, but would make more sense to if it would trigger.
What do you think?

Please add a !default to all the SCSS variables. It's a common practice that allows overwriting the variables before the SCSS file is imported.

Probably a newb question but i installed dependencis with bowser and put all data on a LAMP environment (cross origin prevention). The output of example/index.htm only shows this [1] in Chrome an Firefox. No error / debug messages in console. Do you have any suggestions? if this causes inconvenience please close issue

best [1]
http://jdoppler.students.fhstp.ac.at/_projects/photosphere/example/

i have use the attached image. the image is rendered upside down and when the animation is finished, the image will turn. this behavior is repeated at every complete 360°

Using Firefox 44.0.2.
Markers remains visible and functional.

I use a Ricoh Theta device to take 360 pictures. They have a dedicated tool to display the pictures taken with their device. But the tool is very limited. The photos have to be hosted on the Ricoh servers and can be displayed only in an iframe. There's no way to customise it or to get rid of their branding. So I decided to create my own tool built on top of Photo Sphere Viewer.

I've noticed that Photo Sphere displays the panoramas in a different way than Ricoh Theta tool. I've created 2 samples:

• Ricoh Theta
• Photo Sphere Viewer

As you can see the panorama displayed by Photo Sphere is distorted on the edges in a different way than the panorama displayed by the Ricoh application. Photo Sphere stretches the image on the edges when the Ricoh app "squeezes" the edges. The more you zoom out, the more noticeable it is.

I suppose that they use a different algorithm. Is there any chance to implement such an algorithm in Photo Sphere? Is it just a matter of changing some parameters or is it a bigger issue that requires a lot of effort?

Great work!
This is more a request than a bug.

Can you provide a clue on how to use 'position-updated' theta and phi to place / save markers on the 360 view and load them when they come into view?

I captured the mouse event for X,Y and theta and phi to get view port, but can't bind them together.
Ideas?

The example in the /example directory is broken, there's a D.min.js:2 Uncaught TypeError: Cannot create property 'deletable' on string 'pin.png' error in the JS console.

I need to add SVG markers shapes that behave like normal markers (not deformed by the perspective) but without creating new SVG context by using the "html" property.

the markers could contain one of the following properties :

• html (existing)
• image (existing)
• polygon_px / polygon_rag (existing)
• rect
• circle
• ellipse
• path

• polygons on ceil or floor (covering the pole) are almost never rendered correctly
• big polygons near equator have render issue when on the edge