「WebVR」って何？どんなメリットがあるの？どうやって実装するのか？

VRにとって3年目となる2018年、さらにVRが普及していく上でカギとなるのが、「クオリティ」と「手軽さ」だ。

これまでは、「HTC VIVE」や「Oculus Rift」、「プレイステーションVR（PSVR）」といったハイエンドVRが「クオリティ」面をけん引してきた。その一方で、スマホVRゴーグルが、「手軽さ」を担い、両輪のようにVRを普及してきた格好だ。

そして、「クオリティ」と「手軽さ」の内、今後さらに「手軽さ」をアップしていく存在として注目したい存在が「WebVR」。

この記事では、そもそも「WebVR」とは何かという点からメリット/デメリット、から導入の一歩手前まで、「WebVR」についての基本をご紹介したい。

WebサイトでVRを実現！そもそも「WebVR」とは？

出典元：「WebVR Experiments」

「WebVR」はWebサイト用のスクリプト言語「JavaScript」のAPIで、その名の通り、WebサイトでVRを実現するための技術。

Webサイトなのでアプリをインストールする必要はなく、URLを知っていればすぐ体験できる。もちろん、他の人に体験をさせたいという場合でも、URLを伝えるだけでOK。

「Oculus Rift」のようなヘッドマウントディスプレイや、スマホVRゴーグル等を使って体験することもできるが、ヘッドマウントディスプレイを使わずマウスで操作したり、スマートフォンを傾けて操作したりといった形で体験することもできる。

これまでは、各ブラウザが一般向けリリースで「WebVR」を正式にサポートするということがなかったのだが、「Firefox」ブラウザが正式サポートを開始、また、WebVRコンテンツを集めたサイト「WebVR Experiments」をGoogleが公開するなど、徐々に存在感を増している。

【関連サイト】

「WebVR Experiments」

体験も開発も手軽！さらに拡散力も期待できる！「WebVR」のメリット

インストール不要、VRデバイスを問わず体験可能な「WebVR」は、他VRデバイス向けのVRコンテンツと比べて、手軽に体験できる。

手軽なのは、体験だけじゃない。VRコンテンツの開発も手軽だ。「HTC VIVE」、「Oculus Rift」、「PSVR」、スマホVRなどといったVRコンテンツを開発する場合、通常はプラットフォームに応じた開発言語で開発を進めることになる。スマホVRというくくりだけ見ても、「iOS」では「Swift」や「Objective-C」を使って開発、「Android」では「JAVA」を使って開発することになり、別プラットフォームへの移植作業がつきもの。

一方、「WebVR」は「WEBサイト」の延長線上にある技術であるため、作ったVRコンテンツは、基本的にPC、スマホ…といったデバイス、プラットフォームの壁なく楽しむことができる。つまり、マルチデバイス対応のVRコンテンツを手軽に開発することが可能だ。これまでWeb系の技術をメインにしてきた企業・クリエイターであれば、これまでの技術の延長線上ということもあって、開発のハードルは非常に低い。

また、WEBサイト同様、URLによってVRコンテンツを他の人へシェアできるため、拡散力が高い。WEBサイトと同様の手段でSNSのバズを狙ったり、検索結果上位を狙ったりということが可能なので、これまでのプロモーションノウハウを用いることができるという点もメリットといえるだろう

高いクオリティは難しく、マネタイズ手段も自力！「WebVR」のデメリット

一方で、「WebVR」のデメリットとなるのがクオリティ。「HTC VIVE」や「Oculus Rift」といったハイエンドVRデバイス向けの大作タイトルで味わえるような、現実かと錯覚するほどの美麗なグラフィック、圧倒的な没入感を「WebVR」で実現するのは難しい。

また、マネタイズ手段を自力で用意しなければならないという点も、デメリットと言っていいだろう。

「HTC VIVE」や「Oculus Rift」であれば「Steam」、「PSVR」なら「PlayStation Store」、iOSなら「App Store」、Androidなら「Google Play」…と、各VRデバイス向けにVRコンテンツを出す場合、基本的にはVRデバイスのメーカーがプラットフォームとしてマネタイズ手段を用意している。さらにプラットフォームには「VRコンテンツを楽しみたい！」というお客さんが集まってくるため、プラットフォームがある程度集客も担ってくれる。

