Book Image

Getting Started with React VR

By : John Gwinner
Book Image

Getting Started with React VR

By: John Gwinner

Overview of this book

This book takes you on a journey to create intuitive and interactive Virtual Reality experiences by creating your first VR application using React VR 2.0.0. It starts by getting you up to speed with Virtual Reality (VR) and React VR components. It teaches you what Virtual Reality (VR) really is, why it works, how to describe 3D objects, the installation of Node.js (version 9.2.0) and WebVR browser. You will learn 3D polygon modeling, texturing, animating virtual objects and adding sound to your VR world. You will also discover ways to extend React VR with new features and native Three.js. You will learn how to include existing high-performance web code into your VR app. This book will also take you through upgrading and publishing your app. By the end of this book, you'll have a deep knowledge of Virtual Reality and a full-fledged working VR app to add to your profile!
Table of Contents (20 chapters)
Title Page
About the Author
About the Reviewers
Customer Feedback

Rendering hardware

To avoid VR sickness, you need a fast frame rate. What is frame rate? This is how fast your computer can generate the images on the screen. A lot depends on the complexity of the scene, of course; showing a cube and a box is a lot faster than showing the city of Los Angeles with all of its buildings.

You can control this, of course, when you design the VR world you will implement.

Each image has to be generated, in real time. Most VR headsets try for 90 Hertz. Hertz refers to the frequency - in cycles per second, or in this case, frames per second.

The difficulty of VR is that nothing can slow down this frame rate. If something has to load, or a web page fetched, if you slow down the frame rate slightly, people get woozy.

There are two ways to speed up the frame rate. One is to have less scene complexity, the other is to have a fast computer.

A classic line in the Movie Jaws is when they discover that the shark is much bigger than they expect and it tears up their boat. Roy Scheider says, "You're going to need a bigger boat."

To view VR, you're going to need a bigger computer.

Fortunately, computers keep get faster and faster. By computers, we also mean high-end smart cell phones. For the worlds we build here, a reasonably fast smart phone should be OK.

