原一浩 – HTML5Experts.jp

React VRでここまでできる！VRでジオラマを作ろう

原一浩 — Mon, 31 Jul 2017 01:30:45 +0000

連載： React VR (4)

今回は、こんなVRジオラマをつくるぞ！

前回、3Dプリミティブオブジェクトを使って、レイアウトやライティングの仕方について一通り試しました。前回扱わなかったコンポーネントに、3DモデルのためのコンポーネントModelがあります。Modelコンポーネントを使うと「obj」形式の3Dモデリングデータを読み込み、VR空間に配置することができます。

3Dのモデリングデータを使うと、リアルな物体だったり、複雑な形状を持ったオブジェクトを自由にVR上で扱えるため、VR空間における表現力が飛躍的に高まります。実際VRコンテンツを作る際に使うのはBoxやCylinderではなく、Modelコンポーネントになるでしょう。

今回は、3Dのモデリングデータを読み込み、ジオラマを作ってみましょう。子どもの頃、作ったプラモデルに顔を近づけて遊んだ経験はないでしょうか。VRでは、巨大な物体を目の前に表示させるのもお手のものです。

新規プロジェクトの作成

既に本連載の読者であれば何度か行ってきていることですが、今回もサンプルを作るにあたって新規プロジェクトを作成し、プロジェクトディレクトリへ移動します。HelloDioramaというプロジェクト名で進めることにします。

$ react-vr init HelloDiorama
$ cd HelloDiorama

ジオラマに必要なものは何でしょうか? 一つは飾る対象物です。これはロボットなのかもしれないし、戦車かもしれないし、船かもしれません。3Dモデリングデータさえあれば、そしてそれをReact VRで読み込めさえすれば、なんでもジオラマにすることができます。

ちなみに「React VRで読み込めさえすれば」と書いているのは、Webで公開されている3Dモデリングデータの中には何故か表示できないものがあります。表示はできるけど変な形状になったりするものもあります。これはきっと時間と共に解決されていくタイプのものでしょう。気になることがあればReact VRのGitHubリポジトリでIssueを立てるとよいです。

続いてジオラマに必要なもう一つのものは何でしょう? それは雰囲気を与えてくれる背景です。緻密なモデルをさらに引き立ててくれる背景は、ロボットなら宇宙船の内部かもしれないし、船なら海上かもしれません。こちら背景は、今回は3Dプリミティブオブジェクトを利用してそれっぽいものを作ってみます。

用意するもの

ジオラマコンテンツを作るにあたって、用意するものは以下となりました。

配置する対象物としての3Dモデリングデータ
背景の壁と床のテクスチャ

まずは、配置する対象物としての3Dモデリングデータから用意しましょう。

1930年代に使われたソ連製のトラックのモデルデータ

今回ジオラマとして、シーンに配置するのは、GAZ-AAという1930年代に使われたソ連製のトラックにしてみました。筆者は、このトラックを好きだったわけではないですが、様々な3Dモデルを探す中でふとこのトラックを見かけ、素朴な中にも車両全面に漂う気品を魅力に感じ、採用した次第です。

このトラックは、ポリゴン数が4,380と、そこそこ複雑な形状をしており、テクスチャなどを含んでいてなかなかにリアリティがあります。

下記より、objフォーマット形式のものをダウンロードしましょう。もし他の3Dデータで試す場合、ライセンスについてチェックしておきましょう。

GAZ- AA furgon-Bread free VR / AR / low-poly 3D Model MAX OBJ 3DS FBX MTL

ちなみに、上記ダウンロードサイトでは、ユーザー登録が必要です。なので、ほかのものを用意できる人は好きな3Dデータを利用してOKです。「gaz-aa_bread OBJ.zip」をダウンロード、解凍したら、下記のディレクトリにそれぞれ配置します。

