Facebook diversifies VR development with JavaScript framework React VR

Facebook extends the React family of development tools to VR, diversifying and expanding VR development to the large JavaScript community

Facebook diversifies VR development with JavaScript framework React VR
Credit: Facebook

If Rodney Dangerfield were an engineer, he would insult tool makers because inventors get respect, but tool makers none. Everyone remembers Thomas Edison for the invention of the light bulb and phonograph, but no one remembers Edison’s tool maker, Thomas Watson, except that Edison once recorded beckoning him on a phonograph cylinder.

Like Watson, web development tool JavaScript gets no respect from some people who consider themselves serious developers. Nevertheless, JavaScript persists because it is the core to responsive web pages and because it is the most widely understood and used programming language in the world outside of the enterprise. It has also proved extensible, adapting to new uses faster than its critics can disparage it.

+ Also on Network World: Facebook beats Apple to the punch with AR announcement +

Facebook’s introduction of the React VR open source library, announced this week at Facebook’s F8 developer conference, brings a new virtual reality (VR) development framework to the large community of people who know JavaScript. JavaScript is so widely used, like Python, that the language is not limited to just programmers. It also builds on React, a popular, Facebook-supported, open-source library introduced in 2013 that is used to build web interfaces, and React Native, a popular, Facebook-supported, open-source library introduced in 2014 that is used to create shared code for Android and iOS apps.

Anyone familiar with React, React Native or JavaScript will feel comfortable creating a VR experience with React VR without having to learn one of the VR authoring tools, such as Unity or the Unreal Engine. Facebook has promoted the React tools to be “learn once, run everywhere (LORE),” a play on the write once, run everywhere (RORE) metaphor used by Sun Microsystems to promote Java. The same React VR app will run on head-mounted displays (HMD) such as the HTC Vive, mobile HMDs such as Google Daydream and Samsung Gear VR, and in a web page presented like a 360-degree video.

In its first release, React VR is not nearly as robust as Unity or Unreal. But it has an advantage. For the right-sized application, web designers and developers can use React VR to easily build a VR experience. It seems like this first release is designed for building 360-degree video experiences. Scripted animations are described in the documentation, but this was not stressed during the F8 talks.

The British Museum built a virtual tour of a gallery, integrating the audio from its in-person tour. It includes points of interest that, when selected, display textual information or transport the user to a new part of the VR exhibit experience. Also, art objects rendered in Sketchup and imported into the app can be picked up, rotated and examined. The 46-second video below previews the Museum’s app:

The New York Times also built a VR experience of the underwater Antarctic ice shelves previewed in the below 31-second video:

The development of 360-degree video and other more robust animated experiences with authoring tools Unity or Unreal takes an upfront investment in learning to an entirely different platform. Both of these authoring languages were repurposed from PC game development to speed time to market for both the Oculus Rift and the HTC Vive, and they have since been repurposed for every VR platform. Given their PC heritage, learning Unity and Unreal is a step function, requiring proficiency in C# or C++, two hard-to-learn languages that people who regularly use JavaScript tend not to use proficiently.

The pool of Unity and Unreal developers is growing, though still relatively small compared to other development fields. A good back-of-the envelope measure of the potential for VR development with JavaScript frameworks like React VR is to compare the 1,000 VR app experiences in the HTC Vive store to the approximately 5 billion web pages.

Immersive HMD experiences

Familiar JavaScript APIs such as WebGL and WebVR are used to create immersive HMD experiences with a scene that is essentially web page. The same web page is automatically repurposed for mobile phones and PCs, presumably by the response of the browser’s media agent. Accelerometers on mobile phones serve to navigate through the VR experience, and the cursor and mouse are used on a PC.

React components can be used to compose scenes in 3D, combining 360 panoramas with a 2D UI, text and images. Because it is component based, the inherent design language either adopted from React or created by the VR designer remains consistent and can add brand design and brand recognition that will be applied to subsequent VR experiences. An inherited benefit from JavaScript is the impact of code changes can be seen immediately by simply refreshing the page. 

The rendering of the pixels into video needs to be fast—60 frames per second—or the user could feel the discomfort of motion sickness. The VR logic and the rendering of 360-degree video run in separate contexts, with an asynchronous bridge for communication between them. The scene is rendered in 3JS in the main window, keeping a tight loop between receiving headset orientation updates and re-rendering the scene to match the expected scene with the head movement. By design, a text annotation will be delayed instead of slowing the constant VR HMD display rate.

React VR diversifies VR development, breaking with the VR authoring tools repurposed from the Game industry. The VR development toolchains could use new approaches that improve VR experiences and expand the scope of the type of problems that can be solved. This is the first release of React VR available on Github. Its capabilities likely cannot compete with the mature authoring tools, but it might—especially if open-source-minded developers adopt and contribute to enhancing it and hardware continues to become powerful.

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Must read: 10 new UI features coming to Windows 10