Learn React VR (Chapter 1 | Hello Virtual World)

Prerequisites

Understand the basics of React and ES6 as I will be assuming this in all of my chapters.

If you wish to learn the basics of React, I have created an ebook that serves that purpose.

What is This All About?

Before we dive into React VR, I want to explain what Learn React VR is all about.

I recently released an ebook called React.js for the Visual Learner. The creation of that book followed a recent trend of mine, to be a crash test dummy of designer/developer hybrids.

I’m addicted to the thrill of being able to learn something new in design-focused development, go through all the hoops and hurdles, and create content that teaches people what I’ve learned in the most practical way possible.

So far in 2017, I’ve created content to teach about pure CSS images, SVGs, animation libraries, vector graphic design, Vue.js, and most recently React. All of this content has been created as I learn and not after I learn. I love this methodology because:

  1. It forces me to sit down and learn something without getting distracted.
  2. Naturally, the content is very practical, clear, and didactic.
  3. I get to create content that I can sell to make revenue.
  4. You get to learn something in a structured fashion.
  5. You get to avoid the frustrations that I had to encounter when learning on my own.

All of this to say is that I am writing an ebook on React VR. Like my previous ebook on React, I will be writing each chapter as an individual post on Medium and putting it all together as an official ebook at the end.

Really quickly, I want to mention a few things.

  1. I will go into great detail to explain things, even when things that might seem trivial to you. I do this because I rather explain too much than too little.
  2. If I err, it is because I write in a way that may not be technical enough. This may happen as I am often trying to avoid coming off like I am throwing around any buzz words and assuming their meaning. I like to explain concepts using stories, analogies, visual examples, and “this right here is essentially saying….” statements.
  3. React VR is new technology and a territory with a lot of exploration left to do. I will have no experience (other than React) going into the writing process of this ebook.
  4. You will learn much faster if you slow down. I know that sounds backward but I guarantee that if you concentrate on one topic/skill at a time, you will learn at a faster rate than if you try to rush through your huge backlog too rapidly. Concentrate on this book and don’t skim through.

With that said, let’s say hello to the wonderful virtual world that we can explore using React.

Hello Virtual World

In the rest of this chapter, I will provide an introduction to React VR. We will be discussing what it is, how it works, and how to get started with a “Hello Virtual World” example.

What is React VR?

React VR is a framework for building VR apps using JavaScript. It makes use of the same design as React.

Meaning, all the same concepts, features, and benefits of React can now be applied to the creation of VR apps. Awesome!

To provide a refresher, what are the distinct concepts, features, and benefits of React?

React is used for creating single page applications.

With React, we can create single page applications. Instead of going to the server to fetch a new page for a new view (i.e. login page, signup page, pricing page, etc.), all the views are within a single page. We can dynamically toggle on and off the views depending on the state via routing (i.e. show the home page by default and switch to a login view on the click of a link).

This is like toggling between games that are already downloaded onto a PS4 as opposed to having to grab a new cartridge to switch games like you have to with an N64.

This means that we can create applications that are fast.

React is component-based.

Let’s say I told you to make a koala vector graphic like this:

For many people, they might be puzzled on how to go about doing this. It could seem overwhelming.

However, a good artist knows to break things down into smaller components to make things underwhelming and complete each step piece by piece.

React understands this and makes us create user interfaces out of components. We can compose all of the components to create a complex user interface in a manageable fashion.

These components can encapsulate data, methods, lifecycle hooks, and JSX that control what we want to render to the DOM and it can be dynamically updated. Putting all of these components together forms an interactive user interface.

React has declarative syntax.

The syntax for React code expresses what we want to be done as opposed to expressing all the steps to get there. This makes the code more predictable and easier to debug.

React can be used for development across all devices.

Nowadays, desktop applications, VR applications, web applications, and mobile (native) applications can be created using React.

Companies are realizing that it is a better business decision to be able to hire developers who can develop for all devices. They can now hire just one React developer who theoretically could handle VR, desktop, mobile, and web applications without learning separate languages and technologies. This can potentially save a business money from having to find a developer for each specific platform.

This also makes things easier and more exciting for developers. Particularly with React VR, we can dive into creating VR applications without having to reinvent the wheel. This saves time, removes confusion between work and personal projects, and allows developers to test the waters with what might be a skill that they want to focus on.


So, those are the concepts and benefits of React.