static_assets/gaz_aa/gaz-aa_bread.mtl
static_assets/gaz_aa/gaz-aa_bread.obj
static_assets/gaz_aa/gaz-aa_bread_cabin.jpg
static_assets/gaz_aa/gaz-aa_bread_detail.jpg
static_assets/gaz_aa/gaz-aa_bread_frame.jpg
static_assets/gaz_aa/gaz-aa_bread_furgon.jpg
static_assets/gaz_aa/gaz-aa_bread_wheel.jpg
static_assets/gaz_aa/gaz-aa_bread_wing.jpg

上記ファイルのうち、実は「gaz-aa_bread.mtl」については変更する必要があります。

テキストエディタなどでファイルを開き、「D:\Program Files\Autodesk\3ds Max 2009\scenes\GAZ-AA free models\gaz-aa_bread_3ds_max*.jpg」となっているところを「*.jpg」に書き換えましょう。これはきっと作ったときそのままのローカルのパスが入ってしまったのですね。公開する際の要注意ポイントと言えそうです。

ジオラマの背景に必要な素材は、角となる2面分の壁用のテクスチャと、床に使うテクスチャです。前回使ったPanoコンポーネントで、6面にテクスチャを貼り、部屋状にしてしまうこともできますが、それだとリアルな空間になりすぎ、ジオラマっぽくなくなるからです。3面しか壁を用意しないことで、後ろには漆黒の空間が広がる感じになり、なんだか超現実的な世界になります。

背景の壁のテクスチャ

床のテクスチャ

壁と床のテクスチャは以下からダウンロードしてください。

diorama

ちなみに、壁と床のテクスチャは、僕がそのへんで適当に撮ってきたものなので、フリーでお使いいただいて構いません。

ダウンロードしたら、「プロジェクトディレクトリ/static_assets/diorama」以下に「floor.jpg」と「wall.jpg」を配置しましょう。

STEP 1. まずは、ジオラマのベースづくりから

早速トラックを配置したいと、はやる気持ちを抑えてまずはジオラマのベースとなる背景の壁と床を作るところから始めましょう。床は、1000 x 1000の大きさを持った板を想定しました。これは、Panoコンポーネントで作った空間と同じ大きさとなります。そして、奥の壁は床から500の高さを持つ平面です。これにテクスチャをつけることで、リアリティを持たせます。では、具体的な作業をしましょう。

「index.vr.js」のViewの中を一旦空にし、下記のように修正します。

それと、importも変更しておきましょう。この先に使うModelコンポーネントやライティング関係のコンポーネントも加えておきます。

import {
  AppRegistry,
  asset,
  View,
  Plane,
  Model,
  DirectionalLight,
  PointLight,
  AmbientLight,
} from 'react-vr';

Viewコンポーネントが入れ子になっているのは、内側のViewは、ジオラマの背景セットで、セット全体を変形させたい場合はこのように入れ子にしておくと、壁や床を一つの塊として扱えます。ここではジオラマのセット全体をちょっと回転させています。というのも、最初に表示したときに部屋の中央ではなく、部屋の角を見せたいためです。

ジオラマのセット自体を回転させずに、カメラを回転させるという表現方法もありますが、普通ジオラマというのは、インテリアの側面もあり、一番かっこいいポジションで飾るものだと思います。そこで、View自体をY軸に対して-20度回転させました。

さらに細部を見ていきましょう。3つのPlaneが、内側のViewコンポーネント内に配置されていますが、先頭2つのPlaneコンポーネントは壁として配置してあります。位置を遠くに置いたのと、Y軸方向に90度回転させて垂直にそれぞれのコンポーネントが交わるようにしています。

Planeコンポーネントに関わらず、3Dプリミティブコンポーネントは、テクスチャを設定することができます。テクスチャはtexture属性で設定します。

ここではtexture属性に、「diorama/wall.jpg」を指定しました。これによりのっぺりとした壁が質感のある壁となりました。ちなみに、この壁は近くの公園の壁を撮影したものです。

