Virtual Reality in Frontend Development: Tips and Trends You Need to Know
Let’s explore the frameworks available to create virtual reality environments in the frontend development ecosystem.
VR Uses and Applications
Virtual reality technology has come a long way—from being a figment of the imagination of authors such as Stanley G. Weinbaum, Stanislav Lem, Philip K. Dick, and movies like “Total Recall,” “Brainstorm,” and “Welt am Draht,” to an actual device that users can put on their head to immerse themselves into a living digital world.
Despite what most people think, virtual reality (VR) is not limited to the gaming industry. Current applications of VR are, in fact, numerous: from the automotive industry, where engineers can easily experiment with the look of a prototype; healthcare and well-being, as pain relief for burn injuries or treatment of mental health issues; the tourism industry, as a quick getaway to exotic locations without leaving the comfort of your home; even architects can use VR technology to enable the feel of a designed space.
In this article, I am going to explain the current trends in virtual reality technology (as well as augmented and mixed reality), and break down some of the frameworks that are currently available to frontend developers looking to break into the VR atmosphere.
VR Headsets on the Market
Currently, there are two headsets that are widely used on PC: Oculus and HTC Vive. (We are omitting the Sony PlayStation VR headset here, as it is console-exclusive).
HTC
HTC’s major headsets are:
• VIVE Focus 3: A high-end VR headset focused on business applications such as medical training and aerospace, energy, and security and defense sectors.
• VIVE Pro 2: Dubbed “HTC Gaming VR headset.”
Oculus
Oculus (currently owned by Facebook) has two major products:
• Oculus Quest 2: The All-In-One VR, this headset does not require a connection to a PC, although it does have the capability of doing that, and is focused on mostly gaming.
• Oculus Rift S: Staple higher-end PC VR headset used for gaming and other applications.
Now that we know which VR headsets are used most widely, let’s take a look at some of the VR-related development frameworks that have surfaced in recent years.
VR and Frontend Development
Naturally, VR is slowly gaining ground as a widely used technology, and the development of VR-powered applications is catching up on the web. Thus, the VR ecosystem is evolving and VR-related development frameworks that can bring VR to your browser are gaining more and more ground.
Let’s explore five major frameworks of virtual reality in frontend development:
1. WebXR (previously know as WebVR):
WebXR is an open standard that lets users experience virtual, augmented, and mixed realities in their browsers. It was first developed with virtual reality in mind, but with the emergence of augmented and mixed realities, the decision was made to transition to WebXR, where the X denotes any kind of reality that can be used within the browser. The basic goal of this open standard is to detect whether XR capabilities are available, query these capabilities, poll the XR device and its associated state, and, finally, display imagery on the XR device.
2. A-Frame:
A-Frame was born as a Mozilla VR team effort to bring VR into frontend development. It can be developed from a plain HTML file using XML-like tags, and supports a wide range of VR devices. A-Frame being based on top of HTML makes it really simple to get started for any frontend developer. Its core framework is built on top of three.js, which provides a declarative, composable, and reusable structure with access to JavaScript, DOM Apis, WebVR, and WebGL.
3. ReactVR:
React VR marks Facebook’s entry into VR development and uses the React ecosystem. Pairing WebGL and WebVR with React provides this framework the capability of creating seamless 360 experiences in the browser, easily translatable to a VR device. Interestingly, during the course of writing this article, all mentions of ReactVR framework now point to the React360 framework, which is currently archived by Facebook in their GitHub repository. Perhaps they are planning a drastic change to this framework and keeping quiet about it. Only time will tell.
4. BabylonJS:
BabylonJS was already a well-established 3D model framework, but the latest update (4.2) added the support for WebXR, making it a powerful VR framework contender. Its API is very extensive; however, the documentation is extremely well done and makes it easy to get started. It has an online playground to experiment with bits of code, sandbox to test scenes, shader creator tools, and exporters for models made in 3DS Max, Maya, Blender, or Unity 5. It’s basically an open render (and game) engine that has been neatly packed into JavaScript.
5. PrimroseVR:
PrimroseVR is a browser-based, open-source framework that can be used to easily create VR applications. Based on JavaScript and using WebGL for rendering, a user can create virtual VR meetings, product showcase demos, and even virtual classrooms compatible with Google Chrome, Safari, and Mozilla Firefox.
To Conclude
As VR devices become more readily available to the general public, and VR development frameworks mature and establish new standards, we can expect, in the near future, to be able to put on a VR device and check out a full, 360-degree view of a vacation place we are planning to go to, explore exotic locations directly in our browsers, virtually walk around the houses we are planning to build, try on different clothes while shopping online, or even convert our favorite pictures into immersive experiences. No longer an imaginary technology, virtual reality is here and is, slowly (albeit very slowly for now), becoming a part of everyday life.
Sources:
