A lot is happening with Augmented Reality on the web. This blog post is about our experiments using the latest awesome capabilities of Augmented, Virtual, Mixed and other named Realities on the web.
A new standard
With the rise of the Head Mounted Displays (HMDs) like the HTC Vive, the Oculus rift or the various ones on the Microsoft mixed reality platform that were accessing web content it was necessary to expand the WebVR standard. WebVR turns now into WebXR, supporting those different devices and their controllers, as well the new mobile AR developments. The goal is to include the capability to interact with all these devices into the browser. Imagine a website that is not only responsive with device-width but also with device-capability.
AR going mobile
Augmented Reality is exciting and promises many possibilities online and offline. The big smartphone producers have realized this and are making their devices ready for immersive experiences. There are many more smartphones on the market than HMDs and that won’t change for a very long time, if ever. Therefore it is logical to bring this technology to devices people already have.
Over the past few months Apple’s ARKit and Google’s ARCore got introduced. These platforms can detect flat surfaces and walls. Then virtual objects can be placed in real environments. Currently, ARKit and ARCore are only available on a few devices (see compatibility lists for Android and iOS), but that will hopefully change over the next year.
AR-enhanced web on mobiles
In our last blog we wrote about our experiments with AR.js, a library that embeds AR experiences inside a website. In order to display the content, the phone’s camera had to be pointed on a marker.
With ARKit and ARCore on the phones, a marker is no longer necessary. But until the AR platform capability is part of the standard browsers, an experimental browser does the trick. WebARonARCore (Android) can be found in the Play store, while for WebARonARKit (iOS) currently everybody has to download and compile the code themselves.
Google has taken the three.js 3D library further with it’s three.ar.js helper library to build AR content with web technologies. From there, another Open Source project called aframe-ar bridges it to A-Frame.
This is just a first try with our familiar oddEVEN cube using the mentioned libraries and the WebARonARKit browser on an iPhone7. Try to walk around it:
Below you find the code:
New devices
Meanwhile we have been successful to bring web content into the FOVE 0 and our HoloLens has gotten some company by other AR devices. The Meta2 has finally arrived and works out of the box with web content, and we got the Aryzon, which is made of cardboard and uses mirrors to reflect the smartphone image onto the transparent visor.
The Meta2 is WebXR compatible out of the box when used with SteamVR like all other HMDs. Surprisingly, it recognizes hands and models them as controllers. The large field of view is great, especially to see 3D models like those on Sketchfab.
Conclusion
We are developing again at the frontier of browser development. The AR technology is still very new and evolving. The masses of mobile devices are currently not even capable of displaying AR content that is building on ARCore/ARKit. However, device support is getting better and a substantial share will be reached fairly soon. This results in an immense potential for retail, navigation, architecture and everywhere a visualisation in an existing context needed. We’ll keep you posted.
