Experts.jp日本に、もっとエキスパートを。World」の表示、そして日本語の表示までを行いました。THETAなどで撮影した360度画像をVRコンテンツとして表示してみましょう。VRプロジェクトのフォルダ構成についてと、その前にちょっとしたおさらいです。VRプロジェクトがどのような構成になっているのかを確認しておきましょう。yarn.lock「.」で始まる各種ドットファイル達は、ビルド用だったり、flowやwatchmanといったツールのための設定ファイルです。VRコンテンツをマウントするためのファイルとしての「vr/」以下の各種ファイル、そして各種静的リソースのためのアセットディレクトリ「static_assets」が中心となります。ここには、フォントやテクスチャなどを配置します。Nativeの開発をした方は「おっ」と思ったかもしれませんが、「index.android.js」「index.ios.js」などと同じような位置づけで「index.vr.js」という命名規則となっているのです。フレームワークの構成的には「今はWeb出力がメインということでreact-vr-webを使っていまっせ」ということが読み取れます。この構成から見て、将来的にはネイティブデバイス向けのビルドも考えていることが期待できそうです。VRのテストを実行する「tests」というのは、テスト用のファイルを配置するディレクトリです。Facebook製のテストフレームワークjestを実行すると、ここにあるファイルが対象となってテストが実行されます。プロジェクトにはテストの実行が可能になっています。テストの実行にはjestが必要なので、下記のようにインストールしておきましょう。jesttestコマンドで実行ができます。下記のように失敗します。details.実は、GitHubにはもうissueとして反映されているのですが、react-vrライブラリの不具合なようです。解決策も提示されているので、もうしばらくすると正しく動作するようになると思います。facebook/react-vr@f9c2b53VRのテスト周りもプロジェクトにセットアップ済というのは、なかなか嬉しいことですね。パノラマVRはこんなにも簡単!さて、ファイル構成などの意味もわかってきてスッキリしたところで、ちょっと実践的なコンテンツを作成してみましょう。作れてインパクトも強く、応用性が高いVRコンテンツといえば、パノラマVRコンテンツでしょう。World!」は、パノラマ背景に背景色付きテキストが宙に浮かぶというものでした。パノラマVRコンテンツというのは、360度写真さえあれば、すぐに作成することが出来るのです。THETAのユーザでもない限り、360度写真の準備をするのは大変です。そこで僕は友人の寺田さんが撮ってきた360度写真をお借りすることにしました。寺田さんは、株式会社CMSコミュニケーションズという会社の社長であるのですが、かなり古くからのTHETAユーザで、360度写真を撮り続けておられます。JPの座長などを務めたりなど精力的な活動をされています。今回は寺田さんがニューヨークに行った時の写真をお借りしました。(@terapyon)」となりますので、お取り扱いには注意をお願いします。新規プロジェクトを作成し、360度写真を配置それでは、新しくプロジェクトを作成してみましょう。ReacrVrSamplePanoというプロジェクト名にしてみます。ReacrVrSamplePanoプロジェクトディレクトリ内へ移動しておきます。ReacrVrSamplePanoプロジェクトの作成が終わったら、下記リンク先から写真をダウンロードし、プロジェクトの「static_assets」ディレクトリへ配置しましょう。配置が終わったら「index.vr.js」を開いて、ReacrVrSamplePanoクラスを下記のように編集します。World!」プロジェクトよりも短くなってしまいました。これは非常に楽勝ですね!などと調子に乗らないようにしましょう。内部では複雑なことが行われているのです。Panoコンポーネントとは何でしょうか。VRのドキュメントによれば、1000mの球だということです。これはユーザーを中心に絶対配置されており、内側に360度画像が投影されています。Panoコンポーネントは、JSX上では1行ですが、実際は内部で複雑なことをしています。Panoコンポーネントのソースはこちらになります。facebook/react-vrえらく長いソースだなあと思われたかもしれませんが、このコンポーネントは、RCTBaseViewというクラスを継承しているので、実はもっと長いロジックを持っています。ポイントとしては、Panoは、球体なのでTHREE.SphereというThree.jsの球オブジェクトを内部で持っているという点です。ここで言いたいことは、上記のソースをすべて読んで理解しましょうということではありません。大事なことはフレームワークの表面的な使い方だけでなく、いざとなったら元ソースも覗いてやろうという気概なのです。そうそう、コードを変更したところで話が止まっていました。ブラウザで見るためにプロジェクトを実行しましょう。startHelloWorldプロジェクトのときと同じようにブラウザで表示してみましょう。無事ニューヨークの景色がブラウザで表示されていれば完成です。GearVRで見てみるもし、GearVRとGalaxy系のスマートフォンを持っていたら」という前提があるのですが、持っていたら是非ここで紹介するGearVRによるパノラマVRコンテンツを体験してみてください。PCのブラウザやスマートフォンで表示させたものも結構感動しますが、GearVRでこれを表示してみると感動は何倍にもなります。GearVRを使うと、センサーのおかげで顔のトラッキングがスムーズですし、CarmelというVRブラウザを使えばWeb上のVRコンテンツもすぐに体験できます。Carmelは、GearVR内のアプリストアにてダウンロードすることができます。Carmelのサイトキャプチャただし、デベロッパープレビュー中のCarmelでVRコンテンツを見るためには、ちょっとした前準備が必要になります。Contentを見つつ進めていきましょう。vr/以下にovr.htmlというファイル名で下記を作成します。experience</a></body></html>ちなみに、「あなたの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にない強みになるかもしれません。VRにおける3Dプリミティブの利用や、3Dモデルの配置などを見ていきましょう。今回のサンプルプロジェクト2つは、GitHubに置いてあります。利用方法、ライセンスなどをお守りの上、ご利用ください。