Experts.jp日本に、もっとエキスパートを。Rift,VR,WebVR,three.js2016年3月23日0click0132269今年はVR元年と呼ばれています。実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。今年はいよいよそれが本格的になりそうな状況になってきました。そこで今回は、「今からWebVRに備えよう!」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。本格的になりそうなのはなぜか。Rift(詳細は後述)に代表される、いくつかのヘッドマウントディスプレイ(以下、HMD)が比較的安価に家庭で利用できるようになったことです。VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。これらが注目される理由として、現在のPCのハードウェア性能が、HMDの必要としている要件を満たしてきた、という点も大きいでしょう。いう高解像度の画面を90FPS、つまり1秒間に90回もレンダリングをしなければなりません。これは最近のPCであっても、ミドルハイクラス〜ハイエンドクラスのGPUが搭載されているPCが必要であり、安価と言っても「今までに比べて」という側面があることは否めません。いえ、一般ユーザーが手にできるPCでそれを実現できる、というのはやはり大きなポイントでしょう。現在に至るまでVRは、研究所や政府機関、あるいは財力のある企業に限定されていました。Riftの登場により、その敷居が格段に下がったのが今年、というわけです。Riftは、ヘッドマウントディスプレイ、つまり頭にかぶるようにして利用するディスプレイです。今までのHMDとの大きな違いは、その視野の広さとヘッドトラッキング/ポジショントラッキング機能が搭載されたことです。これらがなにをもたらしてくれるか。それは、圧倒的な没入感です。視野の広さにより、目に映るVRの世界はとても広く、「本当にそこにいるように」感じることができます。ヘッドトラッキング/ポジショントラッキングの機能により、右を向いたり、左を向いたり、当然上下も見ることができ、360度の世界を「見渡す」ことが可能となります。これらの機能によって圧倒的な没入感が生まれ、3D空間に入り込んでしまったような感覚を味わうことができるのです。いえ、VRを説明する上で一番むずかしいのは、この没入感はHMDの機能によって「脳に錯覚」させている点です。VRを体験したことがない人に言葉や動画だけではすべてを説明することができません。百聞は一見にしかず、という言葉が本当にぴったりです。逆を返せば、一度でも体験してもらえさえすれば、そのすごさと魅力を伝えることができるはずです。VRをWebに持ち込む意味そんな中、VRの波はWebの世界にもやって来ました。それが「WebVR」という仕様です。Riftに代表されるHMDをWeb上で動かそう、というものです。RiftをJavaScriptで動かすことができるのです。WebVRの仕様や使い方についてはもう少しあとでお話しましょう。VRをWebの世界に持ち込むことの意味を、筆者の考えを元に説明したいと思います。URLだけでコンテンツをシェアすることができるVRに限らず、Webのいいところはアプリなどのインストールなしに、ブラウザでアクセスするだけでコンテンツが体験・利用できるところです。これはVRについても同様のことが言えます。WebVRを利用したサイトとしては、MozVRという、Mozillaの運営するサイトがWebVRを用いて実装されています。Riftをお持ちの方は、アクセスしてみるとすぐにでも見ることができます。このように、URLをシェアするだけで体験してもらえるのも大きなポイントのひとつですね)またWebということはデバイスを限定しない、という側面もあります。実際のところハードウェア性能だったり画面解像度だったり、理想と現実で違う部分もありますが、環境を限定しないようにしていく、という視点は大事なポイントでしょう。Rift向けとスマートフォン向けに提供できる、ということです。Riftが接続されたPCかスマートフォンで閲覧するとVRモードで見れるようになっています。WebGLに対応したものであれば、お手持ちのスマートフォンで見ることができるのでぜひ見てみてください。WebVRをどうコンテンツに活用するかでは実際に、VRをどうWebコンテンツにしていったらいいのでしょうか。正直なところを書いてしまうと、いかようにでもできる、というのが現時点での感想です。VRは3D空間に入り込んだように見せることができるため、本当に様々な分野に活用されています。ゲームはもちろんのこと、介護や医療などにも応用されています。最近では、VR空間上でコミュニケーションできる「BigScreen」というソーシャルVRアプリが発表されました。FacebookもソーシャルとVRについて注目しています。個人的には、Skypeなどで行っている動画チャットによる会議なども、VRにすることでより自然な形で、オンライン上のやりとりができると考えています。VRミーティングみたいなものはWebと相性のいい例です。URLをシェアしてそこにアクセスするだけでミーティングが始められるわけですから。以上のように、VRは様々な活用方法があり、あとはアイデア次第でいかようにもできる、というポテンシャルを秘めていると考えています。スマホVRさて、ではいよいよWebVRの仕様や使い方について解説していきます。実のところ、スマホでのVRはWebVRはまったく関係ありません。いうより、スマホにはVRコンテンツを表示する上で必要な機能がすでに備わっています。スマホには高解像度の画面ジャイロセンサーによる頭の向きのトラッキングVRコンテンツを表示するための高性能なCPU/GPUつまり、制作者側が準備さえすれば、すでにVRを体験する土台は整っている、というわけです。RiftなどのHMDデバイスを持っていないユーザーに対して、それも圧倒的多数のユーザーに対してVRコンテンツを届けられるのは事実です。一点だけ、解決しなければならない問題があります。それは、例えVRコンテンツを表示する準備ができたとしても、それを立体視する道具がなければ意味を成さないことです。GoogleのCardboardやハコスコに代表される、段ボール製のゴーグルも最近では活発に発表されています。「VRゴーグル」などで検索してみると、プラスチック製の比較的しっかりしたゴーグルも様々なものが発売されていることも分かります。どれもが1000〜3000円以内で購入することが可能です。このように、圧倒的に安価にVRを始められるのもスマホVRのメリットです。実際にスマホVRを作ってみよう安価に体験できることは分かりました。読者の方の中には「でも作るのは大変なんでしょ?」と思われている方がいらっしゃるかもしれません。WebVRの波に乗るように、すでにいくつかのフレームワークが登場しています。Boilerplate」です。これを使えば、非常に手軽にWebVR(とスマホVR)の環境を構築することができます。このフレームワークはWebGLのライブラリとして有名なThree.jsをベースに構築されています。Three.jsに触れたことがある読者の方であれば、いくつかのスクリプトを読み込ませ、数行書き出すだけですぐにでもWebVRに対応させることが可能です。今回はこれを使って、ごく簡単なシーンのセットアップコードを見ながら、実際にVRコンテンツが手軽に作れることを実感してもらいたいと思います。(もしすでにThree.jsでコンテンツを作ったことがある方は、ぜひご自分のコンテンツをWebVR化してみてください)シーンの構築まずはThree.jsを使ってシーンを構築していきます。今回は長くなってしまうのでThree.jsの使い方などについての説明は割愛します。簡単なシーンですので使ったことがない方でも、なんとなくどんなことをやっているかは分かるかと思います。ちなみに今回のデモはGithubにソースコードをアップしています。実際に動くものも公開しているので、どんなものかをすぐ見ることができます。スマホで実際に実行した状態は以下のようになります。effect);まずはシーンのベースを構築します。シーンオブジェクト、カメラオブジェクト、あとはそれらをコントロールするコントローラにマネージャ、と名前を見ればなんとなくどんなことをやってくれるかが分かるオブジェクトたちをセットアップしています。Three.jsを触ったことがある人であれば何度も目にしている記述とほぼ同じことが分かると思います。土台を作ったらシーンの登場人物たちを作ります。冒頭で説明した通り、今回は宇宙空間に地球が浮いているようなものを想定しているのでそれらを作っていきます。scene.add(light);これで宇宙(星空)と地球、そして太陽に照らされているような演出ができあがりました。現時点で実行して見ると宇宙空間に地球が浮いている様子が描画されます。さぁ、いよいよ最後の部分です。VRモードで見るにはジャイロで動かして、さらに立体視できるように画面を分割して表示する必要があります。ジャイロで動かしたり、地球を回転させたり、といったことを実現するにはそのためのループ処理(アニメーションループ)を実装します。そのループ処理の中で地球の回転や、ジャイロをカメラに伝える処理を記述します。それを実現するのが以下の記述です。Date.now());アニメーションループ部分です。拍子抜けしましたか?見てみるとアニメーションのループの中で実際になにかしら計算っぽいことをしているのは、地球を回転させる処理だけです。それ以外はすべて、VRコントローラとマネージャが引き受けてくれます。あとはこれを実際に実行してみれば、冒頭で紹介したデモと同じ状態が再現されます。したフレームワークを使うことで、WebVRとスマホVRは驚くべき手軽さで実現することができるのです。Riftを動かそう!前述まででいかに手軽にスマホVRが制作できることが分かっていただけたかと思います。だいーぶ前置きが長くなってしまいましたが、ここから本題です。Riftを動かすところを見てみましょう。実のところ、このAPI自体も自分自身で触ることはほぼないでしょう。BoilerplateにはWebVRをラップしたいくつかの便利ライブラリが含まれています。現時点の最新仕様はWebVR1.0となっており、執筆時点ではまだ正式対応がされていないようですが、WebVR1.0向けのブランチが存在しているので、そちらをダウンロードしてきて利用してもいいでしょう。Boilerplateを使って実装した上記の地球デモはすでにWebVRのAPIに対応した状態になっています。Riftの最新のRuntimeが入った状態だと、masterブランチのものでは動作しません。RiftとスマホVRに両対応できるのはとてもメリットです。WebVRのAPIを説明していきましょう。Riftを持っている方のほうが少ないでしょう。(なんせ製品版は10万円近くもしますからね)なので今回は、WebVRのAPIがどんなものなのか、それをどう使うのか、ということを解説したいと思います。最初に断っておくと、WebVRのAPI自体はとても簡単なものです。事実、APIから取得できる頭の位置、回転の情報を取得してそれをThree.jsのカメラの位置や回転に変換して適用してやるだけです。極論な例を挙げるなら、ジャイロセンサーの値をなにかしらのスマホコンテンツに利用するのとほぼ同じことと言えます。デバイスから値を取り出し、それを使う。本当にただこれだけです。VRを表現する上でスクラッチで書くには大変な部分もあります。下のキャプチャのように、中央から半分に分割されたVRの動画や画像をよく見かけると思います。画面を半分にし、それぞれの視点(左右の目)から見た状況をレンダリングする必要があるのです。APIの使い方のイメージを掴んでいただくために、上記のレンダリングについては触れません。これをスクラッチでやろうとすると、行列の知識や3Dの表現方法についての前提知識が必要となってしまい、説明するにはさらに多くの文章を必要としてしまうため、今回は割愛させていただきます。上でも書いた通り、このあたりの処理を自前で書く、ということはほぼゼロと言っていいでしょう。そのため、内部的にどういう動作をしているか、を理解するにとどめておくだけで十分だと考えています。今回はThree.jsのリポジトリに含まれている、VRControlsの実装を参考に、WebVR1.0に対応させたコードを紹介します。pose.position;camera.position.fromArray(position);}());とてもざっくりですが、WebVRのAPIを使った処理になります。navigator.getVRDisplaysメソッドを利用してVRデバイスオブジェクトを取得します。基本的にこのオブジェクトを介して処理を進めていくことになります。API1.0の仕様であり、それ用にビルドされたChromiumでしか動きません。(執筆時:2016.03.15)FirefoxもWebVRに対応していますが、以前の仕様で実装されており、getVRDevicesメソッドがその役割になります。取得できるデバイスオブジェクト自体が異なるため、今回紹介した方法では動きません。上記で利用しているメソッドは以下です。requestPresentrequestAnimationFramegetPosepose.positionpose.orientationrequestPresentメソッドはその名の通り、VRモードを表示するメソッドです。フルスクリーンになり、上のほうで掲載した歪んだ画面を表示するためのものです。requestAnimationFrameはwindowに生えているものとは別のものになります。いうのも、windowに生えているものは基本的に60Hzで動作するのに対し、VRではさらにその上の、90〜120Hzが要求され、frame数が合わないためです。VRモードではこちらを利用します。注目してもらいたいのがgetPoseで取り出される値です。読んで字のごとく、HMDの姿勢(pose)を取得するものです。ここに、HMDがトラッキングした位置と回転情報が格納されています。これをそのままカメラの制御に利用すれば、HMDの情報がそのままカメラに伝播し、結果としてVR空間を好きなように見渡すことが可能になる、というものです。Three.jsを利用すれば、こうしたカメラなどが抽象化され、3Dに対しての知識があまりなくても実装することが可能です。Oculusを持っている方はぜひ、簡単なサンプルでも構わないので作ってみてみてください。自身が作ったものが目の前で動いているのは、どんなにシンプルなものでも感動するはずです。コードを見てもらうと気づくと思いますが、カメラやエフェクトの部分以外はWebGLでコンテンツを作ることとまったく同じです。あとはこれらを組み合わせてなにを作るか。アイデアさえ出てくれば、きっと様々なVRコンテンツを作ることができることと思います。これを機会にVRコンテンツ制作に手を出してみてください。ちなみに、WebVR1.0の実装についてもっと詳しく知りたい方は、こちらの記事にセットアップから実行までの解説が載っているので参考にしてください。(仕様はこちら)最後にいかがだったでしょうか。VRと言っても、コンテンツの作り方はWebGLとそう大きくは変わりません。コンテンツの良し悪しはWebGLでのコンテンツの良し悪しに直結します。VRならではの問題もあり、例えば目の前を覆ってしまうため、キーボードやマウスなどのデバイスを使っての操作はあまり向かないでしょう。ゲームパッドのようなものはまだ大丈夫かもしれません。そのため、UIに関してはまだまだこれだ、という状況になっておらず、今後も様々な研究結果が出てくるものと思われます。どちらにせよ、UIの作り方自体はWebGL(3D)上での話になるため、制作過程についてはVRのために、というよりもWebGLでどう作るか、を学ぶことで解決できると思います。VRという新しい技術をどう活かすか。それは制作者である読者の方の考え方次第で無限に広がっていくと思っています。この機会にVRコンテンツの制作を開始してみてください。(例えばモデルルームをVRで観ることができる、というものは実際に行っている例があります)筆者はスマホVRが市場を牽引してくれると信じています。言えば、Webで展開されるスマホVRがよりその力が強いでしょう。そのためにはみなさんの力が必要です。いろいろなVRコンテンツを世に広め、VRを体験したことがある人を増やせるようにしていただけると幸いです。