GearVR – HTML5Experts.jp

Reactといえばコンポーネント！React VRの3Dプリミティブコンポーネントを探る、触る

原一浩 — Mon, 24 Jul 2017 01:00:05 +0000

連載： React VR (3)

今回のサンプルの完成版。ライティングとかもやるぞ

前回、React VRでパノラマ写真を見るというコンテンツを作成しました。
サンプルを試していただいた方は「なんか結構できたじゃん感」を満喫できたと思います。それもそのはず、360度写真のみのコンテンツは、天球にパノラマ画像を貼り付けた時点で、目的の99%を達成できたといえるからです。ほとんど完成といっていい状態でしょう。

しかし、他のVRコンテンツを触ったことがある人間なら、少しもの足りなさを感じることと思います。一つはインタラクティブ性のなさ、そしてもう一つはモノの存在感のなさです。

インタラクティブ性のなさは、イベント駆動型のVRコンテンツの作成というハードルが待っていますが、今回はそれはさておき、モノの存在感について書いていきます。

パノラマ画像だけで構成された世界は、「一見、目の前で展開されている感じなのに、触ることができないほど遠くに広がる世界」と言えます。目の前の芝生に近付いて触ることはできませんし、奥の人に近付くこともできません。

仮に頑張って、インタラクティブ性を高めて奥に進めるように作ったとしても、そこにあるのは拡大されて画素が粗くなった人のようなナニカでしかありません。

VRのモノとしての存在を確固たるものにするために大事なことは、VR空間に実際にモノを置いてみるということになります。

ということで、今回はReact VRに用意されているコンポーネントのうち、モノとして置けるコンポーネント、3Dプリミティブについて扱っていきます。

いろいろなタイプのReact VR Components

公式ドキュメントにあるReact VR Componentsの目次は下記のような構成になっています。

AmbientLight
Box
LiveEnvCamera
Cylinder
CylindricalPanel
DirectionalLight
Model
Pano
Plane
PointLight
Scene
Sound
Sphere
SpotLight
Video
VideoControl
VideoPano
VrButton

いろいろありますね。「あれ?、これだけしかないの?」という見方もあるかもしれません。主要なものを役割ごとにカテゴライズしてみましたので順に見ていきましょう。各種コンポーネントの実装コードに興味がある方は、GitHubのReact VRリポジトリのViews以下を見てみるとよいでしょう。

空間を作るタイプのコンポーネント

まず、チェックしておきたいのは空間を作るタイプのコンポーネントです。

VideoPano
CylindricalPanel
Pano

Panoは、既に登場しましたが、360度写真をVR空間に貼り付けるタイプのコンポーネントです。

VideoPanoは、Panoと同様ですが、貼り付け可能コンテンツが360度動画となります。CylindricalPanelは、ちょっと特殊なコンポーネントで、内側にテクスチャを貼ることができ、子コンポーネントを収録できるタイプです。今回は触れません。

ビデオ・オーディオ関連のコンポーネント

ビデオの話が少し出ましたが、ビデオ・オーディオ系に関係してくるコンポーネントは以下となります。

Sound
Video

Soundは、シーンに配置するコンポーネントですが、何か形があるわけではありません。音の発生源として配置する形になります。3Dオーディオをサポートしており、ヘッドマウントディスプレイを被って顔を左右に振ったりすると、音源の場所に応じたサウンドになることが確認できます。

Videoは、2Dのビデオを再生するためのコンポーネントです。これをユーザーの前面に貼ると巨大なテレビが目の前に広がったような演出ができます。

ユーザーインターフェースとなるコンポーネント

続いて、VR世界のユーザーインターフェースとなるコンポーネントが下記2つです。

VrButton
VideoControl

VrButtonは、ボタンです。応用性が高く、使い勝手の良いコンポーネントと言えるでしょう。VideoControlは、ビデオをコントロールするためのユーザーインターフェースとなります。 VideoコンポーネントとVideoControlコンポーネントを組み合わせると、VR空間にビデオプレーヤーを作ることができます。

Videoコンポーネントでビデオを表示させているサンプル

形状コンポーネント

