Learning WebXR

Apr 27, 2020 webxr javascript opengl oculus quest vr

Things I learned (so far) trying to draw 3D stuff in the browser to view on my Oculus Quest VR headset:

• WebVR is now WebXR
• You must have a “secure host” for the site to enable WebXR, which basically means https protocol or http to localhost.
• Port forwarding from the Quest (‘reverse’) only works over usb and the error when you try to set it up over tcpip is not helpful.
• Even from a secure host an explicit user action (i.e. press a button) is required to enable WebXR. I’m not entirely sure why since at least on the Quest you’re then prompted by the browser to confirm you want to do so!
• OpenGL cares very deeply about triangles but not much else.
• You can remote debug the Oculus browser from desktop Chrome (or in my case Chromium).
• There’s a nice plugin for Firefox to emulate a VR headset.
• The framebuffer is shared by both eyes and renders once per frame so if you clear the context between drawing each eye’s view you’ll only see things in the right eye. That kept me busy for about two days and fixing the bug required moving one line.
• Don’t convert projection & view matrices to identity matrices by mistake! That one’s probably unique to me though.
• Although when you sort that out, managing the view and projection is actually easier in WebXR than in straight OpenGL.
• Javascript got quite a bit better in the last 20 years, but is still kind of icky. But probably you knew that.

But it’s really satisfying to get something working. My spinning cube is so much more impressive in VR than it is on a desktop.

Meanwhile here are some excellent resources for learning about it:

• The WebXR Explainer
• Setting up an XR session
• Some WebXR samples
• Mozilla’s WebXR API Docs

If like me you don’t know OpenGL or WebGL first, then I also recommend the book “WebGL Programming Guide” by Matsuda and Lea, published by Addison Wesley.