React 360 by Example: Part 2

Dissecting the the Hello World code; exposing core concepts.

This article is part of a series starting with React 360 By Example: Part 1.

note: The final result of this article is available in the photo branch of the repository larkintuckerllc/hello-react-360.

360 Photos

The most visible aspect of the previous example is the background scene; the floor, the mountains, and the sky.

Turns out that this background scene is provided using a 360 photo.

React 360 is optimized for the presentation of 360 (and 180) photos and videos. These are essential for creating an immersive environment, and allow you to seemingly transport your user to a virtual location. Because they are an important part of interactive 360 experiences, there are many ways to control the current background.

— React 360–-360 Photos and Videos

The most common 360 photo format is the 360 mono equirectangular photo format, e.g., the 360_world.jpg (4096 x 2048 pixels) that ships with React 360.

Drawing these manually, however, is prohibitively difficult; described in the article Guidelines for Drawing Immersive Panoramas in Equirectangular Perspective. Rather one can easily generate them from a 3D scene or from a 360 camera.

Equirectangular Photo from a 3D Scene

While this is outside the scope of this article, the article How to Use Unity 2018.1 to Capture Stereoscopic 360 Images and Videos provides instructions on generating an equirectangular photo from a scene. Was fairly easy to follow; even to an Unity newbie like me.

In the following example, I followed the instructions to render a photo of four objects around the camera.

Equirectangular Photo from 360 Camera

While there are specialized cameras, e.g., the Ricoh Theta, that can generate equirectangular photos, the Google Street View application, available on iOS and Android, can also generate them.

For example, I used the iOS Google Street View application to generate an equirectangular photo of my living room.

Using Equirectangular Photos

Now that we have an equirectangular photo, how do we use it in our React 360 application? Essentially there are two ways to accomplish this, we can set it at compile time in the client.js file or at run time in our React code; both approaches are documented in React 360: 360 Photos and Videos.

In our case, we will set it at compile time by placing the equirectangular photo in the static_assets folder and updating client.js:

...
r360.compositor.setBackground(r360.getAssetURL('3d_scene.jpg'));
...

Surfaces and React 360 Components

In addition to the background scene, the previous example has text, Welcome to React 360, centered in the initial view. In order to understand how this is being displayed, one needs to step back and first understand surfaces and their relationship to React 360 components.

Outside of the setting the background, the client.js code renders a React 360 component (index.js) to the default surface.

...
r360.renderToSurface(
  r360.createRoot('hello_react_360', { /* initial props */ }),
  r360.getDefaultSurface()
);
...

So, what is a surface and what is the default surface?

Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of physical dimensions. They are optimized for legibility, and rely on the same principles that Oculus uses for its user interfaces. Surfaces are defined in terms of the height and width of their pixel content, as well as the density of those pixels in physical space. React 360 takes all of this information and produces a 3D object with the appropriate dimensions. Currently there are two different shapes of Surfaces: Cylinder and Flat.

— React 360 — Surfaces

A cylinder surface is a projection onto the interior of a cylinder with a 4 meter radius.

note: We will cover flat surfaces in a later article.

The default surface is a cylinder surface with a density of 4680 pixels (pixels per 360 degrees), 1000 pixels wide, and 600 pixels high. Doing the math, this surface take up approximately 75 degrees in the field of view.

So what is a React 360 component?

A React 360 component is an composition of three types of pre-defined components (yes, React 360 has a limited set of pre-defined components):

• View: The most fundamental component for building a UI, View is a container that supports layout with Flexbox, appearance styling, and input events
• Image: A React component for displaying 2D images on a surface
• VrButton: The VrButton is a utility class that detects click-type actions across a variety of input devices

While not relevant to surfaces, one additional component, Entity, allows one to render externally defined 3D objects into the scene (a topic for a later article).

Finally, one oddity is that React 360 connects components to surfaces using an AppRegistry (mapping between names and components).

Examining the Component

With the general concepts in mind, the construction of a React 360 component is fairly straightforward, e.g., index.js:

Observations:

• Styling is applied using the style property
• Layout is based on flexbox
• As this is still React, components can have state and one can use many third-party libraries that are compatible with React, e.g., Redux

Next Steps

We continue our exploration of React 360 in the next article, React 360 by Example: Part 3.