Experts.jp日本に、もっとエキスパートを。VRというのは、Facebookが開発し、GitHubにてBSDライセンスで公開しているオープンソースのVRアプリケーションフレームワークです。現在のところは、Webブラウザ向けにWebGLとWebVRを使ったVRアプリケーションを作るための様々な仕組みを提供しています。Nativeなら知っているという人もいるかもしれません。VRコンテンツを作るには新しいフレームワークやライブラリなどを学ぶ必要がありましたが、Reactと同じ考え方を使ってVRコンテンツを作ることができる点が、他のフレームワークと異なる点です。ネイティブVRが最高の体験をもたらすとは限らないVRというと何らかのVRヘッドマウントを装着して体験するものというイメージがあります。VRヘッドマウントは高額で、VRを体験するハードルが高かったことも事実です。そんな中、ある程度のクオリティを保ちつつも安価なVRヘッドマウントとして登場したのが、GearVRです。私もGearVRはすぐに購入してゲームや体験系コンテンツをいろいろと試してみました。ジュラシックワールドの恐竜にはリアリティを感じましたし、3Dのシューティングゲームでは3D酔いも体験しました。CRUISEの産経フォトです。当時の産経フォト特に、「東日本大震災でのタンカーが乗り上げている風景のパノラマ写真」には一番度肝を抜かれました。作りとしては360度写真であり、すごいポリゴン技術を利用しているわけではないのですが、コンテンツが日常生活と地続きにあるという感覚が、リアリティを感じさせ、恐怖を感じさせたのです。そこで思ったことは、VRといっても受け手の中にある感性によっては、シンプルなコンテンツでも十分に伝わる体験があるということでした。VRを語る上で欠かせないのが、WebVRという仕様と、Three.jsというライブラリの存在です。WebVRは、VRヘッドマウント事態の情報やリアルタイムな傾きや向きなどをWebブラウザへと伝えるための仕様で、これによりGearVRなどでWebVRを閲覧することが出来ます。Three.jsは、3Dのライブラリです。本誌でも過去に特集されているので改めての説明は省きます。VRは、WebVRとThree.jsをJavaScriptでごりごりと作っていくという世界観にもう2レイヤー加えたようなものと言えます。WebVRとThree.jsは、OVRUIというレイヤーでラッピングされ、そのAPIをReactコンポーネントを通じてユーザーは利用するということになります。VRでまずはプログラムを作ってみましょう。World」サンプルで、一通りの最低限な使い方を学んでみることにします。VRはReactとついているので、ちょっと怖気づいてしまうかもしれませんが、サンプル自体は非常に簡単です。VRではターミナル(コマンドプロンプト)を頻繁に使います。プロンプト」を使ってサンプル作成を進めることになります(以降はWindows環境を前提として進めますが、Macでも同様に試して頂けます)。VRには、react-vr-cliというコンソールツールが用意されており、インストールするとreact-vrというコマンドが使えるようになります。いうことで、なにはともあれこのツールをインストールしましょう。react-vr-cliは、Node.js製のツールなのでまだな方は「Node.js」を導入しておきましょう。続いてreact-vr-cliを、Node.jsのパッケージマネージャーであるnpmコマンドでインストールしていきます。react-vr-cli@0.3.2最後のメッセージから、react-vr-cliのバージョン0.3.2がインストールされたことが確認できます。試しにreact-vrコマンドを実行してみましょう。いうサブコマンドが一つだけ用意されていることがわかります。VRプロジェクトが作成されるようです。World」を表示させるので、HelloWorldというプロジェクト名にします。HelloWorldEnterキーを押すとなにやらいろいろとプログラムが走り出して、ごにょごにょと長いメッセージが表示されたあと、プロンプトへ戻ります。これで、HelloWorldプロジェクトが作成されました。続いて、「HelloWorld」ディレクトリに入り、早速何も変更しないまま実行してみましょう。startというコマンドを使います。done.というメッセージが最後に表示されます。done.この表示が出たら、ブラウザでhttp://localhost:8081/vr/を開いてみましょう。helloと表示された。「hello」と表示されているのがわかると思います。マウスで画面をドラッグしてみましょう。World!」と出力されるようにしてみましょう。プロジェクトフォルダ内にある「index.vr.js」を開いてください。エディタは各自使い慣れたもので構いません。2015(ES6)形式でコードが生成されます。使用するので、これらのスタイルに対応しているエディタを使用しましょう。Codeであれば、標準でJSXに対応しているのでおすすめです。エディタで「index.vr.js」を開くと、こんな箇所があるはずです。ここで、先ほど表示していた3D空間の全要素を定義しています。-3]}],}}>hello</Text></View>);}};ここでは通常のReactコンポーネントと同様、React.Componentを継承したクラスを定義し、renderメソッドをオーバーライドしています。VRは、通常のReactとほぼ同じスタイルでVRコンテンツを表示できるということです。ポイントは、render()メソッド内で使用しているコンポーネントです。VRの独自コンポーネントなので、使い方を把握する必要があります。Viewコンポーネントというのは、HTMLでいうところのdivだと思ってください。何かのまとまりとして、様々な3D要素を内包出来ますし、Viewコンポーネント自体にスタイルを適用することもできます。このスタイルは、Reactを使ったことがある方であれば馴染みのある定義方法だということがわかるでしょう。プロパティはCSSと違い、キャメルケースで記述していきます。Panoコンポーネントは、パノラマ写真を埋め込んだ空間を簡単に作成できるコンポーネントです。次回の記事では実際にPanoコンポーネントを使ってVRコンテンツを作ります。「hello」という文字列が表示されるように定義してあるのはTextコンポーネントです。Textコンポーネントは、文字通りテキストを表示するためのコンポーネントで、スタイルの定義と内容が記述されています。スタイルは見たことがないlayoutOriginというプロパティなどはありますが、他はほぼCSSのままであることが確認できると思います。World!」へ書き換えていきましょう。書き換えたTextコンポーネント部分はこんな感じになります。World!</Text>さて、ブラウザをリロードしてみましょう。World!」と表示されたことと思います。VRは現在のバージョンでは、そのままでは日本語の表示ができません。World!」の代わりに日本語を入れて試してみると、以下のように文字列が「***」と表示されてしまいます。Text」に書かれていますが、大きく分けて2つのステップで日本語表示が実現できます。VRのGitHubへ行き、OVRUI/fonts以下にある「japanese.fnt」「japanese.png」をダウンロードします。facebook/react-vrダウンロードしたフォント定義ファイルおよびフォントセットテクスチャは、「static_assets/fonts」以下に配置します。「fonts」ディレクトリは自身で作成してください。facebook/react-vr」ツールを使って作ることも出来ます。オリジナルのフォントセットテクスチャを作成する場合はフォントのライセンスをご確認の上利用しましょう。日本語フォントを使うようにするには、「vr/client.js」を修正します。8行目以下に下記のような行があることと思います。vr;}ここを修正していきます。ポイントは下記3点です。Webの新しいインスタンスを作成するときのオプションに読み込んだフォントを指定するOVRUIというのは、WebVRのためのフレームワークで、Three.jsのシーン(様々な3Dオブジェクトを置く場所)をラップしてVRヘッドマウントを含むデバイスからアクセスできるようにしたり、3Dのビューをテキストつきでレンダリングしたりといった機能を含んでいます。Functionという仕組みを使ってなめらかなフォントレンダリングを行う仕組みが用意されています。この仕組みのおかげで、フォントを導入するのが面倒な感じになっているのですが、フォントのレンダリング面では、3Dに表示するものとしてはゆがみが少なく、読みやすいものになっているのではと思います。いうことでやるべきこととしては、この仕組みに対応したフォント関係のファイルを用意し、VRコンテンツの開始前にフォント定義ファイルおよびフォントセットテクスチャを読み込み、その後コンテンツが始まるように書くことで、日本語に対応した表示を実現することができるのです。OVRUI.loadFontメソッドの返り値は、Promiseです。thenメソッドを使うことで、読み込み後の処理の中でvrインスタンスを返す処理を書けばいいということになります。OVRUI.loadFontメソッドの実行結果は、fontという値で取得するように書いているので、これを初期化オプションにfontというキーに含めて渡してあげます。以上の処理を書き加えたものが以下となります。vr;});}意外に大変でしたが、これで日本語の表示ができるようになったはずです。World!」のところを日本語にし、コンソールで一旦コンソールを再起動したあと、ブラウザをリロードしてみてください。World」と日本語コンテンツの表示を行いました。次回はいよいよ、360度画像を用いたパノラマ表示にチャレンジしていきます。