しかし「WebVR」はWEBサイトの延長線上であるためプラットフォームがない。このため、マネタイズ手段、集客手段とも、自力で用意しなければならない。

「WebVR」を開発するには？「WebVR」開発用フレームワーク

「WebVR」は、先述の通り「JavaScript」のAPIなので、HTMLファイルにJavaScriptで記述すれば、開発可能だ。とはいえ、3Dモデルを表示したり、ライティングしたり、ジャイロセンサーとの連携を計ったり…などなど対応しなければならない点は多く、ゼロからすべて記述するスクラッチビルドでは、開発にかかる労力が高すぎる。

そこで、「WebVR」開発時にオススメなのが、「WebVR」開発用フレームワーク。ここでは、「Three.js」と「A-Frame」という、2つの主要な「WebVR」開発用フレームワークを紹介したい。

商用利用可能なJavaScriptライブラリ「Three.js」

出典元：「Three.js」

「Three.js」とは、3Dコンテンツを手軽に制作するためのJavaScriptライブラリ。ライセンスはMIT Licenseで、商用利用が可能だ。

「Three.js」で3Dコンテンツを作成した上で、「Three.js」に同梱されるファイル「VRControls.js」と「VREffect.js」を使用することで「WebVR」への対応が可能。「VRControls.js」がトラッキング関連の機能を担当し、「VREffect.js」が右目用と左目用の画像を出力するなど、画像出力周りの機能を担当してくれる。

JavaScriptのライブラリなので、通常のJavaScript内に織り交ぜて開発することができる。ただVRコンテンツを見せるだけでなく、HTML5ゲームのようにインタラクティブなVRコンテンツを作りたいという場合に向いたライブラリだ。

【関連サイト】

Three.js

MozillaのVRチームによるフレームワーク「A-Frame」

出典元：「A-Frame」

「A-Frame」は、ブラウザ「FireFox」を開発するMozillaのVRチーム「MozVR」によって設計された「WebVR」用フレームワーク。ライセンスは「Three.js」と同じMIT Licenseだ。

外部JavaScriptとしてHTMLファイルに組み込んで使用するという点も「Three.js」同様だが、HTMLのタグベースでVRコンテンツを作成できるという点が「Three.js」と異なっている。タグベースで作成できるので、JavaScriptについて詳しくないHTMLコーダーだとしても、VRコンテンツを作成することが可能。

とりあえずVRコンテンツを作成してみたい…という場合にもうってつけなフレームワークだ。

【関連サイト】

「A-Frame」

自由なビジネスモデルとブランディングがポイント？「WEB VR」を使ったビジネス

手軽に開発でき、VRの普及にも貢献しそうな「WebVR」。しかし、ビジネスに携わる人間として重要なのは、自社のビジネスにとって、どんな意味があるのか？という点だろう。

筆者としては、自由なビジネスモデルを構築したいと考える、ある程度体力のある企業と、これからVRコンテンツの認知度を高めていきたい新興企業にとって、「Web VR」が大きな意味を持つのではないかと思う。

自由なビジネスモデルを構築したいと考え、それを実現できるだけの企業体力があるのであれば、デメリットで触れた「マネタイズ手段を自力で用意しなければならない」という点は問題にならない。むしろ、プラットフォームを利用することの方がデメリットが大きいだろう。プラットフォームは確かに集客力やマネタイズ手段を提供してくれるものの、プラットフォームによっては実現可能なマネタイズ手段に制限があったり、自由なプロモーションが禁じられていたり…と制約があるからだ。

また、まだ認知度が低い場合、プラットフォームの集客力は心強いものだが、複数のVRコンテンツが並べられ比較されるというプラットフォームの環境は、ブランディングには不向きだ。VRの話題性やプラットフォームの集客力を使って一時的な収益を得たいというならまだしも、ブランドを構築して永続的にビジネスを行いたいというのであれば、自社のコンテンツの世界観だけを体験させることでブランディングに繋げることができる「WebVR」の方が魅力的ではないだろうか。

また、「WebVR」の持つ、URLをシェアできるという特徴は、「Twitter」や「Line」に代わる新たなSNSを生み出す可能性すら秘めているように思う。今後「WebVR」を用いた新たなチャレンジが生まれてくることに期待したい！

Copyright ©2017 VR Inside All Rights Reserved.