When I was building my entry for the JS13K games contest , I tested my app on the Google Daydream. One issue I ran into was that it was hard to focus my eyes in VR. I thought it was just me at first and during the contest, I didn’t have the time to investigate any further anyway. Now that the contest is over I’ve decided to dig in a little deeper.

Debugging

I’d like to start with a little background on how to debug a WebVR app running on a phone in a Daydream View. Since the app will probably be running in Chrome on the device ( although debugging Microsoft Edge works as well!), I use the Chrome remote inspector. The remote inspector can be accessed by starting Chrome on your dev machine and navigate to chrome://inspect. When your phone is connected to your PC via USB it will show up there, but it is possible to find it over WIFI as well. Select the page you want to debug and click ‘inspect'.

<!-- raw HTML omitted -->

Now you can debug the page as you would normally.

To test if the page supports WebVR you can check if ‘navigator.getVRDisplays’ exists. Just type this in the console:

You should get one of these three responses.

“undefined”. In this case, WebVR isn’t available. Not native, and not through a polyfill.

<!-- raw HTML omitted -->

In this case, you’ll see an implemented function. This function is implemented in the polyfill.

<!-- raw HTML omitted -->

Best case scenario. The function is implemented natively.

In the last two cases, you’ll be able to call the function and get info about the device. This function returns a promise, but with the following like you can view it in the console.

Now, you can dig into the result and see what is in there. For example the device that is used.

Issue and Fix

It turned out that for some reason my WebVR app was defaulting to ‘Google Cardboard’ and not Daydream, while other examples had access to the Daydream native VR. This seemingly weird behavior is caused by the polyfill, flags in Chrome and a meta tag.

After a lot of debugging, testing and digging around, I learned the following:

• The polyfill defaults to cardboard, even when running it on a Daydream device, which causes the wrong settings for the Daydream lenses. This makes it very hard to focus your eyes on the VR.
• To get WebVR running on your Daydream supported Android device everywhere on any page, you need to enable it through a flag. Go to about://flags and search for ‘WebVR’. After doing that it runs natively.
• If you don’t want your users to have to enable a flag, there’s another way. That is by adding a meta tag. You have to enable the experimental feature by registering an origin trial. This is very easy to do. Start by going to the OriginTrials Gitbub and follow the link there to a form to register. You’ll receive a token you can add to the page to enable the WebVR feature for every visitor.

That last point, the meta tag, is what is used in the examples from ThreeJs.