そして、今回扱う形状コンポーネントです。

Box
Cylinder
Plane
Sphere
Model

上記のうち、Modelを除いた4つは3Dプリミティブコンポーネントと呼ばれます。Boxは立方体や直方体などを作成することができるタイプのコンポーネントです。Cylinderは、円筒形の形状コンポーネントで、設定によっては円錐形の形状を作成することができます。Planeは、フラットな平面コンポーネントです。

ちなみに、Modelは空間に配置するコンポーネントだけど、別の3Dソフトなどで作成したモデルデータを使用するためのもので、今回は一旦スキップします。

これ以外にもライティングに関するコンポーネントも存在しますが、実際に使うところで解説していきます。

では、今回は実際に3Dプリミティブコンポーネントを、シーンにいろいろと配置し、様々なライティングをしてみましょう。

3Dプリミティブコンポーネントを配置してみよう

さて、これから3Dプリミティブコンポーネントを配置していろいろ実験していくわけですが、その前に、何か仮想現実の実験ぽくするための会場づくりをしましょう。React VRで何も背景に敷かない場合、漆黒の空間に単なる立方体が浮かぶことになります。それでは何も趣がないですよね。

ということで、VR空間をホロデッキ（アメリカのTVドラマ・映画のスタートレックに登場するホログラフィックルーム）として定義してみましょう。ホロデッキってなあに？って方は、Wikipediaのホロデッキに関する説明と写真をご覧ください。

ホロデッキは、黒い部屋に、方眼紙のような感じで黄色の線が入っている部屋です。これを実現するためにPanoコンポーネントを使います。Panoコンポーネントは360度写真を閲覧するために前回使いましたが、Panoコンポーネントはもう一つ使い方があって、6つのテクスチャを配列で渡してあげると、立方体のの内側にテクスチャが貼られた部屋を作ることができます。

では、まず新規React VRプロジェクトを作成するところから始めてみましょう。

1. 新規React VRプロジェクトを作成し、Panoコンポーネントで部屋を作る

まずはなにはともあれ、新規ReactVRプロジェクトを立ち上げましょう。名前はHello3DObjectとしましょう。

$ react-vr init Hello3DObject
$ cd Hello3DObject

続いて、Panoコンポーネントを使って、テクスチャが貼られた立方体の空間を作っていきます。プロジェクトルートにある「index.vr.js」のViewコンポーネント以下を編集していきます。今回Panoコンポーネントの内側には、前後左右上下の6面にテクスチャを貼ります。貼るテクスチャは、フリーのグリッドパターン – 20 Seamless Photoshop Grid Patternsのうち一枚をPhotoShopで修正した格子状のものです。

ホロデッキっぽいテクスチャ画像

こちらからダウンロードください

上記リンク先でダウンロードしたファイルを解凍し、中に入っている「holodeck.png」を「static_assets」ディレクトリ以下に配置します。

Panoコンポーネントに対して六面にテクスチャを貼るには、source属性にuriプロパティを持ったオブジェクトを6つ含んだ配列を渡します。asset関数は、ファイル名を渡すと{uri: パス名}の形式で返るので、asset関数をそのままsource属性へ渡せばいいことになります。

さて、まずはここで一旦ビルドしてみましょう。

$ npm start

ブラウザで、http://localhost:8081/vr/を開いてみましょう。スタートレックのホロデッキのような空間が出現したと思います。テクスチャのつなぎ目とか細かい点はサンプルということでご容赦ください。

ホロデッキに入った

2. `Box`をいくつか並べて配置してみる

ホロデッキ的な空間が出来たところで、Boxコンポーネントを配置してみましょう。Boxコンポーネントはシンプルなコンポーネントですが、よくありがちな失敗として、Boxコンポーネントをインポートし忘れるということがあります。これから登場するCylinderやSphereも同様にimportし忘れがないようにしましょう。

import {
  AppRegistry,
  asset,
  Pano,
  Box,
  Cylinder,
  Sphere,
  View,
} from 'react-vr';

では、Boxコンポーネントを目の前に3つ配置してみます。Panoコンポーネントの下にBoxコンポーネントを下記のように3つ記述します。

