How to make a web app ready for 'ovrweb' protocol (to be viewed in Gear VR)?

[gdebojyoti]

I have a web app that uses ThreeJS. I am currently trying to include WebVR to be used with Gear VR.

I am aware that I need to link to that web app using the ovrweb protocol in order to open it in Gear VR. My problem is that it does not.

Whenever I use window.location.href = "ovrweb:http://my-app-url",
I am asked to attach the device to Gear VR. But once I do so, the
screen remains black. I noticed that the same thing happens whenever I
use some non-VR webpage as the URL (like ovrweb:https://www.google.com).
However the ovrweb protocol works fine as expected with certain URLs - such as ovrweb:https://playcanv.as/p/VNTAx5Eu/.

I am not sure what I am missing. My app has a VR button, on clicking which the display.requestPresent
API call gets fired & the screen splits into two (works in Chrome
Canary). Is that any list of requirements that my app needs to satisfy
to be recognized via ovrweb protocol? If so, what are those?

I went through the Oculus docs, but did not find anything that could help me. How do I make my app run via ovrweb protocol?


Update: I found that ThreeJS example links (such as https://threejs.org/examples/webvr_rollercoaster.html) are not working over ovrweb protocol either.

[gdebojyoti · Accepted solution]

Okay, found the solution myself.

Whenever we try to use ovrweb protocol, the device will try to open the URL provided in its Carmel Developer Preview browser (different from the "internet browser" one can use when inside Oculus Home experience). Now the Carmel Developer Preview supports only "3D" websites. Navigating to 2D websites is not currently supported in Carmel Developer Preview. (https://developer.oculus.com/documentation/vrweb/latest/concepts/carmel-launching-content/). That's why my own web app, as well as links such as google.com, appeared black.

So all that I had to do was simply trigger display.requestPresent at the very start - thereby differentiating it from a 2D website.

Now display.requestPresent does not work without some kind of user interaction (such as click of a button). Same is the case with other JS APIs (such as fullscreen), for security concerns.

However it seems like navigating to a link over ovrweb protocol and thereby viewing it in Carmel Developer Preview also satisfies the user interaction condition. Hence now my VR scene is perfectly visible in Gear VR.

This solution should also work in the ThreeJS webvr examples (including the rollercoaster example linked in OP).

All one needs to do is trigger this snippet on page load.

display.requestPresent( [ { source: canvas } ] )
.then(function() {
    // Presenting to WebVR display
}, function(e) {
    // On error
});