VR in mobile phone is not working


I am trying to create a VR application for mobile phones, and I cannot even make work the examples found in


If I use an Android device and Chrome, the screen is splitted but the camera orientation goes crazy (it seems it is not correctly reading the accelerometer).

If I use an Android device and Firefox, the screen is not even splitted.

If I use an IOS device and Chrome or Firefox, it works but it doesn’t go fullscreen so I see the top bar and it is not very useful…

I have previously tested the VR demos in Android devices and used to work!!
Can someone explain to me why should I do to make them work again??

Hello! Help please. I have the same problem. The solution is found?

t would be great to get a response to this from the Playcanvas team. This issue has come up a few times, I lost a contract with an existing client a month ago, as they saw this issue on their Android phone ( Chrome ) and I had no solution ( I had reported it, and couldn’t give them a timeline as to when it would be fixed, as I was getting no feedback on a fix - just like these guys above aren’t getting feedback ).

PlayCanvas would have been a perfect solution for it, except for this unsolved issue.

IIRC, this was due to a change in Chrome that the WebVR polyfill used for orientation changing from degrees to radians.

WebVR polyfill has since been updated but PlayCanvas haven’t updated their fork yet.

Annoyingly, when native WebVR is enabled by chrome://flags in the browser, it all works fine AFAIK.

I vaguely remember changing/patching the WebVR polyfill when I exported the build convert the radians back to degrees but didn’t have all the VR equipment to test to submit a PR. Ideally I wanted to update the PlayCanvas fork and the engine to the latest polyfill but soon realised I couldn’t full test my changes :frowning:

I’ve been having this issue when running my projects on Chrome and android when I ran my projects today. These issues didn’t pop up when developing and deploying my project I made earlier this year and have appeared at the worst time when I’m deploying another one :frowning:

Rambling aside, is there anyway to quickly resolve it, say modifying the lookat script and removing all the code where radians are coverted to degrees?

I’m afraid I can’t give you a complete answer as I don’t have all the necessary hardware to test it on.

I had success in modifying the webvr-polyfill javascript after exporting the build using the diff here: https://github.com/immersive-web/cardboard-vr-display/commit/d770e01f1df2a59f6f39f43aaf3a469769dbc465

Testing out one project, I’ve removed all pc.math.RAD_TO_DEG used project files and it seems to work out! This also includes the ones in the default lookat.js, as my projects are built off the 360 lookaround project.

I’m honestly a little surprised that this works.

Which project did you use as a base and where did you remove the RAD_TO_DEG?

Did you also test this in Firefox as well as when WebVR is enabled in chrome://flags?

Currently I have it working on a Samsung Galaxy S6, Model:SM-G920T, Android version 7.0 and the browser which I am using is Samsung internet version 7.400. This is the device which we plan on deploying our project on.

However, now testing out the project on other browsers on the Samsung S6 results in the same rotation issues as before for both firefox and chrome. So I’ll definitely want to look into a fix for use in these browsers.

The project which I used as a base was the following https://developer.playcanvas.com/en/tutorials/webvr-360-image/ I removed the get RAD_TO_DEG in look-camera.js in the functions _getPitch(line 107) and _getYaw (line 117). I also removed it anywhere else in my project

I’m looking at the original project now and RAD_TO_DEG is only used in the initialize function which was why I was so surprised https://playcanvas.com/editor/code/434266?tabs=5480046

Hmm you do have a point, the look-script is from a different project . I’ll put up the version which I’ve been using in our project. https://drive.google.com/open?id=1oSOqxWI3FKIAipyQ2d-wVSN_uQu7UUy-

File is non-public?

20 characters

Made it public now, try again?

At a glance, it doesn’t look much different from the original.

From what I remember, when you are presenting (in VR), the engine changes the camera orientation and position directly and the rotation/position data for the camera doesn’t pass through any user scripts.

It would be great to know if just updating the webvr polyfill code in the main engine would solve this, for everyone.

From what I know and tried, yes it should. The issue is that very few have the time and hardware to test the fix across all platforms.

Both the polyfill fork and the engine are open source so someone can make a PR with the fix which makes it more likely to be taken upstream.

So from Testing out Devices through my office I have gotten the application to work through a few steps. I’ll update this post as I test out more devices through the day.

For Samsung phones: (tested with Galaxy S6 and S7), they must use the Default Samsung internet browser, but it will work without any additional steps.

For Other Android phones (tested pixel 1 XL and moto g5) OR using Chrome on any Android device.

  1. As YauStar suggested, enabling native WebVR through chrome://flags, then restarting
  2. Download google VR services through the play store.