Virtual Reality (VR) is gradually becoming a part of our daily lives and has become useful in many aspects. There are a lot of fields where VR is becoming common place, such as: education, gaming, medicine, military, construction and travel.

In this article, we will be exploring some ReactVR tips that developers can follow to make working with the platform easy:
– How to properly select a Pano image.
– How to easily navigate your app.
– How to properly maintain your styles.
– How to debug your ReactVR app.
– How to preview your ReactVR app on a Google Cardboard.

💡 To learn more about how to createapplications using React VR, check out these tutorials: Getting Started, Building a Realtime ReactVR App and Getting started with ReactVR.

Requirements

To follow this article, we will require the following:
– Knowledge of JavaScript, React and ReactVR.
NPM and Node.js installed on your machine.
ReactVR CLI installed on your machine.
Google Cardboard for previewing your application.

If you have all the requirements, then let us get started.

TIP 1: How to properly select a panomage

When creating ReactVR apps, there are two available panorama image types: Cubemap and Equirectangular images, and both image types are appropriate for creating virtual reality scenes. When selecting which to use, you should take into account the type of scene you want to create (outdoors or indoors, bright or dark scene); the type of scene helps influence which image type to use.

Equirectangular images are images created with panorama cameras i.e. rectangular images with distorted edges such as this –

https://www.flickr.com/photos/54144402@N03/37632866221/in/dateposted/

Images of this type only need to be included once in your index.vr.js and do not need positioning because they take up the entire width and height of the screen. They have no visible edges that require blending together. Equirectangular images can be used for all kinds of scenes, giving it an advantage over Cubemap images.

Cubic images, on the other hand, are images that have 6 sections which have to be included separately in your index.vr.js file and positioned to look like a rectangle. When these images are positioned, you are required to blend the edges (using CSS) to avoid seeing the points where the images meet. These kinds of images are best used for indoor scenes or dark scenes, as it is harder to blend the edges for outdoor or bright scenes.

💡 Ray tracing is a rendering technique for generating an image by tracing the path of light as pixels in an image plane and simulating the effects of its encounters with virtual objects – Wikipedia

A Cubemap image looks like:

https://www.flickr.com/photos/132026524@N02/32530288762/

TIP 2: How to easily navigate your application

When you have created your scene, moving around and interacting with the scene is essential to improving the user experience of your application and making it immersive. Making your scene interactive can easily be achieved using one of several components that come automatically installed as part of ReactVR. These libraries come with already defined functions, reducing the need for you to code all aspects of your application.

One such library is [VrButton](https://github.com/facebook/react-vr/tree/master/Libraries/VrButton) library, which includes an invisible button that captures onClick, onClickSound and onLongClick events amongst others. Importing this library would save the ReactVR developer the time that would have been used to code a button from scratch to navigate the scene, all you have to do is change the appearance and include the extra functions you might want it to have, like this:

    <VrButton
      style={{width: 0.7}}
      onClick={()=>this._onViewClicked()}>
      <Image style={{width:1, height:1}}
        source={{uri:'../../Assets/Images/gaze_cursor_cross_hi.png'}}
        inset={[0.2,0.2,0.2,0.2]}
        insetSize={[0.05,0.45,0.55,0.15]} >
      </Image>
    </VrButton>

Here is a screenshot of how it would look:

Source: https://www.codeproject.com/Articles/1185234/How-to-Make-React-VR-Apps

TIP 3: How to properly maintain your styles

As time goes by, and you keep updating your application, styling your elements inline makes your code crowded, hard to read and hard to maintain. As a developer, it is essential to always keep a maintainable codebase and the codebase getting larger serves as a prompt to separate your styles using StyleSheet.create().

The external stylesheet is defined at the bottom of the index.vr.js file, after the render() function block, or in a separate file (stylesheet-name.js) which is then imported in the index.vr.js file.

ReactVR uses JSX and ES6 syntax.

💡 JSX is a preprocessor step that adds XML syntax to JavaScript.

💡 ES6 is a scripting language specification standardized by ECMAScript International and is used by applications to enable client-side scripting.

It is important to separate your styles as it helps make your code easier to read than a muddled up codebase. Your stylesheet can be separated, for instance, by putting it in a separate file or in a constant outside your render function like so:

    const styles = StyleSheet.create{
      wrapper: {
        borderWidth:0.5,
        color:blue,
      },
      heading:{
        fontWeight:bold,
        fontSize: 17,
      },
    };

And then adding it as seen below:

    <View style=styles.wrapper>
    </View> 

TIP 4: How to debug your ReactVR application

Naturally, when developing applications, problems will arise and knowing how to solve them is essential to ensure a stress free development process. Some debug tips also serve as useful hacks when working with ReactVR, such as [Hot Reloading](https://facebook.github.io/react-vr/docs/debugging.html) which reflects your changes to the scene in realtime without you having to manually reload your page. Manually reloading your scene resets the state of your running application.

💡 Hot reloading makes use of the React Native Packager to watch the local file system and notify the runtime regarding file changes. File changes trigger a reload of that module by the React VR runtime systems. –React VR documentation

React Dev Tools allow developers to view and alter properties of components within a running application. This ensures quick iterations since you get to see your changes as they are and as they affect the elements around them.

To use the element inspector, you can install Nuclide for Atom, or use any equivalent package available for your editor of choice.

https://facebook.github.io/react-vr/docs/dev-tools.html

💡 Nuclide is a plugin of the Atom text editor. It has built-in support for the React Native framework and it’s built as a single package on top of Atom to provide hackability and the support of an active community, providing a first-class development environment for React Native, Hack and Flow projects.

TIP 5: How to preview your ReactVR application on a Google Cardboard

After getting your virtual environment up and running, the next thing you would want to do is to package the application to your mobile phone in order to view it on a VR headset (in this case, a Google Cardboard).

To package your application for production, run npm run bundle in your project directory from your terminal. This creates a build folder in your vr directory, which serves as a store where all compiled versions of your application stay. You would need to manually copy your static_assets folder (which contains your images) into the build folder.

💡 To reference the files directly, change the default source URL from source={{uri: '../static_assets/pic.jpg'}} to source={{uri: './static_assets/pic.jpg'}}. -Andelar (https://github.com/facebook/react-vr/issues/274)

ReactVR by default is only packaged for Samsung, you can however preview your app using Carmel browser. To preview the application inCamel browser visit http://``localhost``:8081/vr.

To package your application into a non-Samsung device, install Chrome Canary on your Android device. Enable WebVR on Canary under flags, chrome://flags. Connect your phone to your PC’s IP address and allow traffic into port 8000.

💡 Allowing traffic to your project’s default 8081 port wouldn’t work because WebVR does not run on an insecure origin, such as your mobile device in this case.

To get around this use http-proxy, a node library. Install it, create certificates, create a proxy.js file and add this. In Canary, visit https://your-PC's-IP-address:8000/vr, click on Advanced and add an exception. Now that you have the same demo on your PC showing on your mobile, click on View in VR. Enjoy!

Alternatively, to share your VR experience on the web, you should use an iframe and set the src attribute to point to your index.html file. Position the iframe where you deem fit and give it dimensions.

Conclusion

In conclusion, when working with ReactVR, you might meet some roadblocks and complications, especially with the little documentation that ReactVR currently has.
Hopefully, the tips discussed here will enable you work through some of those problems and have a stress free VR application production.