WebVR開発フレームワーク「React VR」

「React VR」は、その名前からもわかるようにReactでVRコンテンツを作成するためのフレームワークです。Reactのコンポーネントを組み合わせて、VRコンテンツを構築していきます。

• React VR | A framework for building VR apps using React

Reactは、Facebookが中心となって開発しているUIを構築するためのJavaScriptのフレームワークです。特徴は、コンポーネントと呼ばれる部品をHTMLのようなJSXという構文で書き、さまざまな状態に合わせてコンポーネントを組み合わせてUIを構築するような仕組みとなっていることです。

「React VR」は、この「React」の作法に則ってVRコンテンツを構築できるようになっています。つまり、Reactの知識があれば、これまでよくわからないと言う理由で手の出しにくかったVRコンテンツの開発に携われるようになると言うわけです。とてもワクワクしますね。

今回の記事では、React VRを使って、Hello Worldを表示させるところから、サーバーにアップロードしてWebページとして公開するまでの方法を紹介してきます。

React VRのサンプルを表示「Hello World」

早速ですが、React VRでサンプル「Hello World」を表示するまでの流れを紹介していきます。（詳しい内容は次回以降で書いていきます。three.jsの知識などほとんどないので、しっかり説明できるように目下勉強中です。）

なお、これから説明する内容を実行するには、お使いのパソコンにNode.jsがインストールされている必要があります。Node.jsのインストールについては詳しく書きませんので、当ブログの以下の記事などを参考にご自身でご用意いただければと思います。

• nodebrewを使ってMac OSX環境のNode.jsを管理する – maesblog

それから、以下のReact VRの公式ドキュメントに掲載されている内容に沿って説明していきますので、こちらも併せてご確認いただければと思います。

• Getting Started | React VR

react-vr-cliのインストール

Reactの開発でもそうですが、現在のフロントエンドの開発環境の構築は複雑になりつつあります。まずこの「react-vr-cli」をインストールしますが、この「react-vr-cli」はコマンド一発でReact VRの開発環境を構築してくれる大変便利なツールとなっています。

Windowsならコマンドプロンプト、Macならターミナルを起動して、以下のコマンドを実行します。システム上にreact-vr-cliがインストールされ、お使いのパソコンで「react-vr」コマンドが使えるようになります。

$ npm install -g react-vr-cli

※当記事の執筆時点のreact-vr-cliの最新バージョンは0.3.1です。

ReactVRプロジェクトの作成

react-vr-cliをシステムにインストールしたら、さっそくReact VRのプロジェクトを作成します。プロジェクト用のディレクトリを作りたい場所に移動して、以下のように「react-vr init （プロジェクト名）」コマンドを叩きます。initの後ろの部分は任意のプロジェクト名を指定します。コマンドが実行されると、React VRの開発環境が構築された状態でプロジェクトディレクトリ（ここではWelcomeToVRディレクトリ）が作成されます。

$ react-vr init WelcomeToVR

Creating new React VR project...
Project directory created at WelcomeToVR

Copying assets...

Installing dependencies...
yarn install v0.17.8
info No lockfile found.
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/babel-jest: connect ETIMEDOUT 104.16.62.173:443".
info If you think this is a bug, please open a bug report with the information provided in "c:\\xampp\\htdocs\\WelcomeToVR\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
`yarn` exited with code 1. Try fixing the errors above and run `yarn` from within WelcomeToVR again.

作成されたプロジェクトディレクトリには、以下のようなファイルやディレクトリが含まれています。

React VRプロジェクトの起動

React VRのプロジェクトディレクトリを作ったら、そのディレクトリに移動し、「npm start」コマンドを叩きます。開発用のローカルサーバーが立ち上がります。

$ cd WelcomeToVR
$ npm start

今回私が試した環境では、react-nativeがインストールされていないといった警告が出て、ローカルサーバーの起動に失敗しました。このような警告が出た場合は、以下のように「npm install」コマンドを叩いて、プロジェクトに不足している依存パッケージをプロジェクトディレクトリ内にインストールしてください。

$ npm install

再度「npm start」コマンドを叩きます。

$ npm start

特に問題がなければローカルサーバーが起動します。環境によっては起動するまでに1~2分ほど時間がかかります。ブラウザのアドレスバーに「http://localhost:8081/vr」を入力して、エンターキーを押します（npm run openコマンドを叩いてもOKです）。こちらも画面が表示されるまで多少時間がかかります。

特に問題がなければ、以下のような画面が表示されます。

ぐるぐる画面を動かすことができます。動きはけっこう滑らかです。

react-vr-cliで用意されているnpmコマンド

package.jsonファイルを確認すると、scriptフィールドに以下のコマンドが登録されています。

[npm start] コマンド

開発用のローカルサーバーを起動するためのコマンドです。ブラウザで「http://localhost:8081/vr」にアクセスすると、開発中のVRコンテンツを確認することができます。

ちなみに、「http://localhost:8081/vr/?hotreload」としてアクセスすると、HMR（Hot Module Replacement）に対応してくれます。index.vr.jsファイルを変更して保存すると、変更内容が直ちにブラウザに反映されるようになります。

[npm run bundle] コマンド

製品版（Production Release）としてビルドするためのコマンドです。詳細は当記事後半で紹介します。

[npm run open] コマンド

既定のブラウザの新規タブを開いて、開発用のローカルサーバー「http://localhost:8081/vr」にアクセスするためのコマンドです。ターミナルから直接コマンドを叩いてページを開くことができます。

[npm run devtools] コマンド

Reactのデバッグツール「react-devtools」を起動するコマンドです。以下のようなウィンドウが開きます。

