WebVR をはじめてみよう

あけましておめでとうございます。

昨年はアメリカ合衆国大統領選挙やオリンピックがあったりと賑やかな年となりましたね。
IT関連も日々進化しており、そのスピードに追い付くので精一杯な状態です。

VR元年

さて、その中でも個人的に注目しているのが「VR」技術です。
頭部装着型ディスプレイや手袋型のセンサーを身に着ける事で、
あたかもその空間に入り込んだような体験ができるドラえもんの秘密道具のような技術ですが、
主にゲーム業界で注目され、ビジネスやエンタメなど多方面でのVR情報が増加したため、昨年2016年は「VR元年」になったとも言われています。
記憶に新しいのは「PlayStation VR」でしょうか。こちらは人気商品のため現在でも品薄状態のようですね。
純粋なVRではありませんが、私はアプリを通して手軽にVR体験できる「RICOH THETA」を愛用しております。

デモ社内2017 #theta360 – Spherical Image – RICOH THETA

〇RICOH THETAにて撮影：マウスでぐりぐり動かせますよ

Web VR とは？

WebVRとは、ウェブブラウザ上でVR体験を提供する事を指します。
VR技術は医療分野や教育分野などの応用分野もどんどん広がっています。

VRと聞くと専門的な映像製作や3Dに関する専門知識、特殊な制作環境が必要かと思う方も多いと思いますが、
実はVRコンテンツを制作する敷居はその技術の発展と共に下がってきており、
HTMLとJavascriptだけでも作る事ができます。

WebGLを直接利用して3Dを作るためには3Dグラフィックスの技法を勉強する必要がありますが、
AframeやThreeJSなどのJavascriptライブラリの存在が、面倒なWebGLの記述をサポートしてくれているようです。

＜ライブラリ一例＞

●ThreeJS
古くからある3Dグラフィクス描写ライブラリで、WebGLをJavaScriptから操作できます。

●Aframe
Mozillaが発表したWebVRライブラリで、HTMLのタグとしてシーンを記述できるWebVR用のフレームワークとなります。

●VR View
Googleが提供するWebVRライブラリで、360度VR画像や映像をPCやスマートフォンのWebサイトに埋め込む事が可能。

＜開発概要＞

上記で触れたように、WebVR開発といっても、ライブラリを用いれば、
基本的にはウェブサイトを作るやりかたと同じで、HTML, CSS, Javascript を書くだけとなります。
複雑なソースを書く必要もなく、該当のJavascriptやCSSを読み込む事で、手軽に始める事ができるようですね。

WebVRのコンテンツ活用

VRは3D空間に入り込んだような見せ方が実現できるため、様々な分野に活用され始めています。
VR空間上でコミュニケーションがとれるアプリなども登場しているため、オンライン上でのVR会議…なんて事も実現できるかもしれません。

アイデア次第で数年前には想像もしなかった世界を体験できる。
VRにはそういうポテンシャルが秘められているかと思います。

VRが今度どうWebコンテンツに活用されていくいか、2017年も目が離せませんね。

書いた人：春日