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
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:
- 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.
- 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
- 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
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);
There’s a secret Message to look out for!