dimWidth、dimHeight、dimDepthの各属性は、幅、高さ、奥行きのサイズに相当します。この比率を変えることで、立方体や柱のようなもの、平らな板のようなものを作り出すことができます。

また、style属性で色が定義されていることもわかります。3つの色は右から青、赤、緑の原色です。style属性にtransformというプロパティが定義されていますが、ここで配置を指定しています。位置関係の変形は、translateで指定します。配列で指定し、左からX座標、Y座標、Z座標となります。Z座標は奥行きです。ちなみにマイナスの数値になればなるほど初期状態の位置から奥へ向かって移動する形になります。

litという属性がありますが、こちらはライティングに関するプロパティで、後ほど解説します。

Boxコンポーネントを3つ配置した

Boxコンポーネントを配置できたところで、他のコンポーネントを配置していきましょう!

3. `Box`だけでなく、`Cylinder`や`Sphere`を配置してみる

さて、今度はCylinderやSphereもシーンに配置してみます。一旦Boxコンポーネントのパートで作った3つのボックスは消してしまいましょう。勢いあまってホロデッキっぽくしているPanoまで消さないようにしてくださいね、情感がなくなってしまいますので。

まず、Cylinderコンポーネントについて。Cylinder、つまりカタカナでいうシリンダーは、円筒を意味しますが、Cylinderコンポーネントはプロパティ次第で円錐形にもなります。ポイントはradiusTopとradiusBottomで、radiusTopが小さければ山のようになっていき、radiusBottomが大きければ、ラッパのような形状になっていきます。どちらの値も等しい時だけ円筒形になります。

続いてSphereコンポーネントですが、Sphereというのは球体です。Sphereコンポーネントはなかなか使い出があるコンポーネントで、四角形や円筒形を使う機会はそれほどないかもしれませんが、球体というのはテクスチャを貼り付ければ惑星になったりと応用性が高い3Dプリミティブコンポーネントです。下記のようにシーンに配置してみました。それぞれ一つずつ配置しています。SphereコンポーネントにはwidthSegmentsとheightSegmentsというプロパティがありますが、これは球体を構成するセグメント（分割数）を定義しています。この数が増えるとなめらかな球体へ近づいていきます。

今回、ちょっと配置に工夫をしています。translateプロパティの値を変更していて、手前に立方体、奥に行くにしたがって円筒形、球体と並ぶようにしています。これで3Dプリミティブの配置は完了したわけですが、何かもの足りません。のっぺりしていて立体感がないのです。ということで、この3Dオブジェクトに光を当てていきましょう。

配置された、球体、円錐形、立方体

4. 3Dプリミティブオブジェクトに光を当ててみる

React VRでライティング（照明）を行うには、用意されている4つのコンポーネントのいずれかもしくは複数の組み合わせを使用します。

用意されているReact VRコンポーネントは下記の4つです。

AmbientLight
DirectionalLight
PointLight
SpotLight

AmbientLightは、環境光と呼ばれるもので、シーン全体に均一な影響を与える光源を定義します。これは無指向性で、すべてのオブジェクトが等しく明るくなります。

DirectionalLightは、指向性があるが、距離による明かりの減光は発生しないタイプの光源です。太陽の明かりのようなものと言えます。

PointLightは、ある一点から発生する光源で、距離による減光もあります。見えない間接照明のようなものと言えるでしょう。

SpotLightは、文字通りスポットライトのような特性を持つととらえられる光源です。指向性があり、距離による範囲の拡大と減光があります。

20程度のコンポーネントしか用意されていないReact VRにおいて、ライティング関係だけで、4つもコンポーネントが用意されているのは、一つはVRにおいてそれだけ重要であるということと、React VRが使用しているThree.jsにおいても手厚いサポートがされていること、そしておそらくはこうしたライティング関係は、カスタムコンポーネントとしての作成が困難であろうことなどが推測されます。

まずは普通の光を当てましょう。太陽のように上から降り注ぐ普通の明かりです。こういった明かりは、DirectionalLightコンポーネントを使うことで実現できます。

