Chrome 79 Beta is out and with it the pub­lic sup­port of the WebXR De­vice API which has been under de­vel­op­ment for around two years. Up to now, it was only ac­ces­si­ble via Ori­gin Tri­als. The API is about ac­cess­ing vir­tual re­al­ity (VR) and aug­mented re­al­ity (AR) de­vices, in­clud­ing sen­sors and head-​mounted dis­plays, on the Web. For now, Chrome only sup­ports im­mer­sive Vir­tual Re­al­ity, with Aug­mented Re­al­ity as the next step. The Beta ver­sion is a par­al­lel in­stall with­out af­fect­ing your present Chrome in­stal­la­tion. It is sched­uled to be­come the sta­ble ver­sion by Dec 10, 2019.

To com­plete the con­fu­sion, the Ori­gin Trial for WebXR for Chrome ver­sion 76 to 78 is sched­uled to work until Dec 4, 2019. So be­fore Dec 4, the VR ex­am­ples linked in this post might still work with the then sta­ble ver­sion of Chrome, though look­ing a bit dif­fer­ent. Whereas, after Dec 10, you won’t need the Beta ver­sion any­way.

One us­able vir­tual re­al­ity de­vice is in your pocket or lying next to you on the desk or you are even read­ing this blog post with it: your mo­bile phone. With a viewer like Google Card­board or any sim­i­lar one like the very nice and ul­tra­portable Ho­mido mini, you can view any of the VR ex­am­ples men­tioned here.

The Im­mer­sive Web Work­ing Group has pub­lished a lot of in­for­ma­tion on GitHub, in­clud­ing some VR ex­am­ples to­gether with all the source code, pub­lished under the MIT li­cense. So let’s play around a bit and see what can be done.

The first ex­am­ple works just by mod­i­fy­ing the 360 Stereo Pho­tos sam­ple. By chang­ing the link to the sam­ple photo to point to any photo of your own in the same for­mat, you can view what­ever you like. The 360° photo used here was taken at a very fa­mous spot in the Bercht­es­gaden area in the Bavar­ian Alps. With this VR sam­ple, you can see a drag­gable pre­view in every browser, but only with Chrome Mo­bile one can start the im­mer­sive VR ses­sion, which looks like this:

Just click on the pic­ture to see the pre­view of the VR ses­sion in a new tab.

Ok, that’s not that ex­cit­ing. Let’s try some­thing more so­phis­ti­cated, like some­thing that’s not present in the pub­lished sam­ples: a dy­namic WebGL scene. The sam­ple source code pro­vides a glTF im­porter and – in­spired by this blog post – I used the glTF ex­porter of THREE.js to trans­fer the scene with the ro­tat­ing globe. This com­bi­na­tion works, but un­for­tu­nately, a lot of the 3D mod­els in glTF for­mat found in the Web won’t be dis­played out of the box. One of them, down­load­able at poly.google.com, did work though and you can see it in the VR ses­sion when you look be­hind your back. See below for a so­lu­tion to that prob­lem.

Just like above,  click on the pic­ture to see the pre­view of the VR ses­sion in a new tab:

Dig­ging down to the prob­lem of not dis­play­ing a lot of 3D mod­els in glTF for­mat, it turned out that the sam­ple code does not en­able the WebGL ex­ten­sion OES_el­e­men­t_in­dex_uint which is nec­es­sary to sup­port the gl.UN­SIGNED_INT data type used by many mod­els. To use those mod­els, you have to ex­plic­itly en­able that ex­ten­sion after cre­at­ing the WebGL con­text:

gl = createWebGLContext({
  xrCompatible: true
});
gl.getExtension("OES_element_index_uint");

Due to asyn­chro­nous load­ing of model data, some more com­plex 3D mod­els may take some time until they ap­pear in the scene, es­pe­cially on slower in­ter­net con­nec­tions.

As a bonus, I stum­bled over a very nice Vi­sual Stu­dio Code ex­ten­sion named glTF Tools, en­abling the ed­i­tor to pre­view glTF mod­els in dif­fer­ent ways and of­fer­ing a lot of con­text in­for­ma­tion about sin­gle el­e­ments in the file.

Where to go from here

As stated in the Chromium blog: many ex­pe­ri­ences can be en­hanced with im­mer­sive func­tion­al­ity. Ex­am­ples in­clude games, home buy­ing, view­ing prod­ucts in your home be­fore buy­ing them and more. Even more so, when this func­tion­al­ity can be in­cluded in every web page with­out the need of cre­at­ing (and down­load­ing) an ad­di­tional app for every pur­pose.

Google Chrome Beta for An­droid
Google Chrome Beta for iOS
WebXR sam­ples on GitHub
Vir­tual re­al­ity comes to the web
Wel­come to the im­mer­sive web

Cred­its

As­tro­naut model by Google is li­censed under CC-BY 3.0
As­ter­oid 01 model by Oziry is li­censed under CC-BY 4.0
The Earth tex­ture map is cre­ated by Tom Pat­ter­son (www.shad­e­drelief.com)