A virtual reality app is a mobile app that uses the power of virtual reality to reach its goals. Virtual Reality is no longer confined to the world of Science Fiction and is more like science fact. Soon, the virtual reality market is expected to explode leaps and bounce by 2020 and hike more than $100 billion. Since the future relies on an immersive virtual world, there is no looking back.

1. Requisites for Creating a Virtual Reality App

We need an Oculus runtime 0.8 installed, along with Unity 5.3 or higher for Virtual Reality App development. The Oculus SDKs, samples, and asset packs are built to help you quickly and easily develop your VR app in your preferred development environment. We also require the below:

“¢ Hardware: Google cardboard
“¢ Software: OS X

At this time, it’s possible to develop on OSX 10.9+ with the Oculus 0.0.5 runtime, but as Oculus have paused development for OS X, we recommend Windows for native Virtual Reality functionality in Unity. The below components are compatible.

Windows: Windows 7, 8, 8.1, and Windows 10 are all compatible.
Android: Android OS Lollipop 5.1 or higher.
Graphics card drivers: Please ensure your drivers are up to date. Older drivers may not be supported. Please check the Oculus Configuration Utility to see if there are issues with your driver.

2. Process Flow of Creating your first Virtual Reality Project

Someone with an interest in Virtual Reality and coding can start with Unity. Unity is quite easy to pick up and can get your first project up and you can run it inside the same sitting that you install it in. Most people feel that the abundance Unity with respect to learning advanced graphics and networking is the reason that VR is so successful. They democratized game development so that anyone can program a game with ease. The following is the process flow of creating a virtual reality project.

Step 1: Create a new empty project from the Unity Home Screen which loads when you first launch Unity.

Step 2: Make sure that PC, Mac & Linux Standalone is selected as the platform to use by visiting File > Build Settings from the top menu.

Step 3: Create a new cube (Game Object > 3D Object > Cube) and position it in front of the default Main Camera in your new empty scene using the Translate tool.

Step 4: Save your scene (File > Save Scene).

Step 5: Go to Edit > Project Settings > Player and check the box to enable “Virtual Reality Supported”.

Step 6: Enter Play mode by pressing Play at the top of the interface.

During runtime, this can be toggled using the Virtual Reality Settings.enabled property as shown below:
using UnityEngine;
using UnityEngine.VR;

public class ToggleVR: MonoBehaviour
{
//Example of toggling VRSettings
private void Update ()
{
//If V is pressed, toggle VRSettings.enabled
if (Input.GetKeyDown(KeyCode.V))
{
VRSettings.enabled = !VRSettings.enabled;
Debug.Log(“Changed VRSettings.enabled to:”+VRSettings.enabled);
}
}
}

3. Camera Movement in Virtual Reality

We cannot move the VR Camera directly in Unity. If you wish to change the position and rotation, you’ll need to ensure that it is parented to another GameObject, and apply the changes to the parents Transform. Left and right eye cameras are not created by Unity.

If you wish to get the positions of those nodes, you must use the InputTrackingclass.
using UnityEngine;
using UnityEngine.VR;

public class UpdateEyeAnchors : MonoBehaviour
{
GameObject[] eyes = new GameObject[2];
string[] eyeAnchorNames = { “LeftEyeAnchor”, “RightEyeAnchor” };
void Update()
{
for (int i = 0; i < 2; ++i)
{
// If the eye anchor is no longer a child of us, don’t use it
if (eyes[i] != null && eyes[i].transform.parent != transform)
{
eyes[i] = null;
}

// If we don’t have an eye anchor, try to find one or create one
if (eyes[i] == null)
{
Transform t = transform.Find(eyeAnchorNames[i]);
if (t)
eyes[i] = t.gameObject;

if (eyes[i] == null)
{
eyes[i] = new GameObject(eyeAnchorNames[i]);
eyes[i].transform.parent = gameObject.transform;
}
}

// Update the eye transform
eyes[i].transform.localPosition = InputTracking.GetLocalPosition((VRNode)i);
eyes[i].transform.localRotation = InputTracking.GetLocalRotation((VRNode)i);
}
}
}

4. Render scale in Virtual Reality
Depending on the complexity of your Virtual Reality scene and the hardware you’re running, you may want to alter the render scale. This controls the texel: pixel ratio before lens correction, meaning that we trade performance for sharpness.
using UnityEngine;
using System.Collections;
using UnityEngine.VR;

