We have seen people peered into headsets to be immersed into a virtual world, seen people point their devices in all directions trying to look for something interesting around them. VR and AR apps are already available in app stores, and this can be a hindrance to get audiences on board. What if it was easily available in the mobile web?

Virtual Reality

VR is an interactive computer simulation taking the user into a virtual world. The computer generates a simulation and tricks the mind to believe whatever the user is seeing is real. It is usually associated with weird looking goggles, having long wires and mostly for entertainment. It was clunky, had low definition objects and just didn’t know what you need to do in the new virtual world. It was expensive to create, maintain and distribute to the consumer market.

The Sensorama machine (scriptanime.wordpress.com)

With VR catching up with technology at an exponential rate, goggles and headsets are getting smaller and lighter now where people can now wear it with ease. The quality has greatly improved also, projecting more realistic and smoother experiences. Price has also become more cheaper for the consumers. Companies have created their own VR equipment that consumers can buy without hurting their wallets.

Augmented Reality

AR is somewhat similar to VR. Instead of the computer generating the entire environment as a simulation, it creates virtual elements and embeds it in the real world. Just like VR, it required weird looking goggles, wires and were still connected to a computer. A common usage of AR for example is in heads up displays (HUD), where data or information is being displayed in transparent displays without making the users look away from the usual viewpoints.

Virtual Fixtures – first A.R. system (1992, U.S. Air Force, WPAFB)

AR once had a niche market but has now expanded into more broader industries such as gaming, education and businesses. AR is has become more popular with the success of Pokemen Go. As technology gets better and better, tech companies like Google and Apple has invested in incorporating AR in their devices for developers to explore the different possibilities.

Technological Advancement

Though it still requires a computer and other tracking devices, consumers are now able to purchase their own gear to jump into the virtual world. Developers too have been given the opportunity to create their own content and distribute it easily in the market. The most notable names that resonate in the market are Oculus and HTC Vive. Sony soon joined the bandwagon, creating their own VR peripherals which was cheaper than the PC versions.

With these technological advancements, it is not impossible to see that one day VR and AR would be fully supported on our smart devices. Tech giants have already started integrating the technology in smartphones. Companies already have taken the advantage of this by creating rich experiences for their users. While the developers at Mozilla and Google proposing the standardisation of WebXR API, web developers have started to create plugins to make VR and AR work for the web.

VR and AR in the Web

As all developers wait for the WebXR API to be standardised and released to the public, there are a lot of other alternatives where developers can utilise to showcare VR and AR for the web. The most popular one out there is Three.js by Ricardo Cabello (Mr.doob). But it can be daunting for developers who have little or no experience in the WebGL. An easier alternative would be A-Frame, a framework specifically designed to create rich VR experiences without having to know WebGL.

See the Pen Hello World — A-Frame by Nino Ross Rodriguez (@oninross) on CodePen.

A simple VR world like the example above was created only using 17 lines of HTML code. It works well on both desktop and mobile devices and users can dive in immediately without downloading or installing any additional software or hardware. There is an additional icon that is present on the screen where users can choose to be in full screen on desktop and stereoscopic VR on mobile devices. It gets more interesting on mobile devices because the device acts like the camera in the VR world which means wherever the user looks, it's the actual representation in VR.

AR.js demo displaying AR objects using Hiro markers on mobile phones

AR.js was created by Jerome Etienne, focusing on making AR for the web a reality. Though it still relies and requires for markers to display elements on the screen, it's still a relatively big step on bringing AR to the web. The sample above was created only using 30 lines of HTML code (a little bit larger to show 2 markers displaying 2 different objects). Just like it's A-Frame sister, it works well on both desktop and mobile devices.

The Future of VR and AR

Google showcased WebARonARCore at their IO event this year. I managed to play around with the experimental technology in Chrome Canary and I must say that it looks really promising and it's paving a brighter future for VR and AR in the web. Markerless AR on the web would make it more easier for users to get onboard and immersive without the need of downloading an app. The floodgates will surely be wide open when once this feature has been enabled by default and is standardised.

Google Demo of WebXR Device API

Imagine a collaborative virtual world where you only need a smartphone and you don't need to download an app, where you don’t need to buy expensive equipment to experience VR, where you can visualise the information you need anywhere, anytime. It is truly an exciting time for the mobile web.