Buzzword Blasting — Virtual Reality

How to build VR in less than 1 hour with React VR

Following on the theme to taking on an intimidating area of web technology — this week I decided to take a look at VR. Initially the fear-factor of Virtual Reality successfully kept me at bay because — who am I to create immersive virtual worlds?

After someone in class mentioned that I should checkout React VR — I decided that it would be worth taking a shot.

Getting the Gear

Left: Google Carboard — $8, Right: Zeiss VR One plus — $49

With VR still a nascent burgeoning field with many competitors creating different product offerings, the field has yet to standardize along any clear principles sometimes overwhelming potential buyers. Summarizing the dozens of purchasing guides resources online, there are broadly three general classes of VR technology (which can be further segmented) namely:

1. Entry Level Glasses: These don’t have any processing power or illumination or complicated electrical components. They are merely lenses that utilize smartphones to display 3D images.
2. High End Consumer: These include their own processing power and do not rely on smartphone screens resulting in higher quality visuals, responsiveness to movement and ultimately realism. This would include the HTC Vive and Oculus Rift
3. Custom Research Glasses: Certain advanced fields have developed advanced versions of VR technology with custom systems priced in the 10s or 100s of thousands of dollars. Ford, Mitsubishi, US Military, Advanced Medical Schools, among many others have already done so.

Starting with React 3D

Luckily the main framework to develop applications in VR is React VR and is likely to remain React VR given Facebook’s leading role in the development of the technology and the advancement of it’s adoption. They already own Oculus, the creators of the Rift device and are likely to continue to push it as the leading framework.

Just as with React, React VR has great online documentation:

https://facebook.github.io/react-vr/docs/getting-started.htm

Orientation

Moreover, there are a number of Medium tutorials that walk user through to the Hello World stage:

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
} from 'react-vr';
export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('stars.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.2,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          Welcome to Ramy's VR Universe
        </Text>
      </View>
    );
  }
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

Here’s what it looks like!

There’s a secret Message to look out for!

Check it out for yourself: 192.168.3.136:8081/vr