namespace VRStandardAssets.Examples
{
public class ExampleRenderScale : MonoBehaviour
{
[SerializeField] private float m_RenderScale = 1f; //The render scale. Higher numbers = better quality, but trades performance

void Start ()
{
VRSettings.renderScale = m_RenderScale;
}
}
}
“¢ If we increase this to 1.5, you can see the asset looks much crisper.
“¢ if we reduce the renderscale to 0.5, you can see it’s now much more pixelated:

5. Interactions in Virtual Reality

In Virtual Reality, we often need to activate an object that a user is looking at. For the Virtual Reality Samples, a simple, lightweight, extendable system allowing users to interact with objects. There are three main scripts:

● VREyeRaycaster :

If a collider has been hit by the raycast, this script attempts to find a VRInteractiveItem component on the GameObject.
VRInteractiveItem interactible = hit.collider.GetComponent(); //attempt to get the VRInteractiveItem on the hit object.
From this, we can determine whether the user is looking at an object, or has stopped looking at an object. If the user has started or stopped looking at an object, we can do something with it, such as call a method.

● VRInput :

VRInput is a simple class that determines whether swipes, taps, or double-taps have occurred on the GearVR – or the equivalent controls setup for PC input when using a DK2.
public event Action OnSwipe; // Called every frame passing in the swipe, including if there is no swipe.
public event Action OnClick; // Called when Fire1 is released and it’s not a double click.
public event Action OnDown; // Called when Fire1 is pressed.
public event Action OnUp; // Called when Fire1 is released.
public event Action OnDoubleClick; // Called when a double click is detected.
public event Action OnCancel; // Called when Cancel is pressed.

● VRInteractiveItem:

This is a component you can add to any GameObject that you would like the user to interact with in VR. It requires a collider on the object it is attached to.
public event Action OnOver; // Called when the gaze moves over this object
public event Action OnOut; // Called when the gaze leaves this object
public event Action OnClick; // Called when click input is detected whilst the gaze is over this object.
public event Action OnDoubleClick; // Called when double click input is detected whilst the gaze is over this object.
public event Action OnUp; // Called when Fire1 is released whilst the gaze is over this object.
public event Action OnDown; // Called when Fire1 is pressed whilst the gaze is over this object.

Deployment of Virtual Reality Project

One can easily test their project on the DK2 just by pressing play in Unity and you will have to deploy your project for testing outside of Unity and sometimes for distribution.

When the deployment of Virtual Reality is done, one can consider the following:

“¢ Ensure that your scene(s) are included under the Scenes In Build
“¢ Click Build and Run and Unity will export a standard Windows build with a .exe file and supporting content folders.
“¢ Run the .exe file as usual, and if a project is built with VR support enabled, it will attempt to start in VR mode on the DK2 automatically.
“¢ If you have issues with running the .exe, you may wish to optionally force VR mode, by using the command line argument -vrmode, which is covered in the VR Overview section of the Unity manual.

Use Case of Virtual Reality

In this demo, the user has a visual experience in which he feels like he is walking through a landscape where some cubes are moving towards him. A white dot on the center of the screen represents the gaze input pointer. On targeting the gaze input pointer, the cubes will burst and disappear with in 3-4 seconds.

If you want you can download the codebase for this sample app to test your concepts.

hbspt.cta.load(2725694, ‘6f015214-f875-4c6f-b5e0-800a1ad67bad’, {});

Conclusion
In the present scenario, along with the technology available to us, Visual Reality is all prepared for the development of auditory and visual immersion by specialist hardware like the Oculus. Although the Virtual reality headsets may only be few inches away in front of your eyes, it would seem like you’re looking at and is surrounded by a real environment. In the future, Virtual Reality will drive changes in OSs, GPUs, drivers, 3D engines, and apps, and ultimately enable a highly efficient Virtual Reality performance.

hbspt.cta.load(2725694, ’59ae553e-9cc8-4c30-bb1d-57c0cc3c9fc2′, {});

The smartphone app development, as opposed to traditional web app development and desktop development is bit different. On comparison with the deliverance of mobile devices, desktop and browsers provide less features like voice calling, Touch screen, instant notification, camera, Audio, Video, Social apps etc. Yes, smartphones play a big role in making life easier for the user and hence the apps on a smartphone should also follow same protocol.

Let’s see the several ways to approach mobile application development for iOS and android.