一番最後のPlaneは、床として配置しています。X軸方向に-90度回転させ、テクスチャを貼りました。これは海に行った時の砂岩の岩肌です。深い意味があるわけではないですが、オフロードっぽい印象になる写真が見つからなかったので、こちらを採用しました。

$ npm start

を実行し、ブラウザでURLを開いてみましょう。ただし、こんどは「http://localhost:8081/vr/?hotreload」で開いてみてください。「?hotreload」を付けてブラウザから開くと、ホットリロードが可能になります。これで、エディタで編集したコンテンツが自動でブラウザ側に反映されるようになります。

配置した背景

3方向のみPlaneを配置しただけの簡素なジオラマセットですが、VRで角のほうを見るとなかなかどうして迫力がありますね。

STEP 2. 3Dモデリングデータを配置しよう!

続いて、お待ちかねの3Dモデルの読み込みです。3Dモデリングデータの読み込みには、Modelコンポーネントを使います。Modelコンポーネントには、source属性を記述することができます。渡す内容は、objとmtlというキーを持ったオブジェクトで、それぞれobj形式のファイルとmtl形式のファイルへのパスを渡します。

今回であれば、「配置するモデリングデータ」で保存しておいた「static_assets/gaz_aa」以下にあるobjファイルとmtlファイルが対象になります。

Modelコンポーネントは、「index.vr.js」の入れ子の内側のView以下に配置します。サイズは小さめにし、位置調整とrotateYプロパティを修正して、若干の回転を加えます。これは、ちょうど左前に向いた形がきれいだからです。コードは下記のようになります。

これで、ブラウザをリロードしてみてください。3Dモデルが表示されるはずです。

まだ光が当たっていないので真っ黒

ただし、真っ黒なシルエットになってしまっていますが。ということで、続いて光源を用意して、明るくしていきましょう。

STEP 3. ライティングしてトラックを美しく!

ライティングは、前回3Dプリミティブオブジェクトで遊んだ際に試したのを思い出してください。メインの明かり、部分的な明かり、ちょっとした調整です。今回も同じような感じで進めます。

実は、React VRで使われている3DライブラリのThree.js本体には、ライティングに関する様々なヘルパー機能が用意されています。例えば、照明の向き、範囲などを視覚的に表示して微調整をする機能などです。ただ、現時点のReact VRではもっと限定的なサポートとなっているのでそこまで細かくは扱いません。

「index.vr.js」にDirectionalLightとPointLight、AmbientLightコンポーネントを配置しました。これで、トラックが綺麗に表示されるでしょうか。

トラックがちゃんと表示された！

ブラウザをリロードしてトラックを再表示してみましょう。明るくなったでしょうか。

STEP 4. トラックをゆっくりと回転させてみる

以上で一旦はジオラマは完成しましたと言ってもいいかもしれません。ただ、今まで物体を空間に置いてみて歯がゆかったのは、その物体の裏側がどうなっているのか、それが見えないということでした。ということで、アニメーションの練習がてらトラックを回転させてみましょう。

回転に関しては、ピッタリのサンプルが公式のリポジトリに用意されています。

react-vr/Examples/ModelSample at master · facebook/react-vr

このサンプルを参考にトラックのアニメーションを作ってみます。ちょっとサンプルと異なるのは、Reactのコンポーネントとして作るというのと、細かなロジックを修正した点です。Reactコンポーネントとして、回転速度を定義するspeed属性と、表示位置や大きさを定義するstyle属性を渡せるように作っておきましょう。「src/component/GazAa.js」として下記のように作成します。ちょっと長くなるので、細部の話は置いておいて、まずは一気に掲載してしまいます。

import React from 'react';
import {
  asset,
  View,
  Model,
} from 'react-vr';

export default class GazAa extends React.Component {

  constructor() {
    super();
    this.state = {
      rotation: 0
    };
  }