React VR builds off of these concepts and benefits but is particularly a framework for creating VR applications.

React VR applications can be used to make VR websites, interactive 360 experiences, and game development.

How React VR Works

React VR makes use of Three.js under the hood.

Three.js is a JavaScript 3D library.

Three.js supports WebGL (Web Graphics Library) which is a JavaScript API that allows us to render 3D graphics in web browsers without plug-ins.

Three.js also supports WebVR which bridges the gap between web browsers and compatible VR headsets. Meaning, we can view what’s in a web browser with devices like the Samsung Gear VR, Oculus Rift, HTC Vive, etc.

React VR also builds off of React Native, a framework for building mobile applications using React’s design.

React Native makes use of the Flexbox Layout which is an alternative to a Grid Layout for positioning elements within a user interface.
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. — Coyier, Chris. “A Complete Guide to Flexbox.” CSS-Tricks. N.p., 21 Mar. 2017. Web. 07 June 2017.
React Native Flexbox Layout Example

In addition to supporting the Flexbox Layout, React Native extends the core React library by possessing predefined core components. Namely, View, Image, and Text.

View defines the layout (that is supported by Flexbox) and allows us to define styles.

In normal HTML, it’d be like doing something like this:

<div class="container" style="width: 50%; height: 50% ..."></div>

In JSX, it would be like doing the following:

<div className="container" style={{background: "#FFFFFF"}}></div>

A View component looks like this:

<View style={{backgroundColor: 'blue', flex: 0.3}} />

The reason that there is a View component instead of a div element is because the React Native code needs to map to the view of whatever platform is running the code. Depending on the device, the platform for viewing will be different. Essentially, the View component does the following logic for us: “Alright! Looks like they want to layout some elements to the view. Well, let me check what platform we are on. Oh! We are on an Android. This is will need to be android.view and not <div>, UIView, etc.”

The Image core component is used to display different types of images.

Again, it is needed to display images for whatever platform is being used. Here’s an example of the component in use:

<Image source={require('./my-icon.png')} />

Like the Image component, the Text component in React Native is also straightforward.

The Text component is used to display text on whatever platform is running the code.

Here’s a basic example:

<Text>Hello World!</Text>

Those 3 core components (View, Image, and Text) are also used in React VR.

React VR also adds a lot of other components:

We will discuss these components throughout this book. For this chapter, let’s just get an introduction to the Pano component.

The Pano component is used for displaying 360-degree panoramic photos.

In VR applications, this photo can be seen from every angle in 360-degrees. For instance, here is one angle that we could see:

We could click and drag and see this panoramic photo from another angle:

Incredible! We will get to play around with this at the end of the chapter. For now, let’s carry on.

Requirements

First off, let’s discuss the requirements.

Note that we do not need any VR devices to create and view React VR applications.

To see the devices and browsers that are compatible with WebVR (the bridge between our app and VR devices), you can look at their site.

Firefox Nightly has the best browser support for VR applications in general. Oculus Rift and HTC Vive are both compatible with Firefox Nightly.

Once you have taken care of the requirements, let’s move along.

Hello Virtual World Example

Project Installation

To create a React VR project, we can use React VR CLI (command line interface). This will allow us to great a React VR project through command line.

In order to use it, we have to install it globally using npm:

npm install -g react-vr-cli

Note: you may need to run this as administrator.

Once this has completed, we can initialize a new project (which we will call HelloVirtualWorld) like so:

react-vr init HelloVirtualWorld

While we still have our command line open, let’s get into our new project folder:

cd HelloVirtualWorld

Project Configuration

Next, let’s open the project folder in Atom.

There are a few things going on here which we will cover on a high level.

First off, we have a node_modules folder with our packages, a package.json file with information about our app, and a static_assets folder that will contain things like static panoramic photos. Nothing too new is going on here.

In normal React, index.js is used to specify the top/entry level of our React application that contains all of the different views within the application (those views contain all of the components that make up the user interface).

In this file, we can see the React VR code:

Here, we can see the use of the View, Pano, and Text components we mentioned earlier. Notice that an ES6 class is being used to define this component so our project is prepackaged with Babel.

If we look at .babelrc, we can see the presets for Babel:

{
"presets": ["react-native"]
}

React VR has its code preprocessed by the React Native package. Recall, React VR code is built off of React Native. Essentially, this is just saying “Hey! We are going to make use of ES6. Babel, could you make this compatible for browsers for us? By the way, our code is going to be built on React Native so you don’t get confused.”