• Native Development

Native language is used for development and uses OS direct. The most enriched UI and UX can be created and is flexible, efficient, and fast. An app can be created in the app and runs directly on the OS and not on the Virtual machines, browser or run time on the OS.

Android uses android studio for native app development. The native programming language used by android studio is Java.
iOS uses x-code for native app development. The native programming language used by android studio is Objective C.

• React Native Development

React Native is a technology focused solely on building mobile apps using the platform node.js, Android Studio/ Expo Client App. React Native uses ReactJS as the JavaScript library, which enables it users to have all its advantages.  To build a cross-platform app with React Native, the language of the native platform needn’t be known by developers. They should be familiar with JavaScript and be familiar with the React syntax. They can also add a native component to the code.

The primary advantage of React native is the preservation of downward data flow. Which enables the core components to be edited sans impact of child components. User experience is positively affected and makes the UI development smooth giving it a native look and feel.

In comparison with JavaScript frameworks like AngularJS or MeteorJS, React Native is UI-focused, like JavaScript library than a framework. The end UI is immensely responsive and smooth due to the JavaScript interactions with the native environment. This means the app will have faster load times than a typical hybrid app, and a smoother feel.

ReactJS is a JavaScript library which supports both front-end web and run on the server, for building user interfaces and web applications. React Native on the other hand is a mobile framework that compiles to native app components, allowing you to build React native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and also implements ReactJS under the hood.

In this article, we will be discussing about the Platform Node.Js and Expo XDE and how these are used for creating mobile app using React Native Development method.

1)Mobile App development using Node.Js

a)Install React Native: The initial step in app development using Node.Js is installing React Native. To install react Native, use the command line user interface of Node.Js. The command is:
“npm install -g react-native-cli”

b)Go to Project Folder: Using the React Native command line tools enables you to generate a new React Native project called “MyProject”.

c)Run react-native run-android: Once a new folder is created, then run the react-native run-android inside the newly created folder.

• react-native init MyProject
• react-native run-android

One of the common issue is that the packager may not start automatically when you run react-native run-android and the alternative for this is to start it manually using react-native start.

Now let’s see how to create a simple signup page using Node.Js

Following code set, is to create a simple sign up page having components email, username and password text inputs and a button (and perhaps a title to make everything look professional).
Before that we need to import all necessary components in React Native. The below code is required for the process:

Register.js
————

import React, {Component, PropTypes} from ‘react’;
import {
View, Text, Image, StyleSheet, ActivityIndicator
} from ‘react-native’;
import Environment from ‘./environment’;

import {Input, Button, Logo, Heading} from ‘../components’;
import Icon from ‘react-native-vector-icons/FontAwesome’;
import {Actions} from ‘react-native-router-flux’;

export default class Register extends Component {
state = {
username: ”,
email: ”,
password: ”,
loading: false,
message: ”
}

handleRegister() {

this.setState({ loading: true, message: ” });

var params = {
login_name: this.state.username,
email: this.state.username,
password: this.state.password

};

var formBody = [];
for (var property in params) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(params[property]);
formBody.push(encodedKey + “=” + encodedValue);

}
formBody = formBody.join(“&”);

var proceed = false;

fetch(Environment.CLIENT_REGISTER_API, {
method: “POST”,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
‘device_id’:’1234′,
‘device_type’:’android’,
},
body: formBody
})

.then((response) => response.json())

.then((responseData) => {
console.log(responseData);
if(responseData.data.length===0) {

this.setState({ message: responseData.error})
this.setState({ loading: false });

}
else {

Actions.profile();
}

})
.done();
}

render() {
return

{‘Sign up’}

<Input label=”Username”
icon={}
value={this.state.username}
onChange={this.handleChangeInput.bind(this, ‘username’)}
/>
<Input label=”Email”
icon={}
value={this.state.email}
marginTop={23}
onChange={this.handleChangeInput.bind(this, ’email’)}
/>
<Input label=”Password”
icon={}
value={this.state.password}
marginTop={23}
onChange={this.handleChangeInput.bind(this, ‘password’)}
secureTextEntry
/>

{!!this.state.message && (

{this.state.message}

)}

{this.state.loading && }

Create

}
}

