Web技術(ブラウザ)によるVRの仕組みと現状
こんにちは。F.S. です。
世界的に見るとやや遅れていますが、日本でもVRが盛り上がりを見せ始めています。
今回はWebブラウザで実現するVRの情報をまとめていきます。
VRコンテンツ
まず、VRコンテンツにはどういうのもがあるかを見ていきます。バーチャル空間
3Dで作成された空間をプレイヤーの動き、操作をもとに視界に合わせてリアルタイムでレンダリングし、プレイヤーがその空間内に存在しているような体験を与えるものです。コンテンツはゲームやシミュレーター、空間を他のプレイヤーと共有するメタバースなど、能動的でディープな体験となります。
実写、アニメーション
撮影またはプレレンダリングされた360°静止画、動画を視界に合わせて再生し、その場で見ているような体験を与えるものです。コンテンツはストリートビュー、物件内覧、観光施設、ライブ、スポーツ観戦など、受動的でライトな体験となります。
VRの仕組み
VRの基本的な仕組みは3D CG技術がベースです。まずは、3D CGの領域から見ていきましょう。実写は複数のカメラを組み合わせた360°カメラや全天球カメラ、スマホのパノラマ写真アプリを用いて撮影できます。モノラルが多いと思いますが、中にはステレオで撮影ができるものもあります。iPhone7にはデュアルカメラが搭載されるとの噂ですが、その際はステレオのパノラマ撮影が可能になるのかもしれません。
【補足】
筆者が学生のころにAppleのQuicktime VRというものがありました。原理としては上図の360°静止画と同じですが、従来の四角いディスプレイへの投影で自由度も高くないため、その場にいるような体験を与えるものではありません。したがって、ここではヘッドマウントディスプレイ等を用いてその場にいる体験を与えるための技術をVR技術として記述しています。
次にVRの領域です。
3Dコンテンツをディスプレイのポジション、オリエンテーション(方向)をトラッキングして算出した視界に合致する映像を両眼ディスプレイへ出力し、その映像を物理的なレンズで視野角を拡大して見せることで、臨場感のあるVRビューを実現しています。
理屈は簡単ですが、実現にあたっては様々なアイディア、工夫が施されています。
また、快適なVR体験を与えるには
・高解像度(高視野角)
・低遅延
・安定した高フレームレート(処理落ちしないこと)
が必要です。さらに、両眼ディスプレイそれぞれに別々の映像を出力する必要があるため、リアルタイムレンダリングには相当のマシンパワーが必要になります。
現状、モバイルVRはまだパワー不足であるのと、より一般の人に体験してもらいやすいということで、実写のコンテンツが適していると言われています。とんでもない勢いでバッテリーが減っていきますし。。
続いて、WebによるVRの技術要素を取り上げていきます。
Webの3D CG技術
WebGL
https://www.khronos.org/webgl/3DCGの標準仕様といえばOpenGL(またはDirectX)ですが、WebGLはOpenGL ES(組込み用サブセット)のJavaScriptバインディングによって、HTML5のcanvas要素にJavaScriptで3DCGの描画を可能にする技術です。3Dオブジェクトのテクスチャにはvideoを使用することができるので、360°動画はこの仕組みを利用しています。
バージョン1.0(OpenGL ES 2.0相当)はPC、モバイルともに現在シェアのあるブラウザではほとんど実装されています。
http://caniuse.com/#feat=webgl
3Dライブラリ/フレームワーク
WebGLは、そのままではOpenGLの仕様にひきづられて扱いにくいと評判で、Webにおける3DCGはthree.jsというライブラリを使用するのがデファクトスタンダードになっています。また、PlayCanvasのようなWebGLゲームエンジンを利用したり、Unityで作成したコンテンツをWebGL書き出しするケースもあります。
three.js
http://threejs.org/
PlayCanvas
https://playcanvas.com/
WebのVR技術
スマートデバイスのようにジャイロセンサーをもったデバイスが出始め、HTML5ではすでにデバイスのオリエンテーション(方向)を取得するAPI(DeviceOrientation)を備えていました。これを用いてthree.jsではWebでVRビューを実現するライブラリを提供していました。また、多様化するVRデバイスを統一的に扱える標準仕様を策定する動きが出始め、WebVRが提案されることになりました。
WebVR
https://w3c.github.io/webvr/Mozilla VR teamが開発を進めてきたブラウザ上でVR体験を可能にするAPIで、VRデバイスを統一的に扱えるよう(レスポンシブ)にするものです。
ブラウザの対応状況は、FireFox, Chromeの特別なビルドのみとまだまだ対応状況が乏しいところです。
https://iswebvrready.org/
そこで、現状はWebVRの仕様をGoogleのエンジニアがJavaScriptで実装したPolyfill、及びそれを用いたBoilerplateをベースに開発するのが一般的です。
https://github.com/borismus/webvr-polyfill
https://github.com/borismus/webvr-boilerplate
VRライブラリ/フレームワーク
WebVRをベースにしたライブラリ、フレームワークが出ています。A-Frame
https://aframe.io/
MozillaからA-FrameというHTMLタグで記述可能なVRフレームワークです。
Google VR View
https://developers.google.com/vr/concepts/vrview
360°静止画/動画に特化したものとしては、Google VR Viewがあり、iframeで360°静止画/動画をWebに埋め込むことができます。
前述のPlayCanvasも、WebVRを使ってVRに対応するライブラリを提供しています。
https://github.com/playcanvas/webvr
VRオーサリングツール
ブラウザベースでVRコンテンツの製作、公開ができるツールをいくつか紹介します。Vizor
http://vizor.io/
バーチャル空間、360°コンテンツを作成し、Webで公開することができます。
InstaVR
http://jp.instavr.co/http://jp.instavr.co/
ナビゲーション、インフォメーションをつけた360°コンテンツが簡単に作成できます。
こちらは各種プラットフォーム向けにパッケージを作成できるようですが、Web版の作成はProアカウントにアップグレードする必要があるようです。
まとめ
VRの仕組みとWeb技術の現状を見てきました。WebのVRは、WebGLをベースにWebVR(Plolyfill)によって標準化されつつあるという段階です。
さらなるVR体験にはWeb Audioによる空間音響や入力デバイス、センサーを扱う必要があるので、こちらの状況も引き続き調査していきたいと思います。
それでは、また。
次世代システム研究室では、アプリケーション開発や設計を行うアーキテクトを募集しています。アプリケーション開発者の方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ 募集職種一覧 からご応募をお願いします。