では、まず準備段階として、先ほど作成した3種類の3Dプリミティブオブジェクトが持っているlitプロパティをtrueにしてみましょう。これで光源の影響を受けるようになります。試しにtrueにした段階で、ブラウザをリロードしてみてください。まだ光が当たっていないため、真っ黒のオブジェクトになってしまったと思います。

真っ黒の3Dプリミティブオブジェクト

続いて、DirectionalLightコンポーネントを配置します。Panoコンポーネントの下あたりでOKです。こんな感じにします。(importを忘れずに)


            
            {/* Lighting */}

intensityプロパティは、光の強度を設定します。また、光源にも色をつけることができ、スタイルシートで定義します。transformプロパティでrotateXの設定をしていますが、これは、ちょっと斜め前方から光を当てたいからです。本当の真上からあたる光は、側面すら陰になってしまい、あまり面白みはありません。

DirectionalLightを設定したシーン

次はPointLightコンポーネントを配置してみましょう。PointLightは点光源なので、任意の位置に配置すると、その周囲を照らしてくれます。うまく使うと印象的な効果を与えることができます。さて、今回は、PointLightをちょっと手前に配置し、しかもちょっと青系の光として照らしてみましょう。どんな感じになるでしょうか。

DirectionalLightコンポーネントの下に、下記のようにPointLightコンポーネントを設置します。


            
            {/* Lighting */}

intensityプロパティはちょっと強めの5にしました。色は青色、そして位置はちょっと手前でちょっと下から照らす感じにしています。

すると、こんな感じで、青い光がオブジェクトに反射するような雰囲気になりました。ちょっとムーディで怪しげですね。

PointLightを反映させた3Dプリミティブオブジェクト

さて、これで終了にしてもいいのですが、全体的にちょっと暗いですよね、そこで光の調整をしたいと思います。

ではAmbientLightコンポーネントを配置してみましょう。AmbientLightは環境光で、全てのオブジェクトに均等に光を当てるという機能を持っています。AmbientLightコンポーネントを使うことで、全体的な光の加減を微調整することもできます。


            
            {/* Lighting */}

intensityプロパティは、ほんの少しだけ設定しました。これでブラウザをリロードしてみると、ほんのりと明るくなったことがわかると思います。

AmbientLightを反映させた3Dプリミティブオブジェクト

いろいろな形状のものを置き、ライティングを終えたところで、こんな風に思った方はいないでしょうか。
「現実世界で立方体や球なんて、積み木とかにしか存在しないじゃないか！」
と。

四角や丸を置くためにVRを始めたわけじゃないんだという気持ちはよくわかりますので、次回は応用編として既存の3DモデルをReact VRで扱う方法について解説していきます。

React VR×360度画像！Web上でパノラマVR表示を試す

原一浩 — Mon, 26 Jun 2017 01:00:06 +0000

連載： React VR (2)

前回は、React VRのインストールから「Hello, World」の表示、そして日本語の表示までを行いました。今回は、RICOH THETAなどで撮影した360度画像をVRコンテンツとして表示してみましょう。

今回のサンプルの完成品

React VRプロジェクトのフォルダ構成について

と、その前にちょっとしたおさらいです。

前回は、「ちょっと日本語を表示したい!」というところから、いきなりハードな展開へとなってしまいましたが、ここでちょっと、React VRプロジェクトがどのような構成になっているのかを確認しておきましょう。

.
├── .babelrc
├── .flowconfig
├── .gitignore
├── .watchmanconfig
├── tests
│   └── client.js
├── index.vr.js
├── node_modules
├── package.json
├── rn-cli.config.js
├── static_assets
│   └── chess-world.jpg
├── vr
│   ├── client.js
│   └── index.html
└── yarn.lock

「.」で始まる各種ドットファイル達は、ビルド用だったり、flowやwatchmanといったツールのための設定ファイルです。

いくつかファイルやフォルダがありますが、React VRの開発に必要な部分は、React VRにおけるRootコンポーネント(大元のコンポーネント)となる「index.vr.js」と、実際にブラウザでReact VRコンテンツをマウントするためのファイルとしての「vr/」以下の各種ファイル、そして各種静的リソースのためのアセットディレクトリ「static_assets」が中心となります。ここには、フォントやテクスチャなどを配置します。