  componentDidMount() {
    this.rotate();
  }

  componentWillUnmount() {
    if (this.frameHandle) {
      cancelAnimationFrame(this.frameHandle);
      this.frameHandle = null;
    }
  }

  rotate(timestamp) {
    const delta = timestamp - this.lastUpdate || 0;
    this.setState({rotation: this.state.rotation + delta / this.props.speed});
    this.lastUpdate  = timestamp;
    this.frameHandle = requestAnimationFrame(this.rotate.bind(this));
  }

  render() {
    return (
              
            
    )
  }
}

ポイントは、GazAaコンポーネントのローカルステートとそれを変更するためのrotate関数、そしてそこで使われているrequestAnimationFrame関数とcancelAnimationFrame関数です。

GazAaコンポーネントは、シーンに配置した瞬間、つまりコンポーネントがマウントされた時から回転を始めます。逆にコンポーネントをアンマウントすると回転をやめる処理をします。回転の状態はコンポーネントのローカルステートとして定義されているrotationです。

rotationは、3DモデルのrotateYとしてY軸方向にどれだけ回転するかという値として使われることになります。その値をコントロールしているのがrotate関数です。requestAnimationFrame関数は、ブラウザの再描画のタイミングでrotate関数を呼び出すことになるので、呼び出すたびに前に呼び出された時間からの回転をrotationに反映していきます。requestAnimationFrame関数から返った値は、アニメーションをキャンセルするときにcancelAnimationFrame関数にて使われます。

requestAnimationFrame関数について一つ知っておきたいことは、この関数はもともとブラウザに実装されていますが、ブラウザによってはサポートされていないことがあります。そこで、React VRでは、requestAnimationFrame関数のpolyfillとして用意されています。

これで大体のGazAaコンポーネントの仕組みが理解できたでしょうか。今はこういうスタイルでアニメーションを実現したりしますが、将来的にはもっと洗練されたアニメーション機構が用意されていくのだろうと推測します。

では、先ほど作ったGazAaコンポーネントを使っていきましょう。「index.vr.js」で使うので、まずはインポートします。ファイルの先頭あたりにimport文を書きます。

import GazAa from './src/component/GazAa'

続いて、入れ子になったViewコンポーネントの内側に、GazAaコンポーネントを配置します。プロパティとしては、回転速度を定義するspeed属性と、表示位置や大きさを定義するstyle属性を渡しています。これら属性は、GazAaコンポーネント内のthis.props.XXXにて受け取ることが可能です。これらを記載したコードが以下になります。

以上で、トラックが回転するジオラマの完成です。ブラウザをリロードして、じっくり見てみましょう！

完成したVRジオラマ

もし興味があれば、React VR×360度画像！Web上でパノラマVR表示を試すを参考に、GearVRで眺めてみましょう。子供の頃叶わなかった、巨大サイズのジオラマを見ることができますよ。

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

React VRで始めるお手軽WebVRプログラミング

原一浩 — Fri, 23 Jun 2017 01:00:54 +0000

連載： React VR (1)

React VRというのは、Facebookが開発し、GitHubにてBSDライセンスで公開しているオープンソースのVRアプリケーションフレームワークです。現在のところは、Webブラウザ向けにWebGLとWebVRを使ったVRアプリケーションを作るための様々な仕組みを提供しています。

VRコンテンツは、実行して動いた時の満足感がかなり高いです

React VRを知らなくても、ReactやReact Nativeなら知っているという人もいるかもしれません。VRコンテンツを作るには新しいフレームワークやライブラリなどを学ぶ必要がありましたが、Reactと同じ考え方を使ってVRコンテンツを作ることができる点が、他のフレームワークと異なる点です。

ネイティブVRが最高の体験をもたらすとは限らない