開いたreact-devtoolsの画面にも記載がありますが、react-devtoolsを使ってReact VRのコードをデバッグするには、<script src=”http://localhost:8097″></script>または<script src=”http://10.0.1.10:8097″></script>をReactのDOMのコードよりも先に読み込ませるようにします。

[npm test] コマンド

テストを実行するコマンドです。テストフレームワークはjestが使われています。

Hello Worldのソースコード

このサンプルのソースコードはプロジェクトフォルダ内の「index.vr.js」ファイルで確認可能です。中身を見てみると、ちゃんとReactの構文で書かれていることがわかるかと思います。コンポーネントも「View」コンポーネントや「Text」コンポーネントなどReact Nativeでお馴染みのコンポーネントが使われているのがわかるかと思います。

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
} from 'react-vr';

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

使用されているコンポーネントについて

Viewコンポーネント

Viewコンポーネントは、UIを構築する上で基本となるコンポーネントです。flexbox、style、タッチ操作、アクセシビリティのコントロールを含むレイアウトをサポートするコンテナの役割を担います。Viewコンポーネントは、React Nativeが動くプラ​​ットフォームであれば、UIViewであろうが<div>であろうがandroid.viewであろうが、どこでも同じようにネイティブビューに直接マップします。

Viewコンポーネントは他のビューの中に入れ子になるように設計されており、任意のタイプの子コンポーネントを0個以上持つことができます。

• View – React VR

Panoコンポーネント

VRコンテンツに360度画像をレンダリングするためのボックスを作るコンポーネントです。Hello Worldのサンプルで実際に見回すことのできる空間はこのPanoコンポーネントを使って実装しています。

• Pano – React VR

Textコンポーネント

Textコンポーネントは、テキストを3D空間にレンダリングするためのコンポーネントです。入れ子とスタイリングをサポートします。将来的には、親のText要素からスタイリングを継承するようになる予定です。デフォルトでは、空間の中心に大きく配置されるようにスタイル設定されています。

• Text – React VR

AppRegistryについて

AppRegistryは、今回の例で言うと、Hello WorldのサンプルであるWelcomeToVRを新しいコンポーネントとして定義し、アプリ全体のルートコンポーネントがどれかをReact VRに伝えてくれます。つまりReactで構築したコンポーネントの塊を、React VRアプリとして出力するために必要なものとなります。公式ドキュメントには、そこまで深く考える必要はなく、とりあえずコピペしておけば良いと書いてあります。

• Hello World#AppRegistry – React VR
• AppRegistry – React VR

index.htmlについて

index.htmlファイルは以下のようになっています。

<html>
  <head>
    <title>WelcomeToVR</title>
    <style>body { margin: 0; }</style>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <!-- VRアプリをブラウザにレンダリングするためのファイルを読み込みます -->
    <script src="./client.bundle?platform=vr"></script>
    <script>
      // React VRアプリの初期化
      ReactVR.init(
        // VRアプリを読み込みます
        '../index.vr.bundle?platform=vr&dev=true',
        // bodyタグに紐付けます
        document.body
      );
    </script>
  </body>
</html>

製品版としてビルドしWebで公開する

React VRはWebVRコンテンツを作成するためのフレームワークなので、React VRで作成したコンテンツは最終的にはWebで公開することになるはずです。React VRにはWebでVRコンテンツを公開するための機能が用意されています。

• Publishing Your Project – React VR

VRコンテンツをWebで公開するには、以下のコマンドを叩いて製品版としてビルドします。

上記のコマンドが実行されると、vrディレクトリ内にbuildディレクトリが作成され、さらにその中に以下のファイルが作成されます。

client.bundle.jsファイルは、vr/client.jsファイルをビルドしたもので、React VRの実行環境であり、React VRで作成したVRコンテンツをブラウザにレンダリングするためのファイルです。index.bundle.jsファイルは、index.vr.jsファイルをビルドしたもので、依存ファイルを全てバンドルしたVRコンテンツそのものとなります。

ファイルをビルドしたら、公開用のindex.htmlファイルを用意し、以下のように記述し、作成されたファイルを読み込むようにします。

<html>
  <head>
    <title>WelcomeToVR</title>
    <style>body { margin: 0; }</style>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <script src="./client.bundle.js"></script>
    <script>
      ReactVR.init(
        './index.bundle.js',
        document.body,
      );
    </script>
  </body>
</html>

最後に以下をサーバーにアップロードすると公開できるようになります。

以下は、実際にサーバーにアップしたものとなります。iframeで読み込んでいます。

まとめ

いかがでしたでしょうか。React VRを使うと、Reactの作法で、VRコンテンツが作れるようになります。しかもWebサイトのコンテンツとしてVRを公開できるようになります。まだまだVR自体が世の中に普及しているとは言い難いですが、今のうちからコツコツとVRコンテンツを作れるようにして、来るべき時に備えておくと良いかと思います。

正直まだ私もVRコンテンツを自分の思うように作ることができないので、今回の記事では詳しい実装方法までは紹介しませんでした。とりあえず、今回はこんなツールがあるということだけでもおわかりいただければと思います。このReact VRでの実装方法についても、私がちゃんと理解できたら詳しく説明していく予定です。お楽しみに。

最後にVRコンテンツを作成する上で必要となってくる360度カメラとVRヘッドセットを紹介します。以下は、2017年6月1日発売のサムスン製の360度カメラです。4K画質の360度動画を24fpsで撮影が可能で、自分も欲しいなと思っている360度カメラです。私も購入を検討しているカメラです。

それから、VR専用のヘッドセットは、だいぶ安価なものも出てきていますが、まだそこまで気合いを入れたくないという方は、以下のようなGoogle Cardbordに準拠した組み立て式のものを選ぶのが良いと思います。1,000円以下で購入可能です。（Cardbordを選ぶ際は、Cardboardの上に操作ボタンがついているものを選ぶことをオススメします。）