Scene complexity is a bit of a dilemma; you want a rich, detailed virtual world, but you also want that virtual world to render quickly. By render quickly, we mean 90 frames (updates) per second, as discussed previously. You also need to know your target audience in terms of hardware support. Are they all on high-end PCs with pairs of thousand dollar video cards? (somewhat an overkill; I'm making a point here.) Or are they on last year's cell phone models with a $10 cardboard box and some lenses? If you know your potential target audience, you can develop a VR application that works well with their system.

The United States Marine Corps has a saying: "Train as you would fight." During World War Two they practiced the combat operations of amphibious landings off the coast of Southern California. When they had to do this during the War in the Pacific, they hadn't planned for coral reefs. As a result, they developed a doctrine that you should train people in the same, or reasonably similar, environment that they were expected to fight in.

While a good VR experience is (hopefully) not life or death, this is still valuable advice. If you think most of your customers or consumers of your VR app will be on last year's cell phone, then test with last year's cell phone. If you think they will be on high-end PCs, test with a high-end PC.

Don't assume, if your VR app is slow, that customers will have much better computers and everything will be okay. Get something similar to what they use, and then you will suffer through the nausea and vertigo before your customers will, and then recode or simplify your scenes to be fast enough.

How much hardware is enough? For that, you should consult the minimum specifications of the headsets you plan to target. As this can change, I won't summarize it in this book, but the guidelines that different VR manufacturers give is good advice.

You may need a bigger PC (or cell phone); this is the price you pay to be an early adopter!

How to view VR?

To view VR, you need some type of headset or HMD. In the old days VR was also characterized by 3D images on 2D screens. In effect, VR back then meant any 3D program viewed with any device — basically sitting in front of your PC like normal, but this is not truly immersive. Today, VR means with an HMD/headset; so to view one, you need a headset.

Ironically, React VR works fine in a browser as a 3D world as well, and could be used to make parallax–capable web pages, although that's a bit overkill.

VR can be dangerous

You probably think, this is pretty safe. However, one VR headset came with 33 pages of warnings. Read them.

Most of the warnings are common sense, for example, don't wave your hands around if you are next to things or people. With what are essentially blinders on, you can really smack your hand. Philosophically, I don't believe in the nanny state, but you can really get hurt with VR. Imagine if someone gave you a blindfold, told you to put it on, and then wander around your house. You might be a little uncomfortable.

That's about what we're going to do in this book, except with the added wrinkle that you'll be wandering around in a state of wonder and excitement. There are plenty of YouTube videos where people smash walls, run into them, knock over lamps, and so on. They look silly, but when you have an HMD on, you are totally immersed in the virtual world and wouldn't think of pulling your punch. So, make sure you clear out of the room and warn friends not to come in.

This includes your furry friends. It's more difficult to keep out pets of your VR area, but a good idea as they won't understand that HMD has distracted you, and you can't see them. If you can find a way, it would be a good idea to prevent them from getting underfoot or you may step on them inadvertently.

VR is safe; use responsibly.

VR Headset options

With WebVR, there are a few options. I'll keep this to the simplest, most available headsets. You can certainly use Open Source Virtual Reality (OSVR), which is actually a hardware platform, but you'll need to figure out what browser to use, and so on. Some of the terms, such as Gaze, will be covered later in the UI section. For now, Gaze movement means you need to stare at something for the UI to move you there or for you to select an object, typically. 

Here are the various mainstream WebVR options (you can read about this at





Gear VR (Mobile)

1 handheld, HMD



Daydream VR (Mobile)

1 handheld



Cardboard/other headsets

None (click possible)

Gaze selection


HTC Vive

Tracked, 2 controllers

Walk around


Oculus Rift 2 Camera


Gaze Selection


Oculus Rift 3 Camera

Tracked, 2 controllers

Walk around


Types of headsets

Broadly characterized, they can be a PC-connected headset or a mobile headset. Some types of stand alone headsets, such as the Hololens or Vive stand–alone VR headset, include a fully working PC, so they are really more like a mobile headset, but don't require a PC.

Mobile headsets

Mobile headsets really just use your cell phone to display their data and put you into the VR world. As such, the performance is entirely based on what your cell phone can do.

This is a time when bigger really is better.

There is a limit though; there are some headsets that use tablets, but they are extremely heavy and don't really offer any advantages over a smaller mobile device.

While you use a mobile headset, you'll have battery life, weight, and control issues. There are various VR controllers in the market, as well as bundled options such as the Samsung Gear VR and Google Daydream, which include a controller as well as a case you put your phone into.

The nice thing about these bundles is that the phones are generally certified to work correctly and the software is easy to use. You can build your own VR headset/controller combination.

Mobile headsets can also be as simple as a box with some lenses in them, although there is actually a lot of math in the sizes and specifics of the optics. The most commonly referred to one is Google Cardboard; Google doesn't sell them directly but companies can implement Cardboard viewers. There is also the Unofficial Cardboard as well as a number of reasonably priced better built holders that you can put a cell phone into.

Generally speaking, most of them do not have sensors. Some have a small lever that will touch the screen, allowing some controls other than movement.

You can also purchase separate Bluetooth controllers, although they will most likely not have three–dimensional positioning. We cover different types of controllers in Chapter 11, Take a Walk on the Wild Side.

Some VR headsets work with glasses and some do not--a lot depends on your face size, the size of the glasses you use, and your exact vision issues. I have both a nearsighted eye and a farsighted eye, and do not need glasses (for either eye!), but your mileage may vary. I highly recommend trying out a headset before purchasing, or purchasing from a source that has a good return policy.

At the high end (of mobile headsets), there is the Samsung Gear VR and Google Daydream. These offer a well–constructed headset, which you again put a cell phone into, as well as a separate controller.

The controller is the most important part of this (although the headset is also worth it as they are much more comfortable than even the best Cardboard viewers). The controller in both the Daydream and Gear VR bundles are Bluetooth, meaning wireless, and are sort of tracked.

They have sensors in them that will detect movement, but are not precisely positioned in space. As a result, they have center buttons on them. This is because the type of three-dimensional positional sensors in these units will drift over time. In the VR world, it will seem as if your hand/control/gun (or whatever visual representation the controller has) will drift away from you or even move behind you! This can be very disconcerting. If/when this happens, merely use the appropriate button to recenter your controller.

Higher–end PC setups have different types of tracking, and re-centering is not usually required. However, note that they need initial calibration/setup and can have tracking issues as well.


Notes on GearVR  A few things with the GearVR I did a little wrong. There's an extra elastic strap that I thought was for slack or something; its not. They tell you to put the straps on, but neglect to mention this extra strap is to hold the controller. Flip ahead to the controller part before putting the straps on the headset. The controller should actually be the part you fiddle with first. You need to pair it and carry out some downloads, and that can't really be done when the headset is on, so do this part first.

PC, Mac, and Linux headsets

Most people think choosing a PC headset will be between the HTC Vive or the Oculus Rift, but there are dozens or hundreds of PC type headsets.

All of them will perform based on how well your PC performs. Folks, this is where a Mac has a bit of a disadvantage; you need a fast video card, and Mac's typically are fast enough for graphics and some game play, but not for VR. However, Apple has introduced VR ready PCs. When you decide what platform to do React VR with, consider this.

As this is written, Mac support for the Oculus Rift or HTC Vive is experimental at best, so the steps and examples will assume you are using a PC. Linux support was promised for several of the headsets, but as this book is written it is experimental at best. If you are using Linux, you will need to check the documentation and/or follow along the Windows examples as best you can.

Most of the React VR demos have simpler geometry than a lot of VR worlds, so they will run on comparatively smaller hardware. Check with the manufacturer of your headset for minimums; don't think you can get by with less than the minimum. You'll get sick or have a less than comfortable experience.

Of the whole marketplace, there are really just two headsets we will cover in this book; the HTC Vive and the Oculus Rift. If you have a different headset, the samples should work OK, but you may need to fiddle with them slightly.

Generally speaking, PC, Mac, and Linux headsets will work with Firefox or an experimental browser,  An experimental version of Chrome (Chromium) may also work to view WebVR. See the complete up to date list at