VRというと何らかのVRヘッドマウントを装着して体験するものというイメージがあります。また、VRヘッドマウントは高額で、VRを体験するハードルが高かったことも事実です。そんな中、ある程度のクオリティを保ちつつも安価なVRヘッドマウントとして登場したのが、GearVRです。

私もGearVRはすぐに購入してゲームや体験系コンテンツをいろいろと試してみました。もちろん、ジュラシックワールドの恐竜にはリアリティを感じましたし、3Dのシューティングゲームでは3D酔いも体験しました。しかし、個人的に一番衝撃を受けたのはVR CRUISEの産経フォトです。

当時の産経フォト

特に、「東日本大震災でのタンカーが乗り上げている風景のパノラマ写真」には一番度肝を抜かれました。作りとしては360度写真であり、すごいポリゴン技術を利用しているわけではないのですが、コンテンツが日常生活と地続きにあるという感覚が、リアリティを感じさせ、恐怖を感じさせたのです。

そこで思ったことは、VRといっても受け手の中にある感性によっては、シンプルなコンテンツでも十分に伝わる体験があるということでした。

React VRのアーキテクチャをざっと知る

React VRの公式サイト

React VRを語る上で欠かせないのが、WebVRという仕様と、Three.jsというライブラリの存在です。WebVRは、VRヘッドマウント事態の情報やリアルタイムな傾きや向きなどをWebブラウザへと伝えるための仕様で、これによりGearVRなどでWebVRを閲覧することが出来ます。 Three.jsは、3Dのライブラリです。本誌でも過去に特集されているので改めての説明は省きます。

React VRは、WebVRとThree.jsをJavaScriptでごりごりと作っていくという世界観にもう2レイヤー加えたようなものと言えます。WebVRとThree.jsは、OVRUIというレイヤーでラッピングされ、そのAPIをReactコンポーネントを通じてユーザーは利用するということになります。

早速作ってみよう

では早速、React VRでまずはプログラムを作ってみましょう。React VRに付属している「Hello World」サンプルで、一通りの最低限な使い方を学んでみることにします。

React VRはReactとついているので、ちょっと怖気づいてしまうかもしれませんが、サンプル自体は非常に簡単です。まず初めに言っておきますと、React VRではターミナル(コマンドプロンプト)を頻繁に使います。なので、MacOSであれば「ターミナル」、Windowsであれば「コマンドプロンプト」を使ってサンプル作成を進めることになります（以降はWindows環境を前提として進めますが、Macでも同様に試して頂けます）。

React VRのコンソールツールをインストール

React VRには、react-vr-cliというコンソールツールが用意されており、インストールするとreact-vrというコマンドが使えるようになります。ということで、なにはともあれこのツールをインストールしましょう。react-vr-cliは、Node.js製のツールなのでまだな方は「Node.js」を導入しておきましょう。

続いてreact-vr-cliを、Node.jsのパッケージマネージャーであるnpmコマンドでインストールしていきます。

$ npm install -g react-vr-cli

... 略 ...

