Running WebVR on the Oculus Go
While I love many of the native apps, the first thing I tried out on my new Oculus Go was the web-browser. The Go has a pretty good browser built in. Based on Chromium, it can both show traditional 2D webpages (valuable for watching YouTube since there’s no native app), as well as WebVR enabled pages in full 3D (though not the newer WebXR spec since that’s still in flux).
I’ve built several WebVR pages over the past year, including this little game called “Whack an Imp”. When I loaded the page on the Go for the first time the game ran well and looked great. Thank you Oculus for supporting web standards!
However, I noticed that I couldn’t interact with the game. The game runs, but the controller wasn’t being recognized. When I wrote the game as part of this blog series for Mozilla Hacks, the Oculus Go hadn’t been released yet. I suppose it makes sense that my code doesn’t support new hardware. However, the 3DoF controller of Oculus Go has basically the same interaction as Google Daydream and Gear VR. My code should pretty much work as it is, I just need it to recognize this new controller.
My game is built with A-Frame, an open source 3d framework built on top of ThreeJS. A little web searching reveals that Oculus Go support for A-Frame has been reported and implemented, but the fix hasn’t made it into a feature release yet. No problem. We can just use a beta build from master. That’s the magic of open source.
All I had to do was change the URL at the top of my webpage to point to https://rawgit.com/aframevr/aframe/master/dist/aframe-master.js instead of the release version of A-Frame.
When I reloaded the debug console says the version of A-Frame is 0.8.2, which is good. Still, that didn’t fix it. Apparently the controller was detected by my code didn’t see it. The problem is on line 71 of my page:
<a-entity id="laser" laser-controls="hand: left" raycaster="showLine:true;" line="opacity:1.0;">
I have the laser-controls set to use the left hand. On the Go the default (and only) hand is the right. Switching to
right fixed it. Now the game works perfectly. Easy peasy.
The switch from left to right does bring up one important point. A web developer shouldn’t have to change code for particular VR hardware. There should be some sort of API that will target any pointing device, whether it’s the mouse, gaze, 3DoF, or 6DoF. The are some external A-Frame components which handle part of this, but such an API should be built in. This is something we are looking at.