Going back to our index.vr.js file, the following line takes our root component and bunldes it:

AppRegistry.registerComponent('HelloVirtualWorld', () => HelloVirtualWorld);

We do not need to use ReactDOM like standard React.

Now, let’s take a look at the vr folder. This folder contains client.js and index.html.

client.js contains code that initializes (fires up) our application. Specifically, it has a function called init which initializes the React VR application to the browser when called.

This function is called from index.html. The bundled code (the final code after Babel and other preprocessing stuff are applied to the index.vr.js code) is passed to the init function. The React VR app that is initialized is then in injected into the body of the DOM:

<script>
// Initialize the React VR application
ReactVR.init(
// your compiled index.bundle.js
    '../index.vr.bundle?platform=vr&dev=true',
    // Attach it to the body tag
    document.body
);
</script>

Running Our Application

Enough with the explanation, I bet you just want to see what it looks like already!

In command line, go ahead and run the following:

npm start

In Firefox Nightly, you can then navigate here:

http://localhost:8081/vr/

We should see the following:

Now, click and drag to explore every angle.

Woah!

Let’s go back to our React VR code found in index.vr.js to see how this was rendered.

The entire room is just a static image specified in the Pano component:

<Pano source={asset('chess-world.jpg')}/>

This selects the source of our panoramic image as chess-world.jpg which is in our static_assets folder.

If you open chess-world.jpg from Atom and adjust the zoom to 40%, you will see the following:

This is the static photo that is rendered in 360-degrees in our application. This is one of 2 types of panoramic images that we can use. It is called Equirectangular panoramic. These images can be taken by special 360 degree cameras.

While we’re at it, let’s replace this with a different photo.

After some Googling, I found that a great resource for these types of photos is Flickr. Go Flickr and search “equirectangular”.

This will pull up a whole host of compatible panoramic photos that we can use:

There’s one photo that I found that was amazing. Let’s go ahead and use it. You can grab it here.

Download the photo at the highest resolution, rename it to horseshoe-bend.jpeg, and add it to the static_assets folder.

Next, we will update the Pano component like so:

<Pano source={asset('horseshoe-bend.jpg')}/>

Cool!

Now, let’s examine the Text component:

<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
fontWeight: '400',
layoutOrigin: [0.5, 0.5],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>

Here, we are saying that we want to render hello with the inline styling options. Everything should be straightforward with exception to the transform, layoutOrigin, and the units.

The distance and dimensional units for React VR web applications are meters.

layoutOrigin specifies the top and left values of our text box in relation to the world. 0.5 and 0.5 specify that we want it centered horizontally and vertically within the world like so:

The transform is an array containing a translate object that has an array of three values: X, Y, and Z. By putting a negative Z value, we are controlling the depth of our text. The larger the negative value, the farther away the text will appear.

If we updated our transform, then the text would appear further away.

Update your transform like so:

transform: [{translate: [0, 0, -5]}],
//will appear farther away than to -3

Leave the transform as is for now. However, update the value of our text from hello to Hello Visual World.

Lastly, we have a View component wrapped around our Pano and Text Component. Again, we can think of this like the outer <div> tags in standard React.

Now, let’s see the updated text and panoramic image.

You should be able to go back to Firefox Nightly and refresh the page to see the updates:

Hello Visual World Demo

Awesome! You have now been introduced into the React Visual World!

Final Code

Available on Github

Concluding Thoughts

Learning React VR is incredibly thrilling. Since it is new technology, there’s a rush to want to explore and discover the potential. Fortunately, I will be continually writing more chapters so you can do that in a structured manner.

In our next chapter, we are going to tackle making an interactive web experience using components with encapsulated static panoramic photos.

Chapter 2

Chapter 2 | Panoramic Road Trips is now available.

Support the Author

If you would like to support me as I write this book, you can purchase the book here.

The book is published through a platform called LeanPub which allows me to update my book as it progresses. Each time a chapter is added, you will be notified via email. The book will be free to read on Medium, however, purchasing it through LeanPub allows you to download the ebook as a PDF, EPUB, or MOBI file and helps support me financially.

Additionally, I have created a special package that will provide you with a secret link to a Discord server where you will be able to help influence how I write this book.

So go ahead and purchase this book on LeanPub if you would be so kind.


Cheers,
Mike Mangialardi
Founder of Coding Artist