Experts.jp日本に、もっとエキスパートを。2016特集」の第三弾。WebGL2、そしてWebVR」。API」を用いてVRコンテンツの実装の仕方を解説します。VRとは?今年、2016年はVR元年と言われ、様々なVRデバイス、VR関連ガジェット、VRコンテンツが世に生み出されています。VR発祥は意外と古く、遡ること1960年代にVRの基礎となる理論、デバイスが発表されています。当時は個人で手が出るものではなく、体験自体はデパートのアトラクションとして登場するなど、体験は限定的でした。時を戻して2016年。2016年6月時点のGoogle検索トレンドでは、検索回数が飛躍的に伸びているのが見てとれます。これを読まれている方も、周りで「VR」というワードを聞くことが増えてきたのではないでしょうか。この波に乗るように、VRについてもWebでの体験を可能にする技術が公開されています。WebVRは体験の話ではないWebでのVR技術、それが「WebVR」です。取りざたされているVRを手軽にWebで体験できるもの。それが「WebVR」。WebVRはイチ仕様に過ぎません。WebVRに対応したからといって、即座にWeb上でVRコンテンツを提供できる、という類のものではないということです。誤解を恐れずに言えば、WebVRはセンサーからの情報を扱うためだけのAPIです。様々な、ハードウェアの情報を取り扱うAPIということです。言ってしまえば、モバイルで利用しているジャイロセンサーとなんら変わることはない、ということです。事実、WebGLの仕様と比べると格段に少ない内容の仕様となっています。(仕様はこちら)VRコンテンツの構築Webで手軽に体験できるVRコンテンツ、と書きましたが提供する側が同じく手軽であるとは限りません。(とはいえ、その他のネイティブなVRコンテンツと比較すると格段に手軽だと思いますが)WebVRはただのAPIだと書きました。VRコンテンツ自体は別のAPI、具体的にはWebGLを利用して3Dコンテンツを制作する必要があります。事実、VRコンテンツの制作について既存の3Dコンテンツの制作と違いはほとんどありません。WebGLコンテンツでは通常、requestAnimationFrameなどを利用して、一定時間置きに画面を更新しアニメーションやインタラクションを実現します。ジャイロセンサーを使ったコンテンツの制作を行ったことがある方であれば、どういったコンテンツが制作できるのかのイメージがわくでしょう。APIに替えて画面を更新してやればいいのです。(当然ではありますが)通常のWebGLコンテンツとWebVRコンテンツでは決定的に違うところがあります。それは「VR体験を作り上げる必要がある」という点です。具体例を上げましょう。今までの3Dコンテンツはカメラの位置は製作者側で制御可能でした。いうことはつまり、都合の悪い、カメラの後ろ側を映さないようにカメラを制御することができた、ということです。VRコンテンツはそのカメラの操作はユーザーの視点という形で使われるため、当然、その後ろ側を見られる可能性があります。(というより、ほとんどの場合、ユーザーはあたりを見渡すでしょう)このように、裏側が見られてしまうということは、悪く言えば手抜き、よく言えば無駄を省いた部分までもしっかりと作り込まないとならないということを意味しています。APIを使ったセットアップのコードを紹介しましょう。本コードはこちらのサイトのサンプルを引用させていただいています。out;}Three.jsを使えばお手軽WebGLといえばThree.js、というくらいデファクトスタンダードなライブラリとなったThree.js。実はThree.jsのリポジトリにはWebVRに対応するためのプラグインがすでに存在しています。これはどちらもThree.jsでVRを実現するのを手助けしてくれるプラグインです。フルスクリーンモードへの移行や、VRモードの表示を手助けしてくれます。基本的に、Three.jsを使った3Dコンテンツ制作の方法はVR化すると言っても大きな違いはありません。その証拠に、VR化するためのコード断片は以下のようにとても短いものとなります。}対応ブラウザ対応ブラウザは、執筆時点(2016/09/28)ではまだ限定的にしか存在していません。安定版で動作するものは今のところないのが現状です。対応状況は以下のサイトから確認することができます。Ready?VR成功の鍵を握るのはWebVR個人的な見解ですが、VR成功の鍵をにぎるのはWebVRにあると思っています。その理由はいくつかあります。Viveなど)に依存しないこと。今までのWebアプリと同様に、モバイル、PCなどのプラットフォームに依存しないコンテンツ展開ができることです。二つ目に、インストールが不要なこと。ネイティブアプリにしてしまうとどうしてもこの「インストール」という手順が必要になってしまいます。WebVRであればWebサイトに訪れたユーザが、VRモードの開始ボタンを押すだけでVR体験をすることが可能になります。最後の三つ目として、「ちょっとだけVR」が使えること。ECサイトの商品をVRで見てみる、例えば不動産サイトの部屋の感じをVRで体験してみる、などなど、VRが活用できればユーザの利便性が上がることはたくさんあります。これらを、アプリをインストールしたのちにしか行えないとしたら大部分の人はそれを倦厭するでしょう。コンテンツ制作側からしても、そんなちょっとしたVRアプリだけをプラットフォームに載せて配信する、というハードルの高さも出てくるでしょう。したように、今までの「Webならではの良さ」がそのままVRにも当てはめることができると考えています。これが結局、VRとユーザの接点となり、より多くの人にVRとはなにか、VRでどんなことができるかを広める機会になると考えています。APIがやってくれるのはセンサーの値を取るなどの最低限の処理のみThree.jsを使えば手軽にVRコンテンツの制作が可能とはいえまだサポートブラウザが(ほぼ)ないしかし、Webでの活用はまだまだ(いい意味で)未知数ということです。詳細についてはカンファレンスで使用したスライドがアップされているので、そちらを参照ください。当日の動画は下記で公開されていますので、こちらも参照してください。