const registerStyle = StyleSheet.create({
registerContainer: {
flex: 1,
backgroundColor: ‘transparent’,
paddingTop: getPlatformValue(‘android’, 10, 30),
},
formContainer: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
marginTop: getPlatformValue(‘android’, 5, 34)
//backgroundColor: ‘#ffffff’
},
activityIndicator: {
justifyContent: ‘center’,
alignItems: ‘center’,
height: 25
}
})

• Basic styles are defined in the Register.js itself.
• Button ‘Create’ calls handleRegister method, where we do the registration process by using API. If successfully registered the page is redirected to Profile page.
• React-native-router-flux is used for react native routing using FontAwesome icons.
• The ActivityIndicator is used to indicate the loading action.
• API links are saved in environment.js

environment.js

module.exports = {

CLIENT_REGISTER_API: ‘Your register API url here’
};

• We can provide router information in the render method of App.js as follows:
• After editing the code, open the Expo App from your device. After the packager is ready from the Expo XDE, use “share” or “device” buttons to view the changes.
• Enable ‘Hot Loading’ from device for fast editing & debugging. Hot loading keeps the app running and allows us to inject new versions of the files that you edited at run-time. This way, you don’t lose any of your state which is especially useful if you are tweaking the UI.
• Now use the “Share” or “Device” buttons to view your project

2)Mobile App Development using Expo XDE

Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. Expo XDE is a development environment, can be used to create mobile applications.

An Expo project is a React Native project. Expo XDE can be used to create mobile applications in a matter of minutes. For Expo Application, we have command line and Expo XDE tools. The following is the process:

1)Run Command Lines:
Following are the command line codes

• npm install exp –global
• exp init your-project-name
• cd your-project-name
• exp start

2)Run the Code:

Once the app has started, the next step in the process is to run the code: exp build:android or exp build:ios android and iOS respectively.

Since this caters to both android and iOS and you choose to build for iOS, provide Apple ID, password and Apple Team ID as required.

3)Finish Building

After the above process wait for it to finish building. The process may take a few minutes and you can check up on it by running exp build:status. When it’s done, you’ll see the url of a .apk for the Android or .ipa (iOS) file for apple devices and this is your app.

How to Use Expo XDE for Development?

The process flow for development with Expo XDE is as follows.

a)Install Expo XDE

We should have Expo XDE installed on our development machine and the Expo client on an iOS or Android physical device or emulator.

b)Account Creation:

Upon opening XDE you will be prompted for a username and password. Fill this in with your desired username and password and hit continue “” if the username isn’t already taken, then we will automatically create the account for you.

c)Project Creation

Press Project and select New Project, then choose the Tab Navigation option since that will give us a good starting point, then enter the name of your project in the dialog that pops up. Give name for your project, and press create.

XDE is now initializing a new project in selected directory: it copies a basic template and installs react, react-native and expo.

You’ll see that XDE shows you a URL like http://4v-9wa.notbrent.mynewproject.exp.direct:80- feel free to open this up in your browser, you will see that it serves up some JSON. This JSON is the Expo manifest. We can open our app by opening the Expo app on our phone typing this URL into the address bar. Alternatively, press Share, enter your phone number, and press Send Link. Open the message on your phone and tap on the link to open it in Expo. You can share this link with anybody else who has the Expo app installed, but it will only be available if you have the project open in XDE.

Use Cases of ReactJs and React Native:

• Bloomberg

Bloomberg, the online magazine chose React Native for developing its mobile app and have mentioned in their post on the Tech at Bloomberg that “the first tool that truly delivers on the promise of cross-platform native app development.”

• Airbnb

Due to the simplicity in code refactoring, the iteration, the reusability of the component, Airbnb opted to switch to React Js and uses it for both web Instagram apps and mobile.

• Instagram

To enable web visitors to access the social platform, they built a web site, a one-page app. Since the web app could be optimized and seemed comfortable and quick for the users it was used for both web Instagram apps and mobile.

• Netflix

In combination with Gibbon, a rendering layer, Netflix adopted ReactJs. In 2015, Netflix chose React due to its one-way-ticket model of declarative approach to programming and data flow.

Parting Thoughts

React Native requires Bridge components to be written for each platform to use them. It brings it back closer to a hybrid framework. But in the case of React Native, you needn’t be anxious about the platform specific behaviors in providing the most seamless experience for your users. With Native development, developer will be working with his familiar tools like classic HTML and CSS. But in the case of React Native, knowledge on styling and creating user interfaces using their own HTML-like components is necessary.