ReactVR: The Beginners guide to getting started

What is ReactVR

ReactVR aims to help developers to create web-based VR experiences quickly. ReactVR uses JSX syntax. It is a special syntax that resembles HTML. It makes it easy to create components for virtual reality.

Behind the scenes of ReactVR

ReactVR is not a simple mapping of React components to Threejs objects. It has multiple layers.

React VR layer

React VR code layer is the top most layer with which most of the developers will interact. It contains the View, Pano and more components. React Native is used to create this layer.

React code runs in WebWorker and uses message-passing to communicate with the browser window. It helps the main rendering thread to run faster.

React Runtime

React runtime converts React primitives to OVRUI or Threejs objects. It runs on the webpage and supports React abstractions to networking, timers, and async storage. It is used if you need to create custom geometry or shaders using Threejs.

OVRUI

OVRUI is a separate UI library that provides geometry types for Threejs. It includes abstractions for objects that describe text, buttons, and other components to be included in a VR scene. Currently, the library is built to support ReactVR.

OVRUI provides the player UI that you can see in ReactVR. OVRUI initialises the Threejs scene and displays the buttons for fullscreen and for viewing in VR.

Threejs

Threejs provides a simpler interface to WebGL API in the browser. OVRUI create Threejs objects when necessary.

Getting Started in ReactVR

Since ReactVR is still in the pre-release state, you have to download it from here. It contains the samples and the docs for ReactVR. If you already tried our few samples of ReactVR, let’s create our first ReactVR project.

To create your first project, you need to install react-vr-cli from npm.

You can use react-vr command to create your ReactVR project once it’s installed.

Enter vrProject folder and use npm start to start a local server once the process is completed.

The VR component code is sitting in index.vr.js file. If you run this project, you should be able to see a panorama with text hello.

This example is using three components.

• View: View component is the container for ReactVR. In React, the component should only return a single element. Hence, View component should wrap all code.
• Pano: Pano component creates a sphere with 1000m. The source attribute can be used to set the texture of the Pano component.
• Text: Text component is used to display text in the Threejs scene.

Remember that this is a pre-release, so there will be more features and attributes added based on developer feedback once ReactVR is released on Github.

You can view the result in your browser at http://localhost:8081/vr

Viewing ReactVR in mobile

ReactVR can also be used to view VR in mobile. It doesn’t include any polyfill to display stereoscopic rendering when WebVR API is not available. However, WebVR is gaining traction fast, and within a few months, it should be available in the majority of mobiles. For now, it can be viewed on Samsung Internet browser in Oculus store as well as Carmel browser by Oculus. WebVR API is coming to Chrome app for Android in coming months.

If you have a Samsung S6 or Samsung S7, you can use React VR to view the content using Carmel browser.

Make sure the mobile is connected to the same WiFi network as the computer. Then visit http://localhost:8081/vr. If you are using a browser that supports WebVR API like Chrome Beta, then you should be able to view in Google cardboard. If you have Samsung S6 or Samsung s7, then Carmel will ask you to put the phone inside Gear VR. It supports GearVR.

Developing further

With this initial release, you should be able to create different VR experiences that work in browsers with WebVR API. In case the WebVR API is not present, then you can drag around with your mouse on desktops, and using device orientation using mobiles. If you face any issue, then make sure you let the ReactVR developers know at the issues repository.

Once you try out ReactVR, don’t forget to let us know what you think.