How to WebXR in March 2019

3 minute read.

With Con­struct Ar­cade my co-founder Flo­ri­an and I are as close to work­ing with the We­bXR API as it gets. To give you some hints on what to look out for with re­cent brows­er sup­port, here is an up­dat­ed ver­sion of How to We­bXR in Ju­ly 2018.

Most of the hints in that blog post still ap­ply, so make sure to al­so read that.

API Shapes and Flavours

There are the many ver­sions and APIs for VR on the fly­ing around. I tried to as­sem­ble a ta­ble. It is like­ly in­com­plete, and sup­port from many browsers is miss­ing

WebVR and WebXR versions
Name Ver­sion Spec Date Browsers
We­b­VR 1.0 14
  1. Mar 2016
1.1 13
  1. Dec 2017

Fire­fox 55+ for Win­dows 11

Fire­fox 64+ for Mac 12

Chrome 56-62 (+?) 15

Mi­cro­soft Edge build 15002+ 16
We­bXR De­vice API First Draft ? Chrome 66+ 17
Sec­ond Draft ? Chrome 73+

It turns out that lat­est Chrome has some up­dates to their We­bXR im­ple­men­ta­tion that make it fol­low the lat­est changes on the We­bXR spec. Things like sup­port­sS­es­sion­Mode are im­ple­ment­ed in Chrome 73.

On the one hand this is great news! On the oth­er this breaks all We­bXR based ap­pli­ca­tions and games that have been de­vel­oped with the old­er ver­sions of the spec that was im­ple­ment­ed and avail­able through the ori­gin tri­als up to and in­clud­ing Chrome 72.

Even frame­works like A-Frame are not quite able to shield you from these breaks.

Back­wards Com­pat­i­bil­i­ty

For Con­struct Ar­cade I will be im­ple­ment­ing a back­wards com­pat­i­bil­i­ty shim/poly­fill li­brary that will al­low run­ning old­er We­b­VR games with­out up­dat­ing them man­u­al­ly.

While up­dat­ing three.js or A-Frame—if you built your game with one of those frame­works— would usu­al­ly al­so up­date the use of brows­er VR API, that is of­ten not easy be­cause of dep­re­ca­tion and re­moval of oth­er un­re­lat­ed fea­tures.

(Any fu­ture in­for­ma­tion about this will be added here)

Per­for­mance

Up­com­ing We­bGL ex­ten­sions like WebGL_multi_draw 18 and OVR_multiview2 19 ap­pear to be the so­lu­tion to per­for­mance with many draw calls. Un­til these are wide­spread enough and im­ple­ment­ed in all browsers, we still have to wor­ry about this top­ic our­selves, though.

With We­bXR you tar­get a range of de­vices from clients on smart­phones, stand­alone VR and desk­top. Keep your draw call counts low, mesh­es and tex­tures small and avoid com­plex PBR shaders and shad­ow pass­es if pos­si­ble.

If you want to pre­serve as much vis­ual fi­deli­ty as pos­si­ble, have au­to-scal­ing set­tings for mo­bile de­vices. That can range from us­ing dif­fer­ent mesh­es to dis­abling ren­der­ing fea­tures.

With smooth per­for­mance, VR is fun im­mer­sive! On 5 fps very much not.

Ex­ok­it

The open source VR brows­er Ex­ok­it 20 has been very ac­tive late­ly. In case you want to de­vel­op a VR app to sub­mit to Google Play or Ocu­lus Plat­form, you should be able to build on top of Ex­ok­it. I plan on try­ing this and will re­port back once I know more.

Ad­di­tion­al­ly Ex­ok­it is work­ing on At­mos, an XR head­set for the web that is like­ly worth a fol­low.

Ref­er­ences

11
https://www.mozilla.org/en-US/firefox/55.0/releasenotes/
12
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API#Navigator.getVRDisplays
13
https://immersive-web.github.io/webvr/spec/1.1/
14
Spec is nowhere to be found on­line. I ex­tract­ed it from the his­to­ry of the We­bXR GitHub re­pos­i­to­ry for you to down­load it here as pdf.
15
https://www.chromestatus.com/features/4532810371039232
16
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webvr/
17
https://developers.google.com/web/fundamentals/vr/status/ or https://www.chromestatus.com/features/5680169905815552
18
https://docs.google.com/presentation/d/1iznxalgXLLSWVNHQ6le9Gzv_TYzsD5R_gg8yT5ckf2A/edit#slide=id.g4c932beacf_1_0
19
https://www.khronos.org/registry/OpenGL/extensions/OVR/OVR_multiview2.txt
20
webmr.io and ex­ok­it.org