フェースブック・技術

Facebookの技術ブログ

React VRを使ってウェブ上でVR開発をしよう

この数年で、VRは次のコンピューティングプラットフォームになるべく大きな進歩を見せています。Oculus Riftの登場によって、コンシューマー向けハードウェアは新たなステージに突入しました。ここでの新しいステージとは、人々が自分の家にいながら仮想世界に没入する体験できるフェーズです。加えて、360度コンテンツの存在が花開きつつあります。360度撮影に対応したコンシューマ向けのカメラの登場とFacebookによる360度写真と映像サポートによるものでしょう。しかしながら、ウェブでの開発に長らく従事してきたディベロッパーにとって、ゲームエンジニアリングと3Dグラフィックスの知識なしで、すぐに360度コンテンツを作り上げるのは不可能です。

また、インタラクティブな360度コンテンツを用いたアプリケーションを作ろうとする人々にとっての別の問題は、そのアプリのユーザーとなるような人たちが現時点で多く存在しないことです。

と言うのは、VRヘッドセットが未だに世に広まっていないからです。そして、私たちはこの状況を変えていきたいのです。

さて本日、私たちは新しいライブラリReact VRをリリースしました。これはディベロッパーがどこにいても魅力的なVRの開発を行えるようにするものです。

ReactやReact Nativeの宣言的プログラミングスタイルを拡張しているReact VRを使うことで、JavaScriptの知識がある人なら誰でもすぐにスタンダードなウェブツールを用いてVRを開発し、デプロイすることができます。

こうして開発されたアプリケーションは、ウェブを通じて配布することができます。React VRは、WebGLやWebVRのようなAPIを利用します。これによりウェブページ内で様々な場面と没入型ヘッドセットを接続することができます。

そして潜在的なユーザーを増やすために、React VR内で構築されたサイトは携帯電話とPCでアクセス可能です。その際には、ナビゲーションのために加速度センサーもしくはカーソルを用います。

React VRを使うと、360度パノラマと2Dのユーザーインターフェース、テキスト、画像、3Dグラフィックなど構成するReactコンポーネントも使用することができます。

つまり、オーディオと動画を使い、3Dモデルの可能性をフルに活用することで、あなたはユーザーを熱中させることができるということです。

もしここであなたがReactを知っているなら、あなたはもう360度VRコンテンツの作り方を知っているはずです!コードベースは全てGithubで利用できます。それでは、ドキュメントを参照して最初のプロジェクトを始めましょう。

一度勉強したら、コードに残そう

私たちがウェブで使えるVRコンテンツフレームワークを作り始めたとき、Reactを使うことは初めてVRコンテンツを開発するディベロッパーにとって素晴らしいスタートになることに気が付きました。

実行時とは違い、要素を抽象的に表現するReactのスタイルは、どんな階層的な構造にとっても理想的です。このことは既にその柔軟性がReact Navigateプラットフォームで証明させている通りです。

加えて、Reactの操作に慣れている方なら誰でも新たな勉強をせずに簡単に始められるのも特徴の1つです。

あなたがReactを使ってアプリケーションを設計し、どうやってReactがデータフローの管理を行うかが理解できたら、もう3D環境での開発に困ることはないはずです。

また、React VRを勉強する際もReactエコシステムの場合と同じ合言葉を使いましょう。
"一度勉強したら、コードに残そう!"

Reactを用いてアプリケーションを構築することは、つまり、あなたが巨大なReactコミュニティが提供するライブラリやツールをReact VRで自由に使用できるということです。

これは、私たちが気に入っているデータ管理システムやルーティング、ナビゲーションライブラリをすぐに使えることを意味します。

また、既存のテストフレームと開発ツールも活用することができます。既存の開発ワークフローを変更する必要もありません。

気をつけなければならないこと

まず、Web上でVRのフレームワークを構築する際には、ヘッドセットを装着しているユーザーが毎秒60フレーム(fps)もしくは毎秒90フレーム(fps)で周囲を見渡せなければならないことに注意してください。

また、JavaScriptのようなシングルスレッド環境において、1フレーム内にReactリコンシリエーションやシーンの更新が確実に行わなければなりません。

もはや周知のことですが、React Nativeは既にアーキテクチャレベルで似たような問題に対処しています。私たちは、Reactの実行とレンダリングを別々のコンテキストで行い、それらの間の通信のための非同期ブリッジを使用して、RNパターンを追跡しました。

また、Webブラウザ上では、Webワーカーこの分離を実行します。つまり、Reactアプリケーション全体がワーカー内で実行され、シーン更新メッセージを実際のピクセルに変換するレンダリングコードがメインウィンドウに表示されます。

これにより、レンダラは、ヘッドセットの向きの更新を受信して​​シーンを再レンダリングする間にタイトなループを作成します。その結果、ユーザーの没入感を高めながら、モーション酔いの可能性を減らすことができます。

実際、React Nativeから概念を借用するだけでなく、React VRは真の意味でのRNプラットフォームとして構築されています。これにより、コードとシステムをいくつかの場所で再利用できるようになり、ブラウザと3D空間の両方で他の領域を拡張することができます。

もしReact Nativeを以前に使ったことがある場合、多くのことが理解できているでしょう。例えば、ViewやTextのコンポーネント、コンパイルされたバンドルを最新の変更で更新し続けるパッケージなどです。

オープンソース

ここまでReactとReact Nativeが実際にどれほどまでオープンソースにより恩恵を受けてきたかを見てきました。

私たちは、コミュニティと協力して開発を進めることで、多くの人々のニーズを発見することができると信じています。

ツールボックスにあるReact VRを使用することで、あなたが魅力的なVRを開発できる2017年になることを願っています。

最初のアプリケーションを構築している最中でも、フレームワークに貢献したいと思っている場合でも、ドキュメントを読みGithubリポジトリを使用して始めることをおすすめします。

それでは、仮想現実の世界であなたをお待ちしています!

原文 : https://code.facebook.com/posts/215238872297197/building-virtual-reality-experiences-on-the-web-with-react-vr/?utm_source=codedot_rss_feed&utm_medium=rss&utm_campaign=RSS+Feed
Heap | Mobile and Web Analytics