React 360を覗く

React 360とは

React 360は、Facebook社製の3DおよびVR空間上のユーザーインターフェイスを実装するためのフレームワークです。Reactの上に構築されており、Reactユーザーなら馴染み深い様々なエコシステムを利用して開発していくことができます。

もともとはFacebookとOculusが共同でReact VRというJavaScriptライブラリをリリースしていましたが、Oculusが独自にC++実装によるネイティブバージョンを開発しはじめたため、混乱を避けるためにオープンソースのReact VRをReact 360に改名しました。

React 360
https://facebook.github.io/react-360/

Githubを見るとStar数は6000以上になっており、HMDの普及によって最近注目度が高まっています。

アーキテクチャ

React 360のアーキテクチャはReact Nativeのそれとよく似ています。
React NativeはネイティブのUIスレッドとは別にReactアプリケーション実行用のJSスレッドを立ててその橋渡しとなる非同期ブリッジを提供します。
React Nativeレンダラは、Reactコンポーネントがレンダリングされると、UIアップデート情報をシリアライズし、非同期ブリッジを介して送信します。UIスレッドはこの情報を受け取ってデシリアライズし、それに応じてネイティブUIを更新します。

これと同様にReact 360ではメインスレッドとは別にWebWorkerスレッドを立て、Reactアプリケーションコードを実行します。(React 360はブラウザ上で動作するため、先のUIスレッドがブラウザのメインスレッドにあたります。)
Reactアプリケーションコードはメインスレッドとは別のスレッドで実行されるため、requestAnimationFrameのパフォーマンス(FPS)を向上させます。別スレッドであるがゆえwindowやdocumentは参照できないので注意です。

React 360のプロジェクトは以下のコマンドで作成できますが、

react-360 init プロジェクト名

作成されるclient.jsがメインスレッド用、index.jsがWebWorkerスレッド用になっています。

レンダリングの仕組み

React Componentがレンダリングされると、必要なUIアップデート情報をReact Nativeが提供する非同期ブリッジによってメインスレッドに通知します。(postMessage)
React 360はOVRUIと呼ばれるOculusのライブラリを利用して、UIアップデートのペイロードをThree.jsコマンドに変換し、WebGLを使用して3DシーンをCanvasにレンダリングしています。

A-Frameとの違いは？

React 360はよくA-Frameと比較されます。
結局どっちつかったらいいの?といった疑問もちらほら見かけます。

A-Frameの最大の特徴はHTML(Web Components)ベースで実装できるのでJavascript詳しくない人でも簡単にコンテンツが作れてしまうところなのかなと思います。あとは視覚的に3D空間を編集できるA-Frame Inspectorが使えるところでしょうか。
個人的な感想ですが、インタラクションを伴う複雑なUIを構築したい場合はReact 360、パノラマViewなどちょっとしたVR体験をさせたい！といった場合はA-Frameを選択すればいいんじゃないかなと思っています。(いまのところ)

aframe-react

最近はA-FrameをReactで扱えるようにしたaframe-reactなるものもあるようで、React 360と似てるけど何が違うの？みたいなissueがありました。
このissue(https://github.com/facebook/react-360/issues/18) でFacebookのamberroyは以下のように答えています。

• React 360アプリケーションはJavaScriptで書かれ、JSXタグはJSに変換されます。 A-FrameアプリケーションはHTML(カスタムHTMLタグ)を使用します（これをメリットととるかデメリットととるかはあなたがJSとHTMLどちらで作りたいかによります）

• React 360はReact Nativeの上に構築され、WebVR用のJSランタイムを備えていますが、aframe-reactはReact JSとA-Frameをブリッジするためのただの薄いレイヤーです。

React 360とaframe-react、表面上はよく似ているのですがランタイムが全く違うので、React Nativeの恩恵を受けたい場合はReact 360を選択するでいい気がします。

所感

React 360ってゲーム作れるのかな！と思って調べ始めましたが、そもそもゲーム向けにデザインされてるものではないですね、。
簡単なゲームなら作れそうですが、ローラーコースターみたいなコンテンツを作りたい場合はもう、直接Three.jsのAPI使ってゴリゴリ書く方が自由度高そうです。

まぁでもReactのエコシステムに乗っかってVRコンテンツを作っていけるのはだいぶ嬉しいですし、めんどくさかったVRディスプレイの検出周り(getVRDisplays)やVRシーンへの切り替え(requestPresent)を気にすることなくやってくれるので非常に便利です。

パフォーマンス面もちょっと気になるので、それはまた今度書いてみたいと思います。