React Nativeの開発をした方は「おっ」と思ったかもしれませんが、「index.android.js」「index.ios.js」などと同じような位置づけで「index.vr.js」という命名規則となっているのです。そして、フレームワークの構成的には「今はWeb出力がメインということでreact-vr-webを使っていまっせ」ということが読み取れます。この構成から見て、将来的にはネイティブデバイス向けのビルドも考えていることが期待できそうです。

jestを使用してReact VRのテストを実行する

「tests」というのは、テスト用のファイルを配置するディレクトリです。Facebook製のテストフレームワークjestを実行すると、ここにあるファイルが対象となってテストが実行されます。あらかじめプロジェクトにはテストの実行が可能になっています。

テストの実行にはjestが必要なので、下記のようにインストールしておきましょう。

$ npm install -g jest

testコマンドで実行ができます。ただし、下記のように失敗します。

$ npm test

> HelloWorld@0.0.1 test C:\****\HelloWorld
> jest

 FAIL  __tests__\client.js
  ● Test suite failed to run

    Cannot find module 'Mesh' from 'setup.js'

      at Resolver.resolveModule (node_modules\jest-resolve\build\index.js:169:17)
      at Object. (node_modules\react-vr\jest\setup.js:22:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        12.811s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

実は、GitHubにはもうissueとして反映されているのですが、react-vrライブラリの不具合なようです。解決策も提示されているので、もうしばらくすると正しく動作するようになると思います。

Fixed bug where npm test for init project would not pass – because je… · facebook/react-vr@f9c2b53

VRのテスト周りもプロジェクトにセットアップ済というのは、なかなか嬉しいことですね。

パノラマVRはこんなにも簡単!

さて、ファイル構成などの意味もわかってきてスッキリしたところで、ちょっと実践的なコンテンツを作成してみましょう。

すぐ作れてインパクトも強く、応用性が高いVRコンテンツといえば、パノラマVRコンテンツでしょう。実際、これまで作ってきた「Hello World!」は、パノラマ背景に背景色付きテキストが宙に浮かぶというものでした。パノラマVRコンテンツというのは、360度写真さえあれば、すぐに作成することが出来るのです。

とはいえ、いざ360度写真を使おうと思ってもRICOH THETAのユーザでもない限り、360度写真の準備をするのは大変です。そこで僕は友人の寺田さんが撮ってきた360度写真をお借りすることにしました。寺田さんは、株式会社CMSコミュニケーションズという会社の社長であるのですが、かなり古くからのTHETAユーザで、360度写真を撮り続けておられます。また、Plone Ambassadorや元PyCon JPの座長などを務めたりなど精力的な活動をされています。

さて、今回は寺田さんがニューヨークに行った時の写真をお借りしました。また、写真のライセンスは「CC-BY 4.0 国際 (@terapyon)」となりますので、お取り扱いには注意をお願いします。

寺田さんからのニューヨーク写真

新規プロジェクトを作成し、360度写真を配置

それでは、新しくプロジェクトを作成してみましょう。ReacrVrSamplePanoというプロジェクト名にしてみます。

$ react-vr init ReacrVrSamplePano

プロジェクトディレクトリ内へ移動しておきます。

$ cd ReacrVrSamplePano

プロジェクトの作成が終わったら、下記リンク先から写真をダウンロードし、プロジェクトの「static_assets」ディレクトリへ配置しましょう。

寺田さんからのニューヨーク360度写真

配置が終わったら「index.vr.js」を開いて、ReacrVrSamplePanoクラスを下記のように編集します。

export default class ReacrVrSamplePano extends React.Component {
  render() {
    return (
      
        
      
    );
  }
};

なんと！前回の「Hello World!」プロジェクトよりも短くなってしまいました。これは非常に楽勝ですね！などと調子に乗らないようにしましょう。内部では複雑なことが行われているのです。

さて、Panoコンポーネントとは何でしょうか。Panoというのは、React VRのドキュメントによれば、1000mの球だということです。これはユーザーを中心に絶対配置されており、内側に360度画像が投影されています。

Panoコンポーネントは、JSX上では1行ですが、実際は内部で複雑なことをしています。Panoコンポーネントのソースはこちらになります。

react-vr/Pano.js at master · facebook/react-vr

えらく長いソースだなあと思われたかもしれませんが、このコンポーネントは、RCTBaseViewというクラスを継承しているので、実はもっと長いロジックを持っています。ポイントとしては、Panoは、球体なのでTHREE.SphereというThree.jsの球オブジェクトを内部で持っているという点です。

ここで言いたいことは、上記のソースをすべて読んで理解しましょうということではありません。大事なことはフレームワークの表面的な使い方だけでなく、いざとなったら元ソースも覗いてやろうという気概なのです。

そうそう、コードを変更したところで話が止まっていました。さっそくブラウザで見るためにプロジェクトを実行しましょう。

$ npm start

HelloWorldプロジェクトのときと同じようにブラウザで表示してみましょう。無事ニューヨークの景色がブラウザで表示されていれば完成です。

GearVRで見てみる

もし、GearVRとGalaxy系のスマートフォンを持っていたら」という前提があるのですが、持っていたら是非ここで紹介するGearVRによるパノラマVRコンテンツを体験してみてください。

PCのブラウザやスマートフォンで表示させたものも結構感動しますが、GearVRでこれを表示してみると感動は何倍にもなります。GearVRを使うと、センサーのおかげで顔のトラッキングがスムーズですし、CarmelというVRブラウザを使えばWeb上のVRコンテンツもすぐに体験できます。Carmelは、GearVR内のアプリストアにてダウンロードすることができます。

Carmelのサイトキャプチャ

ただし、デベロッパープレビュー中のCarmelでVRコンテンツを見るためには、ちょっとした前準備が必要になります。OculusのサイトのLaunching Your Contentを見つつ進めていきましょう。

まず、vr/以下にovr.htmlというファイル名で下記を作成します。




  
  ovr



  Navigate to an HTTP experience

ちなみに、「あなたのPCのIPアドレス」は各自のPCのIPアドレスとなります。ここで書かれているのは、aタグによりVRコンテンツへのリンクが表示されるだけのHTMLですが、リンク先のhttpの前にovrwebというプロトコルがついています。このプロトコルをCarmelがインストールされたスマートフォンで開くと、Carmelが立ち上がり、GearVRへのセットを促されます。それでは、「http://あなたのPCのIPアドレス:8081/vr/ovr.html」をスマートフォンで開いて、リンクをクリックしてみましょう。

GearVRに促すガイドが表示される

リンクをタップした後のガイダンスに従いスマートフォンをGearVRに装着し、頭にGearVRを装着すると、目の前にはニューヨークが広がるはずです(後ろを振り向くと寺田さんに会えることでしょう)。

今回のサンプルの完成品

ただ日本語については、Carmel上だとPCブラウザで見た時ほど綺麗に表示されないことがわかります。Carmelがデベロッパープレビュー版だから起きるのか、レンダリングエンジンのせいかは不明ですが、今後改善されることを期待しましょう。

GearVRで見ると、日本語表示がすこしおかしい

まとめ

WebVRは、その技術構成上、どうしてもネイティブなVRコンテンツよりも制約事項が多くなります。

一方で、「Webページを表示するだけでVRコンテンツを見ることができる」「ヘッドマウントディスプレイがなくてもある程度の体験が味わえる」という手軽さは、非常に魅力的です。

近しい人が撮った360度写真や動画などは、今までの付き合いなどといった経験が加味されて、よりリアルにコンテンツを味わうことが可能になる可能性を秘めています。表現としてのリアルよりも、自分と関係があるコンテンツという意味でのリアルさ、これはひょっとしたらネイティブVRにない強みになるかもしれません。

次回は、React VRにおける3Dプリミティブの利用や、3Dモデルの配置などを見ていきましょう。

※ 今回のサンプルプロジェクト2つは、GitHubに置いてあります。利用方法、ライセンスなどをお守りの上、ご利用ください。

karad/html5_react_vr_samples