CodeIQ MAGAZINECodeIQ MAGAZINE

ブラウザでVR?なにそれおいしいの?池澤あやかがWebVRの勉強会に潜入してみました!

2016.07.21 Category:【連載】池澤あやか☆勉強部 Tag: , , , ,

  • 66
  • このエントリーをはてなブックマークに追加

みなさん「WebVR」という技術をご存知でしょうか。
通常VRというとアプリケーションというかたちで体験するのが普通なのですが、Web技術を応用してブラウザでのVRを実現できるのが「WebVR」です。
「新しい技術はひとまずキャッチアップしておこう!」というわけで、WebVRの勉強会に潜入してきました!
by 池澤あやか

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つだけ置けば良いのですが、人間は両目でものをみているので、右目用・左目用・ノーマル表示時用の3つのカメラを設置する必要があります。

▲「WebVR APIとのやりとりどうするのかな…」と思っていたのですが、SendMessageメソッドを利用して通信しているそう。こうして、瞳孔間距離や視野、ヘッドトラッキングやポジショントラッキングを行います。

以上でプレゼンテーションはおしまい。

この勉強会の当日の様子は動画配信もあり、こちらから確認できるので、興味がある方はぜひご覧ください!

体験会ではWebVRが使われているMozillaの「MozVR」をヘッドマウントディスプレイで体験することができました。

「本当にブラウザ上で動いてるの?」というくらいスムーズに体験できて感動しました!

今はまだ大抵のVRを体験するにはハイエンドPCが必要だったりしますが、スマホ×WebVRは、より多くの人にVRの体験機会を提供するという意味でとても大きな可能性を秘めています!これからにとても期待できる技術だと感じました。

では、現場より池澤でした!!

(撮影:延原優樹・馬場美由紀)

HoloLensセッションもあるよ!Web VRとか文化祭を11/23開催

大盛況に終わった「WebにVRは必要なのか?」。そのスピンアウト企画として、WebVRを支える技術から、最新のMR (Mixed Reality) 技術まで紹介する勉強会「Web VRとか文化祭」が11/23(水) に開催されます。

* 日 時:2016/11/23(水) 13:00 ~ 18:00
* 会 場:イベント&コミュニティスペース dots.
* 住 所:東京都渋谷区宇田川町20-17 NMF渋谷公園通りビル 8F
* 詳細はこちらから

主なセッション

* 「UnityでホログラフィックUnityちゃんを呼び出す方法」(T.M.C.N前本知志氏)
* 「HoloLens 2Dでもここまでできる」(初音玲氏)
* 「WebVR を支える技術(仮)」(Mozilla Japan 清水智公氏)

まだまだ調整中のセッションも!興味のある方はぜひこちらからご参加ください。

  • 66
  • このエントリーをはてなブックマークに追加

■関連記事

脱シンプルBot!Chatbotプログラムを最大限活用するためには?_... ダメBotはどうしたら賢くなれるのか? ※本企画はLINE株式会社の提供でお送りします。 こんにちは、池澤あやかです。 エンジニア界隈では、昨年ごろからChatbotが流行ってますよね。私もこのブームに乗じていくつかBotを作ってみたのですが、我ながら自作したBotには少し使いづらさを感じてい...
Bot開発のエキスパートに聞いた!プログラミング初心者こそChatbotを開発すべき理由とは?_... 2017年、Chatbotイヤー到来! ※本企画はLINE株式会社の提供でお送りします。 こんにちは、池澤あやかです。 テクノロジーの流行りには積極的に乗っていくスタイルを貫いています。 というわけで、今回はChatbot(チャットボット)がテーマです。 2016年から今年にかけて、Face...
池澤あやかとプログラミングで学ぼう!機械学習のための数学講座【行列編】... 機械学習のための数学ゼミ第三回は行列編! 第一回の「確率分布編」、第二回の「ベイズの定理編」に続き、第三回は行列編です。 まずは本連載の登場人物をご紹介します! <登場人物> 池澤あやか タレントときどきエンジニア。数学は苦手だけど、機械学習入門したい。 増井雄一郎 株式会社トレタのえ...
池澤あやかとプログラミングで学ぼう!機械学習のための数学講座【ベイズの定理編】... 機械学習のための数学ゼミ第二回はベイズの定理編! ということで、第一回の確率分布に続き、第二回はベイズの定理を学びます。 まずは今回の登場人物をご紹介します! <登場人物> 池澤あやか タレントときどきエンジニア。数学は苦手だけど、機械学習入門したい。 増井雄一郎 株式会社トレタのえら...
池澤あやかとプログラミングで学ぼう!機械学習のための数学講座【確率分布編】... 機械学習のための数学ゼミ開講! 今なにかと話題の機械学習。これを期に機械学習をはじめてみようかなと思っている方も多いのではないでしょうか。 しかし、実際に機械学習をはじめてみると、数字や数式、グラフのオンパレードに目眩を起こしそうになります。数学が苦手な方にとってはなかなかハードルが高いのが現状...
ドキッ!女性だらけの「第3級アマチュア無線技士試験勉強会」に潜入してみた!... 女性限定!第3級アマチュア無線技士試験勉強会 こんにちは、池澤あやかです。 いろいろな技術系勉強会に潜入している私ですが、今回潜入したのは、エレクトロニクスとアマチュア無線の専門出版社、CQ出版が主催する「女性限定!第3級アマチュア無線技士試験勉強会」です!! アマチュア無線というと、高校...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