Developing AR Experiences on React

Leveraging React Native and Viro

To get started, make sure you have Homebrew, Node and Watchman installed. Thank you viro for your documentation and quick start guides which you can find here, I recommend you check those out after reading through this blogpost

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

homebrew install command

brew install node

node install command

yum install watchman

install watchman

npm install -g react-native-cli

install the react command line interface

npm install -g react-viro-cli

install the Viro Command Line Interface

npm install -g react-viro-cli

Generate a new project

Now that all of that is set up the first thing we want to do is create a new Viro project. Viro has already created in their repo a sample project which you can clone down by using the following command. You must always start your viro projects with react viro init + project name

react-viro init ViroSample

Download the Viro app

‎Viro Media

Here’s the link to download the app, it allows you to test out your mobile experience as you are developing. Unike typical iPhone apps, AR, requires the use of the phones camera so you can’t use the xCode simulator. So downloading the app here is a crucial step.

Run NPM Start

From the newly created project directory run npm start and the package server will be displayed to you with a specific IP address meant to be put into the app. In the below image you will see the output of my terminal response after typing in NPM Start

Open the Viro App And Enter End Point

Use the same endpoint that was outputting to you in the terminal and tap go. Once you hit go the AR experience will initialize and it will bring you to a section where you can choose to move forward with either

Hello World!

If you set everything up properly, open launching the server, your iOS’s camera should open up and you should see the text “Hello World” superimposed on your space.

Now to take it up a notch lets add a few more objects and environment tracking, so we can make a real augmented reality experience.

Adding Components

Since this is React, we know that components are an integral part of the development environment, and Viro AR is no exception. We are going to start by adding a box, to do so we need to start by import Viro Box and ViroMaterials in to react —

./HelloWorldSceneAR.js
import {
  ...
    ViroBox,
  ViroMaterials,
} from 'react-viro';

and next, we'll create a box under the ViroText component

<ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]} materials={["grid"]} />

We need to make sure to set the position and scale of the box, to fit within our environment and look well placed next to the text

Adding material to the box

Since we already defined viro materials in our components we can easily style our component by adding the following code after the styles decleration

ViroMaterials.createMaterials({   grid: {     diffuseTexture: require('./res/grid_bg.jpg'),
 }, 
});

Once you save and reload the app you should see a pink and grey cube appear on the screen directly under the hello world!

If you want to restart your server and see your app run again, you can shake your phone and tap reload, which will reload your server.

Let’s add some 3D objects to the scene

In order to use 3D objects you need to import components Viro3DObject, ViroAmbientLight and ViroSpotLight.

Add the following to your import statement

import {
    ...
  Viro3DObject,
  ViroAmbientLight,
  ViroSpotLight,
} from 'react-viro';

Once your done importing create a new Viro3DObject

<Viro3DObject source={require('./res/emoji_smile/emoji_smile.vrx')}            position={[-.5, .5, -1]} scale={[.2, .2, .2]} type="VRX" />

Position the object in space, give it a scale and specify the type — note their are a lot of different object types, and they are all handled differently in viro. For more information on 3D objects, view this doc

Lastly, create an AR Plane

For it to be AR It needs to be positioned well in space, and Viro offers a great solution. In order to do so import ViroARPlaneSelector into the import statement of your react app. And next add the following code into your ViroARPlaneSelector

<ViroARPlaneSelector />

In order to nest the objects in space into the ViroPlane you just wrap the object into the ViroARPlane Selector. And now your all set with a ‘working’ augmented reality project using react.

Here’s a quick demo of your final outcome!

Hope you enjoyed