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.
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.
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
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.
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.
Hello! I am wondering if an example exists for the proper format for setting the default position? thank you!
figured it out, sorry for the bother!
Hey Brian, what ended up being your solution? I am trying to use gyroscope but it always starts at the back of the photo rather than the center of the photo. The starting point works in everything but gyroscope view.
Hi, Jeremy. First off let me appreciate the great work you’re doing here, you’re laying the foundation of immersive web based content. Thanks
I want to ask if the photosphere viewer allows to add hotpots that lead to other photosphere or popup pages. I also want to know if your coming 3d renderer would support online configuration of 3d renders from popular softwares and if it would allow realise collaboration on the Web. Is there a way this can be made lightweight too?
Thanks once again.
Hi Jeremy, I’m trying to use PSV in IE but it just works if I uncheck the browser option: Compatibility View settings, that by default of Microsoft comes with checked.
Do you have a solution to this?
In Chrome and Firefox it works properly.
Corps des Ingénieurs du RNI au Maroc – هيئة المهندسين التجمعيين
CORPS DES INGÉNIEURS DU PARTI RNI EST UNE ORGANISATION SOCIO-PROFESSIONNELLE PARALLÈLE AU PARTI RNI, RASSEMBLEMENT NATIONAL DES INDÉPENDANTS, PARTI POLITIQUE AU MAROC