みなさん「WebVR」という技術をご存知でしょうか。
通常VRというとアプリケーションというかたちで体験するのが普通なのですが、Web技術を応用してブラウザでのVRを実現できるのが「WebVR」です。「新しい技術はひとまずキャッチアップしておこう！」というわけで、WebVRの勉強会に潜入してきました！
WebにVRを求めるのは間違っているだろうか？
今回潜入してきた勉強会は、渋谷のイベントスペースdots.で行われた「html5j Webプラットフォーム部勉強会 第13回勉強会～WebにVRを求めるのは間違っているだろうか？～」。
▲受付嬢は、勉強会やハッカソンでよく見るあの人だ…！
WebVRとは何だろう
まずお話してくださったのが、面白法人カヤックの比留間和也さん。「WebVRことはじめ」というテーマで、WebVRの概要をお話してくださいました。
1960年代にデパートのアトラクションとして誕生したVR。
今年は「VR元年」と呼ばれるだけあって、Oculus Rift DK2やHTC Vive、PlayStation VRなどの高性能VRゴーグルや、スマホで体験できるハコスコやGoogle Cardboardなど、たくさんのVRゴーグルや周辺機器が揃ってきており、一大ムーブメントになりつつあります。
▲過去にも何度か「VR元年」と呼ばれた年があったものの、今回はGoogleトレンドを見ても「VR元年」にふさわしいと言えるでしょう。
そしてこのビッグウェーブがWebにも！というのが「WebVR」…なわけではなく、厳密にはWebVRとは、WebVR APIというAPIのこと。APIからPCに接続されたVRゴーグルとセンサーを認識し、ブラウザ上で使えるようにしています。
ブラウザで動くものなので、WebではおなじみのJavaScriptを使って開発することができます。
APIの仕様はこちらにまとまっています。比留間さん曰く、Webでジャイロセンサーを使うときと同じような感覚で使えるのだそう。
もちろん比留間さん自身もVRの制作を行っており、「カヤックVR部」のWebサイトはWebVRを使った制作事例としてとてもわかりやすいので、一見の価値ありです。
>▲カヤックVR部のサイト！ぜひVRゴーグルでごらんください！
WebVRはWeb技術を応用したものなので、特に何もインストールすることなくブラウザ上で体験できたり、Webサイトのように簡単にリンクを貼ることができたりと、そういう点ではとても大きなメリットがあると感じました。
ただ、誕生したてホヤホヤの技術なので、まだ対応ブラウザはとても少ないです。今どのブラウザに対応しているかはこちらのWebサイトから確認することができます。
WebVR API 1.0, A-Frame, etc
続いてお話してくださったのは、Mozilla Japanの清水智公さん。
もともとWebVRはMozilla社内の趣味プロジェクトから誕生したそうです。Mozillaではプロジェクトが趣味で作ったプロトタイプからはじまるケースも多いらしく、WebVRもまたしかり。Mozillaは根っからのハッカーが集まった会社なんですね！
こういったプロジェクトは、ある程度コミュニティグループを形成したり、開発が進んでからW3Cに持ちこんで標準化を目指すことが多いのだそう。いまはコミュニティグループ段階なので、WebVRはまだまだ実験段階のプロジェクトなのだそう。
注意しておきたいのは、基本的にはWebVRがマスターできたからといって、即VRコンテンツがつくれるというわけではありません。WebVRでは、ゴーグル、カメラとブラウザとの連携の部分の面倒をみます。
3Dの描画や音、ゲームパッドでの操作などはまた別の技術を用いて実装する必要があります。
▲WebVRのコンテンツは、WebGLとWeb AudioとWebVRとGamepad APIを組み合わせることでできあがる！
▲WebVRってこうやって動いてるんですね
WebGLは、初心者にはなかなかハードルが高い面もありますが、Three.jsやA-Frame、Vizorを使うともうすこし簡単に3Dの描画を行うことができます。
A-Frameは私も初めて聞いたのですが、Mozillaが開発しているWebVRコンテンツを作成するためのHTMLライクなマークアップ言語で、簡単なタグにより3Dグラフィックを描画することができるそうです。
ビジュアルエディターも開発中だそうで、乞うご期待です！！
清水さんオススメのWebVRコンテンツとして、空爆がやまないシリアの街の様子をゴーグルやブラウザを通して360度見回すことができるWebサイト「Fear of the Sky」を紹介してくださいました。写真にはない臨場感が伝わってきます。
JavaScriptだけでもこういった景色をCanvasに貼りつけたり、簡単な3Dモデルを表示したりするのはできるのですが、やっぱりVRといえばゲームですよね！
ただ、ゲームに必要不可欠な当たり判定の実装などはWeb技術だけで実現させようと思うととても大変です。
そういうとき役立つのが、VRコンテンツ制作でおなじみUnity！
というお話までしたところで、UnityからWebVR用のコンテンツの書き出しをできるプラグインをつくられた田中賢二さんにバトンタッチです。
▲繋ぎがうまい！
Unity(のWebGL出力)をWebVRに対応させてみた
田中さんは、UnityをWebVRに対応させるにはどうすればいいのかを淡々と解説されていました。
UnityのWebGL出力をWebVRに対応するためには、何をしなくてはいけないでしょうか。
ポジショントラッキングやヘットトラッキングなどのカメラコントロール、人は両目で景色を捉えているため、ステレオレンダリングも必要です。
Unity上に右目用・左目用のカメラを設置して、間隔やプロジェクションマトリックス、センサー位置などもそれぞれ調整をする必要があります。
これらをまとめてUnityのプレハブとしてモジュール化していきます。
▲通常カメラは1つだけ置けば良いのですが、人間は両目でものをみているので、右目用・左目用・ノーマル表示時用の３つのカメラを設置する必要があります。
▲「WebVR APIとのやりとりどうするのかな…」と思っていたのですが、SendMessageメソッドを利用して通信しているそう。こうして、瞳孔間距離や視野、ヘッドトラッキングやポジショントラッキングを行います。
以上でプレゼンテーションはおしまい。
この勉強会の当日の様子は動画配信もあり、こちらから確認できるので、興味がある方はぜひご覧ください！
体験会ではWebVRが使われているMozillaの「MozVR」をヘッドマウントディスプレイで体験することができました。
「本当にブラウザ上で動いてるの？」というくらいスムーズに体験できて感動しました！
今はまだ大抵のVRを体験するにはハイエンドPCが必要だったりしますが、スマホ×WebVRは、より多くの人にVRの体験機会を提供するという意味でとても大きな可能性を秘めています！これからにとても期待できる技術だと感じました。
では、現場より池澤でした！！
※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
あなたの新しい可能性が見つかるかも
リクナビNEXTにログインすると、あなたの志向に合った特別な求人一覧を見ることができます。
予想外の求人が、あなたの世界を広げるかもしれません。
