Years ago, we never imagined that browsers can one day support features like a gyroscope or VR devices. But it’s the case, and Photo Sphere Viewer has now the support for these things, with the new version 2.3.

Google Cardboard

Photo Sphere Viewer is compatible with the Google Cardboard

Gyroscope in JavaScript. Is it a joke?

Before supporting VR devices, I needed to support another thing: the gyroscope. Probably the most difficult part.

The fact is that the Orientation API is clearly not made for the type of use I make with Photo Sphere Viewer. By converting the angles provided by the browser into spherical coordinates, I thought the work was done. I was wrong, of course.

First big problem: changing from a portrait orientation to a landscape one. Now it works fine, but I’m pretty sure that I lost some hair during the development. It was the birth of a new library, no less than that. But I’ll present it to you in a few days.

Anyway, you can now see a brand new button in the navigation bar of Photo Sphere Viewer, allowing the toggle of the gyroscope support. If your device (or browser) does not support gyroscope, you shouldn’t see the button.

There was a second big problem with the gyroscope support: browsers. The implementation of the API is different following the browser and, for now, I can’t say if the support is here in all compatible browsers. I’m only sure that it’s here in Firefox for Android, Chrome and Opera.

VR support is finally here

After the gyroscope support, the VR one was not so difficult. Still on a compatible device, another new button is here, allowing the toggle of this support. All you have to do is putting your device in a VR hardware, and enjoying the result.

As we use gyroscope, we have the same browsers compatibility as for the previous feature.

Note that the view is not automatically changed. If you activate the VR mode in a portrait view, you will keep the portrait view. However, you can rotate your device at any time, even after the feature activation. That way, you can use the one you prefer: landscape mode, or inversed landscape mode.

When VR mode is activated, the navigation bar is hidden. You can display it again by touching the panorama. It will disappear again after five seconds.

Some other things

As bringing the gyroscope support was not easy, I sometimes took some features that were in the list since a long time, and I implemented them.

First, the fitToContainer() method is now public. If you resize the Photo Sphere Viewer container without any change in the window size, PSV can’t detect it. But you can call this method to automatically resize the panorama to the right size.

If you want to disallow user interactions with the panorama, you can by using the new allow_user_interactions. By default, it is set to true. By setting it to false, user interactions won’t be allowed: they won’t be able to navigate into the panorama or even to use the gyroscope. Note that the navigation bar will then be disabled.

Since the first version of Photo Sphere Viewer you can indicate a loading image, but it wasn’t possible to personalize the loading message (the text one). Now you can by using the loading_msg option.

Since recently you can set the default position. Now you can set the angles in degrees (before, only radians were allowed). Instead of passing a number (which corresponding to radians), you can pass a string, like “45deg” for example.

Maximal tilt angles can also be set by using degrees.

Finally, Photo Sphere Viewer is now available as a minified file, this ugly but light type of JavaScript file. It is almost three times lighter than the development version so I recommend you to use it. It can be found on GitHub, like the rest.

What’s next?

The list of future new features for Photo Sphere Viewer is not empty. It’s all the contrary in fact: I think that it’s even bigger than before this latest version.

Anyway, I will begin to seriously develop my own 3D renderer, in order to stop using Three.js. I simply need my own renderer for some features.

Before a new version of Photo Sphere Viewer, a new version of WP Photo Sphere will soon be available to bring these new features. It should be here tomorrow.

After WP Photo Sphere, I think about introducing you the new library I talked about above. Oh, and of course a new design for Tasse de Café should come before the end of the summer.