Virtual Reality on the Web for React developers

It's 2018 and Virtual reality is already a very hot and trending topic amongst users. Also, the web is undoubtedly growing at a tremendous pace and is really shaking industries out there. Being a React developer has always been fun because of the number of wide options it opens for you, be it web development or cross-platform native mobile development and now to Virtual Reality as well. So, if you are excited about VR and you love React, this post is gonna be your introduction to React VR and how it works, so without further ado, let's hope into it.

What is ReactVR?

React VR is a framework for building VR apps using JavaScript. It uses the same concepts and design pattern as React, so if you are a React developer, it's time to expand your horizon to the Virtual World. React is awesome because you simply need one framework to broaden your horizon to desktop applications, web applications, mobile applications and also VR applications.
We can use React VR to make VR Websites, 360-degree experiences and even games, isn't that exciting and awesome.

Note: You do not always need a VR Device to develop applications using ReactVR until and unless you are building a really core VR app.

How does React VR work under the hood?

ReactVR is built on top of React Native and uses a lot of component React Native does, <View>, <Text>,<Image> are some of those. It uses Three.js under the hood to render 3D graphics to the browser.



Let's discuss how this works under the hood.

• At the very top, you have your app. Below it is the React VR/ OVRUI(Oculus Virtual Reality UI), which pretty much gives you the ability to render the stuff needed for your VR app.
• Below it sits Three.js which is built on top of WebGL, which allows rendering of 3D objects into your browser. OVRUI creates the objects and places them in a Three.js scene for the browser to render.
• Below it are the native browser APIs, namely WebVR, enabling us to use VR headsets in the browser, and WebGL for rendering 3D Graphics in the browser.

Basic Concept of Virtual Reality

Before we write our first Hello Virtual World app, let's talk about the basic concept of VR that you must know if you want to develop VR apps. Basically, Virtual Reality is made up of things :

1. Stereoscopic Imaging: Stereoscopic images show the same content but from a slightly different point of view. Consider the following for an example :



I hope you can clearly spot the difference in the above 2 images.

We use a VR headset to get this effect of depth using stereoscopic images.

2. Movement Tracking: All VR devices control head movement that enables us to look around. A good VR headset(expensive) also controls body movements so that we can move around. The more the number of sensors we have, the better the Virtual Reality experience.



Hello Virtual World

Enough talk about the framework, let's start with the Hello World in ReactVR. Similar to create-react-app, we have react-vr-cli to prototype React VR projects. Let's install it first. Nothing fancy here.

npm install -g react-vr-cli

Now let's create our first Hello World project.

react-vr init HelloVirtualWorld

cd HelloWorld

Let's inspect the directory structure and let me explain it.

We have a package.json file containing all the info about our project and a node_modules folder, containing all the project dependencies, nothing fancy there. The static_assets folder will contain all your static images such as your panoramic photos, videos or sound or any other stuff you might use in your VR app.

Let's hop into index.vr.js



Very standard React stuff you might be familiar with(assuming you are a React developer). The new thing might be the <Pano> component(short for panorama), which is used to render Panoramic images in our React VR app. It uses the default chess-world.jpg file in the static assets folder. You can use your own Panoramic image instead or find one on the internet to play around.

The __tests__ folder you need not worry much about. Apart from that everything is the basic stuff.

In the <Text> styling, some properties might seem new to you such as transform and layoutOrigin.

layoutOrigin specifies the top and left values of our text box in relation to the world. 0.5 and 0.5 specify that we want it centered horizontally and vertically 

The transform is an array containing a translate object that has an array of three values: X, Y, and Z. By putting a negative Z value, we are controlling the depth of our text. The larger the negative value, the farther away the text will appear.

So I guess that was your very basic introduction to ReactVR and VR on the web and some basic VR concepts. For motivation, you can look at two very basic VR apps that I created till now using this framework, I am still digging deeper into it. You can find them on GitHub :

• React VR Cinema
• React VR Trip

I know these are very 2 basic apps. The framework can do much more than that. The ground is yours to explore. Hit the documentation and play around.

Update : Facebook has launched a new framework, React 360, which is pretty much new and will probably have the same concepts as ReactVR, so don't be intimidated, the core concepts are the same and you can still build great apps using React VR.

So hopefully this post comes to an end. I hope you liked it and enjoyed it. Stay connected for more content. Till then stay productive, stay healthy. Peace.