DadenU Day: WebXR

MozVR Hello WebXR Demo Room

For my DadenU Day I decided to get to grips with WebXR. WebXR is an new standard (well an evolution of WebVR) designed to enable web-based 3D/VR applications to detect and run on any connected VR or AR hardware, and to detect user input controls (both 6POS and hand controllers). This should mean that:

• You can write and host VR applications natively on the web and launch then from a VR headsets built-in web browser
• Not worry whether its Oculus, HTC or A.N.Other headset, both for display and for reading controllers
• Have a 2D/3D view automatically available in the web browser for people without a VR HMD.

What WebXR does NOT do is actually build the scene, you use existing WebGL for that (essentially a 3D HTML standard, not to be confused with WebXR or WebVR!) through something like the Three.js or A-Frame frameworks.

There's a good introduction to WebXR at: https://developers.google.com/web/updates/2018/05/welcome-to-immersive#what_is_the_webxr_device_api

To get a good sense of what web-delivered VR (via WebXR) can do I headed over to Mozilla's demo at https://blog.mozvr.com/hello-webxr/. This room has a bunch of different demos, and a couple of "doorways" to additional spaces with further demos. If you view on a 2D browser you just see the room, but can't navigate or interact (don't see why WebXR should pick up ASDW same way as its picks up a 6DOF controller). If you go to the page in your Oculus Quest (or other) browser you also see the same 3D scene in 2D. BUT it also offers you an "Enter VR" button, click this and your VR lobby and the 2D browser disappears and you are fully in the VR space as though you'd loaded a dedicated VR app. Awesome. In the space you can:

• Play a virtual xylophone (2 sticks and sounds)
• Spray virtual graffiti
• Zoom in on some art
• View 360 photospheres - lovely interface clicking on a small sphere that replaces the VR room with a full 360/720 photosphere. I'd always been dubious about mixing photospheres and full 3D models in the same app but his works well
• View a stereoscopic 360 photosphere - so you can sense depth, pretty awesome
• Enter a room to chase sound and animation effects
• View a really nice photogrammetry statue which proves that web VR doesn't need to mean angular low-rez graphics 

MozVR Photogrammetry Demo

There's a really good "how we did it" post by the Mozilla team at: https://blog.mozvr.com/visualdev-hello-webxr/

Having seen just what you can do with WebXR the next step was to learn how its done. For that I went to the WebXR sample pages at https://immersive-web.github.io/webxr-samples/

Although thee are a lot simpler than the MozVR one, each shows how to do a particular task - such as user interaction, photospheres etc. You can also download the code and libraries for each from GitHub at https://github.com/immersive-web/webxr-samples.

Movement demo

Controller demo

The only downside of these seems to be that they use Cottontail - a small WebGL/WebXR library/framework purely developed for these demos and not recommended for general use - so adapting them to your own needs is not as simple as it would be if they were written in Three.js or A-Frame.

Keen to actually start making my own WebXR I started by copying the GitHUb repository to my own server and running the demo's up. Issue #1 was that any link from a web page to the WebXR page MUST use https, using http fails!

Starting simply I took the photosphere demo and replaced the image with one of my own. The image had worked fine on the photosphere display in Tabletop Simulator but refused to work in WebXR. Eventually I found that the image had to be in 2048x1024, higher resolutions (but same ratio) fail. Also the photosphere demo is for stereoscopic photospheres so you have to remove the " displayMode: 'stereoTopBottom'" parameter.

Hougoumont Farm at Waterloo in WebXR Photosphere

Next up was to try and add my own 3D object. I liked the block room in one of the demos and worked out how to remove their demo blocks form the middle, and to hide the stats screen. Nice empty room loaded up. Then I hit the bump that I usually write in Three.js or A-Frame and I could't just cut-and-past into their WebXR/Cottontail template. Then I ran out of time (it was Friday after all!)

I've now found a page of really basic Three.js WebXR demos at https://threejs.org/examples/?q=webxr so the aim for this week is to get those working and start on my own WebXR spaces.

It's obviously early days for WebXR, but given the MozVR demo this really could be a lovely download-free way of delivering both 2D/3D to ordinary browsers, and full VR to headsets without any downloads. Joy!