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.
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.
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 –
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:
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:
https://gist.github.com/f9a22e702c09e0f220ec50a5f4231713
Here is a screenshot of how it would look:
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:
https://gist.github.com/b1bae0f792a817ec7db5288e90ed966f
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](https://facebook.github.io/react-vr/docs/dev-tools.html)
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](https://nuclide.io/) 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](https://superuser.com/questions/515146/connecting-mobile-with-laptop-and-having-obtainning-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](https://www.npmjs.com/package/http-proxy), create certificates, create a `proxy.js` file and add [this](https://gist.github.com/bakkerme/2730336d83b6f1cd85ace5a68a902819). 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.
This post first appeared on the [Pusher blog](https://blog.pusher.com/5-quick-tips-reactvr/).