Babylon on Quest: One Small Step...

Blair MacIntyre -

I'm teaching a 3DUI / AR / VR class in Spring 2020, and will likely be using Oculus Quests along with Web-based VR (a combination of WebXR and WebVR, depending on the samples and the state of things with the WebXR Device API implementations in the browsers).  I've been toying with using BabylonJS for coding instead of three.js;  I've been using three, but Babylon seems to have a much more coherent set of examples and documentation, and out of the box, it's got a lot more features built in.  Shadows, physics, hit testing, VR, etc., are all "there" without having to piece together code from various samples.  And the Playground and Sandbox are pretty nice.  

These are all pretty important for students and others just starting out with web-based 3D/AR/VR

I finally got around to poking around in Babylon and seeing how to do some web-based debugging on the Quest (I've been doing most of my WebXR on iOS with the WebXR Viewer I helped develop).

Turns out, it's pretty easy.  

First, I had to set up the Quest for debugging web content:

  1. Log into your Oculus account on the Developer Dashboard and create (or join) and organization.  I created one for my consulting company (the MacMynatt Group).
  2. On the Oculus app (which I had to reinstall; I'd uninstalled it after setting up the Quest because I didn't want Oculus/FB snooping), enable USB Debugging.
  3. Plug in the Quest (my iMac has a USB-C port, so I connected it's cable directly to the mac), and on the Quest, authorize the connection to the computer.
  4. Open the Oculus Browser, and go to a web page. Open Chrome on your computer, start the developer tools, then go to "More Tools" / "Remote Devices".  
  5. Alternatively, open Firefox Reality on the Quest, enable remote debugging on it, and go to a web page.  Open Firefox Nightly on your computer, go to "Web Developer" / "Remote Debugging".  (Firefox Reality is using a newer build of Gecko than regular Firefox, and the desktop debugger needs to be newer than the remote browser.)

Aside: it didn't work immediately for me, so I installed the Android Platform Tools, and looked for connected devices with adb (by running adb devices).  I didn't see any, and eventually noticed one end of the USB-C cable wasn't seated properly. Reconnecting fixed the problem.

Poking around on the net, I found a small test program for Babylon and the Quest on github.  I downloaded, set it up and ran it (instructions on the project's page).

For mobile debugging, I use ngrok so I don't have to type in URLs on the mobile device.  The sample program runs a server on port 8001, so I ran ngrok http -subdomain=MYDOMAIN 8001 and then pointed the Quest at MYDOMAIN.ngrok.io

The test program ran, and when I connected Chrome to it, I could debug.  Voila.

Editing, rerunning, and so on behaves as expected.  

The only gotcha is that taking off the display puts the display (and browser tab) to sleep.  I may be taping something over that "is somewhere wearing this device" sensor in the near future ....