There are many solutions to create Augmented and Virtuality Apps for IOS and Android smartphones (for example Wikitude for AR or Insta for VR applications). In this blog post I will discuss the Web solutions. Therefore, I concentrate on solutions which run in the browser or are created with Web technologies (such as HTML, CSS, Javascript) on a Hybrid basis (see this article by Pietro Saccomani of a definition). This article covers VR, a coming blog post AR.
WebGL is the basis
The Web Graphics Library (WebGL) is a Javascript API for rendering interactive 2D and 3D graphics within the Web browser without the use of any plug-ins. WebGL is the basis to display VR applications in the browser. The purpose of WebGL is described on their website, «WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element».
Mozilla describes WebGL in the following way: «WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer’s Graphics Processing Unit (GPU)» (source)
Three.js to build 3D, VR and AR applications with Javascript
The Javascript library and API Three.js uses WebGL and allows to create 3D, VR and AR applications in the browser. It has a renderer for WebGL, <canvas>, <svg> etc. inside the HTML <canvas> tag. Davis Lyons has written a good tutorial «Intro to WebGL with Three.js»
WebVR becomes WebXR
WebVR was an Javascript application programming interface (API) that provided support for VR (HTC Vive, Oculus Rift, Google Cardboard etc.) for the Web browser. Since August 2018 it has been changed and further developed to the «WebXR Device API» standard, which allows accessing Virtual reality (VR) and Augmented reality (AR) devices, including sensors and head-mounted displays, on the Web. One of the most important tasks of WebXR is to gain access of sensor data (position, orientation).
A-Frame for web-based VR with HTML
A-Frame is an open-source Web framework for building Virtual reality experiences. It was originally developed by Mozilla (see our earlier blog post and our tutorial). Developers can create interactive and animated 3D and WebXR scenes using HTML and Javascript. A-Frame is based on three.js and WebGL. Being a framework based on three.js, A-Frame provides full access to the three.js API (source). A-Frame uses the WebXR API to gain access to VR headset sensor data (position, orientation) to transform the camera and to render content directly to VR headsets (source).
VR headsets that A-Frame supports include HTC Vive with controllers and trackers, Oculus Rift with Touch controllers, Google Daydream with controller, Samsung GearVR with controller and Google Cardboard (source).
Overview of the VR Web based technologies.
Oculus Go or Gear VR device
It is possible to develop for those two devices with WebVR (which is WebXR now) . In this case you develop for the Oculus Browser. Have a look at the tutorial.
The other possibility is to use React 360, which is an open-source JavaScript library for creating user interfaces and scenes in virtual reality.
The easiest way to develop for Oculus Go or Gear VR is to use Unity.
Upcoming Blog posts
In the coming blog posts we cover Augmented Reality.
Contact
Martin Vollenweider, HTW Chur (Switzerland)
Additional Information