今年で3年目となったVRは、2016年のVR元年を皮切りに、ITやWeb、ゲーム業界と、多方面から熱い視線を浴びています。
医療分野、教育分野など応用分野もどんどん広がっていて、その技術は大きな飛躍を遂げています。
さらに、Googleが2017年2月にWebブラウザChromeでWebVRをサポートすると発表し、大きな話題となりました。
今回は、WebVRについて、その魅力や制作方法についてご紹介します。もくじ
◆WebVRの魅力
従来、VR体験をするためには専用のヘッドセットの着用が必要とされていましたが、現在ではWebVRの登場によって、Webブラウザ上で手軽にVR体験ができるようになりました。
WebVRは、JavaScript APIを使用し、PC、スマートフォン、タブレットといったデバイスの壁がなく楽しむことが可能です。
また、WEBサイトの様にURLの記載によってVR体験を他の人と共有する事ができます。
特別なアプリやソフトウェアをインストールする必要がなく、ブラウザさえあれば気軽にVR体験を楽しむことができます。
◆WebVRを開発するには？
WebVRの開発は、HTML, Javascriptを使えばできます。
JavaScriptのAPIなので、HTMLファイルにJavaScriptで記述すれば、開発が可能です。
しかし、3Dグラフィックスを表現したり、ライティング、ジャイロセンサーとの連携を計るなど、対応しなければならない点は多く、開発に多くの時間がかかる事もあります。
そこで開発時に便利な開発用フレームワークが利用されます。
・Three.js
3Dグラフィックスを手軽に表現するためのJavaScriptライブラリで、商用利用が可能。
JavaScriptのライブラリとなっており、通常のJavaScript内に織り交ぜて開発が可能。
HTML5ゲームのようなインタラクティブなVRコンテンツを作りたいという場合に向いています。
・A-Frame
A-Frameは、FireFoxを開発するMozillaのVRチーム「MozVR」によって設計されたWebVR用フレームワークです。
Three.jsと同様に外部JavaScriptとしてHTMLファイルに組み込んで使用します。
ただし、A-Frameの場合にはHTMLのタグベースでVRコンテンツを作成できる事ができます。
この点がThree.jsとの違いといえます。
そのため、JavaScriptにあまり詳しくないHTMLコーダーの方でも、VRコンテンツを作成することができ、初心者の方はA-Frameを利用したほうが良いといえるでしょう。
◆WebVRの実例
「xLab」
世界中のWebサイトを集めその中から優れた作品を決定するコンテストサイト「AWWWARDS」にノミネートされた、インターネット・アカデミーのインド支店が制作したWebサイトです。
トップ画面の右上の「VR」とアイコン（ヘッドセットの形）をクリックすることで、一瞬にしてVRモードに切り替わります。
VRモードになると背景はそのまま宇宙の背景のままで、マウスを動かすことで360度回転し、立体的な画面になります。
クルクルと回転しながら宇宙空間を見渡す事ができ、画面中央の「○」をアイコンに合わせてクリックするとコンテンツが出現する仕組みになっています。
◆まとめ
Web業界以外にも、あらゆる業界で需要が高まってきているWebVR。
さらにWebVRが普及していく上では、「クオリティ」と「手軽さ」が必要とされます。
WebVRは手軽に開発ができ制作技術を身に付ければ、様々な分野の仕事に携われるチャンスがあるかもしれません。
これからWebVRを学び自分の実現したいVRを目指して開発を進めてみてはいかがでしょうか。