4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WebVR / WebXRAdvent Calendar 2018

Day 2

WebVR とは何か?

Last updated at Posted at 2018-12-02

##WebVRとは

WebVRは、Webブラウザ上で、VRヘッドセットを扱うためのAPIです。

基本的には、使えるVRデバイスの情報を取得するためのもので、実質的にVRの画面を作成するものは含まれていません。画面を構成するのは、今の所WebGL一択なので、WebGLと組み合わせて使うことになります。

WebVRのAPIの機能としては、

  • 利用できるHMDの情報の取得
  • VRモードへの切り替え
  • 描画対象のcanvasの取得
  • ヘッドセットの回転、移動の行列の取得

というようなAPIが用意されています。

WebVRの仕様についてはこの辺りから
https://developers.google.com/web/fundamentals/vr/?hl=ja

##動作環境

Chrome,Firefoxが基本的にデフォルトでWebVRをサポートしますが、PC-VRの場合は、ブラウザと機器の組み合わせで相性があるようです。

スタンドアロンのVR機器では、OculusGoの標準ブラウザであるChromeベースのOculusBrowser,FirefoxベースのFirefoxRealityなどが対応しています。

スタンドアロンVR機器では、通常ブラウザを使っている状態から、機器の用意なくシームレスにVRモードに移行できるので、WebVR環境としてはもっとも手軽です。

##開発環境

WebVR対応コンテンツは、前述のようにWebGLで3Dシーンを作成することになるので、three.jsを始めWebGLのフレームワークで対応している物が多くあります。

WebGLをhtmlのようなタグで記述できるA-Frameは、WebVRページを手軽に作ってみることのできるフレームワークです。

A-Fameベースで、さらにノベルゲーム的なものを作る環境として、ティラノVRが発表されています。こちらは独自のタグスクリプトで記述しますが、javascriptも埋め込む事ができるので応用範囲は広いでしょう。

有名なReactがベースになっているReactVRはサーバサイド含めた本格的な開発が可能です。

##WebVR対応サービス

WebGLを使って3D表示を行なっているサイトで、WebVRにも対応している物が出てきています。3Dウインドウの右下あたりに、VRゴーグルのアイコンが付いていて、そこからVRモードに移行できるようになっていたりします。

3DデータのSNSであるSketchfabでは、アップしたデータをVRモード用に調整して、VRモードでみたときに適切なサイズでになるようにする事ができます。小さなフィギュアを目の前に置いたり、建物の中に入って歩き回ったりということもできます。ただ、投稿者が意識していないので適切に設定されていないデータもまだ多いようです。

##その他リソース

Oculusの開発者サイトにもWebVRについてのドキュメントがあります。簡潔にまとまっていて参考になります。

3年前のアドベントカレンダー

この頃よりは盛り上がると思ったんだけど・・・・・

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?