C:\Program Files (x86)\Nodist\bin\react-vr -> C:\Program Files (x86)\Nodist\bin\node_modules\react-vr-cli\index.js
C:\Program Files (x86)\Nodist\bin
`-- react-vr-cli@0.3.2

最後のメッセージから、react-vr-cliのバージョン0.3.2がインストールされたことが確認できます。

まず試しにreact-vrコマンドを実行してみましょう。

$ react-vr

React VR Command Line Interface
Version 0.3.2

Usage:
  react-vr init [project name]  Create a new React VR application with the specified name

コマンドの出力結果から、react-vr コマンドには init というサブコマンドが一つだけ用意されていることがわかります。コマンドにプロジェクト名を渡すと、新規React VRプロジェクトが作成されるようです。今回は「Hello World」を表示させるので、HelloWorldというプロジェクト名にします。

$ react-vr init HelloWorld

Enterキーを押すとなにやらいろいろとプログラムが走り出して、ごにょごにょと長いメッセージが表示されたあと、プロンプトへ戻ります。これで、HelloWorldプロジェクトが作成されました。

続いて、「HelloWorld」ディレクトリに入り、早速何も変更しないまま実行してみましょう。npm startというコマンドを使います。

$ cd HelloWorld
$ npm start

すると、またごちゃっとメッセージがコマンドラインに表示されて、Loading dependency graph, done.というメッセージが最後に表示されます。

$ npm start

> HelloWorld@0.0.1 start C:\****\HelloWorld
> node -e "console.log('open browser at http://localhost:8081/vr/\n\n');" && node node_modules/react-native/local-cli/cli.js start

open browser at http://localhost:8081/vr/

... 略 ...

Loading dependency graph, done.

この表示が出たら、ブラウザでhttp://localhost:8081/vr/を開いてみましょう。

helloと表示された。一安心。

「hello」と表示されているのがわかると思います。マウスで画面をドラッグしてみましょう。

ちゃんとHello World!にする

さて、「hello」と表示されているのは確認できましたので、今度はプログラムを修正して、ちゃんと「Hello World!」と出力されるようにしてみましょう。プロジェクトフォルダ内にある「index.vr.js」を開いてください。

エディタは各自使い慣れたもので構いません。ただしReact VRの新規プロジェクト作成で行った場合、ECMAScript 2015(ES6)形式でコードが生成されます 。また、JSX (React専用の特殊な記法) も使用するので、これらのスタイルに対応しているエディタを使用しましょう。Visual Studio Codeであれば、標準でJSXに対応しているのでおすすめです。

エディタで「index.vr.js」を開くと、こんな箇所があるはずです。ここで、先ほど表示していた3D空間の全要素を定義しています。

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

ここでは通常のReactコンポーネントと同様、React.Componentを継承したクラスを定義し、renderメソッドをオーバーライドしています。React VRは、通常のReactとほぼ同じスタイルでVRコンテンツを表示できるということです。

ポイントは、render()メソッド内で使用しているコンポーネントです。ここで使用されているViewコンポーネントやPanoコンポーネント、Textコンポーネントなどは、React VRの独自コンポーネントなので、使い方を把握する必要があります。

Viewコンポーネントというのは、HTMLでいうところのdivだと思ってください。何かのまとまりとして、様々な3D要素を内包出来ますし、Viewコンポーネント自体にスタイルを適用することもできます。このスタイルは、Reactを使ったことがある方であれば馴染みのある定義方法だということがわかるでしょう。プロパティはCSSと違い、キャメルケースで記述していきます。ほとんどスタイルシートのような感覚で、3Dオブジェクトのスタイルを定義することができる のは感動ものです。

Panoコンポーネントは、パノラマ写真を埋め込んだ空間を簡単に作成できるコンポーネントです。次回の記事では実際にPanoコンポーネントを使ってVRコンテンツを作ります。

「hello」という文字列が表示されるように定義してあるのはTextコンポーネントです。Textコンポーネントは、文字通りテキストを表示するためのコンポーネントで、スタイルの定義と内容が記述されています。スタイルは見たことがないlayoutOriginというプロパティなどはありますが、他はほぼCSSのままであることが確認できると思います。

では、「hello」を「Hello World!」へ書き換えていきましょう。書き換えたTextコンポーネント部分はこんな感じになります。


  Hello World!

さて、ブラウザをリロードしてみましょう。無事「Hello World!」と表示されたことと思います。

Hello World!と表示された

日本語を表示させたら、***になった!

ただ、実はReact VRは現在のバージョンでは、そのままでは日本語の表示ができません。試しに「Hello, World!」の代わりに日本語を入れて試してみると、以下のように文字列が「***」と表示されてしまいます。

日本語を表示しようとしたら***になるの巻

詳しくはReact VRのドキュメント「Fonts and Text」に書かれていますが、大きく分けて2つのステップで日本語表示が実現できます。

1. まずは日本語フォントをダウンロード

React VRのGitHubへ行き、OVRUI/fonts以下にある「japanese.fnt」「japanese.png」をダウンロードします。

react-vr/OVRUI/fonts at master · facebook/react-vr

ダウンロードしたフォント定義ファイルおよびフォントセットテクスチャは、「static_assets/fonts」以下に配置します。「fonts」ディレクトリは自身で作成してください。ちなみに、「japanese.fnt」「japanese.png」は、独自のものを作ることもできますし、React VRに用意されているこちらの「react-vr/tools/fontue at master · facebook/react-vr」ツールを使って作ることも出来ます。オリジナルのフォントセットテクスチャを作成する場合はフォントのライセンスをご確認の上利用しましょう。

2. 日本語フォントを読み込むように「vr/client.js」を修正

日本語フォントを使うようにするには、「vr/client.js」を修正します。8行目以下に下記のような行があることと思います。

function init(bundle, parent, options) {
  const vr = new VRInstance(bundle, 'HelloWorld', parent, {
    // Add custom options here
    ...options,
  });
  vr.render = function() {
    // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

ここを修正していきます。ポイントは下記3点です。

OVRUIライブラリをインポートする
OVRUI.loadFontメソッドで読み込むフォントセットと読み込み後の処理を記述する
React VR Webの新しいインスタンスを作成するときのオプションに読み込んだフォントを指定する

OVRUIというのは、WebVRのためのフレームワークで、Three.jsのシーン(様々な3Dオブジェクトを置く場所)をラップしてVRヘッドマウントを含むデバイスからアクセスできるようにしたり、3Dのビューをテキストつきでレンダリングしたりといった機能を含んでいます。

このうち、テキストのレンダリングについては、Signed-Distance Functionという仕組みを使ってなめらかなフォントレンダリングを行う仕組みが用意されています。この仕組みのおかげで、フォントを導入するのが面倒な感じになっているのですが、フォントのレンダリング面では、3Dに表示するものとしてはゆがみが少なく、読みやすいものになっているのではと思います。

ということでやるべきこととしては、この仕組みに対応したフォント関係のファイルを用意し、VRコンテンツの開始前にフォント定義ファイルおよびフォントセットテクスチャを読み込み、その後コンテンツが始まるように書くことで、日本語に対応した表示を実現することができるのです。

OVRUI.loadFontメソッドの返り値は、Promiseです。なので、thenメソッドを使うことで、読み込み後の処理の中でvrインスタンスを返す処理を書けばいいということになります。Promiseについては、過去の高津戸さんの記事「Promiseで簡単！JavaScript非同期処理入門【前編】」が詳しいです。

また、OVRUI.loadFontメソッドの実行結果は、fontという値で取得するように書いているので、これを初期化オプションにfontというキーに含めて渡してあげます。

以上の処理を書き加えたものが以下となります。

import * as OVRUI from 'ovrui'; // ← 追加

function init(bundle, parent, options) {
  OVRUI.loadFont(
          '/static_assets/fonts/japanese.fnt',
          '/static_assets/fonts/japanese.png'
  ).then((font) => {
    const vr = new VRInstance(bundle, 'HelloWorld', parent, {
      // Pass in the custom font as an initialization property
      font: font, // ← 追加
      ...options,
    });
    vr.render = function() {
      // Any custom behavior you want to perform on each frame goes here
    };
    // Begin the animation loop
    vr.start();
    return vr;
  });
}

意外に大変でしたが、これで日本語の表示ができるようになったはずです。「Hello World!」のところを日本語にし、コンソールで一旦コンソールを再起動したあと、ブラウザをリロードしてみてください。

無事日本語を表示できるようになった

今回は「Hello, World」と日本語コンテンツの表示を行いました。次回はいよいよ、360度画像を用いたパノラマ表示にチャレンジしていきます。